jQuery
概念
- 一个javaScript框架，简化开发
- 本质上就是一些js文件，封装了js的原生代码而已
快速入门
-
步骤：
-
下载JQuery：官网
-
导入js文件
-
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
-
-
使用
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery快速入门</title> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> </head> <body> <div id="div1">div1.....</div> </body> <script> //使用JQuey获取元素对象 var div1 = $("#div1"); alert(div1.html()); </script> </html>
-
-
-
JQuery与JS对象相互转换
JQ --> JS：jq对象[索引] 或者 jq对象.get(索引)JS --> JQ：$(js对象)
-
事件绑定
-
根据id获取值，通过click方法绑定
-
<body> <div id="div1">div1.....</div> <input type="button" value="OK" id="b1"> </body> <script> //事件绑定 $("#b1").click(function (){ alert("你点击我了") }) </script>
-
-
入口函数：dom文档加载完后执行该函数的代码
-
$(function (){ //事件绑定 $("#b1").click(function (){ alert("你点击我了") }) })
-
-
样式控制：CSS
$("id").css("属性","值")$("#div1").css("background-color","red")
选择器
-
基本选择器
-
标签选择器（元素选择器）
-
语法：
$("html标签名")获取所有匹配标签名称的元素 -
$("#b1").click(function (){ $("div").css("","") });
-
-
id选择器
-
语法：
$("#id值")获得与指定id属性值匹配的元素 -
$("#b1").click(function (){ $("#one").css("","") });
-
-
类选择器
-
语法：
$(".class的属性值")获得与指定的class属性值匹配的元素 -
$("#b1").click(function (){ $(".mini").css("","") });
-
-
-
层级选择器
-
后代选择器
-
语法：
$("A B")选择A元素内部所有的B元素$("#b1").click(function (){ $("body div").css("","") });
-
-
子选择器
-
语法：
$("A > B")选择A元素内部所有B子元素 -
$("#b1").click(function (){ $("body > div").css("","") });
-
-
-
属性选择器
-
属性名称选择器
-
语法：
$("A[属性名]")包含指定属性的选择器 -
$("#b1").click(function (){ $("div[test]").css("","") });
-
-
属性选择器
-
语法：
$("A[属性名='值']")包含指定属性等于指定值的选择器 -
$("#b1").click(function (){ $("div[test='one']").css("","") });
-
-
复合属性选择器
-
语法：
$("A[属性名='值'][]...")包含多个属性条件的选择器 -
$("#b1").click(function (){ $("div[test='one'][test='two']").css("","") });
-
-
-
过滤选择器
-
首元素选择器
-
语法：
:first获得选择的元素中的第一个元素 -
$("#b1").click(function (){ $("div:first").css("","") });
-
-
尾元选择器
-
语法：
:last获得选择的元素中的最后一个元素 -
$("#b1").click(function (){ $("div:last").css("","") });
-
-
非元素选择器
-
语法：
:not(selector)不包括指定内容的元素 -
//class不为one $("#b1").click(function (){ $("div:not(.one)").css("","") });
-
-
偶数选择器
-
语法：
:even偶数从0开始计数 -
//索引值为偶数 $("#b1").click(function (){ $("div:even").css("","") });
-
-
奇数选择器
-
语法：
:odd奇数从0开始计数 -
$("#b1").click(function (){ $("div:odd").css("","") });
-
-
等于索引选择器
-
语法：
:eq(index)指定索引元素 -
//索引值为1 $("#b1").click(function (){ $("div:eq(1)").css("","") });
-
-
大于索引选择器
-
语法：
:gt(index)大于指定索引元素 -
//索引值大于1 $("#b1").click(function (){ $("div:gt(1)").css("","") });
-
-
小于索引选择器
-
语法：
:lt(index)小于指定索引元素 -
//索引值小于1 $("#b1").click(function (){ $("div:lt(1)").css("","") });
-
-
标题选择器
-
语法：
:header获得标题h1~h6元素，固定写法 -
//标题 $("#b1").click(function (){ $(":header").css("","") });
-
- 表单过滤选择器
-
可用元素选择器：
-
语法：
:enabled获得可用元素 -
//利用val()方法改变表单内的值 $("#b1").click(function (){ $("input[type='text']:enabled").val("aaa"); });
-
-
不可用元素选择器
-
语法：
:disabled获得不可用选择器 -
//利用val()方法改变表单内的值 $("#b1").click(function (){ $("input[type='text']:disabled").val("aaa"); });
-
-
选中选择器
-
语法：
:checked获得单选/复选框选中的元素 -
//获取选中的个数 $("#b1").click(function (){ $("input[type='checkBox']:checked").length; });
-
-
选中选择器
-
语法：
:selected获得下拉框选中的元素 -
//获取选中的个数 $("#b1").click(function (){ $("#job > optition:selected").length; });
-
-
DOM操作
1. 内容操作
* html()：获取/设置元素标签体内容 `<a><font>内容</font></a> --> <font>内容</font>`
* text()：获取/设置元素标签体纯文本内容 `<a><font>内容</font></a> --> 内容`
* val()：获取/设置元素的value属性值
2. 属性操作
* 通用属性操作
* attr()：获取/设置元素属性
* removeAttr()：删除属性
* prop()：获取/设置元素属性
* removeProp()：删除属性
* attr()/prop()区别：
* 如果操作的元素是固有属性，用prop()
* 如果操作的是自定义属性，用attr()
* 对class属性操作
* addClass()：添加class属性值
* removeClass()：删除class属性值
* toggleClass()：切换class属性值
3. CRUD操作
* append()：父元素将子元素追加到末尾
* `对象1.append(对象2)`：将对象2添加到对象1元素内部，并且在末尾
* prepend()：父元素将子元素追加到开头
* `对象1.prepend(对象2)`：将对象2添加到对象1元素内部，并且在开头
* appendTo()：
* `对象1.appendTo(对象2)`：将对象1添加到对象2内部，并且在末尾
* prependTo()：
* `对象1.prependTo(对象2)`：将对象1添加到对象2内部，并且在开头
* after()：添加元素到元素后面
* `对象1.after(对象2)`：将对象2添加到对象1的后面。对象1和对象2是兄弟关系
* before()：添加到元素前面
* `对象1.before(对象2)`：将对象2添加到对象1的前面。对象1和对象2是兄弟关系
* insertAfter()：
* `对象1.insertAfter(对象2)`：将对象2添加到对象1的后面。对象1和对象2是兄弟关系
* insertBefore()：
* `对象1.insertBefore(对象2)`：将对象2添加到对象1的前面。对象1和对象2是兄弟关系
* remove()：移除元素
* empty()：清空元素的所有后代元素动画
-
三种方式显示和隐藏元素
-
默认显示和隐藏
-
show([speed,[easing],[fn]])- speed：动画的速度，预定义值("slow","normal","fast")或毫秒值(如：1000)
- easing：用来指定切换效果，默认是"swing"(先慢中间快最后慢),可用参数"linear"(匀速)
- fn：在动画完成时执行的函数，每个元素执行一次
-
hide([speed,[easing],[fn]]) -
toggle([speed,[easing],[fn]])<script> function show() { $("#div1").show("slow","swing",function () { alert("显示了.....") }) } function hide() { $("#div1").hide("slow","swing",function () { alert("隐藏了.....") }) } function toggle() { $("#div1").toggle("slow","swing",function () { alert("切换显示了.....") }) } </script> <body> <div id="div1">div1.....</div> <input type="button" value="show" onclick="show()" id="b1"> <input type="button" value="hide" onclick="hide()" id="b2"> <input type="button" value="toggle" onclick="toggle()" id="b3"> </body>
-
-
滑动显示和隐藏
-
slideDown([speed],[easing],[fn]) -
slideUp([speed],[easing],[fn]) -
slideToggle([speed],[easing],[fn])<script> function show() { $("#div1").slideDown("slow","swing",function () { alert("显示了.....") }) } function hide() { $("#div1").slideUp("slow","swing",function () { alert("隐藏了.....") }) } function toggle() { $("#div1").slideToggle("slow","swing",function () { alert("切换显示了.....") }) } </script> <body> <div id="div1">div1.....</div> <input type="button" value="show" onclick="show()" id="b1"> <input type="button" value="hide" onclick="hide()" id="b2"> <input type="button" value="toggle" onclick="toggle()" id="b3"> </body>
-
-
淡入淡出显示和隐藏
-
fadeIn([speed],[easing],[fn]) -
fadeOut([speed],[easing],[fn]) -
fadeToggle([speed],[easing],[fn])<script> function show() { $("#div1").fadeIn("slow","swing",function () { alert("显示了.....") }) } function hide() { $("#div1").fadeOut("slow","swing",function () { alert("隐藏了.....") }) } function toggle() { $("#div1").fadeToggle("slow","swing",function () { alert("切换显示了.....") }) } </script> <body> <div id="div1">div1.....</div> <input type="button" value="show" onclick="show()" id="b1"> <input type="button" value="hide" onclick="hide()" id="b2"> <input type="button" value="toggle" onclick="toggle()" id="b3"> </body>
-
- 遍历
-
js遍历方式
-
for(初始化值；循环结束条件；步长)
-
<script> $(function () { var city = $("#city li"); for (var i = 0; i < city.length; i++) { alert(i+":"+$(city[i]).html()) } }) </script> <body> <ul id="city"> <li>北京</li> <li>上海</li> <li>内蒙古</li> <li>重庆</li> </ul> </body>
-
-
jq的遍历方式
-
jq对象.each（callback）
-
<script> $(function () { var city = $("#city li"); // for (var i = 0; i < city.length; i++) { // alert(i+":"+$(city[i]).html()) // } city.each(function (index,element) { //使用this获取 //alert(this.innerHTML) //在回调函数中定义参数；index(索引) element(元素对象) //alert(index+":"+element.innerHTML) if ("上海" == $(element).html()) { //如果当前方法返回为false则结束循环(break) //如果返回为true，则结束本次循环，继续下次循环(continue) return true; } alert(index+":"+$(element).html()) }) }) </script> -
$.each(object,[callback])
-
$.each(city,function () { alert($(this).html()); }) -
for...of：类似foreach
-
for (li of city) { alert(li.innerHTML) }
-
- 事件绑定
-
标准方式
jq对象.事件方法(回调函数)
-
on绑定事件/off解除绑定
-
jq对象.on("事件名称",回调函数) -
jq对象.off("事件名称")若off方法不传递参数，则将组件上的所有事件全部解除$("#bt1").on("click",function () { alert("点击了") }) $("#bt2").click(function () { $("#bt1").off("click") })
-
-
事件切换：toggle
- jq对象.toggle(fn1,fn2.....)
- 当单击jq对象对应组件后，会执行fn1，第二次点击执行fn2
- 注意：1.9版本
.toggle()方法删除，jQuery Migrate插件可以恢复功能
- jq对象.toggle(fn1,fn2.....)
- 插件：增强JQuery功能
-
实现方式：
-
$.fn.extend(object)：增强通过JQuery获取的对象的功能$("#id")$.fn.extend({ 方法名:function(){} }) $("#id").方法名(); -
$.extend(object)：增强JQuery对象自身的功能$/JQuery$.extend({ 方法名:function(){} }) $.方法名();
-
-
