jQuery
ES6中语法
-
定义代码模板
-
定义语法
-
ES 6中有三个定义变量的关键字：
1. var 以前定义变量关键字 2. let 定义变量关键字 3. const 定义常量关键字
-
-
设置idea支持ES6
-
变量定义的区别
<html lang="en"> <head> <meta charset="UTF-8"> <title>ES6中新特性title> head> <body> <script type="text/javascript"> /* //变量定义区别 var num = 5; //var可以重复定义变量 var num = 3; */ /* //定义变量，关键字：let，不能重复定义变量 let num = 5; //let num = 3; document.write(num + "
"); */ { //大括号不能限制它的范围 //var num = 1; //大括号可以限制它的范围 let num = 3; document.write(num + "
"); } //定义常量的关键字 const PI = 3.14; //PI = 5; document.write(PI + "
"); script> body> html> -
定义快捷键
-
字符串的插值运算
<html lang="en"> <head> <meta charset="UTF-8"> <title>字符串变化title> head> <body> <script type="text/javascript"> //定义字符串，使用双引号或单引号 let n1 = 4; let n2 = 5; let result = n1 + n2; //使用字符串拼接的方式 document.write(n1 + "+" + n2 + "=" + result + "
"); //使用反引号定义字符串，支持插值运算，注：在JSP中与EL有冲突 document.write(`${n1}+${n2}=${result}`); script> body> html> -
小结
- 在ES6中定义变量：let
- 定义常量：const
- 字符串可以使用反引号，支持插值运算
jQuery的介绍
- 使用好处
-
提高开发效率，降低了开发难度，降低开发成本。
-
- jQuery框架的特点：
-
轻量级：占资源少，运行速度快。
-
兼容性好：可以运行在所有的主流浏览器上
-
它的插件非常丰富，插件本身的功能也很强大。插件的网站：http://www.jq22.com/
-
它的宗旨是：write less do more
-
jQuery的导入与使用
- 版本选择
- 案例
<html lang="en"> <head> <meta charset="UTF-8"> <title>jQuerytitle> <script src="js/jquery-3.3.1.js">script> head> <body> <script type="text/javascript"> /* 调用一个方法，方法名可以使用一个字符，方法可以传入参数：传入匿名函数 这是jQuery的入口，类似于java中main函数，功能与window.onload类似，即在网页加载完毕以后执行 与window.onload的区别： 1. jq的入口函数，可以写多个，每个都会执行 2. window.onload后面编写的函数会覆盖前面的，所以只会执行最后一次 */ $(function () { alert("Hello jQuery1"); }); $(function () { alert("Hello jQuery2"); }); window.onload = function () { alert("Hello JavaScript1"); } window.onload = function () { alert("Hello JavaScript2"); } script> body> html> - 小结
- $(function())相当于window.onload事件
jQuery对象与js对象之间的转换
- JS对象与jQuery对象的区别
- 什么是JS对象：以前在JS中通过document.getElementById()获取的对象是JS对象，只能调用JS中属性和方法
- 什么是jQuery对象：今天通过JQ选择器获取的对象，称为JQ对象，它可以使用JQ中方法。
- 注：JS对象不能直接调用JQ中的方法，如果要调用JQ中方法，先要将JS对象转成JQ对象，反之亦然。
- JS与JQ转换的演示案例
<html lang="en"> <head> <meta charset="UTF-8"> <title>JS对象与JQ对象转换title> <script type="text/javascript" src="js/jquery-3.3.1.js">script> head> <body> <h2>JS对象与JQ对象的转换h2> <input type="text" id="company" value="传智播客"> <input type="button" id="b1" value="JS得到值"> <input type="button" id="b2" value="JQ得到值"> <script type="text/javascript"> //分别通过JS和JQ对象获取文本框的值，输出显示出来 //使用JS的方法 document.getElementById("b1").onclick=function () { //获取文本框的对象 let jsObject = document.getElementById("company"); //将JS对象转成JQ对象 let jqObject = $(jsObject); //获取它的值，value是一个属性，没有括号 //let v = jsObject.value; //调用jq对象的方法 let v = jqObject.val(); //显示输出 alert(v); } //使用JQ的方法, id选择器，类似于css中选择器 //click()事件方法，参数是一个匿名函数，是它的事件处理函数 $("#b2").click(function () { //获取文本框的对象 let jqObject = $("#company"); //获取它的值，通过调用JQ方法获取值，后面有括号 //let v = jqObject.val(); //将JQ对象转成JS对象,JQ对象本质上是一个数组，取它的第0个元素就是JS对象 let jsObj = jqObject[0]; //显示输出 let v = jsObj.value; alert(v); }); script> body> html> - 小结
操作 方法 将JS对象–>jQuery对象 $(JS对象) 将jQuery对象–> JS对象 JQ对象[0] 或 JQ对象.get(0)
选择器：基本选择器
-
选择器的作用
- 如果要操作网页中各种元素，首先要选中这些元素。jQuery中的选择器功能强大，选择方式灵活多样。
-
演示案例
<html> <head> <title>基本选择器title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-3.3.1.js">script> <style type="text/css"> div, span { width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div .mini { width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } div .mini01 { width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } style> head> <body> <input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/> <input type="button" value=" 改变元素名为的所有元素的背景色为 红色" id="b2"/> <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/> <h1>有一种奇迹叫坚持h1> <div id="one"> id为one div> <div id="two" class="mini"> id为two class是 mini <div class="mini">class是 minidiv> div> <div class="one"> class是 one <div class="mini">class是 minidiv> <div class="mini">class是 minidiv> div> <div class="one"> class是 one <div class="mini01">class是 mini01div> <div class="mini">class是 minidiv> div> <div id="mover"> div 动画 div> <span class="spanone">class为spanone的span元素span> <span class="mini">class为mini的span元素span> body> <script type="text/javascript"> // 1) 改变 id 为one的元素的背景色为红色 $("#b1").click(function () { //id选择器，语法：#id //方法用来修改样式：css("样式名","样式值") $("#one").css("backgroundColor", "red"); }); // 2) 改变元素名为的所有元素的背景色为 红色。 $("#b2").click(function () { //标签选择器：标签名，这里选中的是一个集合，在jq中方法是可以直接操作集合的 $("div").css("background-color", "red"); }); // 3) 改变 class 为 mini 的所有元素的背景色为 红色 $("#b3").click(function () { //类选择器：.类名 $(".mini").css("background", "red"); }); script> html>小结
基本选择器 语法 ID选择器 $( “#ID名”) 类选择器 $(".类名") 标签选择器 $(“标签名”) 选择器：层级选择器
-
演示案例
<html> <head> <title>层次选择器title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-3.3.1.js">script> <style type="text/css"> div, span { width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div .mini { width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } div .mini01 { width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } style> head> <body> <input type="button" value="改变 内所有的背景色为红色" id="b1"/> <input type="button" value="改变 内子的背景色为 红色" id="b2"/> <input type="button" value="改变 id为two的下一个div兄弟元素的背景色为红色" id="b3"/> <input type="button" value="改变id为two的后面同级兄弟div元素的背景色为红色" id="b4"/> <h1>有一种奇迹叫坚持h1> <div id="one"> id为one div> <div id="two" class="mini"> id为two class是 mini <div class="mini">class是 minidiv> div> <div class="one"> class是 one <div class="mini">class是 minidiv> <div class="mini">class是 minidiv> div> <div class="one"> class是 one <div class="mini01">class是 mini01div> <div class="mini">class是 minidiv> div> <span class="spanone">spanspan> body> <script type="text/javascript"> //1) 改变 内所有的背景色为红色 $("#b1").click(function () { //语法：父选择器 子孙选择器： 会同时选中所有的子孙元素 $("body div").css("backgroundColor", "red"); }); //2) 改变 内子的背景色为 红色 $("#b2").click(function () { //语法：父选择器>子选择器 只选中子元素 $("body>div").css("backgroundColor", "red"); }); //3) 改变id为two的下一个div兄弟元素的背景色为红色 (只选了一个) $("#b3").click(function () { //语法：A+B 选中A元素后面的B元素，B是A的下一个兄弟 $("#two+div").css("background-color", "red"); }); //4) 改变id为two的后面同级兄弟div元素的背景色为红色 (后面所有的兄弟) $("#b4").click(function () { //语法：A~B 表示选中A后面所有的B元素 $("#two~div").css("background-color", "red"); }); script> html>小结
层级选择器 语法 获取A元素内部所有B元素 A B 获得A元素下面的所有B子元素 A>B 获得A元素同级，下一个B元素 A+B 获取A元素后面所有同级B元素 A~B 选择器：属性选择器
- 演示案例
<html> <head> <title>属性过滤选择器title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-3.3.1.js">script> <style type="text/css"> div, span { width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div .mini { width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } div .mini01 { width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } div.visible { display: none; } style> head> <body> <input type="button" value="含有属性title 的div元素背景色为红色" id="b1"/> <input type="button" value="属性title值等于test的div元素背景色为红色" id="b2"/> <input type="button" value="属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/> <input type="button" value="属性title值包含te的div元素背景色为红色" id="b4"/> <hr/> <div id="one"> id为one div div> <div id="two" class="mini" title="test"> id为two class是 mini div title="test" <div class="mini">class是 minidiv> div> <div class="visible"> class是 one <div class="mini">class是 minidiv> <div class="mini">class是 minidiv> div> <div class="one" title="test02"> class是 one title="test02" <div class="mini01">class是 mini01div> <div class="mini" style="margin-top:0px;">class是 minidiv> div> <div class="one"> div> <div id="mover" title="best"> id="mover" title="best" div> <h2 title="test">好好学习，天天向上h2> body> <script type="text/javascript"> //1) 含有属性title 的div元素背景色为红色 $("#b1").click(function () { //语法：[属性名] 或 标签名[属性名] $("[title]").css("background-color", "red"); }); //2) 属性title值等于test的div元素背景色为红色 $("#b2").click(function () { //语法：标签名[属性名=值] 三个条件：标签名，属性名，值三个都要相同 $("div[title=test]").css("background-color", "red"); }); //3) 属性title值不等于test的div元素(没有title属性的也将被选中)背景色为红色 $("#b3").click(function () { //语法：标签名[属性名!=值] 除了等于就是不等于 $("div[title!=test]").css("background-color", "red"); }); //4) 属性title值包含te的div元素背景色为红色 $("#b4").click(function () { //语法：标签名[属性名*=值] 模糊查询 $("div[title*=te]").css("background-color", "red"); }); script> html> - 小结
属性选择器 语法 获得有属性名的元素 标签名[属性名] 获得属性名 等于 值 元素 标签名[属性名=值] 获取属性名不等于值的元素 标签名[属性名!=值] 获取属性名包含值的元素 标签名[属性名*=值]
选择器：基本过滤选择器
- 演示案例
<html> <head> <title>基本过滤选择器title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-3.3.1.js">script> <style type="text/css"> table { margin: auto; border-collapse: collapse; width: 525px; } tr { height: 30px; text-align: center; } .girl { width: 260px; height: 260px; border: 1px solid gray; float: left; } style> head> <body> <input type="button" value="第一行的背景色为浅灰色" id="b1"/> <input type="button" value="最后一行的背景色为浅绿色" id="b2"/> <input type="button" value="除第1行和最后1行的其它行背景色为浅黄色" id="b3"/> <input type="button" value="索引值为偶数的行背景色为浅粉色" id="b4"/> <input type="button" value="索引值为奇数的行背景色为aquamarine色" id="b5"/> <input type="button" value="索引值大于 3 的tr元素的背景色为oldlace色" id="b6"/> <input type="button" value="索引值等于 3 的tr元素的背景色为antiquewhite" id="b7"/> <input type="button" value="索引值为小于 3 的tr元素背景色为yellowgreen" id="b8"/> <hr /> <div style="width: 525px; margin: auto;"> <table border="1" align="center"> <caption><h3>学生信息列表h3>caption> <tr> <th>学号th> <th>姓名th> <th>性别th> <th>年龄th> <th>家庭住址th> <th>成绩th> tr> <tr> <td>1001td> <td>孙悟空td> <td>男td> <td>72td> <td>花果山td> <td>90td> tr> <tr> <td>1002td> <td>猪八戒td> <td>男td> <td>36td> <td>高老庄td> <td>78td> tr> <tr> <td>2002td> <td>沙僧td> <td>男td> <td>30td> <td>流沙河td> <td>67td> tr> <tr> <td>3000td> <td>唐三藏td> <td>男td> <td>26td> <td>东土td> <td>87td> tr> <tr> <td>4000td> <td>白骨精td> <td>女td> <td>18td> <td>白骨洞td> <td>96td> tr> <tr> <td>5000td> <td>蜘蛛精td> <td>女td> <td>17td> <td>盘丝洞td> <td>95td> tr> <tr> <td>总成绩td> <td colspan="5">3045td> tr> table> div> <br /> body> <script type="text/javascript"> //1) 改变第一行的背景色为浅灰色 $("#b1").click(function () { //语法 :first $("tr:first").css("background-color", "lightgreen"); }); //2) 改变最后一行的背景色为浅绿色 $("#b2").click(function () { //语法 :last $("tr:last").css("background-color", "lightgreen"); }); //3) 改变除第1行和最后1行的其它行背景色为浅黄色 $("#b3").click(function () { //语法 :not() 不包含 $("tr:not(:first):not(:last)").css("background-color", "lightgreen"); }); //4) 改变索引值为偶数的行背景色为浅粉色，下标从0开始 $("#b4").click(function () { //偶数 :even ，从0开始计数 $("tr:even").css("background-color", "lightgreen"); }); //5) 改变索引值为奇数的行背景色为aquamarine色 $("#b5").click(function () { //奇数 :odd ，从0开始计数 $("tr:odd").css("background-color", "lightgreen"); }); //6) 改变索引值大于 3 的tr元素的背景色为oldlace色 $("#b6").click(function () { //大于 :gt(索引值) greater than $("tr:gt(3)").css("backgroundColor", "green"); }); //7) 改变索引值等于 3 的tr元素的背景色为antiquewhite $("#b7").click(function () { //等于 :eq() - equals $("tr:eq(3)").css("backgroundColor", "darkgreen"); }); //8) 改变索引值为小于 3 的tr元素背景色为yellowgreen $("#b8").click(function () { //小于 :lt() - less than $("tr:lt(3)").css("backgroundColor", "green"); }); script> html> - 小j结
基本过滤选择器 语法 获得选择的元素中的第一个元素 :first 获得选择的元素中的最后一个元素 :last 不包括指定内容的元素 :not() 偶数，从 0 开始计数 :even 奇数，从 0 开始计数 :odd 等于第几个 :eq() 大于第n个，不含第index个 :gt() 小于第n个，不含第index个 :lt()
选择器：属性过滤选择器
-
注意
- 属性过滤选择器用于表单form中元素
-
示例
<html> <head> <title>表单属性过滤选择器title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-3.3.1.js">script> <style type="text/css"> div, span { width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div .mini { width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } div .mini01 { width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } style> head> <body> <input type="button" value="val() 方法改变表单内可用文本框元素的值" id="b1" /> <input type="button" value="val() 方法改变表单内不可用 元素的值" id="b2" /> <input type="button" value="length 属性获取(单选和多选)选框选中的个数" id="b3" /> <input type="button" value="length 属性获取下拉列表选中的个数" id="b4" /> <br><br> <input type="text" value="不可用值1" disabled="disabled"> <input type="text" value="可用值1"> <input type="text" value="不可用值2" disabled="disabled"> <input type="text" value="可用值2"> <br><br> <input type="checkbox" name="items" value="美容">美容 <input type="checkbox" name="items" value="IT">IT <input type="checkbox" name="items" value="金融">金融 <input type="checkbox" name="items" value="管理">管理 <br><br> <input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女 <br><br> <select name="job" id="job" multiple="multiple" size=4> <option>程序员option> <option>中级程序员option> <option>高级程序员option> <option>系统分析师option> select> <select name="edu" id="edu"> <option>本科option> <option>博士option> <option>硕士option> <option>大专option> select> body> <script type="text/javascript"> //1) val() 方法改变表单内可用文本框 元素的值 $("#b1").click(function () { //val()既可以获取值，又可以设置值，如果有参数就是设置值，没有参数就是获取值 //可用的元素 :enabled $("input[type=text]:enabled").val("约吗?"); }); //2) val() 方法改变表单内不可用 元素的值 $("#b2").click(function () { //不可用的元素 :disabled $("input[type=text]:disabled").val("约吗?"); }); //3) length 属性获取选框选checked中的个数 $("#b3").click(function () { //选中的元素 :checked， JQ对象本质上是一个数组，数组是长度的 alert($("input:checked").length); }); //4) length 属性获取下拉列表选中的个数 $("#b4").click(function () { //获取下拉列表选中 :selected, 注：应该过滤option alert($("option:selected").length); }); script> html> -
小结
表单属性选择器 语法 可用 :enabled 不可用 :disabled 选中（单选radio ，多选checkbox） :checked 选择（下列列表 :selected
DOM操作的方法：html()，text()，val()
-
语法
html() 相当于innerHTML,修改标签里面的内容，如果内容里有标签，标签是起作用的。
text() 相当于innerText，内容里的标签是不起作用的，纯文本输出
val() 相当于value属性
既可以获取值，又可以设置值，没有参数是获取值，有参数是设置值 -
示例
<html> <head> <title>html和text和valtitle> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-3.3.1.js">script> head> <body> <input type="button" id="b1" value="设置值value"/> <input type="button" id="b2" value="获取值value"/> <input type="button" id="b3" value="设置html"/> <input type="button" id="b4" value="获取值html"/> <input type="button" id="b5" value="设置text"/> <input type="button" id="b6" value="获取text"/> <hr/> <input id="myinput" type="text" name="username" value="张三"/><br/> <div id="mydiv"><p><a href="#">标题标签a>p>div> body> <script type="text/javascript"> //设置值value $("#b1").click(function () { $("#myinput").val("李四"); }); //获取值value $("#b2").click(function () { alert($("#myinput").val()); }); //设置html $("#b3").click(function () { $("#mydiv").html("天气不错
"); }); //获取值html $("#b4").click(function () { alert($("#mydiv").html()); }); //设置text $("#b5").click(function () { $("#mydiv").text("天气不错
"); }); //获取text $("#b6").click(function () { alert($("#mydiv").text()); }); script> html> -
小结
操作方法 功能 html() 获取或设置标签主体内容，内容里面的标签是起作用的 ，相当于innerHTML text() 获取或设置标签主体内容，内容里面的标签不起作用的，相当于innerText val() 设置或获取value属性的值，相当于value
DOM操作的方法：与属性有关的方法
-
语法
attr() attribute 设置或获取属性值
prop() property 设置或获取属性值
removeAttr(),removeProp() 删除属性 -
attr()和prop()使用场景
- prop方法用于操作boolean类型的值，true/false，如：checked selected disabled
- prop方法用于操作boolean类型的值，true/false，如：checked selected disabled
-
示例
<html> <head> <title>获取属性title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-3.3.1.js">script> head> <body> <input type="button" id="b1" value="获取北京节点的name属性值"/> <input type="button" id="b2" value="设置北京节点的name属性的值为dabeijing"/> <input type="button" id="b3" value="新增北京节点的description属性 属性值是didu"/> <input type="button" id="b4" value="删除北京节点的name属性"/> <input type="button" id="b5" value="获得hobby的选中状态"/> <ul> <li id="bj" name="beijing">北京li> <li id="tj" name="tianjin">天津li> ul> 爱好：<input type="checkbox" id="hobby" value="游泳"/>游泳 body> <script type="text/javascript"> //获取北京节点的name属性值 $("#b1").click(function () { //一个参数表示获取值 alert($("#bj").attr("name")); }); //设置北京节点的name属性的值为"雾都" $("#b2").click(function () { //2个参数表示设置值 $("#bj").attr("name", "雾都"); }); //新增北京节点的description属性 属性值是didu $("#b3").click(function () { //如果存在这个属性名，就是修改，不存在就是添加 $("#bj").attr("description", "帝都"); }); //删除北京节点的name属性 $("#b4").click(function () { $("#bj").removeAttr("name"); }); //获得hobby的选中状态 $("#b5").click(function () { //获取checked属性，选中就是true，没有选中就是false alert($("#hobby").prop("checked")); }); script> html> -
小结
方法名 功能描述 attr() 获取或设置属性值 prop() 同上，用于操作布尔类型的值 removeAttr() /removeProp() 删除属性
DOM操作的方法：与样式有关的方法
-
与类名有关的方法
addClass() 添加一个类样式，前提是已经存在这个类名
removeClass() 删除一个类样式
toggleClass() 切换类样式，如果已经存在这个类样式就是删除，如果不存在就是添加 -
与样式有关的方法
-
示例
<html> <head> <title>样式操作title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-3.3.1.js">script> <style type="text/css"> .one{ width: 200px; height: 140px; margin: 20px; background: red; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } /*待用的样式*/ .second{ width: 222px; height: 220px; margin: 20px; background: yellow; border: pink 3px dotted; float:left; font-size: 22px; font-family:Roman; } style> head> <body> <input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/> <input type="button" value=" addClass" id="b2"/> <input type="button" value="removeClass" id="b3"/> <input type="button" value=" 切换样式" id="b4"/> <input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/> <input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/> <hr/> <h1>有一种奇迹叫坚持h1> <h2>自信源于努力h2> <div id="one"> id为one div> body> <script type="text/javascript"> // 采用属性增加样式(改变id=one的样式)，样式名为second $("#b1").click(function () { //添加属性的方式 $("#one").attr("class", "second"); }); // addClass $("#b2").click(function () { $("#one").addClass("second"); }); // removeClass $("#b3").click(function () { $("#one").removeClass("second"); }); // 切换样式 $("#b4").click(function () { //toggle开关 $("#one").toggleClass("second"); }); // 通过css()获得id为one背景颜色 $("#b5").click(function () { alert($("#one").css("backgroundColor")); }); // 通过css()设置id为one背景颜色为绿色 $("#b6").click(function () { $("#one").css("backgroundColor","green") }); script> html> -
小结
方法名 功能 addClass(类样式名) 添加一个类样式 removeClass(类样式名) 删除一个类样式 toggleClass(类样式名) 切换类样式 css(样式名) 获取某个样式值 css(样式名,样式值) 设置样式的值
DOM操作的方法：元素的创建和添加
-
语法
$ (“标签内容”) 创建元素，如：$("
内容
父元素.append(子元素) 添加到最后一个子元素
父元素.prepend(子元素) 添加到第一个子元素
元素.before(元素) 添加到当前元素的前面，两者是兄弟关系
元素.after(元素) 添加到当前元素的后面，两者是兄弟关系 -
代码
<html> <head> <title>内部插入脚本title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-3.3.1.js">script> head> <body> <input type="button" id="b1" value="将反恐放置到city的后面"/> <input type="button" id="b2" value="将反恐放置到city的最前面"/> <input type="button" id="b3" value="将反恐放在天津前面"/> <input type="button" id="b4" value="将反恐放在天津后面"/> <input type="button" id="b5" value="创建一个广州的节点"/> <hr/> <ol id="city"> <li id="bj" name="beijing">北京li> <li id="tj" name="tianjin">天津li> <li id="cq" name="chongqing">重庆li> ol> <ul id="game"> <li id="fk" name="fankong">反恐li> <li id="xj" name="xingji">星际li> ul> body> <script type="text/javascript"> //将反恐放置到city的后面 $("#b1").click(function () { //父元素添加子元素，append有剪切的功能 //$("#city").append($("#fk")); //复制 clone() 克隆 $("#city").append($("#fk").clone()); }); //将反恐放置到city的最前面 $("#b2").click(function () { $("#city").prepend($("#fk")); }); //将反恐放在天津前面 $("#b3").click(function () { $("#tj").before($("#fk")); }); //将反恐放在天津后面 $("#b4").click(function () { $("#tj").after($("#fk")); }); //创建一个广州的节点，加到城市中：- 广州
$("#b5").click(function () { //创建元素 //let li = $(`- 广州
`); //直接写成字符串 $("#city").append(`- 广州
`); }); script> html> -
小结
方法名 描述 $(标签的全部内容) 创建元素 父元素.append(子元素) 添加到最后一个子元素 元素.before(元素) 添加到当前元素的前面
DOM操作方法：删除元素
- 示例
<html> <head> <title>删除节点title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-3.3.1.js">script> head> <body> <input type="button" id="b1" value="从city中删除北京" /> <input type="button" id="b2" value="删除city中所有的子节点" /> <hr/> <ol id="city"> <li id="bj" name="beijing">北京li> <li id="tj" name="tianjin">天津li> <li id="cq" name="chongqing">重庆li> ol> body> <script type="text/javascript"> //从city中删除- 北京
节点 $("#b1").click(function () { //自杀 $("#bj").remove(); }); //删除city中所有的子节点，city本身没有删除 $("#b2").click(function () { //清空，他杀，删除所有的子元素 $("#city").empty(); }); script> html> - 小结
方法名 功能 元素.remove() 删除自己 父元素.empty() 清空子元素，自己还在
jQuery的事件的使用
-
事件处理函数的命名
JS中点击事件：onclick，在JQ中所有的事件都写成事件方法，没有on关键字
-
jQuery中常用的事件
事件方法 功能 blur() 失去焦点 change() 改变事件：文本框内容，下拉列表选项 click() 单击事件 dblclick() 双击 focus() 得到焦点 keydown() 按下键 keyup() 松开键 mouseover() 鼠标移上 mouseout() 鼠标移出 submit() 表单提交 hover() JQ特有的事件，悬停事件，相当于鼠标移上和鼠标出两个事件 -
示例
<html lang="en"> <head> <meta charset="UTF-8"> <title>多个事件的写法title> <script type="text/javascript" src="js/jquery-3.3.1.js">script> head> <body> 用户名： <input type="text" id="t1" value="" /> body> <script type="text/javascript"> /* 1. 文本框得到焦点和失去焦点分别显示不同的背景色 2. 松开按键，将字母转成大写，再显示在文本框中 3. 使用链式写法实现相同的功能 */ $("#t1").focus(function () { //如果处理函数中使用的对象是事件激活的对象，可以使用this。this是js对象，要转成JQ对象 $(this).css("backgroundColor", "pink"); }).blur(function () { $("#t1").css("backgroundColor", "blue"); }).keyup(function () { //获取文本的值，转成大写，再赋值给自己 $(this).val($(this).val().toUpperCase()); }); script> html> -
小结
事件方法 功能 blur() 失去焦点 focus() 得到焦点 keyup() 松开按键
jQuery中鼠标悬停事件
- 语法
- 示例
<html lang="en"> <head> <meta charset="UTF-8"> <title>hover事件title> <style type="text/css"> #girl { width: 550px; height: 550px; border: 2px solid gray; } style> <script type="text/javascript" src="js/jquery-3.3.1.js">script> <script type="text/javascript"> //页面加载完毕以后才执行 $(function () { //鼠标移上和鼠标移出 $("#girl").hover(function () { $(this).css("background-image", "url(img/g1.jpg)"); }, function () { $(this).css("background-image", "url(img/g2.jpg)"); }) }); script> head> <body> <div id="girl"> div> body> html>
jQuery循环遍历的2种方式
-
示例
<html lang="en"> <head> <meta charset="UTF-8"> <title>遍历元素title> <script type="text/javascript" src="js/jquery-3.3.1.js">script> head> <body> <select name="city" id="city"> <option>广州option> <option>深圳option> <option>东莞option> select> <input type="button" id="b1" value="jq对象的方法遍历" /> <input type="button" id="b2" value="jq对象的全局方法" /> <input type="button" id="b3" value="for-of遍历元素" /> <input type="button" id="b4" value="forEach方法" /> <script type="text/javascript"> //获取所有的option对象，获取一个集合 let options = $("#city>option"); $("#b1").click(function () { /** * 输出其中文本 * 语法：jq对象.each(function(索引号,元素对象)) * index表示每个元素的索引号 * element表示每个元素对象，注：它是一个JS对象 */ options.each(function (index, element) { alert("索引号：" + index + "，元素文本：" + $(element).text()); }); }); /** * JQ全局方法 * $.each(集合或数组, function(索引号,元素对象)) */ $("#b2").click(function () { $.each(options, function (index, element) { alert("索引号：" + index + "，元素文本：" + $(element).text()); }) }); /** * 在ES6有for-of的方法 * for(let 变量名 of 集合或数组) * 快捷键： * itar for-i循环 * iter for-of循环 */ $("#b3").click(function () { //每个元素是JS对象 for (let option of options) { alert("元素文本：" + $(option).text()); } }); /** * ES6中forEach方法 */ $("#b4").click(function () { let arr = ["Rose","Jack","NewBoy","Tom"]; arr.forEach(function (element, index) { alert("元素：" + element + ",索引：" + index); }) }); script> body> html> -
小结
jQuery遍历的2种方式 JQ对象.each(function(index,element)) $.each(集合或数组, function(index,element)) for(let 变量名 of 集合或数组) 数组对象.forEach(function(element, index))
表格隔行换色与全选全不选
- 步骤
- 隔行变色
- 页面加载完毕，得到所有的tr。
- 使用基本过滤选择器，除了第0行，设置偶数行背景色为lightgreen
- 使用基本过滤选择器，除了第0行，设置奇数行背景色为lightyellow
- 全选全不选
- 给最上面的id=all的复选框添加点击事件
- 使用属性选择器选中所有item=name的复选框，设置它的checked属性与id=all的复选框的checked属性相同。
- 示例
<html> <head> <meta charset="UTF-8"> <title>隔行换色/全选全不选title> <style type="text/css"> table { border-collapse: collapse; } tr { height: 35px; text-align: center; } a:link { text-decoration: none; } style> <script type="text/javascript" src="js/jquery-3.3.1.js">script> <script type="text/javascript"> $(function () { //不包含第1行 //$("tr:not(:first):even").css("background-color", "lightgreen"); //大于0以后的行 $("tr:gt(0):even").css("background-color", "lightgreen"); $("tr:gt(0):odd").css("background-color", "lightyellow"); //全选全不选 $("#all").click(function () { //获取最上面的选框的选项值 //获取所有复选框，让它选中：checked=true表示选中 false表示没有选中 $("input[name=item]").prop("checked", $(this).prop("checked")); }); }) script> head> <body> <table id="tab1" border="1" width="700" align="center"> <tr style="background-color: #999999;"> <td><input type="checkbox" id="all">td> <td>分类IDtd> <td>分类名称td> <td>分类描述td> <td>操作td> tr> <tr> <td><input type="checkbox" name="item">td> <td>1td> <td>手机数码td> <td>手机数码类商品td> <td><a href="">修改a>|<a href="">删除a>td> tr> <tr> <td><input type="checkbox" name="item">td> <td>2td> <td>电脑办公td> <td>电脑办公类商品td> <td><a href="">修改a>|<a href="">删除a>td> tr> <tr> <td><input type="checkbox" name="item">td> <td>3td> <td>鞋靴箱包td> <td>鞋靴箱包类商品td> <td><a href="">修改a>|<a href="">删除a>td> tr> <tr> <td><input type="checkbox" name="item">td> <td>4td> <td>家居饰品td> <td>家居饰品类商品td> <td><a href="">修改a>|<a href="">删除a>td> tr> table> body> html> - 小结
-
选中大于0的tr的偶数行的选择器怎么写？
$(“tr:gt(0):even”)
-
设置某个复选框选中的方法是什么？
prop(“checked”, true)
-
实现购物车
- 示例
<html> <head> <meta charset="UTF-8"> <title>购物车的实现title> <style type="text/css"> table { width: 400px; border-collapse: collapse; margin: auto; } td,th { text-align: center; height: 30px; } .container { width: 400px; margin: auto; text-align: right; } img { width: 100px; height: 100px; } th { background-color: lightgray; } tr:hover { background-color: lightyellow; } style> <script type="text/javascript" src="js/jquery-3.3.1.js" >script> <script type="text/javascript"> //添加1行 function addRow() { //获取文本框中值 let productName = $("#productName").val().trim(); //判断是否为空串 if(productName=="") { alert("商品名不能为空"); //让文本框获取焦点 $("#productName").focus(); return; } //创建一行添加到tbody中 $("#cart").append(`
${productName}