jQuery 之 [ 选择器 ]

时间 2019-12-05

标签 jquery 选择器栏目 JQuery 繁體版

原文原文链接

jQuery

描述

jQuery是一个主流的JavaScript类库javascript
- 做用：是简化HTML页面和DOM操做
- 特色：作得多，写得少

jQuery()

称为jQuery工厂函数
用于操做jQuery的一个入口
jQuery()也能够简写为[ $() ]

注意

DOM操做会获得DOM对象，jQuery操做会获得jQuery对象
因为不便进行区分，会有一个jQuery约定java
- 在数据前加一个前缀 "$" 表示为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()方法jquery
- 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>

1. 【jQuery】之选择器
2. jquery 之选择器
3. jQuery之选择器
4. jQuery选择器之层级选择器
5. jquery选择器
6. jQuery-jQuery选择器
7. jQuery选择器
8. JQuery选择器
9. jQuery 选择器
10. jQuery-选择器
更多相关文章...
• jQuery Mobile 表单选择菜单 - jQuery Mobile 教程
• XQuery 选择和过滤 - XQuery 教程
• Docker容器实战(七) - 容器眼光下的文件系统
• Docker容器实战(六) - 容器的隔离与限制