一、jQuery介绍
1.什么是jQuery？
jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScirpt开发的js类库
2.jQuery的核心思想
它的核心思想就是write less, do more（写得更少，做得更多），所以它实现了很多浏览器的兼容问题。
3.jQuery的好处
jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。
4.jQuery使用示例
<!--引入jQuery库-->
<script src="../jQuery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { //表示页面加载完成之后，相当于window.onload=function(){}
var $btn = $("#btnid"); //按id查询标签对象
$btn.click(function() { //绑定单击事件
alert("jQuery单击事件");
});
});
</script>
<button id="btnid">say hello</button>
使用说明：
- 一定要先引入jQuery库
- $是一个函数
- 绑定事件（例如给按钮添加点击响应）
- 使用jQuery查询到标签对象
- 使用标签对象.click(function(){})
二、jQuery核心函数
$是jQuery的核心函数，能完成jQuery的很多功能。$()就是调用这个函数
1、当传入参数为[函数]时
表示页面加载完成之后。相当于window.onload=function(){}
<script type="text/javascript">
//表示页面加载完成之后，相当于window.onload=function(){}
$(function() {});
</script>
2、当传入参数为[HTML字符串]时
根据这个字符串创建元素节点对象
<script type="text/javascript">
$(function() {
$("<div>" +
"<span>div-span1</span>" +
"<span>div-span2</span>" +
"</div>").appendTo("body");
//在body标签内添加字符串的内容
});
</script>
3、当传入参数为[选择器字符串]时
根据这个字符串查找元素节点对象
$("#id属性值"); //根据id值查询
$("标签名"); //根据标签名查询
$(".class属性值"); //根据类属性值查询
4、当传入参数为[DOM对象]时
将DOM对象包装为jQuery对象返回
var btnObj = document.getElementById("btn");
alert(btnObj);//[object HTMLButtonElement]
alert($(btnObj));//[object Object]
三、jQuery对象和dom对象区分
1、哪些是jQuery对象，哪些是dom对象
Dom对象
- 通过document查询出来的对象是Dom对象
- 通过document创建出来的对象是Dom对象
JQuery对象
- 通过jQuery提供的API创建的对象是jQuery对象
- 通过jQuery包装的Dom对象，是jQuery对象
- 通过jQuery提供的API查询到的对象，是jQuery对象
2、jQuery对象的本质
jQuery对象是dom对象的数组+jQuery提供的一系列功能函数。
3、jQuery对象和Dom对象使用区别
-
jQuery对象不能使用DOM对象的属性和方法
-
DOM对象也不能使用jQuery对象的属性和方法
4、Dom对象和jQuery对象互转
1）、Dom对象转为jQuery对象
- 先有dom对象
- $(Dom对象)就可以转为jQuery对象
2）、jQuery对象转为dom对象
- 先有jQuery对象
- 我们知道jQuery对象是dom对象的数组，故使用jQuery对象[下标]就能取出相应的dom对象
四、jQuery选择器
1、基本选择器
$("选择器");
- #id：根据id查找标签对象
- .class：根据class查找标签对象
- element：根据标签名查找标签对象
- *:表示任意的元素
- select1, select2 ：合并选择器1，选择器2的结果并返回
- p.className:取p和.className结果的交集并返回
查询结果的顺序是与页面中的标签的先后顺序一致的，不是与选择器的先后顺序一致的
2、层级选择器
1）、ancestor descendant
在给定的组员元素下匹配所有的后代元素
HTML代码
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery代码
$("form input")
结果
[ <input name="name" />, <input name="newsletter" /> ]
2）、parent > child
在给定的父元素下匹配所有的子元素
HTML代码
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery代码
$("form > input")
结果
[ <input name="name" /> ]
3）、prev + next
匹配所有紧接在 prev 元素后的 next 元素
HTML代码
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery代码
$("label + input")
结果
[ <input name="name" />, <input name="newsletter" /> ]
4）、prev ~ siblings
匹配 prev 元素之后的所有 siblings 元素
HTML代码
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery代码
$("form ~ input")
结果
[ <input name="none" /> ]
3、其他选择器
jQuery的过滤器与css基本上一致的，只是jQuery有jQuery的写法，这里就不加赘述了。
五、jQuery的文档操作
1、属性操作
- html() :可以设置和获取起始标签和结束标签中的内容。跟dom属性innerHTML一样。
//返回p元素的内容。
$('p').html();
//设置所有 p 元素的内容
$("p").html("Hello <b>world</b>!");
- text():可以设置和获取起始标签和结束标签中的文本。跟dom属性的innerText一样
//返回p元素的文本内容。
$('p').text();
//设置所有 p 元素的文本内容
$("p").text("Hello world!");
- val()：可以设置和获取表单项的value属性值。跟dom的value一样
//获取文本框中的值
$("input").val();
//设定文本框的值
$("input").val("hello world!");
- attr():设置或返回被选元素的属性值。
不推荐操作checked、readOnly、selected、disabled等
attr还可以设置自定义属性
//返回文档中所有图像的src属性值。
$("img").attr("src");
//为所有图像设置src和alt属性
$("img").attr({ src: "test.jpg", alt: "Test Image" });
//为所有图像设置src属性。
$("img").attr("src","test.jpg");
- prop():设置或返回被选元素的属性值。
prop和attr的作用相同，不同的是prop有返回值，attr没有返回值。
只推荐操作checked、readOnly、selected、disabled等。
//选中复选框为true，没选中为false
$("input[type='checkbox']").prop("checked");
//禁用页面上的所有复选框。
$("input[type='checkbox']").prop({
disabled: true
});
//禁用和选中所有页面上的复选框。
$("input[type='checkbox']").prop("disabled", true);
$("input[type='checkbox']").prop("checked", true);
- offset()：返回或设置第一个匹配元素相对于文档的位置
返回标签前距离左上角的距离
2、dom的增删改操作
1）、内部插入
- appendTo()
a.appendTo(b) :把a插入到b子元素的末尾，成为b的最后一个子元素
HTML代码
<p>I would like to say: </p>
jQuery代码
$("p").append("<b>Hello</b>");
结果
[ <p>I would like to say: <b>Hello</b></p> ]
- prependTo()
a.prependTo(b):把a插入到b子元素的前面，成为b的第一个子元素
HTML代码
<p>I would like to say: </p>
<div id="foo"></div>
jQuery代码
$("p").prependTo("#foo");
结果
<div id="foo">
<p>I would like to say: </p>
</div>
2）、外部插入
- insertAfter()
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。兄弟标签
HTML代码
<p>I would like to say: </p>
<div id="foo">Hello</div>
jQuery代码
$("p").insertAfter("#foo");
结果
<div id="foo">Hello</div>
<p>I would like to say: </p>
- insertBefore()
把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
HTML代码
<div id="foo">Hello</div>
<p>I would like to say: </p>
jQuery代码
$("p").insertBefore("#foo");
结果
<p>I would like to say: </p>
<div id="foo">Hello</div>
3）、替换
- replaceWith()
将所有匹配的元素替换成指定的HTML或DOM元素。
a.replaceWith(b):用b替换a
HTML代码
<p>Hello</p>
<p>cruel</p>
<p>World</p>
jQuery代码
$("p").replaceWith("<b>Paragraph. </b>");
结果
<b>Paragraph. </b>
<b>Paragraph. </b>
<b>Paragraph. </b>
- replaceAll()
a.replaceAll(b):用a替换掉所有的b
HTML代码
<p>Hello</p>
<p>cruel</p>
<p>World</p>
jQuery代码
$("<b>Paragraph. </b>").replaceAll("p");
结果
<b>Paragraph. </b>
<b>Paragraph. </b>
<b>Paragraph. </b>
4）、删除
- remove()
删除标签
HTML代码
<p>Hello</p>
how are
<p>you?</p>
jQuery代码
$("p").remove();
结果
how are
- empty()
清空标签里的内容
HTML代码
<p>
Hello,
<span>Person</span>
<a href="#">and person</a>
</p>
jQuery代码
$("p").empty();
结果
<p></p>
3、css样式操作
- addClass() ：添加样式
HTML代码
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
jQuery代码
$('ul li').addClass(function() {
return 'item-' + $(this).index();
});
结果
<ul>
<li class="item-0">Hello</li>
<li class="item-1">Hello</li>
<li class="item-2">Hello</li>
</ul>
- removeClass() ：删除样式
HTML代码
<ul>
<li class="item-0">Hello</li>
<li class="item-1">Hello</li>
<li class="item-2">Hello</li>
</ul>
jQuery代码
$('ul li').removeClass("item-0");
结果
<ul>
<li class="">Hello</li>
<li class="item-1">Hello</li>
<li class="item-2">Hello</li>
</ul>
- toggleClass()： 有就删除，没有就添加样式
HTML代码
<ul>
<li class="">Hello</li>
<li class="item-1">Hello</li>
<li class="item-2">Hello</li>
</ul>
jQuery代码
$('ul li').toggleClass("item-1");
结果
<ul>
<li class="item-1">Hello</li>
<li class="">Hello</li>
<li class="item-2 item-1">Hello</li>
</ul>
4、动画操作
1）、基本动画
- show() ：将隐藏的元素显示
HTML代码：
<p style="display: none">Hello</p>
jQuery代码：
$("p").show()
结果：
<p style="">Hello</p>
- hide()：将可见的元素隐藏
HTML代码：
<p >Hello</p>
jQuery代码：
$("p").hide();
结果：
<p style="display: none;">Hello</p>
- toggle()：可见就隐藏，不可见就显示
动画都可以添加参数：
- 第一个参数是动画的时长，以毫秒为单位
- 第二个参数是动画的回调函数（动画完成后自动调用的函数）
2）、淡入淡出动画
- fadeIn()：淡入（慢慢可见）
- fadeOut()：淡出（慢慢消失）
- fadeTo()：在指定时长内慢慢将透明度修改到指定的值。0透明，1完全可见
- fadeToggle()：淡入淡出切换
5、事件操作
1）、原生js页面和jQuery页面加载完成之后的区别
即$(function(){})和window.onload=function(){}的区别
触发的顺序
- jQuery页面加载完成之后先执行
- 原生js页面加载完成之后后执行
触发的时间
- jQuery的页面加载完成是在浏览器的内核解析完页面的标签，创建好Dom之后就会马上执行。
- 原生js的页面加载完成，除了要等浏览器内核解析完标签，创建好Dom，还要的等标签显示时需要的内容加载完成
执行的次数
- 原生js页面加载完成之后，只会执行一次window.onload=function(){}操作，就算有多个操作，前面的函数也会被后面的覆盖
- jQuery的页面加载完成之后，会顺序执行全部的$(function(){})，
2）、常用事件处理方法
- click()：绑定及触发单击事件
- mouseover()：鼠标移入事件
- mouseout()：鼠标移出事件
- on()：可以给元素一次性绑定一个或多个事件
- one():也是绑定事件。绑定的事件只能响应一次
- off()：解除事件的绑定
3）、事件的冒泡
什么是事件冒泡？
事件的冒泡指的是，父子元素同时绑定同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。
比如：父子元素都绑定了点击事件，我们点击触发子元素的事件，子元素事件触发完成后，父元素的点击事件也会触发。
如何阻止事件冒泡？
在子元素的函数体内，return false就可以阻止事件的冒泡传递。
4）、事件对象
什么是事件对象？
是封装有触发的事件信息的一个javascript对象。
如何获取事件对象？
在给元素绑定事件的时候，在事件的function(event)参数列表中添加一个参数，我们习惯命名为event，这个event就是javascript事件对象。
我们可以从事件对象从获取到触发事件的详细信息