JQuery笔记总结

引入jQuery：

<script src="./K1/Tool/jquery-3.1.1/jquery-3.1.1.min.js"></script>


引入CSS：

<link rel="shortcut icon" type="image/x-icon" href="./images/icon.ico">

<link rel="stylesheet" type="text/css" href="css.css">


*********************************************************************

页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页 面包含图片等文件在内的所有元素都加载完成。(可以说：ready 在onload 前加载！！！) 
一般样式控制的，比如图片大小控制放在onload 里面加载; 但是对于一些特殊应用，比如图片的放大缩小，图片的剪裁。需要网页所有的内容加载完毕后才执行的呢？我推荐使用$(window).load()方法，这个方法会等到页面所有内容加载完毕后才会触发，并且同时又没有onLoad事件的弊端. 


    $(document).ready(function(){}),或简写为$(function(){})，

    <script> 
        $(window).load(function() 
        { 
            alert("hello"); 
        }); 
        $(window).load(function() { 
            alert("hello again"); 
        }); 
    </script>  

*********************************************************************
【向上/向左滚动的距离】
原生：
    document.documentElement.scrollTop || document.body.scrollTop
jq:
    $(document).scrollTop();

--------------------------------------------------------------------

【盒子到窗口左边和上边的距离】
    $('div').offset().left

--------------------------------------------------------------------

原生(属性)      -->     jQ（方法）
.offsetWidth    -->     outerWidth()    //【包括边框，包括padding】
.clientWidth    -->     innerWidth()     //【不包括边框，包括padding】


outerWidth() : 获取元素的width + padding + border
               如果括号内有参数true需要加上margin
               可以获取隐藏元素的值。

【原生】offsetWidth() ：获取元素的width + padding + border
                        但无法获取隐藏元素的值。

--------------------------------------------------------------------

原生(属性)：
document.documentElement.clientWidth 

jQ（方法）：
$(document).width();    //【不包括边框和padding】


*********************************************************************

添加事件的n种方式：

    $('button').click(function(){...});

    $('button').on('mouseenter click',function(){...});

*********************************************************************

链式操作：

    $('div').addClass('color').click(function(){...}).mouseenter(function(){...}).html(abc123);


*********************************************************************


$(function(){


    $('li').html();  //当一组元素的时候，取值是一组中的第一个
    
    $('li').html('hello');  //当一组元素的时候,赋值是一组中的所有元素
    
});


*********************************************************************

选择器：


<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>


【:first匹配第一个元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。】


:first   获取一组元素的第一个元素。
        $('li:first');      //  [ <li>John</li>]


:first-child  获取 多组父元素的 首个子元素的 集合。

        $("ul li:first-child")   // [ <li>John</li>, <li>Glen</li> ]


first() 返回被选元素集合中的首个元素。
       
        $('li').first()      //  [ <li>John</li>]

----------------------------------------------------------------------

选择器：
:first : 第一个元素
:last : 最后一个
:eq(1) : 第2个元素，下标从0开始
:even: 偶数个(下标)
:odd: 奇数(下标)
:gt(1) : 大于下标为1的元素
:lt(1) : 小于下标为1的元素

eq(3): 根据下标获取元素



    $(function(){

            $('ul li').css('color','red');  // 所有的li为红色

            $('ul li').eq(1).css('color','red');  // ul下第二个li为红色
            
            $('ul li:odd').css('color','blue'); // 奇数行的li
            
            $('ul li:even').css('color','yellow');  // 偶数行的li
            
            $('ul li:first').css('color','magenta');    //获取第一个
            
            $('ul li:last').css({
                            display: 'block',
                             '200px',
                            height: '200px'});  //获取最后一个
                
            $('ul li[title="123"]').css('color','cyan');    // 属性选择器的封装

    })

---------------------------------------------------------------
index(): 获取元素的下标：

        <ul> 
            <li id="foo">foo</li> 
            <li id="bar">bar</li> 
            <li id="baz">baz</li> 
        </ul> 


        $('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置 

        $('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。

*********************************************************************

拖拽：

    $(function(){

        var disX = 0;
        var disY = 0;

        $('div').mousedown(function(ev){
            
            disX = ev.pageX - $(this).offset().left;
            disY = ev.pageY - $(this).offset().top;
            
            $(document).mousemove(function(ev)
            {
                $('div').css('left',ev.pageX - disX);
                $('div').css('top',ev.pageY - disY);
            });

            $(document).mouseup(function()
            {
                $(document).off();
            });
            
            return false;
        });
    });


*********************************************************************

使用extend方法添加功能：

$.fn.extend({
            toBlue: function () {
                $(this).css('background','blue');
            },
            toMagenta: function () {
                $(this).css('background','magenta');
            }
        });
        $('button').click(function(){
            $('div,h1,h2,h3,h4').toBlue();
        });




*********************************************************************

hover的使用：

    $(function(){

        $('#div1').hover(
        function(){
            
            //  $(this).css('background','blue');
            
            //  $('#div2').hide(3000);
            
            //  $('#div2').fadeOut(1000);  //默认400
            
            //  $('#div2').slideUp();
            
                $('#div2').fadeTo(1000,0.5);
            
        },
        function(){
            
            //  $(this).css('background','red');
            
            //  $('#div2').show(3000);
            
            //  $('#div2').fadeIn(1000);
            
            //  $('#div2').slideDown();
            
                $('#div2').fadeTo(1000,1);
            
        });

    });


*********************************************************************

设置动画时，先关后开：

$('div').hover(
    function()
    {       
        $(this).stop().animate({'500px',height:'500px'});
    },
    function()
    {
        $(this).stop().animate({'100px',height:'100px'});
    }
);


*********************************************************************


遍历DOM元素：

    $('li').each(function (index,ele) {
        .......
    });


遍历arr、json对象：
    
    $.each(arr1,function (index,value) {
        .......
    })

    $.each(json1,function (key,value) {
        .......
    });


*********************************************************************

删除节点:

A.remove():  //移除所有的A元素
A.empty():  // 移除A的所有的子元素

获取所有的子元素：
A.children()

*********************************************************************

添加节点：

A.append(B) :   // 往A里面添加B (B在最后面)
A.appendTo(B) :   // 把A添加到B里面 (A在最后面)

A.prepend(B):    //往A里面添加B (B在最前面)
A.prependTo(B):   // 把A添加到B里面 (A在最前面)

A.insertBefore(B):    //把A插入到B前面

A.insertAfter(B):    //把A插入到B后面

*********************************************************************

动画：
执行动画以前最好调用stop方法
animate(params,[speed],[easing],[fn])
params: 需要改变的样式 json对象
speed: 执行的时间，slow,fast,nomal  1000ms
easing: 运动状态，linear,swing
fn: 动画完成后执行的函数

    
        
        $('#div1').stop().animate({width : 300 , height : 300} , 4000 , 'linear',function(){
            alert(123);
        });
        
        $('#div2').stop().animate({width : 300 , height : 300} , 4000 , 'swing');

        $('#div3').animate({300},2000).delay(1000).animate({height:300},2000);


delay(1000) : 链在animate之后，延迟多少毫秒后执行      
 

---------------------------------------------------------------


自带的动画：

slideUp: 上拉隐藏
slideDown: 下拉显示 （设置了display）

fadeIn: 淡入 (显示)
fadeOut: 淡出 (隐藏) （设置了display）


*********************************************************************



remove() :   // 删除元素，会把元素上的所有操作都删掉。

detach() :    //删除元素，但是会保留删除元素的操作行为。

            $(function(){
                $('div').click(function()
                {
                    alert(123);
                });
                var oDiv = $('div').detach();
                $('body').append( oDiv );
            });

--------------------------------------------------------------



$('div').siblings():    //获取所有的兄弟节点，括号内可以写筛选条件

$('div').prevAll() :    //获取上面所有的兄弟节点，括号内可以写筛选条件
$('div').nextAll() :    //获取下面所有的兄弟节点，括号内可以写筛选条件

$('div').nextUntil('h2') :    //获取当前节点到 指定节点h2（不包括h2）之间的兄弟节点

--------------------------------------------------------------


clone() : 可以接收一个参数true ，作用可以复制之前的操作行为。不写参数就只复制节点，不复制之前的操作行为


    $('div').click(function(){
        alert(123);
    });
    
    $('div').clone(true).appendTo( $('span') );

--------------------------------------------------------------

wrap() :    //包装

unwrap() :    //删除包装 ( 删除父级 : 不包括body )

wrapAll() :   //整体包装

wrapInner() :    //内部包装

        $('span').wrap('div');

--------------------------------------------------------------

slice(a,b)   //截取选择元素从第一参数开始，到第二个参数结束（包头不包尾）。

        $('li').slice(1,4).css('background','red');

--------------------------------------------------------------
serialize、serializeArray方法：

$(function(){
    
    //对表单数据进行序列化(串联化),形成一个字符串

    $('form').serialize();  //string : a=1&b=2&c=3
    
    //对表单数据进行序列化,形成一个JSON数组

    $('form').serializeArray();
    
    [
        { name : 'a' , value : '1' },
        { name : 'b' , value : '2' },
        { name : 'c' , value : '3' }
    ]
    
});

</script>

<form>
    <input type="text" name="a" value="1">
    <input type="text" name="b" value="2">
    <input type="text" name="c" value="3">
</form>


*****************************************************************

事件委托：

    //循环的方式

    $('li').on('click',function(){
        this.style.background = 'red';
    });
    
---------------------------------------
    //事件委托delegate的方式

    $('ul').delegate('li','click',function(){
        
        this.style.background = 'red';
        
        $('ul').undelegate();  //取消事件委托
        
    });
-----------------------------------------

    //事件委托on的方式

    $('#ul1').on('click','li',function () {
     
        $(this).css('background','red');   
        $(this).addClass('active');     // this-->就是点击的元素
    });

    $('#ul1').off('click'); //取消事件委托

*****************************************************************

//主动触发trigger：

    $('#div1').on('click',function(){
        alert(123);
    });
    
    $('#div1').trigger('click');  


*****************************************************************

事件细节：

ev直接使用，不需要兼容操作

ev.pageX(Y) 鼠标的坐标(相对于文档) : ev.clientX(相对于窗口)

ev.which(能监控鼠标键值) : ev.keyCode

ev.preventDefault(); //阻止默认事件

ev.stopPropagation(); //阻止冒泡

事件函数结尾return false;既能阻止冒泡又能阻止默认事件

one()
    $('div').one('click',function(){}); //事件只执行一次


*****************************************************************

get()
    document.getElementById('div1').innerHTML 
    -->  $('#div1').get(0).innerHTML 
    
    //将JQ取的元素转化为原生JS识别的写法，
    get()取的是获取的一组元素
    get(i)取的是获取的一组元素第i个

    不过在JQ下也有length这个属性。
    JQ取的一组元素也能通过下标[i]变成原生JS识别的元素
    如：
        $('li')[i].style.background = 'red';

        for(var i=0;i<$('li').get().length;i++){
            $('li').get(i).style.background = 'red';
        }


*****************************************************************

text()
    $('div').html();只能获取一组元素第一个元素的html内容

    而$('div').text();获取的是该组元素所有元素的文本内容(不含标签)


*****************************************************************

$().fn() 只能给JQ对象用

$.xxx() $.yyy() $.zzz() : 不仅能给JQ用还能给原生JS用，叫做工具方法

---------------------------------------------
$.type()
    判断类型，返回字符串
    和原生JS typeof方法不同的是，该方法可以返回更细的类型
    对object细分了 regexp date array json等类型

$.trim()
    $.trim(str) 去str的前后空格

$.inArray()
    $.inArray('b',arr);
    类似于字符串方法indexOf()，返回的是下标，没有找到返回-1;

$.proxy()
    改变this指向
        function show(n1,n2){
            alert($(this));
            alert(n1);
            alert(n2);
        }
        $.proxy(show,documnet,3,4)();
        $.proxy(show,documnet)(3,4);

        //一参是方法，二参是指向的对象
        而该函数的形参可以写在三参及以后或者后面的执行括号内
        方便在非立即执行的时候传入参数.

        例如:
        function show(n1,n2){  .......  }

        $(document).click( $.proxy(show, $(#div1),3,4) );



$.noConflict()
    防止命名冲突
    var _$ = $.noConflict();
    可以用_$代替$了


$.parseJSON()
      // 将字符串解析成JSON


$.makeArray()
       //把类数组转化为数组,使其可以使用数组方法
    例如
    类数组 var aLis = $('li');
        $.makeArray(aLis).push($('#li1'));


*****************************************************************

ajax for JQ ：

    //参数为json形式
    $.ajax({
        url : 'xxx.php',
        data : 'name=loe&age=20',
        type : 'POST',
        comtentType : '',
        success : function(data){//请求成功以后的回调函数
            $.parseJSON(data)
        },
        error : function(){
            //...
        }
    });

    //抽象出来的方法
    $.get('xxx.php',{数据},function(){
        //成功的回调函数
    }); 
    $.post('xxx.php',{数据},function(){
        //成功的回调函数
    });

    $.getJSON('xxx.php?callback=show|?',function(){.....});//?代表随机返回函数名字
    functuin show(data){
        //处理JSONP返回数据
    }

*****************************************************************

JQ插件操作:

$.extend
       //扩展工具方法下的插件形式 $.xxx() $.yyy()

    写法如下
        $.extend({
            leftTrim : function(){},
            rightTrim : function(){}
        })
$.fn
    $.fn.extend
      // 扩展到jQ对象上的插件形式$().xxx() $().yyy()

    写法:
    $.fn.extend({
            name : function(){
                $(this)//代表调用这个方法的JQ对象。
            }

        })

    $.fn.extend({
            toBlue:function(){$(this).css('background','blue')},
            toYllow:function(){$(this).css('background','yellow')}
        })

*********************************************************************


JQ思想:

1.模仿CSS获取元素

2.方法函数化，JQ以各种方法传参代替了JS的属性赋值操作

3.方法链式操作

4.和原生共存，写法不能混用

5.取值赋值合用一个方法，区别于加不加参数，当一组元素取值时，
取的是第一个元素的值，取出所有元素需要循环。而赋值时，
直接赋值给这组的每个元素


-----------------------------------------------------------------

$()下的常用方法:

has()   
    //包含: 有包含指定元素的被选择，针对元素里面的东西
    $('div').has('span').css('background','red');   //选择包含span的div


filter()    
    //过滤: 满足条件的被选择，没满足的过滤掉，针对元素本身的属性
    $('div').filter('.box').css('background','red');    //选择class为.box的div


not()
    //filter()的反义词
    $('div').not('.box').css('background','red');   //选择class不是.box的div


next()
    //下一个兄弟节点


prev()
    //上一个兄弟节点


find()
    //寻找元素内部的节点
    $('div').find('h2').eq(1).css('background','red');


eq()
    //通过下标去寻找一组元素的第几个


index()
    //索引: 返回当前元素在所有兄弟节点中的位置
    $('#h').index();


attr()
    取值: oDiv.attr('title');
    赋值: oDiv.attr('title','div1');


addClass()
    //添加class
    $('div').addClass('box2 box4');


removeClass()
    //删除class
    $('div').removeClass('box1');

-------------------------------------------------------------

width() 
    //元素width

innerWidth()   
    //元素width+padding

outerWidth()
    //元素width+padding+border，outerWidth(true)再加个margin




$(function(){

    $('div').width();  //width
    
    $('div').innerWidth();  //width + padding
    
    $('div').outerWidth();  //width + padding + border
    
    $('div').outerWidth(true);  //width + padding + border + margin
    
});



--------------------------------------------------------------------

insertBefore()  
    A.insertBefore(B)    //把A放在B的前面，剪切
    $('span').insertBefore( $('div') );


before()
    A.before(B)    //调换两者的位置。B在A前面


insertAfter() 
    A.insertAfter(B)    //把A放在B的后面，剪切  

after()
    A.after(B)    //调换两者的位置。B在A后面

-------------------------------------------------------------------

appendTo()   
    A.appendTo(B)    //把A放在B的内部最后，剪切

append()
    A.append(B)    //B在A的内部最后

prependTo() 
    A.prependTo(B)   // 把A放在B的内部最开始的位置，剪切  

prepend()
    A.prepend(B)    //B在A的内部最前

remove()
    A.remove();    //删除元素
    $('div').remove();

---------------------------------------------------------------
on() 
      // 事件绑定
    $('div').on('click mouseover',function(){
            alert(123);
        }); 

    $('div').on({
        'click' : function(){alert(123)},
        'mouseover' : function(){alert(456)}
    });


off()
      // 取消事件绑定
    $('div').off()   // 取消全部事件
    $('div').off('click')    //取消某个事件


----------------------------------------------------------------

scrollTop()
       //可视窗口距顶部距离
    $(window).scrollTop();  //滚动距离


创建元素
    $('<div>')


获取窗口
    $('window')


parent()
       //获取父级
    $('#div2').parent().css('background','blue');


offsetParent()
      // 获取有定位的父级，如果父级没有定位，就获取body
    $('#div2').offsetParent().css('background','blue');


val()
    //获取/设置一个元素的value值，取值/赋值


size()
    //获取组长


each()
    //for循环的加强
    $('li').each(function(i,elem){
        //i是下标，$(elem)是元素对象
    });


hover()
    $('div').hover(function(){
        //移入
    },function(){
        //移开
    })；


show()
    $('div').show(1000);    //显示，可加参数以动画形式显示


hide()
        $('div').hide(1000);    //隐藏，可加参数以动画形式隐藏


fadeIn()
        $('div').fadeIn(1000);  //淡入


fadeOut()
        $('div').fadeOut(1000); //淡出


fadeTo()
        $('div').fadeTo(1000,0.5);  //调节透明度


slideDown() 
        $('div').slideDown(1000);   //向下展开 


slideUp()
        $('div').fadeIn(1000);  //向上卷曲


offset().left
        $('#div2').offset().left ;  //获取到文档的左距离


position().left
        $('#div2').position().left ;  
        //到有定位的父级的left值,把当前元素转化成类似定位的形式(没有定位父级的话就是到文档)