目录
8.1 普通元素内容html()(相当于原生innerHTML)
8.2 普通元素文本内容text()(相当于原生innerText)
一、jQuery概述
1. JavaScript库
即library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在库中,封装了很多预先定义好的函数在里面,比如animate,hide,show,获取元素等。
常见JavaScript库:jQuery,prototype,YUI,Dojo,Ext JS,移动端zepto
这些库都是对原生JavaScript的封装,内部都是JavaScript实现的,我们主要学习的是jQuery。
2. jQuery概述
jQuery是一个快速,简洁的JavaScript库,其宗旨是“write less,do more”,即提倡写更少的代码,做更多的事情。
j就是JavaScript,query是查询。就是把JS中DOM操作做了封装,我们可以快速查询使用里面的功能。
jQuery封装了JavaScript常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery的本质:就是学习调用这些函数。
3. jQuery优点
- 轻量级。核心文件才即几十kb
- 跨浏览器兼容。基本兼容主流浏览器
- 链式编程、隐式迭代
- 对事件、样式、动画支持,大大简化了DOM操作
- 支持插件扩展开发。有着丰富的第三方插件,例如:树形菜单、日期控件、轮播图等
- 免费、开源
4. jQuery的入口函数
//(方法1)等dom加载完再去执行js
$(document).ready(function(){
……
})
// (方法2)等dom加载完再去执行js
$(function(){
……
})
- 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完毕,jQuery帮我们实行 了封装
- 相当于原生js中的DOMContentLoad
- 不同于原生load事件,load事件是等页面文档、外部js文件、css文件、图片加载完毕才执行内部代码
- 更推荐第二种方式
5. jQuery的顶级对象 $
- $是jQuery的别称,在代码中jQuery可以代替$,为了方便通常使用$
- $是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用$包装成jQuery对象,就是可调用jQuery方法了。
6. jQuery对象和DOM对象
- 用原生JS获取来的对象就是DOM对象
- jquery方法获取的元素就是jquery对象
- jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)
//1.DOM对象:用原生js获取过来的对象就是DOM对象
var myDiv=document.querySelector('div'); //myDiv 是 DOM 对象
//2.jquery对象:用jquery方式获取的对象就是jquery对象。
$('div'); //$('div')是一个jquery对象
//3.jquery对象只能使用jQuery方法,DOM对象只能使用JavaScript属性和方法
myDiv.style.display="none";
//$('div').style.display="none"; $('div')是jQuery对象不能使用元素js方法
DOM对象和jQuery对象之间是可以相互转换的。
因为原生js比jquery更大,原生的一些属性和方法jQuery没有给我们封装,要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
- DOM对象转换为jQuery对象:$(DOM对象)不加引号
$('div')
- jQuery转换为DOM对象:
$('div')[index] //index是索引号 $('div').get(index) //index是索引号
<body> <video src="video/onetap.mp4" muted></video> <script type="text/javascript"> //jQuery对象 $('video'); //dom对象 var myVideo=document.querySelector('video'); // myVideo.play(); //jQuery无法使用play方法 // $('video').play(); //用法错误 //要将jQuery对象转换为DOM对象,再使用play方法 $('video')[0].play(); $('video').get(0).play(); </script> </body>
二、jQuery常用API
1. jQuery选择器
原生js有很多方式,兼容性不同,因此jQuery给我们做了封装,使用获取元素统一标准
$("选择器") //里面选择器直接写css选择器即可,但是要加引导
1.1 隐式迭代
遍历内部DOM元素(伪数组幸形式存储)的过程就叫做隐式迭代
简单理解:给匹配道德所有元素进行循环遍历,执行相应的方法,而不用我们在进行循环,简化我们的操作方便我们调用。
<body>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<ul>
<li>2222</li>
<li>2222</li>
<li>2222</li>
<li>2222</li>
</ul>
</body>
<script type="text/javascript">
console.log($("div"));
//给四个div设置背景颜色,jquery对象不能使用style
$("div").css("background", "pink");
//隐式迭代把所有元素进行内部循环,
$("li").css("color", "red");
</script>
1.2 jQuery筛选选择器
<body>
<ul>
<li>筛选li</li>
<li>筛选li</li>
<li>筛选li</li>
<li>筛选li</li>
<li>筛选li</li>
</ul>
<ol>
<li>筛选li</li>
<li>筛选li</li>
<li>筛选li</li>
<li>筛选li</li>
<li>筛选li</li>
</ol>
</body>
<script type="text/javascript">
$(function() {
$("ul li:first").css("color", "red");
$("ul li:eq(2)").css("color", "blue");
$("ol li:odd").css("color", "yellow");
})
</script>
1.3 jQuery筛选方法(重点)
<body>
<div class="grandfather">
<div class="father">
<div class="son"> 儿子</div>
</div>
</div>
<div class="nav">
<p>我是P</p>
<div>
<p>ppp</p>
</div>
</div>
<ol>
<li>我是ol的li</li>
<li>我是ol的li</li>
<li class="item">我是ol的li</li>
<li>我是ol的li</li>
</ol>
</body>
<script type="text/javascript">
$(function() {
//1.父
console.log($(".son").parent());
//2.子
// (1)亲儿子
console.log($(".nav").children("p").css("color","red"));
//(2)所有后代
console.log($(".nav").find("p").css("color","red"));
//3.兄
$("ol .item").siblings("li").css("color","red");
//4.第n个元素
// (1)选择器方法
var index=2;
$("ol li:eq(2)").css("color","blue");
$("ol li:eq("+index