专栏首页运维技术迷[jQuery笔记] jQuery选择器

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [jQuery笔记] jQuery语法

    jquert语法通常是选取html元素,并对所则的元素执行某些操作(actions)

    行 者
  • 如何查看mysql event是否启用

    行 者
  • 连仕彤博客ccat让cat命令有颜色的输出

    行 者
  • 12306用户数据遭泄露售卖

    ? 乌云漏洞报告截图 腾讯科技讯 12月25日消息,漏洞报告平台乌云漏洞今发布报告称,大量包括用户帐号、明文密码、身份证和邮箱在内的12306用户数据在互联网...

    小小科
  • 不同场景下使用CSS隐藏元素

    使用 CSS 让元素不可见的方法很多,剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见,但背后却在多个维度上都有差别。

    laixiangran
  • archive log文件大小与redo log文件大小关系探究

    首先我们来看下什么是archive log file,oracle 11g 的concept中是这样定义的:When you enable archiving ...

    孙杰
  • 给你的博客加上个Live2D看板娘吧

    本文章中所用模型解包自药水制作师手机游戏,版权归该官方所有。(没错,我也是来安利这款游戏的)

    阿珏
  • 【Flutter 专题】80 初识 Flutter Stream (一)

    和尚在之前尝试 EventChannel 时曾经用到过 Stream 流数据,现在准备学习一下 flutter_bloc 时也主要用到 Stream...

    阿策
  • 你应该知道的网页设计中的规则和禁忌

    网页设计是一个棘手的话题。当你创建网站时你需要考虑很多事情。为了简化这个任务,我这里准备了一个列表,每个网页设计师在设计网页时都应该考虑这些注意事项。好消息...

    奔跑的小鹿
  • 【小家java】Spring事务嵌套引发的血案---Transaction rolled back because it has been marked as rollback-only

    想必大家一想到事务,就想到ACID,或者也会想到CAP。但笔者今天不讨论这个,哈哈~本文将从应用层面稍带一点源码,来解释一下我们平时使用事务遇到的一个问题但让很...

    BAT的乌托邦

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动