2018-08-24 day10 JQ

1. 选择器
   基本

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

   内容

       contains  内容包含某某某的节点
       has 写一个选择器，
       $('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  
       // 给指定的节点添加类名
       // $('#lala').addClass('hei')
       // 给指定的节点移除指定的节点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
   prepend
   prependTo
       // 向父节点添加子节点
       // $('#car').append('
   本田飞度
   ')
       // 通过子节点调用，添加到父节点
       // $('
   本田飞度
   ').appendTo($('#car'))
       // 通过父节点调用，添加到父节点的最前面
       // $('#car').prepend('
   本田飞度
   ')
       // 通过子节点调用，添加到父节点的最前面
       // $('
   通用别克
   ').prependTo($('#car'))
   after
   before
       // 是兄弟节点关系，在mao节点后面添加一个指定节点
       // $('#mao').after('
   铃木雨燕
   ')
       // 是兄弟节点关系，在mao节点前面添加一个指定节点
       // $('#mao').before('
   铃木雨燕
   ')
   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
   

   index

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

7. 动画

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

8. jquery插件

9. ajax. bootstrap