[jQuery笔记] jQuery选择器
jquery选择器允许对html中的元素组合单个元素进行操作，jquery的选择器和css的选择器几乎大同小异，大致分为元素选择器、id选择器和类选择器。jquery的选择器基于元素的id、类、类型、属性、属性值等查找或选择html元素，基于已经存在的css选择器，另外，jquery也支持自定义选择器。
jquery中所有选择器都是以美元符号开头，即$()。
元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery之选择器</title>
<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<!-- 如果jquery写在要选择元素上面，就要使用$(document).ready(function(){};这种格式 -->
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
<h2>这是测试的标题</h2>这就是一个测试段落
这也是一个测试段落
<button>戳我</button>
<!-- <script>
$("button").click(function(){
$("p").hide();
});
</script> -->
</body>
</html>id选择器
jquery的id选择器通过html元素中的id属性选取指定的元素，页面中的元素id必须是唯一的，所有在选择的时候需要使用#id选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<p id="test">我的id是test，button点击之后就会隐藏的段落
<button>戳我隐藏段落</button>
<script>
$("button").click(function(){
$("#test").hide();
});
</script>
</body>
</html>类选择器
类选择器，也就是.class选择器。jquery可以通过指定的class查找元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<p class="test">我是一个段落，我的class=test，点击下面的按钮，我就会隐藏了。
<button>戳我</button>
<script>
$("button").click(function(){
$(".test").hide();
});
</script>
</body>
</html>更多示例
语法 | 描述 |
|---|---|
$("*") | 选取所有元素 |
$(this) | 选取当前html元素 |
$("p.into") | 选取class为into的元素 |
$("ul li:first") | 选取ul元素的第一个li元素 |
$("ul li:first-child") | 选取每个ul元素的第一个li元素 |
$("[href]") | 选取带有href属性的元素 |
$("a[target=_blank]") | 选取所有target属性值等于"_blank的元素" |
$("a[target!=_blank]") | 选取所有target属性值不等于"_blank的元素" |
$(":button") | 选取所有type=button的input元素和button元素 |
$("tr:even") | 选取偶数位置的tr元素 |
$("tr:odd") | 选取技术位置的tr元素 |
举报
腾讯云开发者
