前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[jQuery笔记] jQuery选择器

[jQuery笔记] jQuery选择器

作者头像
行 者
发布2019-12-05 18:14:08
1.8K0
发布2019-12-05 18:14:08
举报
文章被收录于专栏:运维技术迷

jquery选择器允许对html中的元素组合单个元素进行操作,jquery的选择器和css的选择器几乎大同小异,大致分为元素选择器、id选择器和类选择器。jquery的选择器基于元素的id、类、类型、属性、属性值等查找或选择html元素,基于已经存在的css选择器,另外,jquery也支持自定义选择器。

jquery中所有选择器都是以美元符号开头,即$()。

元素选择器

代码语言:javascript
复制
<!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>
jquery-yuansuxuanzeqi
jquery-yuansuxuanzeqi

id选择器

jquery的id选择器通过html元素中的id属性选取指定的元素,页面中的元素id必须是唯一的,所有在选择的时候需要使用#id选择器。

代码语言:javascript
复制
<!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>
jquery-idxuanzeqi
jquery-idxuanzeqi

类选择器

类选择器,也就是.class选择器。jquery可以通过指定的class查找元素。

代码语言:javascript
复制
<!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>
jquery-leixuanzeqi
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元素

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 元素选择器
  • id选择器
  • 类选择器
  • 更多示例
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档