jQuery

加载延迟

1、选择器

基本
:first :last :even :odd :not :eq()

内容
contains  内容包含某某某的节点

 $('li:contains("晓")').css('backgroundColor', 'cyan')

has 写一个选择器，

     // 找li标签，li标签里面有a的节点
    $('li:has(a)').css('backgroundColor', 'cyan')    // 找ul标签，里面有a的节点，不论层级
    $('ul:has(a)').css('backgroundColor', 'cyan')

$('li:has(a)')  li里面有a的li属性
input[name]      有属性name的input
input[name=user]  name属性等于user的input
input[name!=user] name属性不等于user的input

        // 有属性name的input
        $('input[name]').css('backgroundColor', 'cyan')        // 属性name值为user的input
        $('input[name=user]').css('backgroundColor', 'cyan')        // 属性name值不为user的input
        $('input[name!=user]').css('backgroundColor', 'cyan')        // 属性name值以user开头的input
        $('input[name^=user]').css('backgroundColor', 'cyan')        // 属性name值以user结束的input
        $('input[name$=user]').css('backgroundColor', 'cyan')

子元素
:first-child头子节点
:last-child尾子节点
:nth-child指定子节点

        // 找到li标签，li是第一个儿子节点的li标签
       $('li:first-child').css('backgroundColor', 'cyan')        // 找到li标签，li是最后一个儿子节点的li标签
       $('li:last-child').css('backgroundColor', 'cyan')        // 找li标签，找指定下标的li标签，这个下标是儿子节点里面的第几个
       $('li:nth-child(1)').css('backgroundColor', 'cyan')

2、样式添加、属性获取

css({})

        // 可以连写-链式操作
        $('#lala').css('backgroundColor', 'red').css('fontSize', '30px')        // 可以传递一个js对象，直接全部修改
        $('#lala').css({backgroundColor: 'blue', fontSize: '40px'})

attr()

        // 获取指定节点的class属性
        console.log($('#lala').attr('class'))        // 只能获取第一个符合要求的id属性
        console.log($('.libai').attr('id'))        // 通过eq选择第二个符合要求的id属性
        console.log($('.libai:eq(1)').attr('id'))        // 给指定节点添加属性
        $('#lala').attr('class', 'bai').attr('name', '狗蛋')

removeAttr()

        // 将指定节点的属性删除
        // $('#lala').removeAttr('class')

prop()经常用来设置checked、selected等属性，设置的值就是true、false

        // 所有下标大于1的多选框选中
        // $('input:gt(1)').prop('checked', true)
        // 将第二个下拉框设置为默认选中
        // $('#se > option:eq(2)').prop('selected', true)

addClass

        // 给指定的节点添加类名
        $('#lala').addClass('hei')

removeClass

      // 给指定的节点移除指定的节点class名  bai
     $('#lala').removeClass('bai')

toggleClass

        // 有bai这个class，那就是删除这个class，没有bai这个class，那就是添加class
        $('#lala').toggleClass('bai')

html()

        // 读取或者设置节点内容，和innerHTML功能相同
        console.log($('#lala').html('醉卧沙场君莫笑,古来征战几人回'))

text()读取或者设置节点内容，和innerText功能相同
val()

        // 读取input框里面的内容
        console.log($('#ip').val())        // 设置input框里面的内容
        console.log($('#ip').val('今天中午吃什么呢？'))

width()
height()

        // 读取指定对象宽度  不带px
        console.log($('#dudu').width())        // 设置宽度  不带px
        console.log($('#dudu').width(300))        // 读取高度
        console.log($('#dudu').height())        // 设置高度
        console.log($('#dudu').height(400))

offset()

        // 获取div的top值和left值
        console.log($('#dudu').offset().top, $('#dudu').offset().left)

3、js对象和jquery对象转化

js对象和jquery对象的函数不能通用
js对象和jquery对象相互转化

    var odiv = document.getElementById('dudu')    // js对象转化jquery对象
    console.log($(odiv).width())    // jquery对象转化为js对象
    console.log($('#dudu')[0].style.width)    console.log($('.lala')[1].style.width)

4、文档处理

append
appendTo

         // 向父节点添加子节点
        $('#car').append('<li>本田飞度</li>')        // 通过子节点调用，添加到父节点
        $('<li>本田飞度</li>').appendTo($('#car'))

prepend
prependTo

      // 通过父节点调用，添加到父节点的最前面
      $('#car').prepend('<li>本田飞度</li>')      // 通过子节点调用，添加到父节点的最前面
      $('<li>通用别克</li>').prependTo($('#car'))

after
before

        // 是兄弟节点关系，在mao节点后面添加一个指定节点
        $('#mao').after('<li>铃木雨燕</li>')        // 是兄弟节点关系，在mao节点前面添加一个指定节点
        $('#mao').before('<li>铃木雨燕</li>')

empty
remove

        // 清空指定节点里面的内容，节点还在
        $('#mao').empty()        // 原生js中：父节点.removeChild(子节点)
        // 通过子节点直接调用，删除当前节点
        $('#mao').remove()

5、筛选和查找

eq

        $('li').eq(n).css('backgroundColor', 'red')
       $('li:eq(0)').css('backgroundColor', 'red')
       $('li:eq(' + 0 + ')').css('backgroundColor', 'red')

first
last

        // 第一个li   和:first 一模一样
        $('li').first().css('backgroundColor', 'red')        // 最后一个li   和:last 一模一样
        $('li').last().css('backgroundColor', 'red')

hasClass

        // 判断有没有这个class,有就返回true，没有返回false
        console.log($('li').eq(0).hasClass('wang'))

filter

        // 找到所有li，过滤出来 .jing 的这些li
        $('li').filter('.jing').css('backgroundColor', 'cyan')

slice

        // 取出符合要求li里面的第0个和第1个   [start, end)
        $('li').slice(0, 2).css('backgroundColor', 'cyan')

children

        // 所有的儿子节点
        $('#nan').children().css('backgroundColor', 'red')        // 儿子节点中 有 .feng 的节点
        $('#nan').children('.feng').css('backgroundColor', 'red')

find

        // 去子孙节点中查找所有的 .feng 的节点
        $('#nan').find('.feng').css('backgroundColor', 'cyan')

next
nextAll

        // 指定对象的下一个兄弟节点
        $('#wu').next().css('backgroundColor', 'cyan')        // 指定对象的后面所有的节点
        $('#wu').nextAll().css('backgroundColor', 'cyan')

prev       指定对象的上一个兄弟节点
prevAll    指定对象的上面所有的兄弟节点
parent    
parents

        // 找到当前节点的父节点
        $('.lin').parent().css('backgroundColor', 'cyan')        // 查找得到所有的上层节点
        $('#qing').parents().css('backgroundColor', 'cyan')        // 查找得到指定的上层节点
        $('#qing').parents('div').css('backgroundColor', 'cyan')

siblings

        // 查找qing节点所有的兄弟节点
        $('#qing').siblings().css('backgroundColor', 'orange')        // 查找qing节点所有的兄弟节点，而且是.lin的兄弟节点
        $('#qing').siblings('.lin').css('backgroundColor', 'orange')

6、事件

添加事件
$('div).click(function () {})
事件绑定
on off one
绑定事件

        $('div').on('click', test1)
        $('div').on('click', test2)

取消事件绑定

        $('div').off('click', test2)        // 事件只能触发一次
        $('div').one('click', test2)

取消冒泡
ev.stopPropagation()
阻止默认行为
ev.preventDefault()
获取鼠标坐标
ev.pageX, ev.pageY
下标

        // 得到指定jquery对象在前面数组中的下标
        // console.log($('div').index($('#heng')))

7、动画

show()

        // 参数1：动画的事件
        // 参数2：动画完毕之后执行的函数
        $('#dudu').show(5000, function () {
            alert('菊花残,满地伤')
        })

和show一样hide() 和show一样

        $('#dudu').hide(5000, fn)

slidedown()原来不显示，动画下拉显示

        $('#dudu').slideDown(5000)

slideup()原来显示，动画的上拉消失
slideToggler()如果隐藏就下拉显示，如果显示就上拉消失
fadeIn()

        // 慢慢的显示出来
        $('#dudu').fadeIn(5000)

fadeOut()

        // 慢慢的消失
       $('#dudu').fadeOut(5000)

fadeTo()

        // 5秒之内，透明度变为0.01
        // $('#dudu').fadeTo(5000, 0.01)

fadeToggle()如果隐藏就淡入显示，如果显示就淡出消失

自定义的动画效果
animate()

        // 自定义动画
        $('#dudu').animate({width: 1000, height: 500, opacity: 0.1}, 5000)

stop()

        //停止动画
        $('#dudu').stop()

作者：GHope
链接：https://www.jianshu.com/p/b5a1dae020c0