jQuery 之 [ 选择器 ]

头像
蔡志远
    阅读 8 分钟

    jQuery

    描述

    • jQuery是一个主流的JavaScript类库

      • 作用：是简化HTML页面和DOM操作
      • 特点：做得多，写得少

    jQuery()

    • 称为jQuery工厂函数
    • 用于操作jQuery的一个入口
    • jQuery()也可以简写为[ $() ]

    注意

    • DOM操作会得到DOM对象，jQuery操作会得到jQuery对象

    • 由于不便进行区分，会有一个jQuery约定

      • 在数据前加一个前缀 "$" 表示为jQuery操作
    <body>
<p id="text">三步白头</p>
<script>
    /*
        通过DOM操作来获取指定元素
         * 获取到指定元素
     */
    var p = document.getElementById( 'text' );
    console.log( p );// 显示 <p id="text">三步白头</p>

    /*
        通过jQuery来获取指定元素
         * 获取到一个jQuery对象
     */
    var $p = $( '#text' );
    console.log( $p );// 显示 jQuery.fn.init [p#text, context: document, selector: "#text"]
</script>
</body>

    DOM对象和jQuery对象

    • DOM对象和jQuery对象之间可以相互转换

    DOM对象转换成jQuery对象

    • 利用工厂函数将DOM对象转换成jQuery对象

    jQuery对象转换成DOM对象

    • jQuery对象加索引值

    • jQuery对象提供的get()方法

      • get()方法中的参数为索引值

    示例代码

    <body>
<p id="text">三步白头</p>
<script>
    /* 定位页面元素 */
    var p = document.getElementById( 'text' );
    /* DOM对象 */
    console.log( p );// 显示 <p id="text">三步白头</p>

    /* 将DOM转换成jQuery对象 */
    var $p = $( p );
    console.log( $p );// 显示 jQuery.fn.init(1)

    /* 将jQuery对象转换成DOM对象 */
    var p1 = $p[0];
    console.log( p1 );// 显示 <p id="text">三步白头</p>

    /* 将jQuery对象转换成DOM对象 */
    var p2 = $p.get( 0 );
    console.log( p2 );// 显示 <p id="text">三步白头</p>
</script>
</body>

    选择器

    描述

    • jQuery的选择器是用于定位HTML页面中的元素

    基本选择器

    • ID选择器 - 匹配指定ID的元素
    • 元素选择器 - 匹配所有指定元素名的元素
    • 类选择器 - 匹配指定class属性名的元素
    • 通配符选择器 - 匹配页面所有元素

    示例代码

    <body>
<div id="d1">三步白头</div>
<div id="d2" class="dd">天道昭彰</div>
<script>
    /* 通过ID选择器来获取指定元素 */
    console.log( $( '#d1' ) );// 显示 jQuery.fn.init(1)

    /* 通过元素选择器来获取指定的元素 */
    console.log( $( 'div' ) );// 显示 jQuery.fn.init(2)

    /* 通过类(class)选择器来获取指定元素 */
    console.log( $( '.dd' ) );// 显示 jQuery.fn.init(1)

    /* 通过通配符选择器来获取页面中所有元素 */
    console.log( $( '*' ) );// 显示 jQuery.fn.init(9)

    /* 也可以通过组合选择器来获取目标元素 */
    /* 并集组合选择器 */
    console.log( $( '#d1, .dd' ) );// 显示 jQuery.fn.init(2)
    /* 交集组合选择器 */
    console.log( $( '#d2.dd' ) );// 显示 jQuery.fn.init(1)
</script>
</body>

    层级选择器

    • 后代选择器 - 匹配指定祖先元素中的后代元素
    • 子选择器 - 匹配指定父元素中的子元素
    • 相邻兄弟选择器 - 匹配指定元素的下一个兄弟元素
    • 普通兄弟选择器 - 匹配指定元素的下面所有兄弟元素

    示例代码

    <body>
<div id="fuji">
    <div id="ziji1">
        <div id="d6"></div>
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d4"></div>
        <div id="d5"></div>
    </div>
    <div id="ziji2">
        <div id="d3"></div>
    </div>
</div>
<script>
    /* 通过后代选择器来获取指定元素的所有后代元素 - 不会区分后代的层级关系 */
    console.log( $( '#fuji div' ) );// 显示 jQuery.fn.init(8)

    /* 通过子级选择器来获取指定元素的所有子级元素 */
    console.log( $( '#fuji > div' ) );// 显示 jQuery.fn.init(2)

    /* 通过相邻兄弟选择器来获取指定元素的下一个相邻的兄弟元素 */
    console.log( $( '#d1 + div' ) );// 显示 jQuery.fn.init(1)
    /* 通过普通兄弟选择器来获取指定元素的后面所有兄弟元素 */
    console.log( $( '#d1 ~ div' ) );// 显示 jQuery.fn.init(3)

    /* jQuery提供了siblings()方法 - 可以获取指定元素的所有兄弟元素(前面 + 后面) */
    console.log( $( '#d1' ).siblings( 'div' ) );// 显示 jQuery.fn.init(4)
</script>
</body>

    基本过滤选择器

    <head>
    <meta charset="UTF-8">
    <title>基本过滤选择器</title>
    <script src="jquery.js"></script>
    <style>
        #donghua {
            width: 100px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
<h1>这是标题</h1>
<h2>这还是标题</h2>
<div>三步白头</div>
<div id="d2">
    <div id="child"></div>
</div>
<div></div>
<div></div>
<div>天道昭彰</div>
<div id="donghua"></div>
<script>
    /* 获取指定元素的第一个子元素 */
    console.log( $( 'div:first' ) );// 显示 jQuery.fn.init(1)
    /* 获取指定元素的最后一个子元素 */
    console.log( $( 'div:last' ) );// 显示 jQuery.fn.init(1)

    /* 获取指定元素中所有偶数行(索引值)的子元素 */
    console.log( $( 'div:even' ) );// 显示 jQuery.fn.init(4)
    /* 获取指定元素中所有奇数行(索引值)的子元素 */
    console.log( $( 'div:odd' ) );// 显示 jQuery.fn.init(3)

    /* 获取与指定索引值相等的元素 */
    console.log( $( 'div:eq( 0 )' ) );// 显示 jQuery.fn.init(1)
    /* 获取大于指定索引值的元素 */
    console.log( $( 'div:gt( 2 )' ) );// 显示 jQuery.fn.init(4)
    /* 获取小于指定索引值的元素 */
    console.log( $( 'div:lt( 2 )' ) );// 显示 jQuery.fn.init(2)

    /* 获取标题元素 */
    console.log( $( ':header' ) );// 显示 jQuery.fn.init(2)

    /* 设置动画效果 */
    function donghua(){
        $( '#donghua' ).slideToggle( donghua );
    }
    donghua();
    /* 获取正在执行动画的元素 */
    console.log( $( ':animated' ) );// 显示 jQuery.fn.init(1)

    /* 获取去除指定目标的元素 */
    console.log( $( 'div:not("#child")' ) );// 显示 jQuery.fn.init(6)
</script>
</body>

    内容过滤选择器

    <body>
<div id="d1">这是编号d1的div元素</div>
<div id="d2">这是编号d2的元素</div>
<div id="d3"></div>
<div id="d4">
    <div id="d5">这是编号d5的元素</div>
</div>
<script src="javascript/jquery.js"></script>
<script>
    /* 匹配拥有指定文本内容的元素 - :contains( )“括号中填写指定的文本内容” */
    console.log( $( 'div:contains("div")' ));
    /* 匹配没有文本内容的元素 - :empty */
    console.log( $( 'div:empty' ));
    /* 匹配有文本内容的元素 - :parent */
    console.log( $( 'div:parent' ));
    /* 匹配拥有指定文本内容的元素的父级元素 - :has( )“括号中填写带有指定文本内容的子级元素” */
    console.log( $( 'div:has(:contains("d5"))' ));
</script>
</body>

    可见性过滤选择器

    <head>
    <meta charset="UTF-8">
    <title>可见性过滤选择器</title>
    <script src="js/jquery.js"></script>
    <style>
        #d1 {
            display: none;
        }
        #d2 {
            visibility: hidden;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<script src="javascript/jquery.js"></script>
<script>
    /* 匹配未隐藏的元素 - :visible */
    console.log( $( 'div:visible' ));
    /* 匹配隐藏的元素 - :hidden */
    console.log( $( 'div:hidden' ));
</script>
</body>

    属性过滤选择器

    <body>
<div id="d"></div>
<div class="ad"></div>
<div class="ad c1 kda"></div>
<div class="kda ad c2"></div>
<div class="c3 kda ad"></div>
<script src="javascript/jquery.js"></script>
<script>
    /* 匹配具有指定属性的元素 - [属性名] */
    console.log( $( 'div[id]' ));
    /* 匹配具有指定属性和属性值的元素 - [属性名=属性值] */
    console.log( $( 'div[class="ad"]' ));
    /* 匹配没有指定属性和属性值的元素 - [属性名!=属性值]“包含没有指定属性的元素” */
    console.log( $( 'div[class!="ad"]' ));
    /* 匹配具有以指定属性值为开始的指定属性的元素 - [属性名^=属性值] */
    console.log( $( 'div[class^="ad"]' ));
    /* 匹配具有以指定属性值为结束的指定属性的元素 - [属性名$=属性值] */
    console.log( $( 'div[class$="ad"]' ));
    /* 匹配具有以指定属性包含指定属性值的元素 - [属性名*=属性值] */
    console.log( $( 'div[class*="kda"]' ));
</script>
</body>

    子元素过滤选择器

    <body>
<div id="d1">
    <div id="d11"></div>
    <div id="d12">
        <div id="d121"></div>
    </div>
    <div id="d13"></div>
</div>
<script src="javascript/jquery.js"></script>
<script>
    /*
        匹配指定元素的第一个子元素 - :first-child
        * 会对其进行判断，判断当前指定的目标元素是否是其父级的第一个子元素
     */
    console.log( $( 'div:first-child' ));
    /*
        匹配指定元素的最后一个子元素 - :last-child
        * 会对其进行判断，判断当前指定的目标元素是否是其父级的最后一个子元素
     */
    console.log( $( 'div:last-child' ));
    /* 匹配指定元素的第几个子元素 - :nth-child( )“括号中填写的数字表示第几个，不是索引值” */
    console.log( $( 'div:nth-child(2)' ));
    /* 匹配是父元素唯一的子元素的元素 - :only-child */
    console.log( $( 'div:only-child' ));
</script>
</body>

    表单对象属性过滤选择器

    <body>
<form action="#">
    <input disabled type="text" id="in1">
    <input type="text" id="in2">
    <br>
    <input checked type="radio" name="sj" value="yl1">苹果
    <input type="radio" name="sj">乐视
    <br>
    <input checked type="checkbox" name="yxj" value="yl2">PS4
    <input type="checkbox" name="yxj">PSV
    <br>
    <select>
        <option value="sj">手机</option>
        <option selected value="dn">电脑</option>
        <option value="yxj">游戏机</option>
    </select>
    <br>
    <input type="submit">
</form>
<script src="javascript/jquery.js"></script>
<script>
    /* 匹配所有可用的元素 - input:enabled */
    $( 'input[type="text"]:enabled' ).val( '密码' );
    /* 匹配所有不可用的元素 - input:disabled */
    $( 'input:disabled' ).val( '用户名' );
    /* 匹配所有被选中的元素（单选和多选） - input:checked */
    console.log( $( 'input:checked' ).val() );
    var $input = $( 'input:checked' );
    /* 通过遍历获取所有被选中的元素 */
    for ( var s = 0; s < $input.length; s++ ) {
        var ins = $input[s];
        console.log( ins.value );
    }
    /* 匹配下拉列表中选中的元素 - select>option:selected */
    console.log( $( 'select>option:selected' ).val() );
</script>
</body>
    前端jquery
    蔡志远
    9 声望5 粉丝
    « 上一篇
    JavaScript 之 BOM
    下一篇 »
    jQuery 之 [ DOM操作 ]

    引用和评论

    推荐阅读
    头像
    Ajax 之 [ jQuery中的Ajax ]

    蔡志远阅读 1.3k

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.6k

    头像
    100个React最佳实践小技巧

    夕水赞 16阅读 2.2k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.6k

    头像
    开发插件集合

    寒青赞 12阅读 3k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 2.3k

    0 条评论
    得票最新