jquey选择器(一)

基本选择器:

<div id="a" class="b">基本选择器</div>

id选择器: KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲a").click(funct…(".b").click(function(){});
标签选择器:$(“div”).click(function(){});

过滤选择器书写时都以:冒号开头

1)基本过滤器
:first 获取第一个元素
eg: $(“li:first”) 获取所有li中的第一个li

:last
:even 获取索引为偶数的元素
eg:$(“li:even”)获取索引为偶素的li
:odd 获取索引为奇数的元素

:eq(index)获取索引等于index的元素,索引从0开始计算
eg: $(“li:eq(2)”) 获取索引等于2的li

:gt(index)获取索引大于index的元素
:lt(index)获取索引小于index的元素

内容过滤选择器
:contains(text) 获取含有text的 元素
:empty 获取没有后代的元素(且没有文本)
:has(selector) 获取有后代元素为selector的元素
:parent 获取有后台元素或者有文本的元素

<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
	<style type="text/css">
		div{
		width:50px;
		height:50px;
		float:left;
		margin:10px;
	}
	p{
		clear:left;
	}
	</style>
	
	
<script>
	$(function(){
		$("#a").click(function(){
			
			$("div:contains('A')").css('background-color','#F00');
		});
		$("#b").click(function(){
			
			$("div:empty").css('background-color','#0F0');
		});
		$("#c").click(function(){
			
			$("div:has(span)").css('background-color','#00F');
		});
		$("#d").click(function(){
			
			$("div:parent").css('color','white');
		});
	})
</script>
</head>
<body>

	<div>ABCD</div>
	<div></div>
	<div><span></span></div>
	<p>
		<input type="button" value="a" id="a"/>
		<input type="button" value="b" id="b"/>
		<input type="button" value="c" id="c"/>
		<input type="button" value="d" id="d"/>
	</p>
</body>
</html>

可见性过滤器

:hidden 选取不可见元素
:visible 选取可见元素

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值