jQuery基本选择器

最新推荐文章于 2024-09-05 15:53:15 发布
最新推荐文章于 2024-09-05 15:53:15 发布
阅读量150 收藏
点赞数 1
分类专栏： jQuery 文章标签： 基本选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hemingyang97/article/details/80848426
版权

jQuery基本选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>基本选择器</title>
    <!--   引入jQuery -->
    <link href="styles/selectstyle.css" rel="stylesheet" />
    <script src="scripts/jquery-1.3.1.js"></script>
    <script src="scripts/assist.js"></script>
    <script type="text/javascript">
        $(function () {
            //选择 id为 one 的元素#b6ff00
            $("#btn1").click(function () {
                $("#one").css("background-color", "#b6ff00");
            });

            //选择 class 为 mini 的所有元素
            $("#btn2").click(function () {
                $(".mini").css("background-color", "green");
            });

            //选择 元素名是 div 的所有元素
            $("#btn3").click(function () {
                $("div").css("background-color", "orange");
            });

            //选择 所有的元素
            $("#btn4").click(function () {
                $("*").css("background-color", "blue");
            });

            //选择 所有的span元素和id为two的div元素
            $("#btn5").click(function () {
                $("span,#two,div").css("background-color", "pink");
            });

        });

    </script>
</head>
<body>
    <button id="reset">手动重置页面元素</button>
    <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
    <h3>基本选择器.</h3>
    <!-- 控制按钮 -->
    <input type="button" value="选择 id为 one 的元素." id="btn1" />
    <input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
    <input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />
    <input type="button" value="选择 所有的元素." id="btn4" />
    <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />
    <br /><br />
    <!-- 测试的元素 -->
    <!-- 测试的元素 -->
    <div class="one" id="one">
        id为one,class为one的div（女警）
        <div class="mini">class为mini的div（曙光）</div>
    </div>

    <div class="one" id="two" title="test">
        id为two,class为one,title为test的div（金克斯）
        <div class="mini" title="other">class为mini,title为other的div（宝石）</div>
        <div class="mini" title="test">class为mini,title为test的div（璐璐）</div>
    </div>

    <div class="one">
        class为one的div（EZ）
        <div class="mini">class为mini的div（琴女）</div>
        <div class="mini">class为mini的div（众星之子）</div>
        <div class="mini">class为mini的div（唤潮鲛姬）</div>
        <div class="mini">class为mini的div（牛头）</div>
    </div>

    <div class="one">
        class为one的div（奥巴马）
        <div class="mini">class为mini的div（凤女）</div>
        <div class="mini">class为mini的div（机器人）</div>
        <div class="mini">class为mini的div（狗熊）</div>
        <div class="mini" title="tesst">class为mini,title为tesst的div（雪人）</div>
    </div>

    <div style="display:none;" class="none">
        style的display为"none"的div（VN）
    </div>

    <div class="hide">
        class为"hide"的div（螃蟹）
    </div>

    <div>
        包含input的type为"hidden"的div（飞机）
        <input type="hidden" size="8" />
    </div>

    <span id="mover">正在执行动画的span元素.</span>
</body>
</html>

hemingyang97
关注
专栏目录
jquery基本选择器
03-15
NULL 博文链接：https://wangjiaddr.iteye.com/blog/322784
jQuery基本选择器和层次选择器学习使用
10-20
本文将详细介绍jQuery中的基本选择器和层次选择器的使用方法，为那些希望使用jQuery来增强网页功能的开发者提供参考。 首先，基本选择器是最为常用的，它包括ID选择器、类选择器、标签选择器以及通配符选择器。ID...
jQuery选择器——基本选择器
十一的博客
06-18 199
实例：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &amp
jQuery选择器 之 基本选择器
最新发布
听海边涛声
09-05 707
jQuery选择器 之 基本选择器
JQuery基础选择器
marsedely的专栏
04-26 429
element 选择器(寻找铅笔) 在文具盒中，有铅笔、钢笔和水彩笔，类似于页面中的、各个元素，虽然同属于一个容器，但有各自的功能，jQuery中可以根据元素名查找元素，格式如下： $(“element”) 其中element就是元素的名称，也就是工具盒中的笔的名称，找到水彩笔，我们就可画画了，通过元素名找到元素就可以对它进行操作了。 如下图所示：在页面中，根据元素
JQuery中基本选择器
你今天真好看呀
11-01 206
基本选择器 标签选择器（元素选择器） 语法： $(“html标签名”) 获得所有匹配标签名称的元素 id选择器 语法： $("#id的属性值") 获得与指定id属性值匹配的元素 类选择器 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素 并集选择器： 语法： $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素 <!DOCTYPE HTML PUB...
jQuery选择器(基本选择器)
m0_59860403的博客
10-30 363
#id 选择器：根据id查找标签对象 //1.选择 id 为 one 的元素 "background-color","#bbffaa" $("#btn1").click(function () { // css() 方法 可以设置和获取样式 $("#one").css("background-color","#bbffaa"); }); .class 选择器：根据class查找标签对象 //2.选择 class 为 mini 的所有元...
jQuery基本选择器选择元素使用介绍
10-27
jQuery基本选择器是使用最为频繁的一类选择器，在进行网页开发的过程中，熟练掌握基本选择器可以帮助开发者快速定位和操作DOM元素。基本选择器主要由四种类型组成，分别是元素Id选择器、Class选择器、元素名选择器...
jQuery基本选择器之标签名选择器
10-21
在本篇文章中，我们将深入探讨jQuery基本选择器中的标签名选择器。jQuery是一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。通过使用jQuery选择器，我们能够选取HTML元素...
jquery基本选择器匹配多个元素的实现方法
10-21
最后，希望分享的这篇关于jquery基本选择器匹配多个元素的实现方法，能够帮助大家在实际开发中更好地使用jQuery进行DOM操作，提高开发效率和页面交互的流畅性。如果大家对本文内容有任何疑问或者想要了解更多关于...
jQuery的基本选择器
xuxiaodon的博客
08-01 296
jQuery的选择器
jQuery之基本选择器
python全栈
01-24 414
基本选择器 标签选择器：$('p') id选择器：$(’#id‘)、$('p#id') 类选择器：$('.class')、$('h1.class') 通配选择器：$('*') 并集选择器：$('elem1,elem2,elem3') 后代选择器：$(ul li) 父子选择器：$(ul>li) 后面第一个兄弟元素 prev + next 后面所有的兄弟元素 prev ~ next 如果作为一个后端开发人员，必须会使用的选择器 id选择器 $("#id") 类选择器 $('.class属性值') 标签选
jQuery 基本选择器
actorWen的博客
12-19 185
基本选择器是jQuery中最常用的选择器，它通过元素id，class和标签名等来 查找DOM元素。 在网页中每个id名称只能使用一次，class允许重复使用。 #id：根据给定的id匹配一个元素，返回单个元素。例：$('#test')选取id为test的元素。 .class：根据给定的类名匹配元素，返回的是集合元素。例：$('.test')选取所有类名 为
jQuery选择器
shenglam的专栏
01-17 321
一、jQuery基本选择器 　　前面提到，选择器是jQuery的特色。jQuery的基本选择器主要分为以下五种类型： 　　1. $(“#myId”) // 选择ID为myId的网页元素 　　2. $(“标签名”) // 例如$(“div”)获取的就是HTML文档中的所有的div元素的jQuery对象集合 　　3. $(“.myClass”) // 获取的是HTML文档中所有的class为“
jQuery基本选择器详解与示例
"基本选择器是jQuery中最基础且常用的功能，它们允许开发者通过元素ID、类和标签名来选取DOM元素。ID选择器使用`#id`，如`$("#myDiv")`，用于选取具有特定ID的唯一元素。元素选择器通过元素名称，如`$("div")`，选取...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值