jQuery(一)

news/2024/4/30 3:25:03

文章目录

    • 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.cpky.cn/p/11676.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈，一经查实，立即删除！

相关文章

流域生态系统水-碳-氮耦合过程模拟

流域生态系统水-碳-氮耦合过程模拟

流域是一个相对独立的自然地理单元&#xff0c;它是以水系为纽带&#xff0c;将系统内各自然地理要素连结成一个不可分割的整体。碳和氮是陆地生态系统中最重要的两种化学元素&#xff0c;而在流域系统内&#xff0c;水-碳-氮是相互联动、不可分割的耦合体。随着流域内人类活动…
阅读更多...
【VTKExamples::Meshes】第七期 TableBasedClipDataSetWithPolyData

【VTKExamples::Meshes】第七期 TableBasedClipDataSetWithPolyData

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ：870202403 公众号：VTK忠粉 前言 本文分享VTK样例TableBasedClipDataSetWithPolyData，并解析接口vtkTableBasedClipDataSet，希望对各位小伙伴有所帮助！ 感谢各位小伙伴的点赞+关注，小易会继续努力分享，一起进步！ 你…
阅读更多...
vue想要突破全局样式限制又不影响别的页面样式怎么办

vue想要突破全局样式限制又不影响别的页面样式怎么办

<!-- 用scope盖不住全局&#xff0c;随意来个class匹配私定&#xff0c;搜索关键词&#xff1a;不要随便改&#xff0c;乱打class名 --> <style> .lkajsdfjkalsfhkljashkflhaskl .el-input.el-input--default.el-input--suffix { width: 160px !important; } …
阅读更多...
STM32实现软件SPI对W25Q64内存芯片实现读写操作

STM32实现软件SPI对W25Q64内存芯片实现读写操作

先看看本次实验的成果吧&#xff1a; 这么简单的一个程序&#xff0c;我学习了一个星期左右&#xff0c;终于把所有的关节都打通了。所有代码都能什么都不看背着敲出来了。为了使自己的记忆更为清晰&#xff0c;特意总结了一个思维导图&#xff0c;感觉自己即便是日后忘记了看一…
阅读更多...
【图论】知识点集合

【图论】知识点集合

边的类型 neighbors(邻居)&#xff1a;两个顶点有一条共同边 loop&#xff1a;链接自身 link&#xff1a;两个顶点有一条边 parallel edges&#xff1a;两个顶点有两条及以上条边 无向图 必要条件&#xff1a;删掉顶点数一定大于等于剩下的顶点数 设无向图G<V,E>是…
阅读更多...
16个Python接单平台，做私活爽歪歪！（附100个爬虫源码）

16个Python接单平台，做私活爽歪歪！（附100个爬虫源码）

一、python爬虫是可以做副业的&#xff0c;主要是爬取网站、小程序或者APP的数据&#xff0c;对数据进行分析与处理&#xff0c;或者直接向客户提供爬虫程序与技术支持。 当初学会Python那会儿&#xff0c;有朋友来介绍我去接私活&#xff0c;是为一家公司做网站&#xff0c;那…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业