1 jQuery概述
1.1 jQuery简介
jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript操作方式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
1.2 jQuery作用
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities 函数库
2 jQuery的安装【重要】
2.1 引用jQuery库
- 官网下载jQuery库 https://jquery.com/
- 有两个版本的 jQuery 可供下载：
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，便于可读）。
jQuery 库是一个 JavaScript 文件，使用 HTML 的 < script src=“”>< /script> 标签引用
<!--引入jQuery库--> <script src="js/jquery-3.4.1.min.js"></script>
2.2 CDN引用
CDN的全称是Content Delivery Network，即内容分发网络 , 使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
常见的CDN
- 百度 CDN
https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js - 新浪 CDN
https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js - 又拍云 CDN
https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js - 七牛
http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js - 360
http://libs.useso.com/js/jquery/2.0.0/jquery.min.js - 谷歌
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
3 jQuery使用
3.1 文档就绪函数
- 好处：确保页面的上元素都加载了之后再执行js代码
- 原生的js：window.onload = function(){…}
- jQuery:jQuery(document).ready(function(){…} 简写为：$(function(){})
- 区别：
- window.onload要等到页面完全加载完成之后在才会执行，而$(function(){}只需要页面结构加载出来就执行。
- window.onload只能执行一次，而$(function(){}可以执行多次。
<script> //使用js方式获取输入框中的内容 //console.log(document.getElementById("username").value); // 错误，因为前端代码加载顺序从上到下 //解决：当页面加载完成之后再获取 // window.onload = function(){ // console.log(document.getElementById("username").value); // } //使用jQuery的方式获取输入框中的内容 // jQuery(document).ready(function(){ // console.log(document.getElementById("username").value); // }) //简写： // $(function(){ // console.log(document.getElementById("username").value); // }) // window.onload = function(){ // console.log("js文档就绪函数1") // } // window.onload = function(){ // console.log("js文档就绪函数2") // } // $(function(){ // console.log("jQuery文档就绪函数1") // }) // $(function(){ // console.log("jQuery文档就绪函数2") // }) </script> <input type="text" name="username" id="username" value="hello,jQuery"/>
3.2 js对象和jQuery对象【重要】
js对象
var p = document.getElementById(“p1”); //[object HTMLParagraphElement]
jQuery对象
var $p = $(“#p1”); // [object Object]
- js对象和jQuery对象的互转
- 将js对象转换成jQuery对象
- var $p = $(js对象);
- 将jQuery对象转换成js(jQuery默认就是数组)
- var p = jQuery对象[下标];
/** * js对象和jQuery对象的区别【重要】 * jQuery对象永远都是一个js对象数组。 * * js对象与jQuery对象的互相转换 * jQuery对象转换成js对象 jQuery对象[下标] * js对象转换成jQuery对象 $(js对象) * */ $(function(){ //使用js方式获取p标签 var p = document.getElementById("p1"); //alert(p); //[object HTMLParagraphElement] js对象 //alert(p.innerHTML); //alert(p.html()); //错误 //alert($(p).html()); 正确的 //使用jQuery方式获取p标签 var $p = $("#p1"); // alert($p); //[object Object] jQuery对象 //alert($p.html()) //alert($p.innerHTML);//错误 alert($p[0].innerHTML); })
4 jQuery选择器【重要】
4.1 基本选择器
- 标签选择器
- class选择器
- id选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入jQuery --> <script src="js/jquery-3.4.1.min.js"></script> </head> <body> <p>这是一个p标签</p> <span id="s">这是一个span标签</span> <div class="a">这是一个div标签</div> <script> $(function(){ //标签选择器 //alert($("p").length); //id选择器 //alert($("#s").length); //class选择器 //alert($(".a").length); }) </script> </body> </html>
4.2 层次选择器
- 后代选择器
- parent child
- 子代选择器
- parent>child
- 相邻选择器
- prev + next
- 兄弟选择器
- prev ~ siblings
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入jQuery --> <script src="js/jquery-3.4.1.min.js"></script> </head> <body> <span>这是div后面的span3</span> <span>这是div后面的span4</span> <div id="d1"> <p>这是子代p标签</p> <div> <p>这是后代p标签</p> </div> </div> <span>这是div后面的span1</span> <span>这是div后面的span2</span> <div> <span>这是div后面的span3</span> </div> <script> //后代选择器 //alert($("#d1 p").length); //子代选择器 //alert($("#d1>p").length); //相邻元素选择器 //alert($("#d1+span").html()); //兄弟元素选择器 //alert($("#d1~span").length); </script> </body> </html>
4.3 过滤选择器
- :first 过滤第一个
- :last 过滤最后一个
- :even 过滤偶数
- :odd 过滤奇数
- eq(下标) 过滤指定下标
- :lt(下标) 过滤小于指定下标
- :gt(下标) 过滤大于指定下标
- :not(选择器) 排除指定的元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入jQuery --> <script src="js/jquery-3.4.1.min.js"></script> </head> <body> <ul> <li>武汉1</li> <li>宜昌2</li> <li>襄阳3</li> <li>荆州4</li> </ul> <ul id="city"> <li>武汉</li> <li>宜昌</li> <li id="xy">襄阳</li> <li>荆州</li> </ul> <script> //简单过滤选择器 :first 过滤第一个元素 //alert($("#city li:first").html()); //alert($("ul:first")); //简单过滤选择器 :last 过滤最后一个元素 //alert($("#city li:last").html()); //简单过滤选择器 :odd 过滤所有的奇数元素 下标从0开始 //$("#city li:odd").css("backgroundColor","red"); //简单过滤选择器 :even 过滤所有的偶数元素 下标从0开始 //$("#city li:even").css("backgroundColor","red"); //简单过滤选择器 :eq 过滤指定下标元素 下标从0开始 //$("#city li:eq(1)").css("backgroundColor","red"); //简单过滤选择器 :lt 过滤小于指定下标元素 下标从0开始 //$("#city li:lt(2)").css("backgroundColor","red"); //简单过滤选择器 :gt 过滤大于指定下标元素 下标从0开始 //$("#city li:gt(2)").css("backgroundColor","red"); //简单过滤选择器 :not(选择器) 过滤不是指定元素的其他元素 $("#city li:not('#xy')").css("backgroundColor","red"); </script> </body> </html>
4.4 表单选择器
- :input 包含表单中所有的元素(input、button、textarea、select)
- :text 选择表单中所有的type=text元素
- :password 选择表单中所有的type=password元素
- :enabled 选择表单中所有的可用元素
- :disabled 选择表单中所有的可用元素
- :checked 选择单选和复选被选中的元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入jQuery --> <script src="js/jquery-3.4.1.min.js"></script> </head> <body> <form id="myForm"> <input type="text" name="username" disabled><br> <input type="password" name="password"><br> <input type="radio" name="sex" value="男" checked>男<br> <input type="radio" name="sex" value="女">女<br> <input type="checkbox" name="hobby" value="篮球">篮球<br> <input type="checkbox" name="hobby" value="足球">足球<br> <input type="checkbox" name="hobby" value="排球">排球<br> <button>表单按钮</button><br> 文本域<textarea></textarea> <br> <select> <option value="武汉">武汉</option> <option value="上海" selected>上海</option> <option value="北京">北京</option> </select> </form> <button onclick="f1()">全选</button> <button onclick="f2()">全不选</button> <script> //:input 包含表单中所有的元素(input、button、textarea、select) //alert($(":input").length); //:text 选择表单中所有的type=text元素 //alert($(":text").length); //:password 选择表单中所有的type=password元素 //alert($(":password").length); //:radio 选择表单中所有的type=radio元素 //alert($(":radio").length); //:checkbox 选择表单中所有的type=checkbox元素 //alert($(":checkbox").length); //选择所有的checkbox。设置checked属性为true //$(":checkbox").attr("checked","true"); //:enabled 选择表单中所有的可用元素 //alert($(":enabled").length); //:disabled 选择表单中所有的可用元素 //alert($(":disabled").length); //:checked 选择单选和复选被选中的元素 //alert($(":radio:checked")[0].value); function f1(){ $(":checkbox").prop("checked",true); } function f2(){ $(":checkbox").prop("checked",false); } //:selected 选择单选和复选被选中的元素 //alert($(":selected").val()); </script> </body> </html>
5 jQuery的事件
jQuery中的事件与Javascript中的事件基本一致。jQuery中的事件就是js中的事件省略on
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入jQuery --> <script src="js/jquery-3.4.1.min.js"></script> </head> <body> <button id="btn">按钮</button> <input type="text" name="username"/> <input type="password" name="aaa"/> <select> <option value="武汉">武汉</option> <option value="上海" selected>上海</option> <option value="北京">北京</option> </select> <button onclick="f1()">按钮2</button> <script> //在js中给button绑定事件 // var btn = document.getElementById("btn"); // btn.onclick = function(){ // alert("点击事件"); // } //在jQuery中绑定事件 // $("#btn").click(function(){ // alert("点击事件"); // }) // $(":text").blur(function(){ // alert("失去焦点事件"); // }) // $("select").change(function(){ // //var value = $(":selected").val(); // //this是当前绑定事件的对象。是一个js对象 // alert("下拉框内容改变了..."+$(this).val()); // }) // $(":password").focus(function(){ // alert("获取焦点事件"); // }) /** * 总结： * 1、jQuery中的事件绑定，就是js事件绑定去掉on * 2、jQuery在绑定事件的时候参数为回调函数(事件触发之后执行) * a、传递参数：表示设置事件(什么时候触发什么时候执行) * b、不传参数：表示执行事件(立即执行) */ function f1(){ alert("按钮2执行了。。。。"); } //立即执行事件 $("button:eq(1)").click(); </script> </body> </html>
如果有参数，表示设置事件(什么触发事件，什么时候执行)
如果没有参数，表示触发事件，立即执行
6 jQueryDOM操作
6.1 jQuery获取节点元素值
- jQuery 拥有可操作 HTML 元素和属性的强大方法。
- jQuery 中非常重要的部分，就是操作 DOM 的能力。
- jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
- 三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
6.2 jQuery操作DOM节点
用于添加新元素节点的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
用于删除新元素节点的两个 jQuery 方法：
- remove() - 删除选中元素(及其子元素)
6.3 jQuery操作CSS
jQuery 拥有若干进行 CSS 操作的方法。
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
