阅读量:0
js库 -> .js文件
快速入门
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script type="text/javascript">--> <!-- window.onload = function () {--> <!-- var btn01 = document.getElementById("btn01");--> <!-- btn01.onclick = function () {--> <!-- alert("hello js");--> <!-- }--> <!-- }--> <!-- </script>--> <script type="text/javascript" src="script/jquery-3.7.1.js"></script> <script> $(function () { var $btn01 = $("#btn01"); $btn01.click(function (){ alert("hello,jquery") }) }); </script> </head> <body> <button id="btn01">按钮</button> </body> </html>$(function() {...})，用于确保页面的DOM完全加载后才执行代码。- 获取对象时，在id前必须有#符号，jquery对象的命名以$开头
- $btn01是个jquery对象，是对dom对象的包装
- jquery是个数组对象
jquery对象和DOM对象
DOM对象转成jquery对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="script/jquery-3.7.1.js"></script> <script> $(function () { var username = document.getElementById("username"); alert(username.value); var $username = $(username); alert($username.val()); }); </script> </head> <body> <input type="text" id="username" value="123"> </body> </html>jquery对象转成DOM对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="script/jquery-3.7.1.js"></script> <script> $(function () { var $username = $("#username"); //可以通过[index]来获取，也可以通过get(index) var username1 = $username[0]; var username2 = $username.get(0); alert(username1.value); }); </script> </head> <body> <input type="text" id="username" value="123"> </body> </html>jquery选择器
介绍
基本选择器
层次选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器应用实例</title> <style type="text/css"> div, span { width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div.mini { width: 80px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } </style> <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function () { //1. 改变 <body> 内所有 <div> 的背景色为 #0000FF $("#b1").click( function () { $("div").css("background","#0000FF"); } ) //2. 改变 <body> 内子 <div>[第一层div] 的背景色为 #FF0033 $("#b2").click( function () { $("body>div").css("background","#FF0033"); } ) //3. 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF $("#b3").click( function () { $("#one + div").css("background","#0000FF"); } ) //4. 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #0000FF $("#b4").click( function () { $("#two ~ div").css("background","#0000FF"); } ) //5. 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF $("#b5").click( function () { $("#two").siblings("div").css("background","#0000FF"); } ) }); </script> </head> <body> <input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/> <input type="button" value="改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/> <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/> <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/> <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/> <hr/> <div id="one" class="mini"> div id为one </div> <div id="two"> div id为two <div id="two01"> id two01 </div> <div id="two02"> id two02 </div> </div> <div id="three" class="mini"> div id为three <div id="three01"> id three01 </div> </div> </body> </html>基础过滤选择器
<script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function (){ //*****改变第一个 div 元素的背景色为 #0000FF $("#b1").click( function () { $("div:first").css("background","#0000FF"); } ) //***改变class不为 one 的所有 div 元素的背景色为 #0000FF $("#b2").click( function () { $("div:not(.one)").css("background","#0000FF"); } ) //********改变索引值为偶数的 div 元素的背景色为 #0000FF $("#b3").click( function () { $("div:even(even)").css("background","#0000FF"); } ) //*****改变索引值为大于 3 的 div 元素的背景色为 #0000FF $("#b4").click( function () { $("div:gt(3)").css("background","#0000FF"); } ) }); </script>内容过滤选择器
<script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function () { //********改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF $("#b1").click( function () { $("div:contains('di')").css("background", "#0000FF") } ) //**************改变不包含子元素(或者文本元素) 的 div 的背景色为 pink $("#b2").click( function () { $("div:empty").css("background", "pink") } ) //******改变含有 class 为 mini 元素的 div 元素的背景色为 green $("#b3").click( function () { //这个写法是选择 有 class='.mini' 的div的父元素(div) $("div:has('.mini')").css("background", "pink") //这个是选择有 class='.mini' div $("div.mini").css("background", "pink"); } ) //****改变含有子元素(或者文本元素)的div元素的背景色为 yellow $("#b4").click( function () { $("div:parent").css("background", "yellow") } ) //***改变不含有文本 di; 的 div 元素的背景色 pink //不要求，小伙伴记住, 但是需要可以看懂. $("#b6").click( function () { $("div:not(:contains('di'))").css("background", "pink") } ) });可见度过滤选择器
<script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function () { //*****改变所有可见的div元素的背景色为 #0000FF $("#b1").click( function () { $("div:visible").css("background", "red"); } ) //**选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF $("#b2").click( function () { $("div:hidden").css("background", "green"); $("div:hidden").show(); } ) //**选取所有的文本隐藏域, 并打印它们的值 $("#b3").click( function () { //1. 先得到所有的hidden 元素 //2. $inputs 是一个jquery对象，而且是数组对象 var $inputs = $("input:hidden"); //alert("length= " + $inputs.length) //3. 遍历-认真 //方式1 - for // for (var i = 0; i < $inputs.length; i++) { // //这里input 就是一个dom对象 // var input = $inputs[i]; // console.log("值是= " + input.value); // } //方式2 - jquery each() 可以对数组遍历 // 老韩说明 //(1) each 方法，遍历时，会将 $inputs 数组的元素 // 取出, 传给 function() {} -> this $inputs.each(function (){ //这里可以使用this获取每次遍历的对象 //this 对象是是dom对象 console.log("值是(dom方式)=" + this.value); //也可以将this -> jquery 对象使用jquery方法取值 console.log("值是(jquery方式)=" + $(this).val()) }) } ) }); </script>属性过滤选择器
<script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function () { //*****含有属性title 的div元素. $("#b1").click( function () { $("div[title]").css("background", "green"); } ) //****属性title值等于test的div元素 $("#b2").click( function () { $("div[title='test']").css("background", "green"); } ) //属性title值不等于test的div元素(没有属性title的也将被选中) $("#b3").click( function () { $("div[title!='test']").css("background", "green"); } ) //属性title值 以te开始 的div元素 $("#b4").click( function () { $("div[title^='te']").css("background", "green"); } ) //属性title值 以est结束 的div元素 $("#b5").click( function () { $("div[title$='est']").css("background", "green"); } ) //属性title值 含有es的div元素 $("#b6").click( function () { $("div[title *= 'es']").css("background", "green"); } ) //选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素 $("#b7").click( function () { $("div[id][title *= 'es']").css("background", "green"); } ) }); </script>子元素过滤选择器
<script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function () { //****每个class为one的div父元素下的第2个子元素 $("#b1").click( function () { $("div .one:nth-child(2)").css("background", "yellow"); } ) //*****每个class为one的div父元素下的第一个子元素 //老师再说 $("div .one") $("#b2").click( function () { $("div .one:first-child").css("background", "green"); //$("div .one:nth-child(1)").css("background", "green"); } ) //*****每个class为one的div父元素下的最后一个子元素 $("#b3").click( function () { $("div .one:last-child").css("background", "red"); } ) //**如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素 $("#b4").click( function () { $("div .one:only-child").css("background", "pink"); } ) }); </script>表单属性过滤选择器
<script type="text/javascript"> $(function (){ //*利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值 $("#b1").click( function () { //老师解读 //$jquery对象.val() , 如果() 是空的，就表示返回value //$jquery对象.val('值') , 就表示给该对象value设置值 $("input[type='text']:enabled").val("台球"); } ) //利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用 <input> 元素的值 $("#b2").click( function () { //老师解读 //$jquery对象.val() , 如果() 是空的，就表示返回value //$jquery对象.val('值') , 就表示给该对象value设置值 $("input[type='text']:disabled").val("足球"); } ) //利用 jQuery 对象的 length 属性获取多选框/复选框选中的个数 $("#b3").click( function () { alert($("input[type='checkbox']:checked").length); } ) //****利用 jQuery 对象的 text() 方法获取下拉框选中的内容 $("#b4").click( function () { //如果我们希望选择指定的select , 可以加入属性过滤选择器 //var $selects = $("select[属性='值'] option:selected"); var $selects = $("select option:selected"); $selects.each(function (){ alert("你选择了= " + $(this).text()) }) } ) }); </script>表单选择器
<script type="text/javascript"> $(function () { //选择所有的button //这里我们就不绑定事件，直接演示 //老师解读 $(":button") 会选择<input type="button" value="按钮1"/><br/> //还会选择 <button>按钮2</button> var $button = $(":button"); alert("$button 大小=" + $button.length)//3 //得到type="button" 的元素 //老韩解读 $("input[type='button']") 只会得到 <input type="button" value="按钮1"/> var $button2 = $("input[type='button']"); alert("$button2 大小=" + $button2.length)//1 //得到<button />按照元素标签取值 //老韩解读 $("button") 只会按照元素标签获取 <button>按钮2</button> var $button3 = $("button"); alert("$button3 大小=" + $button3.length)//2 }); </script>DOM操作
设置、修改属性
attr()
创建节点
反恐会移动到天津后面
删除节点
复制节点
替换节点
属性操作
样式操作
<script type="text/javascript"> $(function () { //获取 class 和设置 class 都可以使用 attr() 方法来完成.(给id 为first添加 .one 样式) $("#b1").click(function (){ $("#first").attr("class", "one"); }) //追加样式: addClass() $("#b2").click(function (){ $("#first").addClass("one"); }) //移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class $("#b3").click(function (){ $("#first").removeClass(); }) //切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它 $("#b4").click(function (){ $("#first").toggleClass("one"); }) //判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false $("#b5").click(function (){ alert($("#first").hasClass("one")); }) }); </script>常用遍历节点方法
<script type="text/javascript"> $(function () { //**查找所有子元素（class 为 one 的div的子元素) $("#b1").click(function () { //我们可以使用这样的方式$("div[class='one']") 来选择 //class 为 one 的div $("div[class='one']").children().each(function () { alert("子div的内容是~~~ " + $(this).text()); }) // $("div.one").children().each(function (){ // alert("子div的内容是= " + $(this).text()); // }) //指定获取到第几个子元素, eq(1) 表示得到第2个子元素 //alert($("div.one").children().eq(1).text()); }) //***获取后面的同辈div元素（class 为 one 的div的) $("#b2").click(function () { //老师解读 //1. $("div.one") 选择到 class = one 的 div //2. nextAll() 获取到后面所有的同辈元素 //3. filter("div"), 获取到后面所有的同辈元素, 进行过滤，只得到div //4. each 遍历 $("div.one").nextAll().filter("div").each(function () { alert("后面同辈div的内容是= " + $(this).text()); }) //如果我们希望得到后面同辈元素的第几个，可以eq //获取到后面同辈div元素的第2个 alert("后面同辈div元素的第2个的内容=" + $("div.one").nextAll().filter("div").eq(1).text());//aaaa.. //如果我们希望得到的是紧邻的面同辈元素 alert("紧邻的面同辈元素=" + $("div.one").next().text());//ttt... }) //**获取前面的同辈div元素（class 为 one 的div的) $("#b3").click(function () { //遍历 // $("div.one").prevAll().filter("div").each(function (){ // alert("div的内容= " + $(this).text()); // }) //得到前面的同辈元素第4个 //$("div.one").prevAll().eq(3); //得到前面的紧邻同辈元素 alert($("div.one").prev().text())//ccccc }) //**获取所有的同辈div元素（class 为 one 的div的) $("#b4").click(function () { $("div.one").siblings().filter("div").each(function () { alert("同辈div text= " + $(this).text()) }) }) }) </script>CSS操作
