jQuery入门
基本介绍
能看懂和修改就行,不用背
val()、text()之类括号里不写东西是读取,写了就是赋值
div.(名) div和.之间不要加空格 不然会无效
- 聊一聊框架和库的区别
框架:
对整个开发流程都做了一个限制和规定——在某个模块创建某种文件,并且将相应的库也封装好了——可以直接调用对应的API。
所以相对来说框架的学习成本要高一些,因为要熟悉该框架的开发流程和规范是怎么样的,还要去了解对应的一些API
库:
封装了一些原生的代码,并提供对应的API
下载和使用
一般开发使用这个压缩就可以,点进去之后另存为保存文件:
使用的时候需要使用script标签引入jQuery 库文件 (下面的script是文件夹的名字)
<script type=”text/javascript” src=”script/jquery-3.6.0.min.js”></script>
简单案例
先回顾一下原生的js
<script type="text/javascript"> window.onload = function () { var btn01 = document.getElementById("btn01"); 使用js的时候得到的是dom对象 btn01.onclick = function () { alert("alert by js") } } </script>
使用jquery
<script type="text/javascript" src="script/jquery-3.6.0.min.js"></script> 先引入jquery库文件,注意不要在引入标签里写 <script type="text/javascript"> $(function () { var $btn01 = $("#btn01"); $btn01.click(function () { alert("alert by jquery") }) }); </script>
使用细节:
1. 初次使用 jquery , 你会觉得语法比较奇怪,其实 jquery 的底层仍然是 js,只是做了封装
2. $(function () {} )等价原生js的window.onload = function () {} ,当页面加载完毕就会执行 function(){}
3. $() 可以理解成是一个函数 [可以定义 function $(id) {} …]
4. $(“#btn01”) 底层: document.getElementById(“btn01”)
5. 注意 $(“#btn01”) 不能写成 $(“btn01”) ,一定要记得加#!!! 不然无法获取对象
6. 通过$(“#btn01”) 返回的对象就是 jquery 对象(即进行了封装),而不是原生的 dom对象
7.这时我们就可以使用 jquery 对象的方法,事件等,通过 debug 我们发现 jquery 对象是数组对象
8.编程中,规定 jquery 对象的命名以$开头(不是必须,但是一般都会遵守约定)
编程小技巧:
DOM对象和Jquery对象的相互转换
DOM -> JQuery
演示:
<script type="text/javascript" src="script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function () { //演示通过 dom 对象来获取输入框的 value // username 就是 dom 对象 var username = document.getElementById("username"); alert("username value by dom = " + username.value); //通过 jquery 对象来获取输入框的 value // 把 username dom 对象转成 jquery 对象 var $username = $(username); //使用 jquery 的方法来获取 value alert("$username value by jquery " + $username.val()) }) </script>
dom对象类型:
jquery对象类型:
JQuery – > DOM
演示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery 对象转成 dom 对象</title> <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function () { //得到 jquery 对象 var $username = $("#username"); alert("$username value= " + $username.val()) //准备把 jquery 对象->dom // 说明 : // (1)jquery 是一个数组对象,封装了dom 对象 // (2)可以通过[index] 来获取,也可以通过 get(index) // (3)一般来说 index 是 0 // 方式 1: var username = $username[0]; alert(username)// 输出 username 是 object HtmlInputElement alert("username value=" + username.value); //方式 2 var username = $username.get(0); alert("username value~~~=" + username.value) }) </script> </head> <body> 用户名 <input type="text" id="username" name="username" value="紫英"/> </body> </html>
jquery选择器
基本介绍
异常处理演示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery 选择器使用特点</title> <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> //如果是dom对象,获取null的value会报错 var username = document.getElementById("username"); alert(username.value); //如果我们希望 dom 对象可以处理 null if (username) { alert("username value=" + username.value) } else { alert("没有获取到对应 id 的 dom 对象") }
//如果是 jquery 对象, 获取null的value // 如果没有获取到,调用val()并不会报错,而是直接alert(undefined), 加强了程序的健壮性 var $username = $("#username"); alert($username.val())
</script>
</head>
<body>
用户名 <input type="text" id="username~" name="username" value="紫英"/>
</body>
</html>
基本选择器
- 基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class和标签名来查找 DOM 元素
1、#id
2、Element
3、class
4、*
5、selector1, selector2, selectorN(组合选择器)
案例演示:
<!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: 60px; 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. 改变 id 为 one 的元素的背景色为 #0000FF $("btn01").click(function () { $("#one").css("background"," #0000FF") }) //2. 改变 class 为 mini 的所有元素的背景色为 #FF0033 $("#b2").click( function () { $(".mini").css("background", "#FF0033"); } ) //3. 改变元素名为 <div> 的所有元素的背景色为 #00FFFF $("#b3").click( function () { $("div").css("background", "#00FFFF"); } ) //4. 改变所有元素的背景色为 #00FF33 $("#b4").click( function (){ $("*").css("background", "#00FF33"); } ) //5. 改变所有的<span>元素和 id 为 two class为 .mini 的元素的背景色为 #3399FF $("#b5").click( function (){ $("#two,.mini,span").css("background", " #3399FF"); } ) }) </script> </head> <body> <input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/> <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b2"/> <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b3"/> <input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/> <input type="button" value=" 改变所有的<span>元素和 id 为 two class为 .mini 的元素的背景色为 #3399FF" id="b5"/> <hr/> <div id="one" class="mini">div id为one</div> <div id="two">div id为two</div> <div id="three" class="mini">div id为three</div> <span id="s_one" class="mini">span one</span> <span id="s_two">span two</span> </body> </html>
层次选择器
1 、ancestor descendant
2、parent > child(>可以省略)
3、prev + next
4、prev ~ siblings
案例演示:
<!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>
基础过滤选择器
这里的冒号(:)就可以看成是过滤条件
1、:first 用法: $(“tr:first”) ;
2、:last
用法: $(“tr:last”)
所谓最后一个指的是是从上到下,从左到右去搜,最后的一个
3、:not(selector)
4、:even
5、: odd
6、:eq(index)
7、:gt(index)
8、:lt(index)
9、:header(固定写法)
10、:animated(固定写法)
<!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 (){ //*****改变第一个 div 元素的背景色为 #0000FF $("#b1").click( function (){ // $("div:first").css("background", "#0000FF"); $("div:eq(0)").css("background", "#00FF00"); } ) //*****改变最后一个 div 元素的背景色为 #0000FF //小伙伴可以理解成 基础过滤器就是写 简单select //所谓最后一个指的是是从上到下,从左到右去搜,最后的一个 //老韩要求:不需要你记得住, 但是可以看懂... $("#b2").click( function (){ $("div:last").css("background", "#0000FF"); } ) //***改变class不为 one 的所有 div 元素的背景色为 #0000FF $("#b3").click( function (){ $("div:not(.one)").css("background", "#0000FF"); } ) //********改变索引值为偶数的 div 元素的背景色为 #0000FF $("#b4").click( function (){ $("div:even").css("background", "#0000FF"); } ) //********改变索引值为奇数的 div 元素的背景色为 #0000FF $("#b5").click( function (){ $("div:odd").css("background", "#0000FF"); } ) //*****改变索引值为大于 3 的 div 元素的背景色为 #0000FF $("#b6").click( function (){ $("div:gt(3)").css("background", "#0000FF"); } ) //改变索引值为等于 3 的 div 元素的背景色为 #0000FF $("#b7").click( function (){ $("div:eq(3)").css("background", "#0000FF"); } ) //**改变索引值为小于 3 的 div 元素的背景色为 #0000FF $("#b8").click( function (){ $("div:lt(3)").css("background", "#0000FF"); } ) //****改变所有的标题元素的背景色为 #0000FF $("#b9").click( function (){ $(":header").css("background", "#0000FF"); } ) }); </script> </head> <body> <h1>H1标题</h1> <h2>H2标题</h2> <h3>H3标题</h3> <input type="button" value="改变第一个 div 元素的背景色为 #0000FF" id="b1"/> <input type="button" value="改变最后一个 div 元素的背景色为 #0000FF" id="b2"/> <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF" id="b3"/> <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF" id="b4"/> <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF" id="b5"/> <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6"/> <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF" id="b7"/> <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF" id="b8"/> <input type="button" value=" 改变所有的标题元素的背景色为 #0000FF" id="b9"/> <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="one"> div id为three class one <div id="three01"> id three01 </div> </div> </body> </html>
内容过滤选择器
1、:contains(text)
2、:empty
3、:has(selector)
4、:parent
5、:not
说明:取反
<!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 () { //********改变含有文本 ‘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) has表示含有嘛 //$("div:has('.mini')").css("background", "pink")//加‘’ 这个是选择有 class='.mini' div $("div.mini").css("background", "pink"); } ) //****改变含有子元素(或者文本元素)的div元素的背景色为 yellow $("#b4").click( function () { $("div:parent").css("background", "yellow") } ) //****改变索引值为大于 3 的 div 元素的背景色为 #0000FF $("#b5").click( function () { $("div:gt(3)").css("background", "#0000FF") } ) //***改变不含有文本 di; 的 div 元素的背景色 pink //不要求,小伙伴记住, 但是需要可以看懂. $("#b6").click( function () { $("div:not(:contains('di'))").css("background", "pink") } ) }); </script> </head> <body> <input type="button" value="改变含有文本 ‘di’ 的 div 元素的背景色为 black" id="b1"/> <input type="button" value="改变不包含子元素(或者文本元素) 的 div 的背景色为 pink" id="b2"/> <input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 green" id="b3"/> <input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 yellow" id="b4"/> <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b5"/> <input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色 pink" id="b6"/> <hr/> <div id="xxxx"> <div id="one" class="mini"> div id为one </div> </div> <div id="two"> div id为two <div id="two01"> id two01 </div> <div id="two02"> id two02 </div> </div> <div id="three" class="one"> div id为three class one <div id="three01"> id three01 </div> </div> <div id="four" class="one"> XXXXXXXXXX </div> <div id="five" class="one"></div> <div id="mover"> 执行动画 </div> </body> </html>
可见度过滤选择器
1、:hidden
2、:visible(包含each()方法)
<!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: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } div.visible { display: none; } </style> <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> </head> <body> <input type="button" value="改变所有可见的div元素的背景色为 #0000FF" id="b1"/> <br/><br/> <input type="button" value="选取所有不可见的div, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF" id="b2"/> <br/><br/> <input type="button" value="选取所有的文本隐藏域, 并打印它们的值" id="b3"/> <br/><br/> <hr/> <input type="hidden" value="hidden1"/> <input type="hidden" value="hidden2"/> <input type="hidden" value="hidden3"/> <input type="hidden" value="hidden4"/> <div id="one" class="visible"> div id为one </div> <div id="two" class="visible"> div id为two </div> <div id="three" class="one"> div id为three </div> </body> </html>
属性过滤选择器
- 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
1、[attribute]
2、[attribute=value]
3、[attribute!=value]
4、[attribute^=value]
5、[attribute$=value]用法: $(“input[name$=’letter’]”)
6、[attribute*=value]用法: $(“input[name*=’man’]”)
7、[attributeFilter1][attributeFilter2][attributeFilterN]
<!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: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } div.visible { display: none; } </style> <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> </head> <body> <input type="button" value="含有属性title 的div元素." id="b1"/><br/><br/> <input type="button" value="属性title值等于test的div元素" id="b2"/><br/><br/> <input type="button" value="属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/><br/><br/> <input type="button" value="属性title值 以te开始 的div元素" id="b4"/><br/><br/> <input type="button" value="属性title值 以est结束 的div元素" id="b5"/><br/><br/> <input type="button" value="属性title值 含有es的div元素" id="b6"/><br/><br/> <input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/><br/><br/> <div id="one" title="test"> div id为one test </div> <div id="one-1" title="texxx"> div id为one-1 texxx </div> <div id="one-2" title="xxxest"> div id为one-2 xxxest </div> <div id="one-3" title="xxxesxxxxxt"> div id为one-3 xxxesxxxxxt </div> <div id="two" title="ate"> div id为two </div> <div id="three" class="one"> div id为three </div> </body> </html>
子元素过滤选择器
这里的索引是从1开始的
1、:nth-child(index/even/odd/equation)
2、:first-child
3、:last-child
4、: only-child
5. nth-child() 选择器详解如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子元素过滤选择器示例-应用实例</title> <style type="text/css"> div, span { width: 140px; height: 70px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div.visible { display: none; } </style> <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> </head> <body> <input type="button" value="每个class为one的div父元素下的第2个子元素" id="b1"/><br/><br/> <input type="button" value="每个class为one的div父元素下的第一个子元素" id="b2"/><br/><br/> <input type="button" value="每个class为one的div父元素下的最后一个子元素" id="b3"/><br/><br/> <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素" id="b4"/><br/><br/> <div class="one"> <div id="one" class="one"> XXXXXXXXX id=one </div> <div id="two" class="one"> XXXXXXXXX id=two </div> <div id="three" class="one"> XXXXXXXXX id=three </div> <div id="four" class="one"> XXXXXXXXX id=four </div> </div> <div class="one"> <div id="five" class="one"> XXXXXXXXX id=five </div> </div> </body> </html>
表单属性过滤选择器
-
此选择器主要对所选择的表单元素进行过滤
1、:enabled
2、:disabled
3、:checked
4、:selected
<!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; } </style> <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></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[name='edu'] option:selected"); var $selects = $("select option:selected"); $selects.each(function (){ alert("你选择了= " + $(this).text()) }) } ) }); </script> </head> <body> <input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值" id="b1"/><br/><br/> <input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用 <input> 元素的值" id="b2"/><br/><br/> <input type="button" value="利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/><br/><br/> <input type="button" value="利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/><br/><br/> <br> <input type="text" value="篮球1"/> <input type="text" value="篮球2"/> <input type="text" value="篮球3" disabled="true"/> <input type="text" value="篮球4" disabled="true"/> <br> <h1>选择你的爱好</h1> <input type="checkbox" value="爱好1"/>爱好1 <input type="checkbox" value="爱好2"/>爱好2 <input type="checkbox" value="爱好3"/>爱好3 <input type="checkbox" value="爱好4"/>爱好4 <br> <h1>选项如下:</h1> <select name="job" size=9 multiple="multiple"> <option value="选项1">选项1^^</option> <option value="选项2">选项2^^</option> <option value="选项3">选项3^^</option> <option value="选项4">选项4^^</option> <option value="选项5">选项5^^</option> <option value="选项6">选项6^^</option> </select> <select id="hsp" name="edu"> <option value="博士">博士^^</option> <option value="硕士">硕士^^</option> <option value="本科">本科^^</option> <option value="小学">小学^^</option> </select> </body> </html>
表单选择器
案例演示(拿button举例,其他类似):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单选择器-应用实例</title> <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></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> </head> <body> <form> <input type="text"/><br/> <input type="checkbox"/><br/> <input type="radio"/><br/> <input type="image" src="../image/2.png" height="100"/><br/> <input type="file"/><br/> <input type="submit"/><br/> <input type="reset"/><br/> <input type="password"/><br/> <input type="button" value="按钮1"/><br/> <select> <option/> </select><br/> <textarea></textarea><br/> <button>按钮2</button> <button>按钮3</button> <br/> </form> </body> </html>
jQuery 的 DOM 操作
查找节点, 修改属性(attr())
-
查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值
案例演示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>查找修改节点</title> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function () { $("button").click(function (){ $("input").attr("value","天河"); }) }) </script> </head> <body> 用户名 <input type="text" id="username" name="username" value="紫英"/> <button>点击更改文字</button> </body> </html>
创建节点
内部插入法
- 内部插入法是在 元素内插入内容(该内容变成该元素的子元素或节点)
外部插入法
- 外部插入法是在元素的外面插入内容(其内容变成元素的兄弟节点)
- 注意: 以上方法不但能将新的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动(可以完成很多需求)
案例演示1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动节点</title> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function () { //****使用外部插入法 把反恐li移动天津后 $("#b1").click(function () { $("#tj").after($("#fk")); }) //****使用内部插入法 把反恐li移动天津后 $("#b2").click(function () { $("#tj").append($("#fk")); }) }) </script> </head> <body> 您喜欢的城市:<br> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="sh" name="shanghai">上海</li> <li id="tj" name="tianjin">天津</li> </ul> 您爱好的游戏:<br> <ul id="game"> <li id="fk" name="fakong">反恐</li> <li id="cq" name="chuangqi">传奇</li> </ul> <input type="button" id="b1" value="使用after插入法 把反恐li移动天津后"/><br/><br/> <input type="button" id="b2" value="使用append插入法 把反恐li移动天津后"/><br/><br/> </body> </html>
案例演示2:
<!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: 30px; 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 () { //添加重庆li到上海下(使用dom的传统方法) $("#b1").click(function () { //1. 创建重庆li var cq_li = document.createElement("li"); //2. 设置属性和内容 cq_li.setAttribute("id", "cq"); cq_li.setAttribute("name", "chongqing"); cq_li.innerText = "重庆"; //3. 添加到指定元素后面 document.getElementById("sh").append(cq_li); }) //*****添加重庆li到 上海下-jquery完成添加节点 $("#b2").click(function () { //创建好重庆li var $cq_li = $("<li id=\"cq\" name=\"chongqing\">重庆~</li>"); //内部插入法append //$("#sh").append($cq_li); //外部插入法 $("#sh").after($cq_li);//推荐... //$cq_li.insertAfter($("#sh")); }) //*** 添加成都li到 北京前 $("#b3").click(function () { //创建成都li var $cd_li = $("<li id=\"cd\" name=\"chengdou\">成都</li>"); //添加到北京li前面[感受外部插入和内部插入区别] //$("#bj").prepend($cd_li);//内部插入 $("#bj").before($cd_li);//外部插入 }) //*** 添加成都li到 北京和上海之间 $("#b4").click(function () { //创建成都li var $cd_li = $("<li id=\"cd\" name=\"chengdou\">成都~~~~</li>"); //外部插入 //$("#bj").after($cd_li); $("#sh").before($cd_li); }) //*** 添加成都li到 吉林前面 $("#b5").click(function () { //创建成都li var $cd_li = $("<li id=\"cd\" name=\"chengdou\">成都@@@###</li>"); //外部插入 $("#jl").before($cd_li);//推荐 //$cd_li.insertBefore($("#jl")); }) }) </script> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="sh" name="shanghai">上海</li> <li id="jl" name="jilin">吉林</li> <li id="my" name="mianyang">绵阳</li> </ul> <input type="button" id="b1" value="添加重庆li到 上海下(使用dom的传统方法)"/><br/><br/> <input type="button" id="b2" value="添加重庆li到 上海下"/><br/><br/> <input type="button" id="b3" value="添加成都li到 北京前"/><br/><br/> <input type="button" id="b4" value="添加成都li到 北京和上海之间"/><br/><br/> <input type="button" id="b5" value="添加成都li到 吉林前面"/><br/> </body> </html>
删除节点
1.remove():
2.empty():
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>删除节点-应用实例</title> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function () { //*****删除所有p $("#b1").click(function () { $("p").remove(); }) //***所有p清空 $("#b2").click(function () { $("p").empty(); }) //****删除上海这个li $("#b3").click(function (){ $("#sh").remove(); }) }); </script> </head> <body> 您喜欢的城市:<br> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="sh" name="shanghai">上海</li> <li id="tj" name="tianjin">天津</li> </ul> 您爱好的游戏:<br> <ul id="game"> <li id="fk" name="fakong">反恐</li> <li id="cq" name="chuangqi">传奇</li> </ul> <p>Hello</p> how are <p>you?</p> <p name="test">Hello, <span>Person</span> <a href="#">and person</a></p> <input type="button" value="删除所有p" id="b1"/> <input type="button" value="所有p清空" id="b2"/> <input type="button" value="删除上海这个li" id="b3"/> </body> </html>
复制节点
1、clone():
2、clone(true):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复制节点-应用实例</title> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script> <script> $(function () { //点击p, 弹出文本信息 $("p").click(function () { //隐式的传入this->p的dom对象 alert("段落的内容= " + $(this).text()) }) //克隆p, 插入到按钮后面 //解读: //1. $("p").clone() 表示克隆p元素,但是没有复制事件 //2. $("p").clone(true) 表示克隆p元素,同时复制事件 $("p").clone(true).insertAfter($("button")); }) </script> </head> <body> <button>保存</button> <br><br><br><br><br> ///////////////////////////////////////////////<br> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p>段落4</p> <p>段落5</p> </body> </html>
替换节点
1.replaceWith():
2.replaceAll():
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>替换节点-应用实例</title> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function () { //1. 将 p 替换成 button //$("p").replaceWith("<input type='button' id='my' value='我的按钮'/>") //2.将p 替换成 超链接 //$("p").replaceWith("<a href='http://www.baidu.com'>点击到百度</a><br/>"); //3. 使用jquery对象来进行替换 var $button = $("<input type='button' id='my' value='我的按钮~'/>"); $button.click(function (){ alert("ok ~~~"); }) $("p").replaceWith($button); }); </script> </head> <body> <h1>节点替换</h1> <p>Hello</p> <p>jquery</p> <p>World</p> </body> </html>
属性操作
获取 HTML 文本和值
基本介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>val()课堂练习</title> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function () { //单独的一个测试代码 // $("#b1").click(function (){ // alert("默认值=" + this.defaultValue); // }) //1.给b1绑定一个获取焦点事件 //2.当用户把光标定位到输入框b1, 该事件就会被触发 $("#b1").focus(function (){ //获取-判断 //获取到当前值 var currentVal = $(this).val(); //如果当前值就是默认值, 就清空, 让用户输入自己的值 if(currentVal == this.defaultValue) { $(this).val(""); } }) //1. 给b1绑定一个失去焦点事件 blur //2. 当用户的光标离开这个输入框,就会触发 $("#b1").blur(function (){ //获取当前值 var currentVal = $(this).val(); //判断如果当前值为"", 说明用户没有输入内容 //就恢复提示默认信息 if(currentVal == "") { $(this).val(this.defaultValue); } }) }) </script> </head> <body> <input type="text" value="用户邮箱/手机号/用户名" id="b1"/><br> <input type="password" value="" id="b2"/><br> <input type="button" value="登陆" id="b3"/> </body> </html>
节点遍历
1、children():
2、next()/nextAll():
3、prev()/prevAll():
4、siblings():
5、nextAll().eq(index):
filter("div"), 获取到后面所有的同辈元素, 进行过滤 只得到div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用遍历节点方法-应用实例</title> <style type="text/css"> div, span { width: 140px; height: 60px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } </style> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></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和.之间)
?
// $("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> </head> <body> <input type="button" value="查找所有子元素 (class 为 one 的div的)" id="b1"/><br/><br/> <input type="button" value="获取后面的同辈元素 (class 为 one 的div的)" id="b2"/><br/><br/> <input type="button" value="获取前面的同辈元素 (class 为 one 的div的)" id="b3"/><br/><br/> <input type="button" value="获取所有的同辈元素 (class 为 one 的div的)" id="b4"/> <hr/> <div> ccccccc </div> <p class="one"> ccccccc </p> <div class="one"> <div id="one"> XXXXXXXXX one </div> <div id="two"> XXXXXXXXX two </div> <div id="three"> XXXXXXXXX three </div> <div id="four"> XXXXXXXXX four </div> </div> <div> tttttttttt </div> <div> aaaaaaa </div> <div>bbbbbb</div> <p>hello, pp</p> </body> </html>
css-dom操作
1、css():
2、获取和设置元素透明度: opacity 属性
3、获取和设置元素高度:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css-dom操作</title> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function (){ $("#b1").click(function (){ var width = $("img").width(); alert("width=" + width); //offset var offset = $("img").offset(); alert("img的 top = " + offset.top); alert("img的 left = " + offset.left); }) }) </script> </head> <body> <br/><br/><br/> hello,world~<img src="../image/1.png" width="200"> <button id="b1" type="button">获取图片信息</button> </body> </html>
表示页面加载完毕的几种方式
本文来自博客园,作者:紫英626,转载请注明原文链接:https://www.cnblogs.com/recorderM/p/16061763.html