[jQuery笔记] jQuery选择器

@lianst  November 1, 2018

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>
        <p>这就是一个测试段落</p>
        <p>这也是一个测试段落</p>
        <button>戳我</button>
        
<!--     <script>
        $("button").click(function(){
            $("p").hide();
        });
        </script> -->
    </body>
</html>

jquery-yuansuxuanzeqi

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点击之后就会隐藏的段落</p>
        <button>戳我隐藏段落</button>
        <script>
            $("button").click(function(){
                $("#test").hide();
            });
        </script>
    </body>
</html>

jquery-idxuanzeqi

类选择器

类选择器,也就是.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,点击下面的按钮,我就会隐藏了。</p>
        <button>戳我</button>
        <script>
            $("button").click(function(){
                $(".test").hide();
            });
        </script>
    </body>
</html>

jquery-leixuanzeqi

更多示例

语法描述
$("*")选取所有元素
$(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元素

添加新评论