Jquery-选择器-简单的选择器

最新推荐文章于 2018-05-01 14:45:34 发布

飞飞翼

最新推荐文章于 2018-05-01 14:45:34 发布

阅读量177

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/qq_36935391/article/details/78703409

版权

Jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.3简单的伪类选择器

<p>你们好</p>
<p>你们好</p>
<p>你们好</p>
<p>你们好</p>
<p>你们好</p>

1.3.1特定位置选择器

主要包括：first ，last，eq（index）3中位置

            $("p:first").css("color","blue")//匹配第一个p标签
            $("p:eq(3)").css("background","yellow")//匹配第4个p标签
            $("p:last").css("color","red");//匹配最后一个p标签

1.3.2制定范围选择器

主要包括：even，odd, gt(index), it(index)4个范围

            $("p:even").css("background","red")//匹配偶数行p标签
            $("p:odd").css("background","blue")//匹配所有奇数行p标签
            $("p:gt(2)").css("background","blue")//匹配大于索引值的元素
            $("p:lt(2)").css("background","blue")//匹配小于索引值的元素

1.3.3排除选择器

匹配元素集合中排除符合特定匹配规则的元素

 $("p:not(p:first)").css("background","blue")

1.3.4特殊选择器

1.4与内容相关的为类选择器

1.4.1匹配包含文本选择器

能够根据指定的文本在所能够匹配的元素集合中搜索包含特定关键字的元素

body

<p>你们好</p>
<p>给大家介绍一个</p>
<p>新朋友，我的</p>
<p>小小猪</p>

head

 $("p:contains('朋友')").css('background',"red");//注意  选中的是标签里面的所有内容             contains()文本匹配函数

注意：如果双引号里面还用到双引号，那就用单引号代替就行了

1.4.2匹配包含元素选择器

主要搜索破匹配元素所包含的元素进过滤

$("p:has(a)").css("color","#098") //匹配p标签里面有a标签的，选中的还是外面那个p标签

1.4.3包含判断选择器

          $("p:empty")
          $("p:parent")

1.5与元素显示状态相关的伪类选择器

可以根据元素的课件或者隐藏进行过滤

body

<h1>己所不欲勿施于人</h1>
<h1>天行健，君子以自强不息</h1>
<h1>勿以恶小而为之</h1>
<h1>勿以善小而不为</h1>
<h1>君子成人之美，不忍这</h1>

head

   $("h1:odd").hide();//隐藏奇数为h1元素
	  $("h1:odd").css("color","#FF0");//设置奇数位h1元素字体颜色为黄色
	   $("h1:even").css("color","blue");//设置奇数位h1元素字体颜色为蓝色
	    $("h1:hidden").show();//显示奇数位的p元

1.6匹配子元素的伪类选择器

$("h1:first-child").css("background","red")//匹配第一个h1标签
		$("h1:last-child").css("background","blue")//匹配最后一个h1标签
		$("h1:nth-child(2)").css("color","red")//匹配第三个h1标签

注意：nth-child 数字是从1开始算起

1.7与扁担对象相关的伪类选择器

body

<form id="as" method="get" action="">
<input type="text"  value=""/>
<input type="password"  value=""/>
<input type="checkbox" value="复选框" />
<input type="radio" value="单选按钮"/>
<input type="image" />
<input type="file" />
<input type="hidden"/>
<input type="button"/>
<input type="submit"/>
<input type="reset" />

head

$("#as:text").val("文本框");  //匹配表单名为as的并且组件为text的组件，将value这职位文本框
$("#as:password").val("密码框");//匹配表单名为as的并且组件为password的组件，将value设置为文本框

1.8与属性表单相关的伪类选择器

body

<form id="as" method="get" action="">
<input type="text"  value="43"/>
<input type="password"  value=""/>
<input type="checkbox" value="复选框"  checked="checked"/>
<input type="radio" value="单选按钮"/>
<input type="image"  src="12"/>
<input type="file" />
<input type="hidden"/>
<input type="button" value="按钮"/>
<input type="submit" id="ia" name="text"/>
<input type="reset" />
<select name=""><option value="2" selected="selected"/>1<option value="2"/>2<option value="2"/>3<option value="2"/></select>
</form>

head

                $("#as:disabled").val("不可用");   //匹配所有不可用元素
		$("#as:enabled").val("可用");   //匹配所有可用元素
		$("#as:checked").removeAttr("checked");//删除checked属性
		$("#as:selected").removeAttr("selected");//删除selected属性

1.9与属性相关的选择器

$("form[id]").css("background","red");//查找所有含有id属性的
		$("input[value='按钮']").css("background","blue");//查找属性value等于按钮的组件
		$("input[value!='按钮']").css("background","yellow");//查找属性value等于按钮的组件
		$("input[type^='ra']").css("margin","100px");//查找属性type的属性值以ra开始的
		$("input[type$='et']").css("margin","100px");//查找属性type的属性值以et结束的
		$("input[type*='as']").css("margin","100px");//查找属性type的属值性中包含as的
		$("input[name*='text'][id]").css("margin","100px");//查找name属性值以text结尾，并且含有id属性的

注意，属性的值必须保证被单引号括起来