JQuery3.0
使用步骤
1:导入JQuery的js文件 2:使用jquery的语法获取对象 3:使用对象获取jquery的方法 使用document获取的对象叫做dom对象或者js对象 var user=document.getElementById("userId"); 使用JQuery语法获取的对象叫做JQuery对象 写法一:var user=$("#user");写法二:var user=JQuery("#user");
对象和Js对象的区别JQuery
注意事项: 两者的方法和属性不能混用 JQuery对象本质上就是js数组之间可以进行转化 js对象和jquery对象之间的转换 js------>jquery var jqobj=$(js对象); var jqobj=JQuery(js对象); jquery------>js var jsobj=jq对象[index]; var jsobj=jq对象.get(index);
JQuery的选择器
基本选择器
* 所有 #id id选择器 .class 通过class获取 "标签名" 标签选择器 多个选择器用逗号隔开 a,b
案例练习
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>01-基本选择器.html</title> <!-- 引入jQuery --> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <script type="text/javascript"> /*页面加载成功事件*/ $(function () { /* <input type="button" value="选择 id为 one 的元素." id="btn1" />*/ $("#btn1").click(function () { $("#one").css("background-color","#0cdfff") }); /* <input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />*/ $("#btn2").click(function () { $(".mini").css("background-color","#ff503e") }); /* <input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />*/ $("#btn3").click(function () { $("div").css("background-color","#0f0"); }); /* <input type="button" value="选择 所有的元素." id="btn4" />*/ $("#btn4").click(function () { $("*").css("background-color","#f9ff47") }); /* <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />*/ $("#btn5").click(function () { $("span,#two").css("background-color","#1c0d19"); }); }); </script> </head> <body> <button id="reset">手动重置页面元素</button> <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> <h3>基本选择器.</h3> <!-- 控制按钮 --> <input type="button" value="选择 id为 one 的元素." id="btn1" /> <input type="button" value="选择 class 为 mini 的所有元素." id="btn2" /> <input type="button" value="选择 元素名是 div 的所有元素." id="btn3" /> <input type="button" value="选择 所有的元素." id="btn4" /> <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" /> <br /><br /> <!-- 测试的元素 --> <div class="one" id="one"> id为one,class为one的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div. <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8" /> </div> <span id="mover">正在执行动画的span元素.</span> </body> </html>
层级选择器
a b :选择a的b后代 (eg:一共三div要id为a的里面的所有div) a>b :选择a的b孩子(eg:一共三div要id为a里面的id为b的div) a+b :选择a的b大弟弟(eg:一共三div要id为a的下面的第一个div) a~b :选择a的所有的b弟弟(eg:一共三div要id为a的下面的所有div) $('#oneId div').css("background-color","red")
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>02-层次选择器.html</title> <!-- 引入jQuery --> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <script type="text/javascript"> $(function(){ // <input type="button" value="选择 body内的所有div元素." id="btn1" /> $('#btn1').click(function () { $("body div").css("background-color", "#0f0"); }) // <input type="button" value="在body内,选择子元素是div的。" id="btn2" /> $('#btn2').click(function () { $('body>div').css("background-color", "#ff7539"); }) // <input type="button" value="选择 id为one 的下一个div元素." id="btn3" /> $('#btn3').click(function () { $('#one+div').css("background-color","#5b5cff"); }) // <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4" /> $("#btn4").click(function () { $('#two~div').css("background-color","#ffff7b"); }) }); </script> </head> <body> <h3>层次选择器.</h3> <button id="reset">手动重置页面元素</button> <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> <input type="button" value="选择 body内的所有div元素." id="btn1" /> <input type="button" value="在body内,选择子元素是div的。" id="btn2" /> <input type="button" value="选择 id为one 的下一个div元素." id="btn3" /> <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4" /> <br /> <br /> <!-- 测试的元素 --> <div class="one" id="one"> id为one,class为one的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div. <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8" /> </div> <span id="mover">正在执行动画的span元素.</span> </body> </html>
属性选择器
//[属性名] 获取元素上带有该属性名的元素对象 //[属性名='值'] 获取元素上带有该属性名且值为'zhi'的元素对象 属性选择器使用时一般都有和标签选择器联合使用 div[属性名='值'] eg:$("div[title='test']").css("backgroup-color","red");
案例:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>06-属性选择器.html</title> <!-- 引入jQuery --> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <script type="text/javascript"> $(function() { // <input type="button" value="选取含有 属性title 的div元素." id="btn1" /> $('#btn1').click(function () { $('div[title]').css("background-color","#0f0"); }) // <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2" /> $('#btn2').click(function () { $('[title="test"]').css("background-color","#ff618d"); }) }); </script> <body> <button id="reset">手动重置页面元素</button> <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label> <h3> 属性选择器.</h3> <input type="button" value="选取含有 属性title 的div元素." id="btn1" /> <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2" /> <br /><br /> <div class="one" id="one"> id为one,class为one的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div. <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8" /> </div> </body> </html>
基本过滤(eg:$(“div:first”)😉
: first 第一个 : last 最后一个 : even 偶数 : odd 奇数 : eq(index) 索引= : gt(index) 索引> : lt(index) 索引< :not(选择器) 不为
案例:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>03-基本过滤选择器.html</title> <!-- 引入jQuery --> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <script type="text/javascript"> $(function() { // <input type="button" value="选择第一个div元素." id="btn1" /> $('#btn1').click(function () { $('div:first').css("background-color","#0f0") }); // <input type="button" value="选择最后一个div元素." id="btn2" /> $('#btn2').click(function () { $('div:last').css("background-color","#6984ff") }); // <input type="button" value="选择索引值为偶数 的div元素." id="btn3" /> $('#btn3').click(function () { $('div:even').css("background-color","#6984ff") }); // <input type="button" value="选择索引值为奇数 的div元素." id="btn4" /> $('#btn4').click(function () { $('div:odd').css("background-color","#6984ff") }); // <input type="button" value="选择索引值等于3的div元素." id="btn5" /> $('#btn5').click(function () { $('div:eq(3)').css("background-color","#6984ff") }); // <input type="button" value="选择索引值大于3的div元素." id="btn6" /> $('#btn6').click(function () { $('div:gt(3)').css("background-color","#6984ff") }); // <input type="button" value="选择class不为one的 所有div元素." id="btn7" /> $('#btn7').click(function () { $('div:not(".one")').css("background-color","#6984ff") }); }); </script> </head> <body> <h3>基本过滤选择器.</h3> <button id="reset">手动重置页面元素</button> <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> <input type="button" value="选择第一个div元素." id="btn1" /> <input type="button" value="选择最后一个div元素." id="btn2" /> <input type="button" value="选择索引值为偶数 的div元素." id="btn3" /> <input type="button" value="选择索引值为奇数 的div元素." id="btn4" /> <input type="button" value="选择索引值等于3的div元素." id="btn5" /> <input type="button" value="选择索引值大于3的div元素." id="btn6" /> <input type="button" value="选择class不为one的 所有div元素." id="btn7" /> <br /><br /> <!-- 测试的元素 --> <div class="one" id="one"> id为one,class为one的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div. <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8" /> </div> <span id="mover">正在执行动画的span元素.</span> </body> </html>
表单对象属性
: enabled 可用的 : disabled 不可用的 : checked 选中的(针对的是单选框和复选框) : selected 选中的(下拉选)
案例:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表单对象属性过滤选择器.html</title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <script type="text/javascript"> $(function() { //<button id="btn1">对表单内 可用input 赋值操作.</button> $('#btn1').click(function () { $('input:enabled').val("设置"); }) //<button id="btn2">对表单内 不可用input 赋值操作.</button> $('#btn2').click(function () { $('input:disabled').val("设置"); }) //<button id="btn3">获取多选框选中的个数.</button> $('#btn3').click(function () { alert($('input:checked').length); }) //<button id="btn4">获取下拉框选中的个数.</button> $('#btn4').click(function () { alert($('select>option:selected').length); }) }); </script> </head> <body> <h3> 表单对象属性过滤选择器.</h3> <br /> <button id="btn1">对表单内 可用input 赋值操作.</button> <button id="btn2">对表单内 不可用input 赋值操作.</button> <button id="btn3">获取多选框选中的个数.</button> <button id="btn4">获取下拉框选中的个数.</button> <br /> 可用元素：<input name="add" value="可用文本框" /> <br/> 不可用元素：<input name="email" disabled="disabled" value="不可用文本框" /><br/> 可用元素： <input name="che" value="可用文本框" /><br/> 不可用元素：<input name="name" disabled="disabled" value="不可用文本框" /><br/> 多选框： <br/> <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1 <input type="checkbox" name="newsletter" value="test2" />test2 <input type="checkbox" name="newsletter" value="test3" />test3 <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4 <input type="checkbox" name="newsletter" value="test5" />test5 <br/><br/> 下拉列表1： <br/> <select name="test" multiple="multiple" style="height:100px"> <option>浙江</option> <option selected="selected">湖南</option> <option>北京</option> <option selected="selected">天津</option> <option>广州</option> <option>湖北</option> </select> <br/><br/> 下拉列表2： <br/> <select name="test2"> <option>浙江</option> <option>湖南</option> <option selected="selected">北京</option> <option>天津</option> <option>广州</option> <option>湖北</option> </select> <br/><br/> </body> </html>
jquery的DOM操作
val();获取value值/设置value值 html();获取标签体/设置标签体 text();获取标签体/设置标签体 html和text的区别: 设置内容:html就可以将内容解析,text只是作为普通文本 获取内容:html获取所有源码内容text只获取文本内容
案例:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //1 获取 username的value属性的值 alert($('input[name="username"]').val()); //2 设置 username的默认值为"许多多" $('input[name="username"]').val("许多多"); //3通过html获取div标签体的内容 alert($('body>div').html()); //4通过html设置div标签体的内容 $('body>div').html("html设置内容"); //5通过text获取div标签体的内容 alert($('body>div').text()); //6通过text设置div标签体的内容 $('body>div').text("text设置内容"); //7 两者设置值的区别(html设置的值中如果有标签可以被解析,text设置的值都充当文本信息) //8 两者获取值的区别(html获取标签体所有信息,text获取只是标签体文本信息) }); </script> <style type="text/css"> .textClass { background-color: #ff0; } </style> </head> <body> <h3>表单</h3> <form action=""> <table border="1"> <tr id="tr1"> <td><label>姓名</label></td> <td><input type="text" name="username" value="tom"/></td> </tr> <tr> <td><span>密码</span></td> <td><input type="password" name="password" /></td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女 </td> </tr> <tr> <td></td> <td> <button type="button">普通按钮</button> <input type="submit" value="提交按钮" /> <input type="reset" value="重置按钮" /> </td> </tr> </table> </form> <h3>公告信息</h3> <div><strong>未满18慎进</strong></div> <span id="sp">外span<a href='#'>内超链</a></span> </body> </html>
文档处理
内部插入 append a.append(c);将c插入到a的内部后面 prepend a.prepend(c);将c插入到a的内部前面 外部插入 after a.after(c);将c插入到a的后面 before a.before(c);将c插入到a的前面 删除 empty();清空元素(清空所有的子标签留下自己) remove();移除(自杀且断子绝孙)
案例:内部插入
<!DOCTYPE html> <html> <head> <title>01_内部插入节点.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //1.在city内部的后面追加 反恐 $('#city').append($('#fk')); //2.在city内部的前面插入 反恐 $('#city').prepend($('#fk')); }); </script> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> <li id="cq" name="chongqing">重庆</li> </ul> <ul id="love"> <li id="fk" name="fankong">反恐</li> <li id="xj" name="xingji">星际</li> </ul> </body> <script type="text/javascript"> </script> </html>
案例:外部插入
<!DOCTYPE html> <html> <head> <title>02_外部插入节点.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //1.在 p2 的后面插入 city $('#p2').after($('#city')); //2.在 p2 的前面插入 city $('#p2').before($('#city')); }); </script> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> <li id="cq" name="chongqing">重庆</li> </ul> <p id="p3">I would like to say: p3</p> <p id="p2">I would like to say: p2</p> <p id="p1">I would like to say: p1</p> </body> <script type="text/javascript"> </script> </html>
案例:删除
<!DOCTYPE html> <html> <head> <title>03_删除节点.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //1.清空ul $('#city').empty(); //2.移除ul $('#city').remove(); }); </script> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京 <p>海淀区</p> </li> <li id="tj" name="tianjin">天津 <p>河西区</p> </li> <li id="cq" name="chongqing">重庆</li> </ul> <p class="hello">Hello</p> how are <p>you?</p> </body> <script type="text/javascript"> </script> </html>
属性
attr();设置或者获取元素的属性 设置属性(给标签添加属性) 格式1:设置单个属性 jq对象.attr("属性名称":"值"); 格式2:设置多个属性 jq对象.attr({ "属性名称":"值:, "属性名称":"值:, }) 获取属性的值 jq对象.attr("属性名称"); 移除属性(删除属性) jq对象.removeAttr("属性名称")
prop();使用方式和attr一样,优先使用attr方法,若attr方法不能用,则换成prop方法(版本升级后的产物) checked和selected使用prop获取
class操作
元素.addClass("属性值");添加class属性 元素.removeClass("属性值");移除指定的样式 元素.toggleClass("属性值");有class属性就删除,没有class属性就添加
css样式
css 设置css样式 格式一:设置单个属性 jq对象.css("属性","值"); 格式二:设置多个属性 jq对象.css({ "属性":"值", "属性":"值" }) 获取css样式的值 jq对象.css("属性名称"); 获取元素的宽和高 jq对象.width(); jq对象.height();
案例一:表格的隔行换色奇数行红偶数行绿
//注意: //$("tr"):[a,b,c,d] 索引a-0,b-1,c-2,d-3 //$("tr:gt(0)")则获取新的数组[b,c,d]故此索引b-0,c-1,d-2 需求分析: 当页面加载成功后,给表格的奇数行和偶数行添加不同的背景颜色,表头除外 jQuery: 页面加载成功事件: $(function(){}) $(document).ready(function(){}); 选择器:$("tr:odd")(奇数) $("tr:even")(偶数) css样式: css方法
代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .odd{ background-color: #BCD68D; } .even{ background-color: #FFFFCC; } </style> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script> $(function () { //注意: //$("tr"):[a,b,c,d] 索引a-0,b-1,c-2,d-3 //$("tr:gt(0)")则获取新的数组[b,c,d]故此索引b-0,c-1,d-2 //页面加载成功后给表格的奇数行添加背景颜色 $("tr:gt(0):odd").css("background", "green");//奇数 //页面加载成功后给表格的偶数行添加背景颜色 $("tr:gt(0):even").css("background", "red"); }) </script> </head> <body> <table id="tab1" border="1" width="800" align="center" > <tr style="background-color: #999999;"> <th>分类ID</th> <th>分类名称</th> <th>分类描述</th> <th>操作</th> </tr> <tr> <td>1</td> <td>手机数码</td> <td>手机数码类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td>2</td> <td>电脑办公</td> <td>电脑办公类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td>3</td> <td>鞋靴箱包</td> <td>鞋靴箱包类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td>4</td> <td>家居饰品</td> <td>家居饰品类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> </table> </body> </html>
案例二:全选全不选
需求分析: 当点击头部的复选框时,让其他的复选框的状态和头部复选框的状态保持一致 技术分析: jQuery: 单击事件:click 获取头部复选框checked属性的值 获取其他复选框并设置值 步骤分析: //1:给头部复选框添加点击事件 //2:获取头部复选框的状态 //3:获取其他复选框,并设置状态
方式一:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { //1:给头部复选框添加点击事件 $("#selectAll").click(function () { //2:获取头部复选框的状态 var checkedState= $("#selectAll").prop("checked"); //3:获取其他复选框,并设置状态 $(".itemSelect").prop("checked",checkedState); }) }) </script> <body> <table id="tab1" border="1" width="800" align="center"> <tr> <td colspan="5"><input type="button" value="添加" /> <input type="button" value="删除"></td> </tr> <tr> <th><input type="checkbox" id="selectAll"></th> <th>分类ID</th> <th>分类名称</th> <th>分类描述</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>1</td> <td>手机数码</td> <td>手机数码类商品</td> <td> <a href="">修改</a>| <a href="">删除</a> </td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>2</td> <td>电脑办公</td> <td>电脑办公类商品</td> <td> <a href="">修改</a>| <a href="">删除</a> </td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>3</td> <td>鞋靴箱包</td> <td>鞋靴箱包类商品</td> <td> <a href="">修改</a>| <a href="">删除</a> </td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>4</td> <td>家居饰品</td> <td>家居饰品类商品</td> <td> <a href="">修改</a>| <a href="">删除</a> </td> </tr> </table> </body> </html>
方式二:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> function fun(checked) { //获取其他复选框,并设置状态 $(".itemSelect").prop("checked", checked); } </script> <body> <table id="tab1" border="1" width="800" align="center"> <tr> <td colspan="5"><input type="button" value="添加" /> <input type="button" value="删除"></td> </tr> <tr> <th><input type="checkbox" id="selectAll" onclick="fun(this.checked)"></th> <th>分类ID</th> <th>分类名称</th> <th>分类描述</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>1</td> <td>手机数码</td> <td>手机数码类商品</td> <td> <a href="">修改</a>| <a href="">删除</a> </td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>2</td> <td>电脑办公</td> <td>电脑办公类商品</td> <td> <a href="">修改</a>| <a href="">删除</a> </td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>3</td> <td>鞋靴箱包</td> <td>鞋靴箱包类商品</td> <td> <a href="">修改</a>| <a href="">删除</a> </td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>4</td> <td>家居饰品</td> <td>家居饰品类商品</td> <td> <a href="">修改</a>| <a href="">删除</a> </td> </tr> </table> </body> </html>
案例三:qq表情选择
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>QQ表情选择</title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} .emoji{margin:50px;} ul{overflow: hidden;} li{float: left;width: 48px;height: 48px;cursor: pointer;} .emoji img{ cursor: pointer; } </style> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script> $(function () { //给ul中li中的图片添加单击事件 $("ul>li>img").click(function () { //将被点击的图片复制一份插入到p标签内部的后面 $('.word').append($(this).clone()); //派发单击事件进行删除 rm(); }) }) function rm() { $(".word>img").click(function () { $(this).remove(); }) } </script> </head> <body> <div class="emoji"> <ul> <li><img src="../img/01.gif" height="22" width="22" alt="" /></li> <li><img src="../img/02.gif" height="22" width="22" alt="" /></li> <li><img src="../img/03.gif" height="22" width="22" alt="" /></li> <li><img src="../img/04.gif" height="22" width="22" alt="" /></li> <li><img src="../img/05.gif" height="22" width="22" alt="" /></li> <li><img src="../img/06.gif" height="22" width="22" alt="" /></li> <li><img src="../img/07.gif" height="22" width="22" alt="" /></li> <li><img src="../img/08.gif" height="22" width="22" alt="" /></li> <li><img src="../img/09.gif" height="22" width="22" alt="" /></li> <li><img src="../img/10.gif" height="22" width="22" alt="" /></li> <li><img src="../img/11.gif" height="22" width="22" alt="" /></li> <li><img src="../img/12.gif" height="22" width="22" alt="" /></li> </ul> <p class="word"> <strong>请发言：</strong> <img src="../img/12.gif" height="22" width="22" alt="" /> </p> </div> </body> </html>
总结
jQuery: 对js的封装,本质上就是一个外部的js文件 我们称之为js框架或js类库 jQuery和html整合: 在使用的页面中引入即可 <script></script> jQuery语法: $("选择器");jQuery("选择器"); 使用jq的语法获取的对象叫做jq对象,其他的都是js对象 jq对象的方法和属性不能与js的方法和属性混用 jq对象本质上是js对象数组 jq对象和js对象的转换 jq-->js jq对象[index] jq对象.get(index) js-->jq $(js对象) jQuery(js对象) jq事件: 页面加载成功事件: $(function(){}) $(document).ready(function(){}) click(function(){}) change(function(){}) blur(function(){}) focus(function(){}) submit(function(){}) 事件和事件源的绑定: 派发: jq对象.事件方法(function(){}); 选择器: 基本选择器: * #id .class 标签 多个, 层级选择器: a b 后代 a>b 子代 a+b 大弟弟 a~b 所有弟弟 属性选择器: 标签[属性名称="值"] 基本过滤选择器: :first :last :even :odd :eq(index) :gt(index) :lt(index) :not("选择器") 表单对象属性选择器: :enabled :disabled :checked :selected 文档处理: 内部插入: a.append(b); a.prepend(b); 外部插入: a.after(b); a.before(b); 删除: empty() remove() 属性: attr() attr("属性","值") attr({"属性":"值", "属性":"值" }) attr("属性名") prop() class() addClass("值") removeClass() toggleClass("值") css: css("属性","值") css({"属性":"值", "属性":"值" }) css("属性名")
