jQuery中的总结_PHP中文网手记

摘要：1、基本选择器语法$('#id名') 根据给定的id来匹配到元素$('.class') 根据给定的clss来匹配到元素$('element') 根据给定的标签名来匹配到元素$('*') 匹配所有元素$('#id,.class,element') 匹配到页面中多个选择器下面是基本选择器的一些用法<!DOC

1、基本选择器
语法
$('#id名') 根据给定的id来匹配到元素
$('.class') 根据给定的clss来匹配到元素
$('element') 根据给定的标签名来匹配到元素
$('*') 匹配所有元素
$('#id,.class,element') 匹配到页面中多个选择器

下面是基本选择器的一些用法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery中的选择器</title>
<style>
div {width: 100px;height: 100px;background: #ccc;margin-top: 20px;}
</style>
<script src="jquery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function() {
$('#box').css('background','red');
$('.box').css('background','blue');
$('span').css('font-size','30px');
$('*').css('font-family','宋体')
$('#box,.box,span').css('color','pink');
});
</script>
</head>
<body>
<div id="box">测试1</div>

<div>测试2</div>
<span>PHP中文网</span>
</body>
</html>

下面是测试结果图

微信截图_20190114153953.png

2、层级选择器
给定的符集元素匹配所有的子元素：$('父级元素 > 子集元素')
给定的祖先元素下匹配所有的后代元素: $('祖先元素后代元素')
匹配紧跟在prev元素后面的next元素：$('prev + next') (同级的元素)
匹配prev元素后面所有的siblings元素: $('prev ~ siblings')

$(document).ready(function() {
			// $('ul > li').css({'color':'red','list-style':'none'});
			$('ul li').css('list-style','none');
			$('input+button').css('height','50px');
			$('label~input').css('background','pink');
		});

<ul>
		<li>1</li>
		<li>2</li>
		<div>
			<li>div里面的li
				<div><li>多层嵌套里的li</li></div>
			</li>
		</div>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
	<form action="">
		<label for="">姓名</label>
		<input type="text">
		<button>按钮</button>
		<input type="text"><input type="text">
	</form>

微信截图_20190114165201.png

3、顺序选择器
1、顺序
$(':first') 第一个元素
$(':last') 第二个元素
2、比较
$(':gt(x)') 表示大于值x的元素
$(':lt(x)') 表示小于值x的元素
$(":eq(x)") 表示等于值x的元素
3、奇偶数
$(':odd') 奇数顺序
$(':even') 偶数顺序
4、非
$(':not(selector)') 匹配不是selector的所有元素

4、内容选择器
语法：
$(':contains(text)') 匹配包含给定文本(text)的元素
$(':has(selector)') 匹配包含特定选择器元素的元素
$('empty()') 匹配不包含内容的元素 (即不包含子元素或者文本的空元素)
$(':parent') 匹配含有子元素或者文本的元素

5、属性选择器
语法：
$('[属性名]') 匹配包含给定属性的元素
$('[attribute=value]') 匹配给定属性是某个特定值的元素
$('[attribute!=value]') 匹配所有不含有指定值的属性，或者属性不等于特定值的元素
$('[attribute ^= value]') 匹配给定属性是以某些值开始的元素
$('[attribute $= value]') 匹配给定属性是以某些值结尾的元素
$('[attribute *= value]') 匹配给定属性包含某些值结尾的元素
$('attrSel[1] attrSel[1] attrSel[1]') 复合选择器，需要同时满足多个条件时使用

6、表单选择器
语法：
$(':enabled') 所有激活的input元素 (可以使用的input元素)
$(':disabled') 所有禁用的input元素 (不可以使用的input元素)
$(':selected') 所有被选取的元素，针对于select元素
$(':checked') 所有被选中的input元素

批改老师：灭绝师太批改时间：2019-01-14 16:42:12
老师总结：完成的很好！很用心，jQuer核心部分就是选择器，一定要好好掌握

jQuery中的总结

热门词条