jq 选择器

目录

01  jquery概述

02 jq的特点和基本操作

03 jq的过滤选择器

04 jq的筛选选择器

05 jq对象和js对象的相互转化

06 jq的css方法

07 jq的class方法

---

01  jquery概述

        jq是一个第三方的库文件

                是其他团队 把js一些繁琐的操作封装成了一个个的方法  放到一个单独的js文件里面

                然后把源代码开发出来 我们拿过来直接引入即可使用

        js代码:

<button>点我显示</button>
<ul id="box">
    <li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
    <li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
    <li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
    <li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
    <li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
</ul>
<script>
    var btn=document.querySelector('button')
    var box=document.querySelector('#box')
    btn.onclick=function(){
        box.style.display='block'
    }
</script>

        jq代码:        

    <button>点我显示</button>
    <ul id="box">
        <li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
        <li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
        <li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
        <li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
        <li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
    </ul>
    <script src="./jquery.js"></script>
    <script>
        $('button').click(function(){
            $('ul').show(3000)
        })
    </script>

02 jq的特点和基本操作

        1.特点:

                1.隐式迭代 (系统自己悄悄的遍历 然后把要设置的内容设置上)

                2.链式编程

                jq的入口函数: 

                $(function(){

                })   功能和window.onload类似

       2. jq的基本操作:

                jq是通过$('选择器') 选择指定的元素

                返回的是伪数组

                $('ul>li').html('设置内容') //隐式迭代

03 jq的过滤选择器

        jq过滤选择器的使用

                :even  匹配索引值为偶数的元素

                :odd  匹配索引值为奇数的元素

                :first 匹配第一个元素

                :last  匹配最后一个元素

                :gt(索引值)  找到比当前索引值还大的所有元素

                :lt(索引值)  找到比当前索引值还小的所有元素

                :eq(索引值)  找到指定索引值的元素

04 jq的筛选选择器

        jq的筛选选择器: 相当于原生js的节点访问关系

        获取父节点:

                js: 原生js的属性名:节点对象.parentNode

                jq: jq对象.parent()

        获取子节点:

                js: 节点对象.children

                      节点对象.childNodes

                jq: jq对象.children([选择器])  [ ] 表示当前参数选择器  可传可不传

                         获取所有子节点  或者  按照参数选择器获取子节点

                      jq对象.find(选择器) 选择器必传

                         获取选择器选择的后代元素

        获取兄弟节点:

                js:    节点对象.previousELementSibling

                        节点对象.nextElementSibling

                jq:    jq对象.prev() 获取上一个兄弟

                        jq对象.next() 获取下一个兄弟

                        jq对象.prevAll() 获取前面所有的兄弟

                        jq对象.nextAll() 获取后面所有的兄弟

                        jq对象.Sibling([选择器]) 获取所有兄弟  参数可传

                                不传表示获取所有兄弟

                                传选择器表示获取指定选择器的兄弟

        获取指定元素:

                jq对象.first()  在选择器关联的一堆元素中找第一个

                jq对象.last()  在选择器关联的一堆元素中找最后一个

                jq对象.eq(索引值)  在选择器关联的一堆元素中找到指定索引值的元素

05 jq对象和js对象的相互转化

        jq对象和js对象的相互转换:

        jq对象转换成原生js对象

                jq对象.get(索引值)

                或者

                jq对象[索引值]

        原生js对象转换成jq对象

                $(原生js对象)

06 jq的css方法

        jq的css方法操作样式

        1.增加单个样式

                jq对象.css("键","值")

        2.增加多个对象

                jq对象.css({

                        css属性名和css属性值的集合

                })

        3.修改样式 (跟增加样式一样)

        4. 获取样式的值

                jq对象.css("css属性名")

                        外链,内嵌,行内样式的值都可以获取

        css方法操作的样式都是行内样式

07 jq的class方法

        jq增加class的方式

                增加 :   JQ对象.addClass("类名1 类名2 ...")

                删除 :   JQ对象.removeClass("类名1 类名2 ...")

                判断是否拥有指定class:

                        jq对象.hasClass('类名')

                切换class:

                        jq对象.toggleClass("类名1 类名2 ...")