jQuery-1

一、了解jQuery 

        + 是一个优秀的的JS函数库（方法库 工具库） 

         ==获取dom元素

         ==操作元素的类名

         ==操作元素的属性

         ==操作元素的样式

         ==可以进行元素动画 -->

        jQuery 里面的95%以上都是封装好的方法，将来使用的时候别忘了加（）

 类库、插件、框架的区别

        插件

            == 为了实现页面某一个单一类功能而封装的代码

            == swiper滑动类效果（跑马灯 轮播图）

        类库

            == 把我们日常的操作封装成一个个的方法，给我们使用

            == jQuery（封装了各种各样的dom操作）

        框架

            == 一套有自己完整生态系统的东西

            == 所有东西都准备好了，我们只需要按照规定好的规则进行使用

            == vue/react/angular 

二、jQuery的引入

        + 需要下载好jQuery的js文件 用script引入

        jQuery的中文网： http://hemin.cn/jq/

三、jquery的选择器

        + 选择器就是用来帮助我们获取dom元素的方法

        当jQuery文件被引入后，我们的全局多了两个变量

        == $

        == jQuery

        + 它们两个没有任何的区别 

        console.log($('ul')) //获取页面中所有的ul标签
        console.log($('ul li')) //获取页面中所有的ul下的li标签
        console.log($('ul>li')) //获取页面中ul的子元素中的li标签
        console.log($('ul>li:nth-child(1)')) //获取ul的子元素的li中的第一个
        console.log($('ul>li:last-child')) //获取ul的子元素的li中的最后一个
        console.log($('ul li.a')) //获取ul下所有的li里面的类名为a的元素
        console.log($('#aaa')) //根据id获取元素
        console.log($('li:nth-child(odd)')) //获取li里面的奇数个
        console.log($('li:nth-child(even)')) //获取li里面的偶数个

四、 jQuery的特殊选择器

        jQuery里面还帮助我们提供一些特殊的选择器

        == ul>li:nth-child(1)太长了

        == 用短的

        :first ==>获取第一个元素

        :last ==> 获取最后一个元素

        :eq() ==>以索引获取

        :odd ==>以奇数获取

        :even ==>以偶数获取 

        console.log($('li:nth-child(1)')) //可能会拿到多个
        console.log($('li:first')) //获取第一个
        console.log($('li:last')) //获取li里的最后一个
        console.log($('li:eq(1)')) //获取li里的第二个
        console.log($('li:odd')) //奇数
        console.log($('li:even')) //偶数

五、jQuery的筛选器

        用在jQuery选择元素的集合后面

        都是方法，为了对已经选择出来的元素进行二次筛选

        1 first()

        2 last()

        3 eq(n)

        4 next() 筛选出一个元素里面的下一个兄弟元素

        5 nextAll() 筛选出元素后面的所有兄弟元素

        6 nextUntil() 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止

        7 prev() 筛选出元素的上一个兄弟元素

        8 prevAll() 筛选出元素的前面所有兄弟元素

        9 prevUntil()  查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止

        10 parent() 筛选出父级元素

        11 parents() 筛选出所有的祖先元素

        12 parentsUntil() 查找所有的祖先元素，直到遇到匹配的那个元素为止

        13 children() 筛选出所有的子元素

        14 sillings() 筛选出元素的所有的兄弟元素

        15 find() 在元素中所有后代里面找符合的选择器

        16 index()

        == 获取到元素的索引位置

        == 不是元素集合里面的第几个

        == 找到他父级元素下的第几个元素

        == 拿到的是一个数字

六、读写方法

        1 html()

        == 一个读写方法

        == 不传递参数的时候，获取的是元素内部的超文本内容，只获取一个

        == 传递一个参数的时候，就是设置元素内部的超文本内容

        2 text()

        == 一个读写方法

        == 不传递参数的时候，获取的是元素内部的超文本内容，获取全部

        == 传递参数的时候，就是设置元素内部的超文本内容

        3 val()

        == 一个读写方法，操作input标签

        == 不传递参数的时候，就是获取input元素的value值

        == 传递参数的时候，就是设置元素的value值

        总结

        获取：不传参

           == html() 只能获取第一个超文本内容

           == text() 获取全部文本内容

           == val() 获取第一个input元素的value

        设置：传参

            == html() 设置所有的元素的超文本内容

            == text() 设置所有元素的文本内容

            == val() 设置所有input元素的value

七、 jQuery操作元素的类名

        1 addClass() 添加类名

        == 执行这个方法会给元素集合里面的所有元素添加指定的类名

        == 如果元素已经有相同的类名，就不再添加，没有才会加

        2 removeClass() 移除类名

        == 执行这个方法会给元素集合里面的所有元素移除指定的类名

        3 toggleClass()切换类名

        4 hasClass()判断是否有类名

        == 执行这个方法会返回一个布尔类型

        == 如果元素几个里面有一个元素有这个类名就返回true，都没有就返回false

        $('.add')[0].onclick = function () {
            $('div').addClass('box')
        }

        $('.del')[0].onclick = function () {
            $('div').removeClass('box')
        }

        $('.toggle')[0].onclick = function () {
            $('div').toggleClass('box')
        }

        $('.has')[0].onclick = function () {
            alert($('div').hasClass('box'))
        }

       八、 jquery操作元素样式

        1 css()

        一个读写方法

        不同操作需要用到不同的参数

        css('样式名') ==》 获取元素的样式值

        == 获取元素的样式值，不管是行内还是非行内都可以获取

        == 获取集合里面的第一个值，返回的值是字符串类型

        console.log($('div').css('width'))

        css('样式名','样式值') ==》 获取元素的样式值，并对这个值进行修改

        == 设置元素集合里面所有内容的样式值

        == 设置的时候，单位可以不写，默认添加px单位

        $('div').css('width','200px')

        $('div').css('width', '200')

        css(对象)

        批量设置css样式

        给元素集合里面的所有内容批量设置样式

        $('div').css({
            height: '50px',
            opacity:0.5,
            // display: 'none',
            border: '2px solid pink'
        })

       

九、jquery操作元素的属性

       1 attr() 和 removeAttr()

•         attr()

        == 是一个读写方法

        attr('要读取的属性名')传递一个参数的时候读取

        atte('要读取的属性名','要修改的属性值') 传递两个参数的时候设置

•         removeAttr() 移除属性

        == 所有的属性都会显示在标签上（原生属性和自定义属性都会在结构里显示）

        == 不管你设置什么样的数据类型，都会变成字符串

        == removeAttr删除attr设置的属性时是有多少删多少

        2 prop() 和 removeProp()

        prop ======= property

•         prop()

        == 是一个读写方法

        prop('要读取的属性名')传递一个参数的时候读取

        prop('要读取的属性名','要修改的属性值') 传递两个参数的时候设置

•         removeProp() 移除属性

        attr 这套方法注意

        == 不会显示在标签上的属性，但是可以获取使用

        == 你存储的是什么类型的数据，就是什么样的数据类型

        == removeProp删除prop设置的属性时是有多少删多少

        == 不能删除标签上的属性

       十、 jQuery绑定事件

        给元素绑定一个事件

        on()方法专门用来绑定事件

        $('li').click(function () {

            console.log('常用的事件 click')

        })

        1 on('事件类型',事件处理函数)

        == 给元素集合内的所有元素绑定事件

        $('li').on('click', function () {
            console.log(this)
        })

        2 on('事件类型','事件委托',事件处理函数)

        == 把事件委托位置的元素的事件委托给了前面的元素集合

        $('ul').on('click', 'li', function () {
            console.log(this)
        })

        3 on('事件类型',复杂数据类型, 事件处理函数)

        == 第二个参数是一个复杂数据类型可以用来传参

        $('li').on('click', ['hello', 'world'], function (e) {
            console.log(e.data)
        })

        4 on('事件类型','事件委托',复杂数据类型, 事件处理函数)

        $('ul').on('click', 'li', ['hello', 'world'], function (e) {
            console.log(e.data)
            console.log(this)
        })

        5 on(对象)

        == 给一个属性绑定多个事件

        $('li').on({
            'click': function () {
                console.log('点击')
            },
            'mouseleave': function () {
                console.log('鼠标移入')
            }
        })

        1 one() 方法专门用来绑定只执行一次的事件

        function handlerA() {
            console.log(this)
        }
        $('li').one('click', handlerA)

       2 off() 专门解绑元素的事件

        == off('事件类型')给该事件类型的所有事件处理函数解绑

        == off('事件类型','事件处理函数')解绑指定的事件处理函数

        $('li').off('click')
        $('li').off('click',handlerA)

       3 trigger()专门用来触发事件的函数

         $('li').trigger('click')

        4 hover()

        == jQuery里面唯一一个特殊的事件函数

        == 表示一个鼠标悬停动作

        == hover(鼠标移入触发事件，鼠标移出触发事件)

        $('li').hover(function () {
            console.log('hover 移入')
        }, function () {
            console.log('hover 移出')
        })