jquery 第三章
1、回顾
$(document).ready(function(){
})
$(function(){
})
ID选择器、类选择器、元素选择器
层次选择器：空格（上文下：tr td{}）
属性过滤器：[属性=值] input[type=button]
表单：
:checked 被选中的单选框或复选框
:selected 被选中的下拉框
表单选择器：
:input
:button
2、本章目标
掌握dom操作的分类
掌握jquery的dom操作
3、dom操作分类
dom core:对节点进行操作，添加、修改、删除、查找
html core：对页面元素的属性进行操作，比如：document.form.action = 'xxxServlet'
css core:对页面样式进行操作，比如：document.getElementById("txt").style.display = 'none'
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn1").click(function(){ //获取第一个li标签 var v=$("#aihao li:first").text(); alert(v); }) $("#btn2").click(function(){ //获取ul的id属性 var s=$("ul").attr("id") alert(s) }) $("#btn3").click(function(){ //li节点字符串 var v=$("<li>足球</li>") //给ul添加一个li对象 $("ul").append(v); }) $("#btn4").click(function(){ //li节点字符串 var v=$("<li class='paiqiu'>排球</li>") //追加到ul中 v.appendTo("ul") }) $("#btn5").click(function(){ //li节点字符串 var v=$("<li>游泳</li>") //把li对象添加到li对象最前面:下面两种用法均可 //$("ul").prepend(v) v.prependTo($("ul")) }) $("#btn6").click(function(){ var v=$("<li>运动</li>") //把运动插入到足球前面 v.insertBefore($("ul li:eq(1)")) }) $("#btn7").click(function(){ var v=$("<li>跑步</li>") //把跑步插入到足球后面 $("ul li:eq(1)").after(v) //把跑步插入到乒乓球之前 //$("ul li:eq(2)").before(v) }) $("#btn8").click(function(){ //选取ul标签里最后一个节点然后删除 $("ul li:last").remove() }) $("#btn9").click(function(){ //清空节点 $("ul").empty() }) }) </script> </head> <body> <ul id="aihao"> <li>篮球</li> <li>足球</li> <li>乒乓球</li> </ul> <button type="button" id="btn1">获取第一个li标签</button> <button type="button" id="btn2">获取ul的id属性</button> <button type="button" id="btn3">给ul中添加一个li标签</button> <button type="button" id="btn4">给ul中追加一个li标签 带属性</button> <button type="button" id="btn5">给ul中第一个li前面插一个li标签</button> <button type="button" id="btn6">把运动插入到足球前面</button> <button type="button" id="btn7">把跑步插入到足球后面</button> <button type="button" id="btn8">删除乒乓球节点</button> <button type="button" id="btn9">删除全部li节点</button> </body> </html>
4、jquery查找节点元素
就是通过前面学习的各种选择器，选取出需要操作的节点对象，然后调用相应的方法即可
5、jquery创建节点元素(重点！！！)
append(内容)、appendTo(节点对象) --追加到后面
prepend(内容)、prependTo(节点对象) --追加到前面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 150px; border: 1px red solid; float: left; margin-left: 10px; } </style> <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#div1 ol li").click(function(){ ///把当前项追加到右边的ol窗口,当前是一个移动操作 $(this).appendTo($("#div2 ol")) }) $("#div2 ol li").click(function(){ //把当前项先复制 然后加到左边div 的ol中 $(this).clone().appendTo("#div1 ol") }) }) </script> </head> <body> <div id="div1"> <ol> <li>java</li> <li>js</li> <li>jquery</li> </ol> </div> <div id="div2"> <ol> <li>张三</li> <li>李四</li> <li>王五</li> </ol> </div> </body> </html>
6、jquery插入节点元素
after(内容)、insertAfter(节点对象) --把内容添加到后面
before(内容)、insertBefore(节点对象) -- 把内容添加到前面
7、jquery删除节点元素(重点！！！)
remove() 移除、删除
empty() 清空
8、jquery复制节点
节点对象.clone()
9、jquery替换节点
旧节点对象.replaceWith(html)
新节点对象.replaceAll(旧节点对象)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("input[type=button]").click(function(){ //$(this).replaceWith("<p>试试就试试</p>") $("<p>试试就试试</p>").replaceAll($(this)) }) }) </script> </head> <body> <input type="button" value="点我试试"/> </body> </html>
10、jquery包裹节点
节点对象.wrap(html) 单个包裹
节点对象.wrapAll(html) 全包包裹
节点对象.wrapInner(html) 内部包裹
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ $("span").wrap("<div style='border: 1px solid red'></div>"); }) $("#btn2").click(function(){ $("span").wrapAll("<div style='border: 1px solid red'></div>"); }) $("#btn3").click(function(){ $("p").wrapInner("<div style='border: 1px solid red'></div>"); }) }) </script> </head> <body> <span>aaa</span> <br /> <span>abbb</span> <br /> <div style="border: 1px solid gray;"> <p>aabcdef</p> </div> <button type="button" id="btn1">单个包裹</button> <button type="button" id="btn2">全部包裹</button> <button type="button" id="btn3">内部包裹</button> </body> </html>
11、jquery操作节点属性(重点！！！)
节点对象.attr("属性名") 获取相应属性的值
节点对象.attr("属性名","值") 或 节点对象.attr({"属性1":"值1","属性2":"值2".......}) 给属性赋值
节点对象.removeAttr("属性名") 移除某属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ var v=$("input").attr("name") alert(v) }) $("#btn2").click(function(){ $("input").attr("value",123) }) $("#btn3").click(function(){ $("input").removeAttr("id") }) }) </script> </head> <body> <input type="text" name="uname" id="uid" value="默认值" /> <br /> <button type="button" id="btn1"> 获取input标签name 属性的值</button> <button type="button" id="btn2"> 设置input标签value 属性的值</button> <button type="button" id="btn3"> 删除input标签id 属性的值</button> </body> </html>
12、jquery操作样式
节点对象.addClass("样式名") 添加样式
节点对象.removeClass("样式名") 移除样式
节点对象.toggleClass("样式名") 切换样式
节点对象.hasClass("样式名") 判断是否有某样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .one{ border: 1px red solid; } .two{ width: 40px; height: 60px; border: 3px greenyellow dotted; } .three{ border: 6px darkgoldenrod solid; } </style> <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ $("div").addClass("two") }) $("#btn2").click(function(){ $("div").removeClass("one") }) //给div切换样式 是来回切换 $("#btn3").click(function(){ $("div").toggleClass("three") }) //判断div是否有样式 下面两种均可 $("#btn4").click(function(){ //var v=$("div").hasClass("three") var v=$("div").is("three") alert(v) }) }) </script> </head> <body> <div class="one"> 测试内容!!!!! </div> <br /> <button type="button" id="btn1"> 给div添加样式</button> <button type="button" id="btn2"> 给div移除样式</button> <button type="button" id="btn3"> 给div切换样式</button> <button type="button" id="btn4"> 判断div是否有样式</button> </body> </html>
13、jquery操作html、text、val(重点！！！)
节点对象.html() 类似于innerHTML ，获取节点的html内容
节点对象.html(html) 设置节点的html内容
节点对象.text() 类似于innerText，获取节点的纯文本
节点对象.text(html) 设置节点的内容
节点对象.val() 类似value属性，获取节点的值
节点对象.val(内容) 设置节点的值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ var v=$("div").html() alert(v) }) $("#btn2").click(function(){ var v=$("div").text() alert(v) }) $("#btn3").click(function(){ $("div").html("<p>新内容</p>") }) $("#btn4").click(function(){ $("div").text("<p>新内容</p>") }) $("#btn5").click(function(){ var v=$("input").val() alert(v) }) $("#btn6").click(function(){ $("input").val("asdasdasd") }) }) </script> </head> <body> <div class="one"> <span> 测试内容!!!!! </span> </div> <br /> <button type="button" id="btn1">获取div的html内容</button> <button type="button" id="btn2">获取div的text内容</button> <button type="button" id="btn3">设置div的html内容</button> <button type="button" id="btn4">设置div的text内容</button> <br /> <input type="text"/> <button type="button" id="btn5">获取input的value</button> <button type="button" id="btn6">设置input的value</button> </body> </html>
14、jquery遍历节点
节点对象.children() 获取节点的所有子节点
节点对象.next() 获取节点的下一个同级节点
节点对象.prev() 获取节点的上一个同级节点
节点对象.siblings() 获取节点的所有同级节点
节点对象.parent() 获取节点的父节点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ var cs=$("div").children(); //遍历 for(var i=0;i<cs.length;i++){ var c=cs[i].innerText //alert(c) } }) $("#btn2").click(function(){ var v=$("p").prev().text() alert(v) }) $("#btn3").click(function(){ var v=$("p").next().text() alert(v) }) $("#btn4").click(function(){ var v=$("p").siblings() alert(v.length) }) $("#btn5").click(function(){ var v=$("p").parent().html() alert(v) }) }) </script> </head> <body> <div class="one"> <span> 测试内容1 </span> <p>测试内容2</p> <b>测试内容3</b> </div> <br /> <button type="button" id="btn1">获取div的所有子节点</button> <button type="button" id="btn2">获取p的上一个同级元素</button> <button type="button" id="btn3">获取p的下一个同级元素</button> <button type="button" id="btn4">获取p的所有同级元素</button> <button type="button" id="btn5">获取p的父节点</button> </body> </html>
15、jquer操作样式(重点！！！)
节点.css("样式名","值") 给节点设置样式
节点.css({"样式1":"值1","样式2":"值2".....})
节点.css("opacity","0.5") 设置透明度
节点.height() 获取节点的高度
节点.height(值) 设置节点的高度
节点.width() 获取节点的宽度
节点.width(值) 设置节点的宽度
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ $("div").width("100px") $("div").height("200px") $("div").css("border","1px red solid") $("div").css("opacity","0.4") }) }) </script> </head> <body> <div class="one"> <span> 测试内容!!!!! </span> </div> <br /> <button type="button" id="btn1">设置div的 高度,宽度 ,透明度,边框</button> </body> </html>
16、jquery操作定位(了解)
节点.offset() 相对当前页面
节点.position() 绝对父节点
返回值均有两个属性：left和top
17、jquery滚动操作(回到顶端)
节点.scrollTop() 获取滚动到页面顶部的距离
节点.scrollLeft() 获取滚动到页面的左边的距离
节点.scrollTop(值)
节点.scrollLeft(值)
作业
实现列表框左右选项选择移动
分析
使用列表框 其中有多选的属性multiple="multiple"
其次考察.clone().appendTo 和remove
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript"> $(function(){ //选中添加到右边 $("#btn1").click(function(){ $("#Select1 option:selected").clone().appendTo("#Select2"); $("#Select1 option:selected").remove(); }) //全部添加到右边 $("#btn2").click(function(){ $("#Select1 option").clone().appendTo("#Select2"); $("#Select1 option").remove(); }) //选中添加到左边 $("#btn3").click(function(){ $("#Select2 option:selected").clone().appendTo("#Select1"); $("#Select2 option:selected").remove(); }) //全部删除到左边 $("#btn4").click(function(){ $("#Select2 option").clone().appendTo("#Select1"); $("#Select2 option").remove(); }) }) </script> <body> <table style="width: 600px;"> <tr> <td style="width: 250px;"> <select id="Select1" size="4" style="height: 200px; width: 80px;" multiple="multiple"> <option>选项1</option> <option>选项2</option> <option>选项3</option> <option>选项4</option> <option>选项5</option> <option>选项6</option> </select> </td> <td style="width: 100px;"> <input id="btn1" type="button" value="选中添加到右边" /><br /> <input id="btn2" type="button" value="全部添加到右边" /><br /> <input id="btn3" type="button" value="选中删除到左边" /><br /> <input id="btn4" type="button" value="全部删除到左边" /> </td> <td style="width: 250px;"> <select id="Select2" size="4" style="height: 200px; width: 80px;" multiple="multiple"> <option>选项8</option> </select> </td> </tr> </table> </body> </html>
效果
