jQuery基本选择器&过滤选择器&可见选择器
Posted 栗栗本栗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery基本选择器&过滤选择器&可见选择器相关的知识，希望对你有一定的参考价值。
基本选择器
选择器允许您对html元素组或单个元素进行操作
| 示例 | 说明 | |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id=“lastname” 的元素 |
| .class | $(".intro") | 所有 class=“intro” 的元素 |
| element | $(“p”) | 所有 <p> 元素 |
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello jQuery</title>
</head>
<body>
<p id="p1">睡不醒</p>
<div class="div1">好饿</div>
<span></span><span></span>
<script src="js/jquery-1.12.4.js"></script>
<script>
// $('*').css("font-size","18pt");//改变所有元素的字体大小
$('#p1').html('<h1>好困</h1>');
$('.div1').html('<h1>想吃东西</h1>');
$('span').html('Hello jQuery ');
</script>
</body>
</html>
过滤选择器
| 示例 | 说明 | |
|---|---|---|
| :first | $(“p:first”) | 第一个 <p> 元素 |
| :last | $(“p:last”) | 最后一个 <p> 元素 |
| :even | $(“tr:even”) | 所有偶数 <tr> 元素 |
| :odd | $(“tr:odd”) | 所有奇数 <tr> 元素 |
| :eq(index) | $(“ul li:eq(3)”) | 列表中的第四个元素（index 从0开始） |
| :gt(no) | $(“ul li:gt(3)”) | 列出 index 大于 3 的元素 |
| :lt(no) | $(“ul li:lt(3)”) | 列出 index 小于 3 的元素 |
| :not(selector) | $(“input:not(:empty)”) | 所有不为空的 input 元素 |
| :contains(text) | $(":contains(‘W3School’)") | 包含指定字符串的所有元素 |
| :empty | $(":empty") | 没有内容的元素 |
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><Title></title>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<ul>
<li>java</li>
<li>php</li>
<li>html</li>
<li>c++</li>
</ul>
<script>
$('ul li').css("font-size","18pt");
console.log($('ul li:first').html());//java
console.log($('ul li:last').html());//c++
//列表中的第二个元素（从0开始）
console.log($('ul li:eq(2)').html());//html
let arr = $('ul li:odd');//所有奇数元素
arr.each(function (index,item){
//console.log(index+'-->'+item.innerHTML);
console.log(index+'-->'+$(item).html());
});
</script>
</body>
</html>
可见选择器
案例
| 示例 | 说明 | |
|---|---|---|
| :hidden | $(“p:hidden”) | 所有隐藏的 <p> 元素 |
| :visible | $(“table:visible”) | 所有可见的表格 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<p style="display: none">哈哈</p>
<p style="display: none">哈哈哈哈</p>
<p>星期四</p>
<p>星期五</p>
<script>
//找到所有隐藏的p标签
$('p:hidden').each(function (index,item){
let p = $(item);
console.log(p.html());
})
//找到所有可见的p标签
$('p:visible').each(function (index,item){
let p = $(item);
console.log(p.html());
})
//找到所有p标签
$('p').each(function (index,item){
let p = $(item);
console.log(p.html());
})
</script>
</body>
</html>
以上是关于jQuery基本选择器&过滤选择器&可见选择器的主要内容，如果未能解决你的问题，请参考以下文章
jQuery 基本选择器 层次选择器 过滤选择器 内容过滤选择器 可见过滤选择器 属性过滤选择器 表单对象属性过滤选择器
jQuery选择器介绍：基本选择器层次选择器过滤选择器表单选择器
jQuery ---[jQuery选择器,jQuery对象的遍历]
JavaScript之jQuery-2 jQuery选择器(jQuery选择器基本选择器层次选择器过滤选择器表单选择器)