【jQuery】之选择器

jQuery

JS类库其实就是简化Js的开发，主要是DOM的操作，JS类库会预定义一系列对象和函数，降低对JS的使用难度，兼容各个浏览器

工厂函数

主要是简化通过函数定位页面元素，将
DOM对象包装成jQuery对象，建立页面元素

<script src="js/jquery.js"></script>
    <!--引入jQuery-->
</head>
<body>
<button id="qyc">按钮</button>
<script>
    var qyc = document.getElementById('qyc');
//    DOM对象（返回该对象），获取页面中的按钮元素
    console.log(qyc);
//    var qyc = $('#qyc');
    var qyc = jQuery('#qyc');
    /*获取页面中按钮元素
    jQuery()是jQuery的工厂函数
    * 函数是jQuery的人口
    * 定位页面中元素
    * 另一个用法；$()=jQuery()
     */
    console.log(qyc);
</script>
</body>

DOM对象与jQuery对象

DOM对象和jQuery对象是可以互相转换的，是为了简化DOM的

<script src="js/jquery.js"></script>
</head>
<body>
<button id="qyc">按钮</button>
<script>
    var qyc = document.getElementById('qyc');
//    DOM操作()返回该对象
    var $qyc = $(qyc);
    console.log($qyc);
//    DOM对象转换为jQuery对象-工厂函数
    var qyc1 = $qyc[0];
    console.log(qyc1);
//    jQuery对象转换为DOM对象-jQuery对象[索引值]
    var qyc2 = $qyc.get(0);
    console.log(qyc2);
//    jQuery对象提供了get(index)方法-index为索引值
</script>
</body>

选择器

基本选择器

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

 <title>基本选择器</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="qi">爱新觉罗</div>
<div id="q2" class="cla">呼延觉罗</div>
<script>
    console.log($('#q1'));
    console.log($('div'));
    console.log($('.cla'));
    console.log($('*'));
    // 通配符选择器-匹配所有
    console.log($('#d1, .cls'));
//    组合选择器-多个选择器使用逗号分隔(并集)
    console.log($('#q2.cla'));
//    组合选择器-多个选择器没有分隔(交集)
</script>
</body>

层级选择器

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

<body>
<div id="qh">
    <div id="cq">
        <div id="q6"></div>
        <div id="q1"></div>
        <div id="q2"></div>
        <div id="q4"></div>
        <div id="q5"></div>
    </div>
    <div id="cq2">
        <div id="q3"></div>
    </div>
</div>
<script>
    console.log('#qh div');
    console.log('#qh>div');
    // 指定元素的下个相邻兄弟元素
    console.log('#q1~div');
    // 指定元素后面所有的兄弟元素
    console.log('#q1').siblings('div');
    // siblings()方法-获取指定元素所有兄弟元素(前面+后面)
</script>
</body>

基本过滤选择器

 <script src="js/jquery.js"></script>
    <style>
        #qyc {
           width: 100px;
           height: 200px;
           background-color: blue;
        }
    </style>
</head>
<body>
<h1>标题</h1>
<h2>标题</h2>
<div id="q1">
    <div id="qh"></div>
</div>
<div></div>
<div></div>
<div id="animated"></div>
<script>
    console.log($('div:first'));
    console.log($('div:last'));
//  在指定范围匹配元素中进行筛选
    console.log($('div:even'));
    console.log($('div:odd'));
//  索引值为偶数时-奇数元素；索引值为奇数十-偶数元素
    console.log($('div:eq(0)'));//等于
    console.log($('div:gt(2)'));//大于
    console.log($('div:lt(2)'));//小于

    console.log(':header');
//  :header-匹配h1到h6元素
    function animated() {
        $('animated').slideToggle(animated);
    }
    animated();
    console.log($(':animated'));
//    :animated-只匹配由jQuery实现动画
    console.log($('div:not("#qh")'));
</script>
</body>

内容过滤选择器

<script src="js/jquery.js"></script>
</head>
<body>
<div>div元素</div>
<div></div>
<div>
    <div id="qh"></div>
</div>
<script>
    console.log($('div:contains("q1")'));
    console.log(('div:empty'));
    console.log($('div:parent'));
    console.log($('div:has("#qh")')[0]);
//    :has()-表示包含匹配指定选择器元素父级元素
</script>
</body>

可见性过滤选择器

<script src="js/jquery.js"></script>
    <style>
        #q1 {
            display: none;
        }
        #q2 {
            visibility: hidden;
        }
    </style>
</head>
<body>
<div id="q1">呼延觉罗</div>
<div id="q2">爱新觉罗</div>
<input type="hidden" value="用户名">
<input type="text" name="username">
<script>
    /*
        :hidden选择器
        * 不能匹配CSS样式属性visibility设置为hidden的隐藏元素
        * 还能匹配HTML页面中不做任何显示效果的元素
        * 用法 - 尽量确定元素类型或指定范围
     */
    console.log($(':hidden'));
    /*
        :visible选择器
        * 匹配CSS样式属性visibility设置为hidden的隐藏元素
          * 当visibility设置为hidden时的元素，依旧占有页面空间
        * 还能匹配HTML页面中<html>和<body>元素
     */
    console.log($(':visible'));

</script>
</body>

属性过滤选择器

<script src="js/jquery.js"></script>
</head>
<body>
<div id="username" name="q1" class="mydiv"></div>
<div id="PASSWORD" name="d2" class="mycls"></div>
<div id="d1"></div>
<div class="myq"></div>
<script>
    console.log($('div[name]'));
    console.log($('div[class=mydiv]'));
    // [attr!=value]选择器-包含没有attr属性的元素
    console.log($('div[class!=mydiv]'));

    console.log($('div[class^=my]'));
    // 属性过滤选择器组合用法-交集
    console.log($('div[name=q1][class^=my]'));

</script>

</body>

子元素过滤选择器

<script src="js/jquery.js"></script>
</head>
<body>
<div id="q1">id为qi的div元素</div>
<div id="q2">id为qi的div元素</div>
<div id="q3">id为qi的div元素
    <div id="qh"></div>
</div>
<script>
    console.log($('div:first-child'));
//    :first-child- 当前元素是否为第个子元素
    console.log($('div:last-child'));

    console.log(('div:nth-child'));
    console.log(('div:only-child'));
//    匹配当前元素作为第index个字元素
//    index是从1开始，便是第几个
</script>
</body>

表单对象属性过滤选择器

<body>
<form action="#">
    <input type="text" disabled>
    <input type="checkbox">html
    <input type="checkbox" checked>css
    <select>
        <option>端游</option>
        <option selected>单机</option>
        <option>页游</option>
    </select>
</form>
<script>
    console.log($('input:disabled'));
    console.log($('input:checked'));
    console.log($('option:selected'));
</script>
</body>