Day09JavaWeb【Jquery】选择器

最新推荐文章于 2022-07-27 18:32:50 发布

翁老师的教学团队

最新推荐文章于 2022-07-27 18:32:50 发布

阅读量351

点赞数

文章标签： js javascript jquery

本文链接：https://blog.csdn.net/u013621398/article/details/108637100

版权

2022就业班专栏收录该内容

208 篇文章 5 订阅

订阅专栏

jquery的选择器概述

（1）选择器是什么？

$()

特殊的”函数”，不同的字符串参数（代表不同的规则），执行之后可以获取页面的符合条件的元素返回

（2）选择器分类
基本选择器
层级选择器
属性选择器
基本过滤选择器
表单属性选择器

jquery的选择器-基本选择器***

（1）基本选择器
（2）css函数
在jquery中，修改样式的函数
参1：属性名
参2：属性值
（3）参数字符串可以为多个规则，使用，隔开，表示或者

	<script type="text/javascript">
	
		 //<input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
		 //id选择器
		 $("#b1").click(function () {
			 $("#one").css("background-color","red");
		 });
		 //<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
         //标签名选择器
		 $("#b2").click(function () {
			 $("div").css("background-color","red");
         });
		 //<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
         //类选择器
         $("#b3").click(function () {
             $(".mini").css("background-color","red");
         });
		 //<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
		 //并列选择器
         $("#b4").click(function () {
             $("span,#two").css("background-color","red");
         });

	</script>

jquery的选择器-层级选择器

在这里插入图片描述


<script type="text/javascript">
			//----------------------层级选择器----------------------------------------
		 //<input type="button" value=" 改变 <>body 内所有 <div> 的背景色为红色"  id="b1"/> ---A B
			$("#b1").click(function () {
				$("body div").css("background-color","red");
            });
		 //<input type="button" value=" 改变 <body> 内 子 <div> 的背景色为 红色"  id="b2"/> ---A>B
            $("#b2").click(function () {
                $("body > div").css("background-color","red");
            });
	</script>

jquery的选择器-属性选择器

（1）属性选择器
（2）如果选择器中有多个条件 $("[][][]")
（3）*= 表示含有某个字符 test es

<script type="text/javascript">

			<!--属性选择器-->
		 //<input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
			$("#b1").click(function () {
				$("div[title]").css("background-color","red");
            });
		 // <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
            $("#b2").click(function () {
                $("div[title='test']").css("background-color","red");
            });
		 //<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
           //如果选择器中有多个条件 $("[][][]")
			//*= 表示含有某个字符
            $("#b7").click(function () {
                $("div[id][title*='test']").css("background-color","red");
            });
	</script>

jquery的选择器-基本过滤选择器

（1）基本过滤选择器
（2）索引顺序，就是标签顺序
（3）header指的是h1~h6

在这里插入图片描述

	<script type="text/javascript">
		
		 //<input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
		 $("#b1").click(function () {
			$("div:first").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
         $("#b2").click(function () {
             $("div:last").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
         $("#b3").click(function () {
             $("div:not(.one)").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
         $("#b4").click(function () {
             $("div:even").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
         $("#b5").click(function () {
             $("div:odd").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
         $("#b6").click(function () {
             $("div:gt(3)").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
         $("#b7").click(function () {
             $("div:eq(3)").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
         $("#b8").click(function () {
             $("div:lt(3):even").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
         $("#b9").click(function () {
             $(":header").css("backgroundColor","red");
         });

	</script>

jquery的选择器-表单属性过滤器

（1）表单属性过滤器
一般针对表单form标签里面的元素
在这里插入图片描述

<script type="text/javascript">
	
		
		//<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
		$("#b1").click(function () {
		    //inputEles  = [js对象，js对象]
			 var inputEles = $("input[type='text']:enabled");
 			 for(var i=0; i<inputEles.length; i++){
				 //alert(inputEles[i].value);  //js对象
				 alert($(inputEles[i]).val()); //转为jquery对象
			 }
        });
		// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
        $("#b2").click(function () {
            //inputEles  = [js对象，js对象]
            var inputEles = $("input[type='text']:disabled");
            for(var i=0; i<inputEles.length; i++){
                //alert(inputEles[i].value);  //js对象
                alert($(inputEles[i]).val()); //转为jquery对象
            }
        });
		 //<input type="button" value=" 利用 jQuery 对象的 length 属性获取复选选框选中的个数"  id="b3"/>
		$("#b3").click(function () {
			var checkEles = $("input[type='checkbox']:checked");
			alert(checkEles.length);
        });
		// <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
        $("#b4").click(function () {
           var optionEles =   $("option:selected");
            for(var i=0; i<optionEles.length; i++){
				alert($(optionEles[i]).text());
			}
        });
	</script>

翁老师的教学团队

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Day09JavaWeb【Jquery】选择器

jquery的选择器概述（1）选择器是什么？$()特殊的”函数”，不同的字符串参数（代表不同的规则），执行之后可以获取页面的符合条件的元素返回（2）选择器分类基本选择器层级选择器属性选择器基本过滤选择器表单属性选择器jquery的选择器-基本选择器***（1）基本选择器（2）css函数在jquery中，修改样式的函数参1：属性名参2：属性值（3）参数字符串可以为多个规则，使用，隔开，表示或者 <script type="text/javascript"
复制链接

扫一扫