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启动败在了这里！

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

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 故事背景 前几天帮同事部署一个环境&#xff0c;用他写的安装脚本部署&#xff0c;其中一台服务器就需要安装docker&#xff0c…
阅读更多...
基于深度学习的铁轨缺陷检测系统（网页版+YOLOv8/v7/v6/v5代码+训练数据集）

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

摘要&#xff1a;本文深入研究了基于YOLOv8/v7/v6/v5的铁轨缺陷检测系统。核心技术上&#xff0c;文章采用了最先进的YOLOv8&#xff0c;并整合了YOLOv7、YOLOv6、YOLOv5算法&#xff0c;进行了性能指标的对比分析。文中详细阐述了国内外铁轨缺陷检测的研究现状、数据集处理方法…
阅读更多...
MHA高可用-解决MySQL主从复制的单点问题

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 实验环境 …
阅读更多...
【LeetCode热题100】【普通数组】合并区间

【LeetCode热题100】【普通数组】合并区间

题目链接&#xff1a;56. 合并区间 - 力扣&#xff08;LeetCode&#xff09; 先排序&#xff0c;按左区排序&#xff0c;装第一个区间进入答案容器&#xff0c;判断答案容器钟最后一个区间的右区是否小于区间的左区&#xff0c;是则不能合并是新区间&#xff0c;否则可以合并 …
阅读更多...
反转链表1

反转链表1

/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可*** param head ListNode类* return ListNode类*/ListNode* ReverseList(ListNode* head) {// write code hereif (headNULL) {return nullptr;}ListNode* start(ListNode*…
阅读更多...
UITabBarController管理FBFlutterViewContainer首次页面空白

UITabBarController管理FBFlutterViewContainer首次页面空白

UITabBarController管理FBFlutterViewContainer首次页面空白 可能是因为在使用UITabBarController管理FBFlutterViewContainer时&#xff0c;初始的页面没有正确加载或渲染。FBFlutterViewContainer可能是Flutter的一个视图容器&#xff0c;而在iOS开发中&#xff0c;UITabBar…
阅读更多...
[蓝桥杯练习题]出差

[蓝桥杯练习题]出差

一道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数据库 数据库基本操作(一):数据库的认识与基本操作

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

1. 数据库的基本认识 1.1 什么是数据库 专家们设计出更加利于管理数据的软件——数据库&#xff0c;它能更有效的管理数据。数据库可以提供远程服务&#xff0c;即通过远程连接来使用数据库&#xff0c;因此也称为数据库服务器。 1.2 数据库的分类 数据库可以大体分为:关系…
阅读更多...
Positive Technologies：2023 年，三分之一针对零售商的攻击会导致销售中断

Positive Technologies：2023 年，三分之一针对零售商的攻击会导致销售中断

根据 Positive Technologies 的研究&#xff0c;零售商和电子商务公司一直是黑客关注的焦点&#xff0c;在报告的被盗数据和影子市场的基础设施访问方面&#xff0c;零售商和电子商务公司排名前三。与此同时&#xff0c;80% 的零售商广告提供免费赠送被盗数据库的服务。 到 20…
阅读更多...
单片机家电产品--过零检测

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

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

Redis 的主从复制、哨兵

目录 一. Redis 主从复制 1. 介绍 2. 作用 3. 流程 4. 搭建 Redis 主从复制 安装redis 修改 master 的Redis配置文件 修改 slave 的Redis配置文件 验证主从效果 二. Redis 哨兵模式 1. 介绍 2. 原理 3. 哨兵模式的作用 4. 工作流程 4.1 故障转移机制 4.2 主节…
阅读更多...
装饰工程管理系统|基于Springboot的装饰工程管理系统设计与实现(源码+数据库+文档)

装饰工程管理系统|基于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 中的硬链接、软连接、快捷方式和普通文件

在 Windows 中&#xff0c;文件可以有四种类型&#xff1a; 硬链接软连接快捷方式普通文件 当我们正常创建一个文件时&#xff0c;这个文件就是普通文件 echo hello > a.txt (Get-Item "a.txt").LinkType -eq $null # 输出 True然后我们可以为其添加一个软连接…
阅读更多...
双榜有名！美创入围第一新声x天眼查「年度中国高科技高成长企业」系列榜单

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

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

使用ebpf优化FastDDS统计模块statistics

概述 通过本文,你将了解到以下内容: fastdds的调试统计功能如何使用fastdds的调试统计功能有什么问题如何使用USDT(systemTap) + ebpf对fastdds调试统计功能进行改造,以实现动态开关调试功能并实现高性能.fastdds statistics 官方文档及说明 https://fast-dds.docs.eprosima…
阅读更多...
百卓Smart管理平台 importexport.php SQL注入漏洞复现(CVE-2024-27718)

百卓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: 基础力量…
阅读更多...
3. 完全背包问题(acwing)

3. 完全背包问题(acwing)

文章目录 3. 完全背包问题题目描述动态规划一维数组 3. 完全背包问题 题目描述 有 N种物品和一个容量是 V的背包&#xff0c;每种物品都有无限件可用。 第 i 种物品的体积是 vi&#xff0c;价值是 wi。 求解将哪些物品装入背包&#xff0c;可使这些物品的总体积不超过背包容…
阅读更多...
Unity进阶之路（1）回顾与思考

Unity进阶之路（1）回顾与思考

首先呢&#xff0c;博主在这里先反思一下自己这几个月&#xff0c;其实并没有多少进步。 在寒假中&#xff0c;博主几乎是独立编写了一个小程序的完整UI和一个Uniapp的雏形。那段时间是博主生产力最高的时间段。几乎是每天8点起来开始编写代码&#xff0c;晚上一直忙到很晚。 …
阅读更多...
最新文章

Copyright @ 2022~2023