jQuery(一)

文章目录

    • 1. 基本介绍
    • 2.原理示意图
    • 3.快速入门
        • 1.下载jQuery
        • 2.创建文件夹,放入jQuery
        • 3.引入jQuery
        • 4.代码实例
    • 4.jQuery对象与DOM对象转换
        • 1.基本介绍
        • 2.dom对象转换JQuery对象
        • 3.JQuery对象转换dom对象
        • 4.jQuery对象获取数据
          • 获取value使用val()
          • 获取内容使用text()
    • 5.jQuery选择器
        • 1.基本介绍
        • 2.基本选择器
          • 1.基本介绍
          • 2. 代码实例
        • 3.层级选择器
          • 1.基本介绍
          • 2.代码实例
        • 4.基础过滤选择器
          • 1.基本介绍
          • 2.代码实例
        • 5.内容过滤选择器
          • 1.基本介绍
          • 2.代码实例
        • 6.可见度过滤选择器
          • 1.基本介绍
          • 2.代码实例
        • 7.属性过滤选择器
          • 1.基本介绍
          • 2.代码实例
        • 8.子元素过滤选择器
          • 1.基本介绍
          • 2.代码实例
          • 3.细节说明
        • 9.表单属性过滤选择器
          • 1.基本介绍
          • 2.代码实例
        • 10.表单选择器
          • 1.基本介绍
          • 2.代码实例
        • 11.常用选择器
          • **一般使用父子/基本选择器 —> 属性选择器 —> 过滤即可解决大多数情况**
          • 1.基本选择器
          • 2.可见度过滤选择器
          • 3.子元素过滤选择器
          • 4.属性过滤选择器
          • 5.表单属性过滤选择器
          • 6.表单选择器
    • 6.作业
        • 1.练习一
        • 2.练习二

1. 基本介绍

image-20240131191354216

2.原理示意图

image-20240131191742591

3.快速入门

1.下载jQuery

image-20240131192009350

2.创建文件夹,放入jQuery

image-20240131193716607

3.引入jQuery

image-20240131193921629

4.代码实例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="jquery/jquery-3.6.0.min.js"></script><script>// window.onload = function (){//   //获取dom对象//   var elementById = document.getElementById("btn01");//   //绑定点击事件//   elementById.onclick = function (){//     alert("点击了按钮");//   }// }$(function () { //页面加载后执行函数var $btn01 = $("#btn01"); //获取按钮的jquery对象$btn01.click(function () { //绑定按钮的点击事件,jquery对象命名以$开头alert("hello,jquery..")})})</script>
</head>
<body>
<button id="btn01">按钮</button>
</body>
</html>

4.jQuery对象与DOM对象转换

1.基本介绍

image-20240131195503689

2.dom对象转换JQuery对象

image-20240131195624582

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="jquery/jquery-3.6.0.min.js"></script><script>//通过dom对象来获取信息window.onload = function () {var elementById = document.getElementById("username");// var value = elementById.value;// alert(value);//把dom对象转换成JQuery对象var $val = $(elementById).val();alert($val);}</script>
</head>
<body>
用户名:<input type="text" id="username" name="username" value="孙显圣">
</body>
</html>
3.JQuery对象转换dom对象

image-20240131200445504

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="jquery/jquery-3.6.0.min.js"></script><script>window.onload = function () {//得到jQuery对象var $username = $("#username");//转换成dom对象//1.jquery对象是一个数组,从数据里面取出的元素就是dom对象,如果获取的就是一个值,那么就使用下标[0]或者get(0)来获取var username1 = $username[0]; //方式一var username2 = $username.get(0); //方式二alert(username2.value + "1")alert(username1.value + "2")}</script>
</head>
<body>
用户名:<input type="text" id="username" name="username" value="孙显圣">
</body>
</html>
4.jQuery对象获取数据
获取value使用val()
获取内容使用text()

5.jQuery选择器

1.基本介绍

image-20240131201452918

2.基本选择器
1.基本介绍

image-20240131202957172

2. 代码实例
<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="jquery/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function () {
//1. 改变 id 为 one 的元素的背景色为 #0000FF$("#b1").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 () {$("span, #two, .mini ").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"/>
韩顺平 Java 工程师
<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>
3.层级选择器
1.基本介绍

image-20240201094354699

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: 80px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family: Roman;}</style><script type="text/javascript" src="jquery/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>
4.基础过滤选择器
1.基本介绍

image-20240201100351162

image-20240201100557178

2.代码实例

image-20240201102242343

<!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="./jquery/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", "#0000FF")})//改变最后一个 div 元素的背景色为 #0000FF$("#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>
5.内容过滤选择器
1.基本介绍

image-20240201102338165

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: 80px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family: Roman;}</style><script type="text/javascript" src="./jquery/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 () {$("div.mini").css("background", "green")})//****改变含有子元素(或者文本元素)的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>
6.可见度过滤选择器
1.基本介绍

image-20240201104515792

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;}div.visible {display: none;}</style><script type="text/javascript" src="./jquery/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>
7.属性过滤选择器
1.基本介绍

image-20240201105743189

image-20240201110127035

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;}div.visible {display: none;}</style><script type="text/javascript" src="./jquery/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", "blue");})//属性title值不等于test的div元素(没有属性title的也将被选中)$("#b3").click(function () {$("div[title != 'test']").css("background", "red");})//属性title值 以te开始 的div元素$("#b4").click(function () {$("div[title ^= 'te']").css("background", "yellow");})//属性title值 以est结束 的div元素$("#b5").click(function () {$("div[title $= 'est']").css("background", "white");})//属性title值 含有es的div元素$("#b6").click(function () {$("div[title *= 'es']").css("background", "black");})//选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素$("#b7").click(function () {$("div[id][title *= 'es']").css("background", "pink");})});</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>
8.子元素过滤选择器
1.基本介绍

image-20240201131653219

image-20240201131836693

2.代码实例

image-20240201141528332

<!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="./jquery/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");$(".one:nth-child(2)").css("background", "yellow");})//*****每个class为one的div父元素下的第一个子元素$("#b2").click(function () {// $(".one .one:nth-child(1)").css("background", "green");$(".one:nth-child(1)").css("background", "green");})//*****每个class为one的div父元素下的最后一个子元素$("#b3").click(function () {$("div: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>
3.细节说明
  1. 中间带空格的定位方式就是父元素 子元素的形式
  2. 先找出满足条件的父元素,然后找出父元素下满足条件的子元素
9.表单属性过滤选择器
1.基本介绍

image-20240201135032225

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;}</style><script type="text/javascript" src="./jquery/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 () {var $input = $("input[type='checkbox']:checked");alert($input.length)})//****利用 jQuery 对象的 text() 方法获取下拉框选中的内容$("#b4").click(function () {//如果我们希望选择指定的select , 可以加入属性过滤选择器//var $selects = $("select[属性='值'] option:selected");var $select = $("select option:checked");$select.each(function () {alert($(this).val())})})});</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>
10.表单选择器
1.基本介绍

image-20240201142128754

image-20240201142202560

2.代码实例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单选择器-应用实例</title><script type="text/javascript" src="./jquery/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function () {//选择所有的buttonvar $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>
11.常用选择器
一般使用父子/基本选择器 —> 属性选择器 —> 过滤即可解决大多数情况
1.基本选择器

image-20240201142906159

2.可见度过滤选择器

image-20240201143025778

3.子元素过滤选择器

image-20240201141528332

image-20240201143231854

4.属性过滤选择器

image-20240201143117503

5.表单属性过滤选择器

image-20240201135032225

6.表单选择器

image-20240201143344642

6.作业

1.练习一

image-20240201143506407

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="./jquery/jquery-3.6.0.min.js"></script><script>$(function () { //页面加载后执行//选择所有的pvar $p = $("p");//遍历$p.each(function () {var text = $(this).text();$(this).click(function () { //为每个p都绑定点击事件alert(text)})})})</script>
</head>
<body>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
</body>
</html>

image-20240201144721376

2.练习二

image-20240201143538872

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="./jquery/jquery-3.6.0.min.js"></script><script>$(function () {//先选择所有子元素,然后再使用基础过滤选择器选择不同的行来进行操作$("table tr:even").css("background", "red")$("table tr:odd").css("background", "blue")})</script>
</head>
<body>
<table border="1" width="500"><tr><td>1</td><td>1</td></tr><tr><td>2</td><td>2</td></tr><tr><td>3</td><td>3</td></tr><tr><td>4</td><td>4</td></tr><tr><td>5</td><td>5</td></tr><tr><td>6</td><td>6</td></tr>
</table>
</body>
</html>

image-20240201145832930

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/790341.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

完全没想到docker启动败在了这里!

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 故事背景 前几天帮同事部署一个环境&#xff0c;用他写的安装脚本部署&#xff0c;其中一台服务器就需要安装docker&#xff0c…

基于深度学习的铁轨缺陷检测系统(网页版+YOLOv8/v7/v6/v5代码+训练数据集)

摘要&#xff1a;本文深入研究了基于YOLOv8/v7/v6/v5的铁轨缺陷检测系统。核心技术上&#xff0c;文章采用了最先进的YOLOv8&#xff0c;并整合了YOLOv7、YOLOv6、YOLOv5算法&#xff0c;进行了性能指标的对比分析。文中详细阐述了国内外铁轨缺陷检测的研究现状、数据集处理方法…

MHA高可用-解决MySQL主从复制的单点问题

目录 一、MHA的介绍 1&#xff0e;什么是 MHA 2&#xff0e;MHA 的组成 2.1 MHA Node&#xff08;数据节点&#xff09; 2.2 MHA Manager&#xff08;管理节点&#xff09; 3&#xff0e;MHA 的特点 4. MHA工作原理总结如下&#xff1a; 二、搭建 MySQL MHA 实验环境 …

[蓝桥杯练习题]出差

一道DJ题,重要的是隔离时间,把隔离时间加在边权上即可 现实生活的题大多都是无向图建图,需要边的两端点各自上邻接表和相同权重 #include<bits/stdc.h> using namespace std; #define ll long long const int N1005; const int M10005; struct edge{int to;ll w;edge(int…

MySQL数据库 数据库基本操作(一):数据库的认识与基本操作

1. 数据库的基本认识 1.1 什么是数据库 专家们设计出更加利于管理数据的软件——数据库&#xff0c;它能更有效的管理数据。数据库可以提供远程服务&#xff0c;即通过远程连接来使用数据库&#xff0c;因此也称为数据库服务器。 1.2 数据库的分类 数据库可以大体分为:关系…

单片机家电产品--过零检测

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 单片机家电产品–过零检测 前言 记录学习单片机家电产品内容 已转载记录为主 一、知识点 1 什么是过零检测 1 过零检测指的是在交流系统中&#xff0c;在一个交流周期中…

Redis 的主从复制、哨兵

目录 一. Redis 主从复制 1. 介绍 2. 作用 3. 流程 4. 搭建 Redis 主从复制 安装redis 修改 master 的Redis配置文件 修改 slave 的Redis配置文件 验证主从效果 二. Redis 哨兵模式 1. 介绍 2. 原理 3. 哨兵模式的作用 4. 工作流程 4.1 故障转移机制 4.2 主节…

装饰工程管理系统|基于Springboot的装饰工程管理系统设计与实现(源码+数据库+文档)

装饰工程管理系统-项目立项子系统目录 目录 基于Springboot的装饰工程管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员功能实现 &#xff08;2&#xff09;合同报价管理 &#xff08;3&#xff09;装饰材料总计划管理 &#xff08;4&#xff0…

深信服超融合虚拟机的导入方法

以从vmware虚拟机导出的虚拟机为例。 1 进入虚拟机页面点【新增】&#xff0c;选择【导入虚拟机】 2 以文件类型为ovf、mf、vmdk为例导入 选择文件类型&#xff0c;选择那三个导出的虚拟机的文件&#xff0c;选择分组&#xff0c;存储位置和运行位置默认&#xff0c;操作系统…

Windows 中的硬链接、软连接、快捷方式和普通文件

在 Windows 中&#xff0c;文件可以有四种类型&#xff1a; 硬链接软连接快捷方式普通文件 当我们正常创建一个文件时&#xff0c;这个文件就是普通文件 echo hello > a.txt (Get-Item "a.txt").LinkType -eq $null # 输出 True然后我们可以为其添加一个软连接…

双榜有名!美创入围第一新声x天眼查「年度中国高科技高成长企业」系列榜单

为了更好地了解中国高科技高成长企业的现状和发展趋势&#xff0c;2023年底&#xff0c;【第一新声】特联合【天眼查】启动“数字未来”系列之2023年度中国高科技高成长企业系列榜单评选征集工作&#xff0c;发现和挖掘被资本市场关注&#xff0c;同时受客户认可的高科技、高成…

百卓Smart管理平台 importexport.php SQL注入漏洞复现(CVE-2024-27718)

0x01 产品简介 百卓Smart管理平台是北京百卓网络技术有限公司(以下简称百卓网络)的一款安全网关产品,是一家致力于构建下一代安全互联网的高科技企业。 0x02 漏洞概述 百卓Smart管理平台 importexport.php 接口处存在SQL注入漏洞,攻击者除了可以利用 SQL 注入漏洞获取数据…

后台返回数据需要自己匹配图标,图标命名与后台返回的变量保持一致

testItemId为后台返回匹配图标的变量名 sportsTargetsData:{suggestSportTargetId: "2",unlocks: [{ testItemId: vo2max_high_knee, sportTargetName: 心肺能力, indexName: 心肺能力, sportTargetId: 1 },{ testItemId: grip_strength, sportTargetName: 基础力量…

互联网轻量级框架整合之Spring框架II

持久层框架 Hibernate 假设有个数据表&#xff0c;它有3个字段分别是id、rolename、note, 首先用IDEA构建一个maven项目Archetype选择org.apache.maven.archetypes:maven-archetype-quickstart即可&#xff0c;配置如下pom <project xmlns"http://maven.apache.org/…

软考 系统架构设计师系列知识点之云原生架构设计理论与实践(13)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之云原生架构设计理论与实践&#xff08;12&#xff09; 所属章节&#xff1a; 第14章. 云原生架构设计理论与实践 第3节 云原生架构相关技术 14.3.2 云原生微服务 1. 微服务发展背景 过去开发一个后端应用最为直接的方…

深入解析:如何使用Xcode上传苹果IPA安装包至App Store?

目录 引言 摘要 第二步&#xff1a;打开appuploader工具 第二步&#xff1a;打开appuploader工具&#xff0c;第二步&#xff1a;打开appuploader工具 第五步&#xff1a;交付应用程序&#xff0c;在iTunes Connect中查看应用程序 总结 引言 在将应用程序上架到苹果应用商…

洛谷B3735题解

题目描述 圣诞树共有 n 层&#xff0c;从上向下数第 1 层有 1 个星星、第 2 层有 2 个星星、以此类推&#xff0c;排列成下图所示的形状。 星星和星星之间用绳子连接。第 1,2,⋯,n−1 层的每个星星都向下一层最近的两个星星连一段绳子&#xff0c;最后一层的相邻星星之间连一段…

Python学习从0到1 day20 第二阶段 面向对象 ③ 继承

循此苦旅&#xff0c;以达天际 —— 24.4.3 一、继承的基础语法 学习目标&#xff1a; ① 理解继承的概念 ② 掌握继承的使用方式 ③ 掌握pass关键字的作用 单继承 语法&#xff1a; class 类名(父类名): 类内容体 继承分为&#xff1a;单继承和多继承 继承表示&#xff1a;将从…

WE博客代码系统

WE博客代码系统 说明文档 运行前附加数据库.mdf&#xff08;或sql生成数据库&#xff09; 主要技术&#xff1a; 基于asp.net mvc架构和sql server数据库&#xff0c;并采用EF实体模型开发。 三层架构并采用EF实体模型开发 功能模块&#xff1a; WE博客代码系统 WE博客代码系…

Vue指令之v-model

调了半天没反应&#xff0c;结果是没引用Vue&#xff0c;我是伞兵。 v-model的作用是将视图与数据双向绑定。一般情况下&#xff0c;Vue是数据驱动的&#xff0c;即数据发生改变后网页就会刷新一次&#xff0c;更改对应的网页内容&#xff0c;即数据单向绑定了网页内容。而使用…