jQuery

jquery 是用JS写的，使用JS进行了高度封装函数
使用jQuery，就是将jQuery封装的函数学习就可以了

jquery核心理念：write less, do more 写的更好，做的更多
$()
click()
show()/hide()

1.7 1.8.3 1.10 1.11.3 1.12.4

// 2.0之后的版本不支持IE8浏览器
2.0
jQuery版本：3.2.1

选择器

(***)基本选择器：#id 
                .class 
                element
                div
                p
                ul
(***)层级选择期：A B(后代选择器)
                A>B(父子选择器)
                A+B(相邻选择器)
                A~B(兄弟选择器)
(***)基本筛选器：:first 第一个
                :last 最后一个
                :even 偶数
                :odd 奇数
                :eq(索引) 
                :gt(索引) 大于此索引的
                :lt(索引) 小于此索引的
                :animated 动画
                :not(非) 
内容选择器： :contains(text) 包含  :contains(汉字)  //不要加引号
            :empty 空
            :has(selector) 包含特定的后代元素
            :parent 有内容的
属性：[attr] 查找有attr属性的标签
     [attr=value]  查找有attr属性，并且attr只能是value
     [class^="middle"]  查找有class类，并且以middle开头
     [class$="middle"]  查找有class类，并且以middle结尾
     [class~="middle"]  查找有class属性，并且class的多个属性中有独立的middle
     [class*="middle"]  查找class属性，并且class属性值中包含middle即可
     [class|="middle"]  查找class属性，并且以middle和middle-开头
子元素：
       父子级关系的标签
       :first-child
       :last-child 
       :nth-child(n) 
       :nth-last-child(n) 
       :only-child
       
       获取同辈兄弟间的标签
       :first-of-type 
       :last-of-type
       :nth-of-type(n)
       :nth-last-of-type(n)
       :only-of-type
       
(***)表单对象属性：:checked
                 :selected

核心

$('li').each(function(key,value){}):遍历jQuery对象

$('li').length:获取jQuery元素的个数

$('li').get(); 获取所有的li  //(5) [li, li, li, li, li]
$('li').get(index):获取指定索引的dom对象 //<li>开心点</li>

$('.small').index():获取指定索引值

jquery对象和DOM对象区别
    初学阶段：jQuery和DOM操作不要混用

jq转原生js
    $('li').get(0)
原生js转jq
    $(li);

事件

$(function(){})/$(document).ready():当页面DOM元素加载完成的时候

// 给jQuery对象绑定事件，而且可以重复绑定
$('li').click(function(){})
$('.username').keydown(function(){})
$(window).scroll(function(){})

// 移入和移出
hover(function(){},function(){})

// 绑定事件
on()/off()

// 手动触发事件
trigger()

// 事件属性
e.pageX/e.pageY
// 阻止事件冒泡
e.stopPropagation()
// 阻止默认行为
e.preventDefault()

文档处理

// 父子级追加
末尾追加
append()
    $('.one').append('<p>白龙马</p>'); 在.one中追加白龙马
appendTo()
    $('<p>银角大王</p>').appendTo($('.one')); 把银角大王追加到.one
开头追加
prepend()
prependTo()
注意：$('.one').append($('.two p:first'));  把.two中的p的第一个元素加到one中，并且.two中没有刚才追加的元素了，因为不是克隆

// 同辈前插入内容
after()/before() 
// 同辈前插入内容
insertAfter()/insertBefore() 

// 包裹
wrap()
     // 给每个p标签包裹div
      $('p').wrap('<div></div>');
unwrap()
        移出p元素的父元素
         $("p").unwrap()
wrapAll()
        // 给所有的p包裹一个div
        // $('p').wrapAll('<div></div>');
wrapInner()
         // 用span包裹p的内容
        // $('p').wrapInner('<span></span>');

// 替换
replaceWith()
        // 用h3标签替换所有的p标签
        // $('p').replaceWith('<h3>宝玉</h3>');
replaceAll()
        // 用h1替换掉所有的p标签
        // $('<h1>林黛玉</h1>').replaceAll('p');

// 清空子级内容
empty()

// 删除自身和内容
remove()

// 克隆标签，属性，内容
clone()
// 克隆标签，属性，内容，事件
clone(true)

工具

// 删除两边空格
$.trim()

属性

// 处理 系统属性和自定义属性
$('a').attr('href'):获取href属性
$('a').attr('href','http://www.baidu.com'):设置href属性
$('a').removeAttr('href'):删除href属性

// 处理 系统属性
prop()


// 针对class的处理
$('a').addClass('active')：添加class
$('a').removeClass('active'): 删除class
$('a').toggleClass('active'): 切换class

// 处理标签内容
console.log($('.box').html());:获取.box的内容  //今天是<strong>周四</strong>
console.log($('.box').html('<h3>hello world</h3>')):修改.box的内容为//Hello world
$('.box').html('<h3>hello world</h3>'):设置.box的内容
// 处理标签文本内容
$('span').text():获取span的文本内容  //今天是周四
$('span').text('hello world'):修改.box的文本内容为   //<h3>Hello world</h3>将内容中的标签原型展示
$('span').text('hello world'):设置.box的文本内容为  

// 处理表单的值
$('.username').val():获取.username的value值
$('.username').val('zhangsan'):设置.username的value值为zhangsan

CSS

$('h3').css('width'):获取宽度
$('h3').css('width',500):设置h3宽度
$('h3').css('width','500px'):设置h3宽度
$('h3').css({width:500,height：500}):设置h3宽度和高度

// 获取标签距页面的边距
$('.box').offset()

// 获取.box距有定位祖辈的边距，祖辈都没有定位，则距页面的边距
$('.box').position()

// 获取和设置标签内容的滚动距离
scrollTop()/scrollLeft()

// 宽度和高度（width/height）
height()/width()

// 宽度和高度（width+padding）
innerWidth()/innerHeight()

// 宽度和高度（width+padding+border）
outerHeight/outerWidth()

效果

// 展示与隐藏（宽度，高度，透明度变化的过程）
show()/hide()/toggle()

// 下拉与上拉（高度变化的过程,需要设置宽）
slideDown()/slideUp()/slideToggle()

// 淡入淡出（透明度变化的过程）
fadeIn()/fadeOut()/fadeTo()/fadeToggle()

// 自定义动画
animate()

// 停止动画
stop()
$('.box').stop(); // 停止当前执行的动画
stop(true); //当前正在执行的动画效果停下来，队列动画全部清除
stop(true,true);//当前正在执行的动画效果停下来，队列动画清除，直接到达当前动画的目标值

// 延迟动画（单次定时器）
delay()

筛选

.eq([index])  如果写index就找索引为index的，否则找全部
.first() 第一个
.last() 最后一个
.hasClass(class)  包含class类的
.filter() 过滤
.is() 是
.has() 包含
.not() 不是
.slice() 切割
.children() 查找子代的孩子，参数可以为空，为空就找到全部的孩子
.find() 查找后代的孩子，参数不可以为空，找不到任何值
.next() 下一个
.nextAll()后面的所有
.prev() 上一个
.prevAll()上面的所有
.siblings() 兄弟们，不写参数就找所有的兄弟，写参数就找指定的元素
.parent() 父级
.parents() 祖辈，不写参数就找所有的祖辈，写参数就找参数指定的祖辈元素
.offsetParent() 如果祖辈有定位，就找有定位的祖辈，否则就是html
.add() 添加一个新元素到一组匹配的元素中，并且这个新元素能匹配给定的表达式。
    $('h3').css('color','pink').add('p').css('background','yellow');
    给h3先设置粉色字体颜色，然后给h3,和p一起设置黄色背景颜色
    
.addBack()一个字符串，其中包含一个选择器表达式，匹配当前元素集合不包括在内的元素               
     $('div').find('p').addBack().addClass('bg');
     给所有的div和div的后代p都添加bg的类
     
.end() 选取所有的div元素，查找并选取p子元素，然后再回过来选取div元素
 $('div').css('margin','100px').find('p').css('padding','50px').end().css('border','10px solid #ddd'); 
    给div加margin值，然后找到p,给p设置padding,并且在返回来找到div 给div加边框

$('elem').each和$.each()

$('li').each(function(key,value){}) 遍历元素
$.each(arr|obj,function(key,value){}) 遍历数组或者对象

on

• 同时设置多个事件

$('.box').on('mouseover mouseout',function () { $(this).toggleClass('bg'); });

• 写多个事件

```
$('.box').on({
mouseover:function () {
$(this).addClass('bg');
},
mouseout:function () {
$(this).removeClass('bg');
},
click:function () {
console.log('点击');
}
});

```

off移除事件

function run() {
            console.log('点击box');
        }
        $('.box').on('click',run);
        $('button').eq(0).click(function () {
            $('.box').off('click',run);
        })
点击.box会触发run() 但是button给事件解绑了，然后在点击.box 不会触发run（）事件

trigger() 手动触发某类事件

$('button:eq(1)').click(function () {
            $('.box').trigger('click');
        })
点击button按钮也会触发box的click事件， 例如 submit是提交事件，也可以给div设置一个提交事件，就用trigger()

事件委托

 $('body').on('mouseover mouseout','.box',function () {
            $(this).toggleClass('bg'); //  此时this指向的是box,
        });
   $('body').append('<div class="box"></div>');     
 给父级添加事件，就算在后面在添加相同的标签也同样会执行之前添加的事件