[jQuery笔记] jQuery选择器

行者

发布于 2019-12-05 10:14:08

1.8K00

代码可运行

运行总次数：0

代码可运行

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元素