Introduction to jQuery
- jQuery 是一个快速、简洁的 JavaScript 框架，是目前最流行的 JavaScript 程序库，它是对 JavaScript 对象和函数的封装
- jQuery 的设计思想是 Write less, do more
- 实现隔行变色效果，JavaScript 要循环加判断，而 jQuery 只需一句关键代码
$(\"tr:even\").css(\"background-color\", \"#ccc\");jQuery Function
- 访问和操作 DOM 元素
- 控制页面样式
- 对页面事件进行处理
- 扩展新的 jQuery 插件
- 与 Ajax 技术完美结合
jQuery 能做的 JavaScript 也都能做，但使用 jQuery 能大幅提高开发效率
jQuery Advantages
- 体积小，压缩后只有 100 KB 左右
- 强大的选择器
- 出色的 DOM 封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
jQuery Usage
jQuery 作为一个单独存在的 js 文件，并不会与其他的 js 文件发生冲突
<script src=\"js/jquery-3.4.1.min.js\"></script>基本的语法介绍
<script> $(selector).action();</script>工厂函数 $()：将 DOM 对象转化为 jQuery 对象
选择器 selector：获取需要操作的 DOM 元素
方法 action()：jQuery 中提供的方法，其中包括绑定事件处理的方法 “$” 等同于 “jQuery”
例如：
<body> <p>hello</p></body><script src=\"js/jquery-3.4.1.min.js\"></script><script> alert($(\"p\").text());</script>jQuery 对象与 DOM 对象
DOM 对象和 jQuery 对象分别拥有一套独立的方法，不能混用
$(\"#title\").html();// 等同于document.getElementById(\"title\").innerHTML;如果要混用它们，就要进行转换
- DOM 对象转 jQuery 对象
// a 是 DOM 对象var a = document.getElementById(\"name\");// b 是 jQuery 对象var b = $(a);- jQuery 对象转 DOM 对象
// a 是 jQuery 对象var a = $(\"#name\");// b 是 DOM 对象var b = jqObject.get(0);选择器
基本选择器
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器。
<p>中国</p><p>China</p><p class=\"jy\">加油</p><p id=\"wan\">万</p><h3 class=\"jy\">加油</h3><script src=\"js/jquery-3.4.1.min.js\"></script><script> // 标签选择器，获得所有的 p $(\"p\").css(\"color\",\"red\"); // 类选择器 $(\".jy\").css(\"color\",\"red\"); // ID 选择器，更具备唯一性 $(\"#wan\").css(\"color\",\"red\"); // 并集选择器 \".jy\" 和 \"#wan\" $(\".jy,#wan\").css(\"color\",\"red\"); // 交集选择器，既是 h3 标签，又拥有 \".jy\" 的元素 $(\"h3.jy\").css(\"color\",\"red\");</script>层次选择器
<h3>000</h3><div id=\"x\"> 111 <p>p1</p> <div> <p>p2</p> </div></div><h3>222</h3><h3>333</h3><script src=\"js/jquery-3.4.1.min.js\"></script><script> // 后代选择器，忽略层级，选取所有后代元素 $(\"#x p\").css(\"color\",\"red\"); // 子代选择器，只选取子层的元素 $(\"#x>p\").css(\"color\",\"red\"); // 相邻元素选择器，下一个紧邻的兄弟元素 h3 $(\"#x+h3\").css(\"color\",\"red\"); // 同辈元素选择器，#x 元素之后的的所有兄弟元素 h3 $(\"#x~h3\").css(\"color\",\"red\");</script>属性选择器
<a href=\"www.baidu.com\">百度</a><a href=\"www.sina.com.cn\">新浪网</a><a href=\"http://www.163.com\">网易</a><p href=\"x\">测试1</p><p href=\"x\" title=\"x\">测试2</p><script src=\"js/jquery-3.4.1.min.js\"></script><script> // 选取拥有 href 属性的元素 $(\"[href]\").css(\"color\",\"red\"); // 选取拥有 href=x 的元素 $(\"[href=\'x\']\").css(\"color\",\"red\"); // 选取 a 标签中 href 不等于 x 的元素 $(\"a[href!=\'x\']\").css(\"color\",\"red\"); // 选取 href 属性以 www 开头的元素 $(\"[href^=\'www\']\").css(\"color\",\"red\"); // 选取 href 属性以 com 结尾的元素 $(\"[href$=\'com\']\").css(\"color\",\"red\"); // 选取 href 属性包含 a 的元素 $(\"[href*=\'a\']\").css(\"color\",\"red\"); // 选取拥有 href 属性和 title 属性，并且 title=x 的 p 元素 $(\"p[href][title=\'x\']\").css(\"color\",\"red\");</script>过滤选择器
<h2 id=\"h2#x\">选择</h2><ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li></ul><script src=\"js/jquery-3.4.1.min.js\"></script><script> // 第一个 li $(\"li:first\").css(\"color\",\"red\"); // 最后一个 li $(\"li:last\").css(\"color\",\"red\"); // 偶数行的 li $(\"li:even\").css(\"color\",\"red\"); // 奇数行的 li $(\"li:odd\").css(\"color\",\"red\"); // 下标为 2 的 li $(\"li:eq(2)\").css(\"color\",\"red\"); // 下标大于 1 的 li $(\"li:gt(1)\").css(\"color\",\"red\"); // 下标小于 2 的 li $(\"li:lt(2)\").css(\"color\",\"red\"); // 使用转义符 $(\"#h2\\\\#x\").css(\"color\",\"red\");</script>事件
鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件。
<img src=\"img/1.jpg\" width=\"300\"><img src=\"img/1.jpg\" width=\"300\"><img src=\"img/1.jpg\" width=\"300\"><script src=\"js/jquery-3.4.1.min.js\"></script><script> // 点击一下，切换照片 $(\"img\").click( function(){ // this 是事件触发的源头 $(this).attr( \"src\",\"img/2.jpg\" ); } ); // 移动到元素上 $(\"img\").mouseover( function(){ $(this).css( \"border\",\"2px solid red\" ); } ); // 离开元素 $(\"img\").mouseout( function(){ $(this).css( \"border\",\"2px solid white\" ); } );</script>键盘事件
用户每次按下或者释放键盘上的键时都会产生事件。
<input><h3></h3><script src=\"js/jquery-3.4.1.min.js\"></script><script> $(\"input\").keyup( function(){ // 获取框中的值 var str = $(this).val(); // 将 h3 元素中的文本内容更改为 str $(\"h3\").text( str ); } );</script>表单事件
当元素获得焦点时，会触发 focus 事件，失去焦点时，会触发 blur 事件。
<form action=\"\"> <p>帐号：<input id=\"a\" value=\"请输入帐号...\"></p> <p>电话：<input id=\"b\"></p></form><script src=\"js/jquery-3.4.1.min.js\"></script><script> // 获得焦点（激活/点击一下） $(\"#a\").focus(function(){ $(this).val(\"\"); }); // 失去焦点（未激活/未点击） $(\"#a\").blur(function(){ $(this).val(\"请输入帐号...\"); });</script>鼠标悬停复合事件
hover() 方法相当于 mouseover 与 mouseout 事件的组合。
<img src=\"img/3.jpg\" width=\"400\"><script src=\"js/jquery-3.4.1.min.js\"></script><script> $(\"img\").hover( function(){ $(this).css(\"border\",\"5px solid red\"); }, function(){ $(this).css(\"border\",\"5px solid white\"); } );</script>连续点击复合事件
<h2>选择</h2><ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li></ul><script src=\"js/jquery-3.4.1.min.js\"></script><script> $(\"h2\").click(function(){ // 连续点击，ul 的可见和隐藏进行切换 $(\"ul\").toggle(); });</script>事件的动态绑定
对 dom 元素绑定事件的另一种写法
- 绑定一个事件
$(\".del\").on(\'click\', function() { alert(\'hello\');})- 绑定多个事件
$(\".del\").on(\'click mouseover\', function() { alert(\'hello\');})元素的隐藏和显示
改变元素的宽和高（带动画效果）
- show(speed)：显示
- hide(speed)：隐藏
- toggle(speed) 等价于 show + hide：显示的隐藏，隐藏的显示
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒
<style> div{ width: 200px; height: 200px; background-color: black; }</style><body> <button id=\"btn1\">显示</button> <button id=\"btn2\">隐藏</button> <button id=\"btn3\">切换</button> <div></div> <script src=\"js/jquery-3.4.1.min.js\"></script> <script> $(\"#btn1\").click(function(){ $(\"div\").show(\'slow\'); }); $(\"#btn2\").click(function(){ // fast:快速的 // slow:缓慢的 // 毫秒：自定义 $(\"div\").hide(2000); }); $(\"#btn3\").click(function(){ $(\"div\").toggle(1000); }); </script></body>改变元素的高（拉伸效果）
- slideDown(speed)：显示
- slideUp(speed)：隐藏
- slideToggle(speed) 等价于 slideDown + slideUp
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒
<script> $(\"#btn1\").click(function(){ // 向下伸展 $(\"div\").slideDown(1000); }); $(\"#btn2\").click(function(){ // 向上收缩 $(\"div\").slideUp(1000); }); $(\"#btn3\").click(function(){ // 切换 $(\"div\").slideToggle(1000); });</script>不改变元素的大小（淡入淡出效果）
- fadeIn(speed) 显示
- fadeOut(speed) 隐藏
- fadeToggle(speed) 等价于 fadeIn + fadeOut 动画
- fadeTo(speed, 透明度) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒
<script> $(\"#btn1\").click(function(){ // 显示：映入眼帘 $(\"div\").fadeIn(1000); }); $(\"#btn2\").click(function(){ // 隐藏：淡出我的视线 $(\"div\").fadeOut(1000); }); $(\"#btn3\").click(function(){ // 切换 $(\"div\").fadeToggle(1000); }); $(\"#btn4\").click(function(){ // 1 秒内变成 50% 的透明度 $(\"div\").fadeTo(1000,0.5); });</script>链
链是允许在同一个元素上在一条语句中运行多个 jQuery 方法，可以把动作/方法链接在一起。
例如：点击一次按钮，让 div 完成 4 个指定动作：
- 背景变粉
- 字体变绿
- 向上收缩
- 向下拉伸
<style> div{ width: 200px; height: 200px; background-color: black; color:white; font-size: 3em; } </style><body> <button>试试</button> <div>hello</div> <script src=\"js/jquery-3.4.1.min.js\"></script> <script> $(\"button\").click(function(){ $(\"div\").css(\"background-color\",\"pink\").css(\"color\",\"green\").slideUp(1000).slideDown(1000); }); </script></body>DOM 和 CSS 的操作
属性函数
attr(“属性”) 获得元素的属性值。
attr(“属性”, “新值”) 修改元素的属性值。
attr(样式参数) 样式参数可以写成 json 格式。
<body> <button id=\"btn1\">点我试试</button> <hr> <img src=\"img/1.jpg\" title=\"风景图\" width=\"300\"> <script src=\"js/jquery-3.4.1.min.js\"></script> <script> $(\"#btn1\").click(function(){ $(\"img\").attr(\"src\",\"img/2.jpg\"); $(\"img\").attr(\"title\",\"高清风景图\"); $(\"img\").attr({width:\"200\",height:\"200\"}); }); </script></body>val() 获得表单元素中的 value 值
val(“x”) 修改表单元素中的 value 值
html() 获得元素中的内容（标签 + 文本）
html(“x”) 修改元素中的内容（标签 + 文本）
text() 获得元素中的文本
text(“x”) 修改元素中的文本
<button>试试</button><hr><input id=\"username\"><div> <h1><i>中国加油</i></h1></div><script src=\"js/jquery-3.4.1.min.js\"></script><script> $(\"button\").click(function(){ // input 框中的值 alert($(\"input\").val()); // 修改 input 框中的值 $(\"input\").val(\"66666\"); // 获得 div 中的内容（包含标签信息） alert($(\"div\").html()); // 获得 div 中的内容（不包含标签信息，只包含文本内容） alert($(\"div\").text()); // 修改 div 中的内容（全部内容都覆盖） $(\"div\").text(\"祖国万岁！\"); });</script>样式函数
css(“属性”) 获得该属性值
css(“属性”, “值”) 设置属性的值
css({json}) 设置多个属性的值
<style> div{ width: 150px; height: 150px; background-color: #000; }</style><body> <button>试试</button> <hr> <div></div> <script src=\"js/jquery-3.4.1.min.js\"></script> <script> $(\"button\").click(function(){ // 获取 css 属性，width 的值 var w = $(\"div\").css(\"width\"); // 一个键值对 $(\"div\").css(\"background-color\",\"pink\"); // 链式编程 $(\"div\").css(\"background-color\",\"pink\").css(\"border-radius\",\"50%\"); // json 为参数 $(\"div\").css({ opacity:\"0.4\", background:\"orange\", borderRadius:\"50%\" }); }); </script></body>width() 获得元素的宽度
width(number) 修改元素的宽度
height() 获得元素的高度
height(number) 修改元素的高度
<style> div{ width: 150px; height: 150px; background-color: #000; }</style><body> <button>试试</button> <hr> <div></div> <script src=\"js/jquery-3.4.1.min.js\"></script> <script> $(\"button\").click(function(){ //（无参）获取宽度 var w = $(\"div\").width(); //（无参）获取高度 var h = $(\"div\").height(); alert(\"宽:\"+w+\"px，高:\"+h+\"px\"); //（传参）修改宽度 $(\"div\").width(\"300\"); //（传参）修改高度 $(\"div\").height(\"300\"); }); </script></body>类样式函数
addClass() 为元素添加类样式
removeClass() 将元素的类样式移除
toggleClass() 样式的切换；有->无，无->有
<style> div{ width: 100px; height: 100px; background-color: #000; } .a{ background: palevioletred; border-radius: 50%; } .b{ border:5px dashed darkcyan; opacity: 0.6; } .cn{ background: #000; color: #FFF; font-family: 字魂49号-逍遥行书; }</style><body> <button id=\"btn1\">试试</button> <button id=\"btn2\">取消透明度</button> <button id=\"btn3\">样式切换</button> <hr> <div></div> <h1>中华人民共和国</h1> <script src=\"js/jquery-3.4.1.min.js\"></script> <script> $(\"#btn1\").click(function(){ // $(\"div\").addClass(\"a\"); $(\"div\").addClass(\"a b\"); }); $(\"#btn2\").click(function(){ $(\"div\").removeClass(\"b\"); }); $(\"#btn3\").click(function(){ $(\"h1\").toggleClass(\"cn\"); }); </script></body>节点操作
<input><button id=\"test\">测试</button><ul> <li>西游记</li> <li>三国演义</li> <li>水浒传</li></ul><script src=\"js/jquery-3.4.1.min.js\"></script><script> $(\"#test\").click(function(){ var bookname = $(\"input\").val(); // 通过工厂函数，创建新的 li 节点 var newli = $(\"<li>\"+bookname+\"</li>\"); /* 添加子节点 */ // newli 添加到 ul 后面 $(\"ul\").append(newli); // newli 添加到 ul 后面 newli.appendTo(\"ul\"); // newli 添加到 ul 前面 $(\"ul\").prepend(newli); newli.prependTo(\"ul\"); /* 添加同辈节点 */ // newli 添加到最后的 li 的后面 $(\"li:last\").after( newli ); newli.insertAfter(\"li:last\"); //newli 添加到最后的 li 的前面 $(\"li:last\").before(newli); newli.insertBefore(\"li:last\"); /* 替换节点 */ // 将第二个 li 替换成 newli $(\"li:eq(1)\").replaceWith(newli); newli.replaceAll( \"li:eq(1)\" ); /* 复制节点 */ // 复制第一个 li，并插入到最后一个 li 的后面 $(\"li:first\").clone().insertAfter(\"li:last\"); /* 删除节点 */ // 清空了节点上的文本（节点并没有消失） $(\"li:eq(1)\").empty(); // 删除节点 $(\"li:eq(1)\").remove(); });</script>遍历节点
祖先元素
用于向上遍历 DOM 树的方法
- parent() 返回被选元素的直接父元素，仅仅是上一级
- parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分
<p><button>测试</button></p><ul> <li>a</li> <li> <b>b</b> </li> <li>c</li></ul><script src=\"js/jquery-3.4.1.min.js\"></script><script> $(\"button\").click(function(){ // 找爸爸 var x = $(\"b\").parent().html(); // 找祖宗 ul var x = $(\"b\").parents(\"ul\").html(); // 找祖宗 body var x = $(\"b\").parents(\"body\").html(); alert( x ); });</script>同辈元素
next() 获取紧邻匹配元素之后的元素
prev() 获取紧邻匹配元素之前的元素
siblings([selector]) 获取位于匹配元素前面和后面的所有同辈元素
<button>测试</button><p>p1</p><ul> <li>a</li> <li> <b>b</b> </li> <li>c</li></ul><p>p2</p><p id=\"x\">p3</p><script src=\"js/jquery-3.4.1.min.js\"></script><script> $(\"button\").click(function(){ // 紧邻的下一个元素 var x = $(\"ul\").next().text(); // 紧邻的上一个元素 var x = $(\"ul\").prev().text(); // 所有的兄弟中 id=x 的 var x = $(\"ul\").siblings(\"#x\").text(); // ul 的所有兄弟：1 个 button，3 个 p，2 个 script var arr = $(\"ul\").siblings(); for(var i = 0 ;i< arr.length ;i++){ alert(arr[i]); } });</script>后代元素
后代是子、孙、曾孙等等
- children([selector]) 方法返回被选元素的所有直接子元素
<button>测试</button><ul> <li>a</li> <li>b</li> <li>c</li></ul><script src=\"js/jquery-3.4.1.min.js\"></script><script> $(\"button\").click(function(){ // 所有子节点：a b c var x = $(\"ul\").children().text(); // ul 中的第一个子节点 var x = $(\"ul\").children(\"li:first\").text(); alert(x); });</script>- find(选择器) 方法返回被选元素的后代元素，一路向下直到最后一个后代
<button>测试</button><ul> <li>盘古</li> <li>蚩尤</li> <li>刑天 <p>龚工</p> </li> <h3>祝融</h3></ul><script src=\"js/jquery-3.4.1.min.js\"></script><script> $(\"button\").click(function(){ // 在 ul 中查找 p 元素，忽略层级 var x = $(\"ul\").find(\"p\").text(); // 在 ul 中查找 h3 元素，忽略层级 var x = $(\"ul\").find(\"h3\").text(); // 不知道找什么 var x = $(\"ul\").find().text(); alert(x); });</script>元素的过滤
first() 过滤第一个元素
last() 过滤最后一个元素
eq(index) 过滤到下标为 index 的元素
not() 除了什么之外的元素
is() 返回布尔，判断是不是这种元素
<button>测试</button><ul> <li>盘古</li> <li>蚩尤</li> <li>刑天</li></ul><script src=\"js/jquery-3.4.1.min.js\"></script><script> $(\"button\").click(function(){ // 第一个 li var x = $(\"li\").first().text(); // 最后一个 li var x = $(\"li\").last().text(); // 下标为 1 的 li var x = $(\"li\").eq(1).text(); // 除了下标为 1 的其余所有 li var x = $(\"li\").not(\"li:eq(1)\").text(); // 返回布尔型，li 的父节点是不是 ul var x = $(\"li\").parent().is(\"ul\"); alert(x); });</script>案例
手风琴特效
<style> dd { /* 隐藏元素 */ display: none; }</style><body> <nav> <header>网站</header> <ul> <li> <dl> <dt>求职</dt> <dd>1.简历</dd> <dd>2.面试</dd> <dd>3.入职</dd> </dl> </li> <li> <dl> <dt>教育</dt> <dd>1.看视频</dd> <dd>2.做作业</dd> <dd>3.在线辅导</dd> </dl> </li> <li> <dl> <dt>创业</dt> <dd>1.帮助小企业</dd> <dd>2.头脑风暴</dd> <dd>3.赚钱啦</dd> </dl> </li> </ul> </nav> <script src=\"js/jquery-3.4.1.min.js\"></script> <script> $(\"nav dt\").click(function(){ // 所有的 dd 全部都闭合上，除了自己的兄弟 $(\"dd\").not($(this).siblings()).slideUp(500); // 自己的兄弟进行切换，显示闭合上，闭合的显示出来 $(this).siblings().slideToggle(500); }); </script></body>购物车结算
<style> .minus,.plus{ border:1px solid #999; /* 超链接 a 是行内元素 */ /* 转换成行内块显示，才能改变宽和高 */ display: inline-block; width: 20px; height: 20px; text-align: center; text-decoration: none; }</style><body> <table border=\"1\" cellspacing=\"0\" width=\"400\"> <tr> <td>商品编号</td> <td>名称</td> <td>单价</td> <td>数量</td> <td>总价</td> </tr> <tr> <td>1</td> <td>炸香肠</td> <td>3</td> <td> <a href=\"#\" class=\"minus\">-</a> <span>1</span> <a href=\"#\" class=\"plus\">+</a> </td> <td>3</td> </tr> <tr> <td>2</td> <td>王八</td> <td>10</td> <td> <a href=\"#\" class=\"minus\">-</a> <span>1</span> <a href=\"#\" class=\"plus\">+</a> </td> <td>10</td> </tr> <tr> <td>3</td> <td>恐龙</td> <td>1000</td> <td> <a href=\"#\" class=\"minus\">-</a> <span>1</span> <a href=\"#\" class=\"plus\">+</a> </td> <td>1000</td> </tr> </table> <p style=\"width: 400px; text-align: right;\"> 总价：<b style=\"color:red;\">111</b> <button>提交订单</button> </p> <script src=\"js/jquery-3.4.1.min.js\"></script> <script src=\"js/car.js\"></script></body>car.js
$(\".plus\").click(function(){ // 获得原来的商品数量 var i = $(this).prev().text(); i++; // 现在的商品数量 $(this).prev().text(i); // 商品单价 var price = $(this).parent().prev().text(); // 商品总价 var total = i*price; // 现在商品的总价 $(this).parent().next().text(total); getTotal();});$(\".minus\").click(function(){ var i = $(this).next().text(); i--; // 数量已经是 0 了，询问用户是否删除该商品 if(i == 0){ if( confirm(\"是否删除该商品？\") ){ $(this).parents(\"tr\").remove(); } }else{ $(this).next().text(i); // 商品单价 var price = $(this).parent().prev().text(); // 商品总价 var total = i*price; // 现在商品的总价 $(this).parent().next().text(total); } getTotal();});// 计算所有商品的总价// function getTotal(){// // 总价钱// var sum = 0;// var arr = $(\"tr:not(tr:first)\").find(\"td:last\");// for(var i = 0;i<arr.length ; i++){// sum += Number(arr[i].innerHTML) ;// }// $(\"b\").text(sum);// }function getTotal(){ // 总价钱 var sum = 0; $(\"tr:not(tr:first)\").find(\"td:last\").each(function(){ sum += Number($(this).text()); }); $(\"b\").text(sum);}
