4--Jquery中的选择器（基本选择器）

最新推荐文章于 2022-01-24 07:00:00 发布

qwy715229258163

最新推荐文章于 2022-01-24 07:00:00 发布

阅读量218

点赞数 1

分类专栏： Jquery 文章标签： css js jquery html javascript

本文链接：https://blog.csdn.net/qwy715229258163/article/details/113862575

版权

Jquery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文介绍了jQuery中的基本选择器，包括ID选择器、元素选择器、类选择器和通配符选择器的使用方法，并提供了示例代码，展示了如何通过这些选择器改变DOM元素的样式。同时，还讲解了组合选择器的运用，实现对多个不同类型的元素进行操作。

摘要由CSDN通过智能技术生成

选择器是Jquery框架的根基，在Jquery中对事件的处理。遍历DOM和ajax操作都依赖选择器。
Jquery选择器的有点：就是写法简洁。
$(“#username”)等价于：
domcument.getElementById(“username”);
$(“tagName”)等价于：
domcument.getElementsByTagName(“tagName”)
实例演示需要的HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jquery的选择器</title>
    <script src="jquery-1.11.3.js"></script>
    <!--导入自定义的js文件-->
   <!-- <script src="selector_base.js"></script>-->
    <!--<script src="selector_level.js"></script>-->
    <script src="selector_filter.js"></script>
    <style>
        div,span,p {
            width:140px;
            height:140px;
            margin:5px;
            background:#aaa;
            border:#000 1px solid;
            float:left;
            font-size:17px;
            font-family:Verdana;
        }
        div.mini {
            width:55px;
            height:55px;
            background-color: #aaa;
            font-size:12px;
        }
        div.hide {
            display:none;
        }
    </style>
</head>

<body>
    <div class="one" id="one" >
        id为one,class为one的div
        <div class="mini">class为mini</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 class="mini"  title="test">class为mini,title为test</div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini"></div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini"  title="tesst">class为mini,title为tesst</div>
    </div>
    <div style="display:none;"  class="none">
        style的display为"none"的div
    </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>

基本选择器是Jquery中最常用选择器，也是最简单选器。它通过元素id、class和标签名来查找DOM元素。（类似CSS）

#id（id选择器）：用法$("#myDIV”);返回值是单个元素组成的集合。就是直接选择HTML中的id=”myDIV”的元素
实例：改变id为one的元素的背景颜色为#FF0000

/*Id选择器：
*  语法：$("#id的值")
* */
$(function(){
    $("#one").css("background-color","#FF0000");
});

Element（元素选择器）:用法$(“元素名”)：返回值，集合元素
实例：改变元素名为
的所有元素的背景为蓝色（blue）

/*元素选择器：
* 语法:$("元素名")
* */
$(function(){
    $("div").css("backgroundColor","blue");
});

class（类选择器）：用法$(“.myClass”),返回值，集合元素
实例：改变class为mini的所有元素的背景为黄色（yellow）

/*类选择器：
* 语法：$(".类属性的值")
* */
$(function(){
    $(".mini").css("backgroundColor","yellow").css("color","red");
});

通配符选择器 * ：用法$(“*”):返回值，集合元素，匹配所有元素。
实例：改变所有元素的背景为#00FF33

/*通配符选择器：
* 语法：$("*")
* */
$(function(){
    $("*").css("backgroundColor","#00FF33");
});

selector1,selector2,selector3…（组合选择器）用法：$(“div,span,p.myCLass”)返回集合元素。
实例：改变所有的元素和id为TWO的元素的背景为yellow

/*组合选择器：
* 语法：$("selector1,selector2,selectorN")
* */
$(function(){
    $("span,#two").css("backgroundColor","yellow");
})

实例效果这里全部省略。可以自行验证。
整个selector_base.js的代码如下：

/**
 * Jquery中的基本选择器
 */
/*Id选择器：
*  语法：$("#id的值")
* */
/*
$(function(){
    $("#one").css("background-color","#FF0000");
});
*/
/*元素选择器：
* 语法:$("元素名")
* */
/*
$(function(){
    $("div").css("backgroundColor","blue");
});
*/
/*类选择器：
* 语法：$(".类属性的值")
* */
/*$(function(){
    $(".mini").css("backgroundColor","yellow").css("color","red");
});*/
/*通配符选择器：
* 语法：$("*")
* */
/*$(function(){
    $("*").css("backgroundColor","#00FF33");
});*/
/*组合选择器：
* 语法：$("selector1,selector2,selectorN")
* */
$(function(){
    $("span,#two").css("backgroundColor","yellow");
})

qwy715229258163

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
4--Jquery中的选择器（基本选择器）

选择器是Jquery框架的根基，在Jquery中对事件的处理。遍历DOM和ajax操作都依赖选择器。Jquery选择器的有点：就是写法简洁。$(“#username”)等价于：domcument.getElementById(“username”);$(“tagName”)等价于：domcument.getElementsByTagName(“tagName”)实例演示需要的HTML<!DOCTYPE html><html><head lang="en"&gt
复制链接

扫一扫

专栏目录