<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.jQuery的下载与引入</title>
</head>
<body>
<!-- 任务:点击文本,弹出它对应的域名 -->
<h2>php中文网</h2>
<!-- 在使用jquery之前,一定要将js库先引入 -->
<!-- <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 现在就可以直接痛快的写js代码啦 -->
<script type="text/javascript">
$('h2').click(function(){
alert('www.php.cn')
})
</script>
</body>
</html>实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.jQuery的工厂函数$()的妙用</title>
</head>
<body>
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
<li>我是列表项3</li>
<li>我是列表项4</li>
<li>我是列表项5</li>
</ul>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//任务:将第一个列表项背景换成天蓝色
//1.先用原生的js来实现:getElementsByTagName()是原生DOM对象上的方法
// document.getElementsByTagName('li')[0].style.backgroundColor = 'skyblue'
//2.用jqery来实现 :css()是定义在jquery对象上的方法
// $('li:first-child').css('backgroundColor','skyblue')
//思考?能不能直接在jQuery对象上调用原生DOM对象的方法呢?答案是否定的
// $('li:first-child').style.backgroundColor = 'skyblue'
//思考?能不能在原生DOM对象上面调用jquery中的方法呢?答案是否定的
// document.getElementsByTagName('li')[0].css('backgroundColor','skyblue')
//这是为什么呢?,因为这是二个不同的对象,下面我们进行测试
// document.write((document.getElementsByTagName('li')[0] === $('li:first-child')) ? '我们完全一样' : '我们不一样')
//将jquery对象转为DOM对象,再调用原生对象方法
$('li')[0].style.backgroundColor = 'coral'
$('li').get(2).style.backgroundColor = 'cyan'
//将DOM对象转为jquery对象,就是使用工厂函数 $(),前面已说过,不更多言
</script>
</body>
</html>
<pre>
1.理解DOM结构:祖先元素,父元素,子元素,兄弟元素,每一个元素都是一个DOM对象
2.必须先用工厂函数$()将DOM对象转为jQuery对象,才可以使用jQuery中的方法
3.$(选择器): 将选择获取到的DOM对象包装/转化为jquery对象
4.jQuery对象与DOM对象的区别:
4-1:jquery对象是将一个或组一组DOM对象进行打包,统一进行处理,默认自带循环迭代
4-2:DOM对象对应着页面中一个或多个可视元素,它给jquery对象提供原材料
5.DOM对象与jquery对象之间的转换:
5-1:DOM对象转jquery对象: $()
5-2:jquery对象转DOM对象: get(index)或[index]
注: $()就是一个DOM对象打包器,只要逐个取出来就是DOM对象
6.$()总结: 将DOM对象转为jQuery对象,以便使用jQuery方法对页面元素进行统一快速的处理
</pre>运行实例 »
点击 "运行实例" 按钮查看在线实例
