JQuery笔记总结------事件细节JQ进阶常用方法

Posted 2020-09-11

引入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);


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

选择器：
: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‘,
                            width: ‘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({width:‘500px‘,height:‘500px‘});
    },
    function()
    {
        $(this).stop().animate({width:‘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({width:300},2000).delay(1000).animate({height:300},2000);


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

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


自带的动画：

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

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


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


get() : 就是把JQ转成原生JS,括号内不写下标就是取全部

    document.getElementById(‘div1‘).innerHTML -->  $(‘#div1‘).get(0).innerHTML 

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

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

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-->就是点击的元素
    });

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

//主动触发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()
    $(‘#div‘).get(0).innerHTML
    //将JQ取的元素转化为原生JS识别的写法，
    get()取的是获取的一组元素
    get(i)取的是获取的一组元素第i个

    不过在JQ下也有length这个属性。
    JQ取的一组元素也能通过下标[i]变成原生JS识别的元素
    如：
        $(‘li‘)[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‘)}
        })
        
*********************************************************************
：