jquery学习笔记

一、jQuery 简介

1、简介

①一个非常优秀的js库

②89千行的代码，重在封装思想，使用方法会用就可以先查先用。

③zepto从jQuery演变过来的，zepto.js,迷你jquery库，应用于移动端。

④1.8版本之前的jquery兼容ie6

⑤jQuery只是辅助工具，不能替代js，方法再全也总是有缺失的

⑥jQuery需要分阶段学习，jquery很庞杂，应由浅入深。

⑦jQuery 应用方法很多，学习时，应该把常用的方法运用熟练，对于一些不常用的方法，我们常常先了解其用途，现用现查API。

⑧Jquery字典：

https://www.jquery123.com/

http://www.css88.com/jqapi-1.9/

2、特殊说明

①$ = jquery

$() = jquery() 函数执行

$(‘div’) 带参数的函数执行

②sizzle.js 如果只是为了查找元素方便，而不用其他方法，就用sizzle.js库

③jquery都是函数式写法

④css写法

第一种：

$('li').css({width:'100px',height:'100px'})

第二种：

$('li').css('width','100px').css('height','100px')

⑤链式操作

 $('li').css('width','100px').text('123');

二、选择元素

1、选择方法$()，括号里可以添什么

①css选择器：

eg:

$('div');
$('.demo');

②原生dom

eg:

var oDiv = document.getElementByTagName('div');
$(oDiv);

③jquery对象：

$($('#demo'))

④null/undefined

⑤函数function(){}：立即执行函数

$(function(){
     // 写代码
})

⑥selector/content

$('p','#demo')

⑦jquery特有的选择规则 (选出来的是jquery对象)

$('ul>li:first');

$('ul>li:last);

$('ul>li:eq(2)'); eq：索引

$('ul>li:odd/even'); odd奇数；even偶数

⑧filter('.box/[title=hello]');筛选，not()：与filter完全取反;

⑨has(); 有元素

⑩find();找到元素

⑪eq();索引值

⑫is()->true/false; 是什么元素

三、取值赋值

html(); text(); css()

当取值时，是取第一个，赋值赋一组

①取值： js ->innerHTML = 123; jq -> html(123)

$('li').text();
$('li').html();
$('li:last').text();
$('li:last').html();

②赋值：

$('li').text('123');
$('li').html('<span>1234</span>');

③取属性值

css()取值相当于 getComputed , 赋值相当于dom.style.***

css()赋值赋一组，取值取一个(第一个颜色会在内部转换成rgb)

$('li').css(width);

四、设置属性

attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。

取值时，是取第一个，赋值赋一组。

①prop() prop()函数主要依赖的则是JS中原生的对象属性获取和设置方式。

$('li').prop('class','aa')

②attr() attr()函数主要依赖的是Element对象的getAttribute()和setAttribute()两个方法。

$('li').attr('ds','dxb')

③取属性值

$('li').attr('ds'')——>dxb

④checked、selected、disabled

checked 此项是选中状态

<input type="checkbox" checked>

$('li').prop('checked')——>true
$('li').attr('checked')——>'checked'

selected 此项是选中状态

<select>
        <option>1</option>
        <option selected>2</option>
</select>

$('li').prop('selected')——>true
$('li').attr('selected')——>'selected'

disabled 输入框不可用

<input type="text" disabled>

$('li').prop('disabled')——>true
$('li').attr('disabled')——>'disabled'

五、元素节点

1、兄弟节点

①上一个兄弟节点

$('li:eq(2)').prev()

②下一个兄弟节点

$('li:eq(2)').next()

③此兄弟节点的索引值

$('li:eq(2)').index()

六、添加删除class类名

addClass() 和emoveClass()，参数可以是function

1、addClass();

2、removeClass();

3、toggleClass();

七、插入删除功能

1、A.insertBefore(B) A插入到 B的前面 (有剪切的功能) 返回A

$('li:eq(4)').insertBefore('li:eq(0)').css('color','red')

'li:eq(4)'颜色变红

2、B.before(A) A在 B的前面 (有剪切的功能) 返回B

$('li:eq(0)').before('li:eq(4)').css('color','green')

3、afterBefore(B)\after(A)

4、C.appendTo(D): C添加到D的里面 (添加到最后一个子元素后) js：appendChild()

5、D.append(C): D里添加C(同上）

6、prependTo prepend (添加到第一个元素前)

7、remove detach 把元素删除后返回 (二者略有不同，detach会连同事件一起返回)

eg：下列例子，当点击item1时，item1消失，当点击item2时，item2消失，当点击button时，item1和item2都添加上，再点击item1不会消失，再点击item2会消失（remove和detach的区别）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrapper {
            height: 300px;
            width: 300px;
            background: #eee;
        }

        .wrapper div {
            height: 100px;
            width: 100px;
        }

        .wrapper .item1 {
            background: red;
        }

        .wrapper .item2 {
            background: blue;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="item1">item1</div>
        <div class="item2">item2</div>
    </div>
    <button>添加</button>
    <script src = 'jquery-3.3.1.min.js'></script>
    <script>
        $('.item1').click(function () {
            item1 = $(this).remove();
        })
        $('.item2').click(function () {
            item2 = $(this).detach();
        })
        $('button').click(function () {
            $('.wrapper').append(item1).append(item2);
        })
    </script>
</body>

</html>

八 on()绑定事件,off()解除绑定事件

8.1 on绑定事件，没有参数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{padding: 0;
        margin: 0;}
        ul{
            height: 50px;
            width: 200px;
            background: #eee;
            list-style: none;
            line-height: 50px;
            text-align: center;
        }
        ul li{
            width: 50px;
            text-align: center;
            float: left;
            background: brown;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li> 
    </ul>
    <script src = 'jquery-3.3.1.min.js'></script>
    <script>
        $('li').on('click',function(){
            console.log($(this).html());
        })
    </script>
</body>

</html>

8.2 on绑定事件,带有参数，并监听事件的变化，下例，监听ul的变化，当点击li时，输出li的内容，当新添加li后，点击新添加的li依然可以点击显示li内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{padding: 0;
        margin: 0;}
        ul{
            height: 50px;
            width: 200px;
            background: #eee;
            list-style: none;
            line-height: 50px;
            text-align: center;
        }
        ul li{
            width: 50px;
            text-align: center;
            float: left;
            background: brown;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li> 
    </ul>
    <script src = 'jquery-3.3.1.min.js'></script>
    <script>
    //此时on('监听事件','事件源对象','执行函数')
        $('ul').on('click','li',function(){
            console.log($(this).html());
        })
        // 添加新的li，点击时，显示4，因为上述ul绑定了监听事件，所以可以监测到li变化
        $('<li>4<li>').appendTo($('ul'));
    </script>
</body>

</html>

8.3 off()解除绑定事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{padding: 0;
        margin: 0;}
        ul{
            height: 50px;
            width: 200px;
            background: #eee;
            list-style: none;
            line-height: 50px;
            text-align: center;
        }
        ul li{
            width: 50px;
            text-align: center;
            float: left;
            background: brown;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li> 
    </ul>
    <script src = 'jquery-3.3.1.min.js'></script>
    <script>
        $('li').on('click',function(){
            console.log($(this).html());
        })
        $('li').off('click');
    </script>
</body>

</html>

8.4 解除绑定事件，并有事件源，下例解绑第三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{padding: 0;
        margin: 0;}
        ul{
            height: 50px;
            width: 200px;
            background: #eee;
            list-style: none;
            line-height: 50px;
            text-align: center;
        }
        ul li{
            width: 50px;
            text-align: center;
            float: left;
            background: brown;
        }
    </style>
</head>
<body>
    <ul>
        <li class="li1">1</li>
        <li class="li2">2</li>
        <li class="li3">3</li> 
    </ul>
    <script src = 'jquery-3.3.1.min.js'></script>
    <script>
        $('ul').on('click','.li1',function(){
            console.log('li1');
        })
        $('ul').on('click','.li2',function(){
            console.log('li2');
        })
        $('ul').on('click','.li3',function(){
            console.log('li3');
        })
        $('ul').off('click','.li3');
    </script>
</body>
</html>

8.5 解绑绑定的函数，下列解除li1上面的a函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{padding: 0;
        margin: 0;}
        ul{
            height: 50px;
            width: 200px;
            background: #eee;
            list-style: none;
            line-height: 50px;
            text-align: center;
        }
        ul li{
            width: 50px;
            text-align: center;
            float: left;
            background: brown;
        }
    </style>
</head>
<body>
    <ul>
        <li class="li1">1</li>
        <li class="li2">2</li>
    </ul>
    <script src = 'jquery-3.3.1.min.js'></script>
    <script>
        function a(){
            console.log('a');
        }
        function b(){
            console.log('b');
        }
        $('ul').on('click','.li1', a);
        $('ul').on('click','.li1', b);
        $('ul').off('click','.li1',a);//解除li1上面的a函数
    </script>
</body>
</html>

9 one() 只绑定一次事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{padding: 0;
        margin: 0;}
        ul{
            height: 50px;
            width: 200px;
            background: #eee;
            list-style: none;
            line-height: 50px;
            text-align: center;
        }
        ul li{
            width: 50px;
            text-align: center;
            float: left;
            background: brown;
        }
    </style>
</head>
<body>
    <ul>
        <li class="li1">1</li>
        <li class="li2">2</li>
    </ul>
    <script src = 'jquery-3.3.1.min.js'></script>
    <script>
        function a(){
            console.log('a');
        }
        function b(){
            console.log('b');
        }
        $('ul').one('click','.li1', a);
    </script>
</body>
</html>

九 滚轮滚出去的尺寸

9.1 scrollTop() 滚动出去的高度: $(window).scrollTop();

scrollLeft()滚动出去的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{padding: 0;
        margin: 0;}
        body{
            height: 1000px;
            width: 1000px;
        }
        ul{
            height: 50px;
            width: 200px;
            background: #eee;
            list-style: none;
            line-height: 50px;
            text-align: center;
        }
        ul li{
            width: 50px;
            text-align: center;
            float: left;
            background: brown;
        }
    </style>
</head>
<body>
    <ul>
        <li class="li1">1</li>
        <li class="li2">2</li>
    </ul>
    <script src = 'jquery-3.3.1.min.js'></script>
    <script>
        $(window).scroll(function(){
            console.log($(window).scrollTop());
            console.log($(window).scrollLeft());
        })
    </script>
</body>
</html>

9.2 scrollTop用处： position：fixed 兼容性写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{padding: 0;
        margin: 0;}
        body{
            height: 1000px;
            width: 1000px;
        }
        ul{
            /* position 改为absolute */
            position: absolute;
            top: 100px;
            left: 0px;
            height: 50px;
            width: 200px;
            background: #eee;
            list-style: none;
            line-height: 50px;
            text-align: center;
        }
        ul li{
            width: 50px;
            text-align: center;
            float: left;
            background: brown;
        }
    </style>
</head>
<body>
    <ul>
        <li class="li1">1</li>
        <li class="li2">2</li>
    </ul>
    <script src = 'jquery-3.3.1.min.js'></script>
    <script>
        $(window).scroll(function(){
            $('ul').css({top: $(window).scrollTop() + 100,left:$(window).scrollLeft()});
        })
    </script>
</body>
</html>

十尺寸

width height 包含： content

innerWidth innerHeight 包含： content padding

outerWidth outerHeight 包含： content padding border

outerWidth(true) outerHeight(true) : 参数为true的时候包含： content padding border margin

 div{
            height: 100px;
            width: 100px;
            padding: 1px;
            margin: 10px;
            background: red;
            border:10px solid black;
        }

结果：

注意：

创建标签：$('<div></div>')

单标签写法： $('<div>'), $('<div/>')

创建多个标签：

$("<div class = 'wrapper'><p><span></span></p></div>").appendTo($('body'));

十一关于事件

1、事件对象 e

e.pageX e.pageY相对于文档而言

e.clientX e.clientY相对于浏览器窗口而言

e.screenX e.screenY相对于电脑屏幕而言

e.which哪个键或按钮 keydown

e.button哪个鼠标按键被按下 mousedown

2、取消默认事件和冒泡

e.preventDefault()取消默认事件;

$('input').on('mousedown contextmenu',function(e){
            e.preventDefault();
            console.log(e.button);
        })

e.stopPropagation()取消冒泡;

<body>
   <p><span>span
   </span>p</p>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        $('p').click(function(e){
            console.log('p');
        })
        $('span').click(function(e){
            e.stopPropagation();
            console.log('span');
        })
    </script>

即取消默认事件，又取消冒泡：return false

<body>
   <p>
       pppp
       <a href="http://www.baidu.com">百度一下</a>
   </p>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        $('p').click(function(e){
            console.log('p');
        })
        $('a').click(function(e){
            console.log('百度一下');
            return false;
            console.log('这个代码不执行');
            
        })
    </script>
</body>

3.one(); 绑定事件：只绑定一次

4.定位

offset().left/top 相对于文档

position().left/top 相对于有定位的父级

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrapper{
            position: relative;
            left: 0px;
            top: 100px;
        }
        .box{
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
   <div class="wrapper">wrapper
       <div class="box">box</div>
   </div>
    <script src='jquery-3.3.1.min.js'></script>
</body>
</html>

结果：

5.parent(); 返回最近的直接父元素，可以有参数，返回一个

offsetParent(); 返回最近的有定位的父级，如果都没有，找到头，返回html，里面不能传参数，返回一个

parents();返回所有父级，可以有参数parents(‘div’)，返回所有符合的节点，可能返回多个

closest() 查找最近的祖先节点，必须有参数selector ，能把自己选中，只能返回一个

6.val(); 可以返回value值

7、each(); obj.each(function (index, elem) {

console.log(index);

console.log(elem);

})循环遍历，可以是jquery对象

或者：obj.each(function (index) {

console.log(index);

console.log(this);})

8、end() 回退操作,将第一个li设置成红色，第五个li设置成蓝色

$('li').eq(0).css({color:'red'}).end().eq(4).css({color:'blue'});

9、siblings() 当前元素节点的所有兄弟节点

prevAll() 当前元素上面的所有兄弟节点

nextAll() 当前元素下面的所有兄弟节点

prevUntil() nextUntil ->掐头去尾选中元素,传jquery对象或dom

10、clone方法

clone() 克隆节点参数为true的时候事件也能克隆

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
   </ul>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
    var a = $('li:eq(0)').clone();
    $('ul').append(a);
    </script>
</body>
</html>

带有参数true

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
   </ul>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        $('li:eq(0)').click(function(){
            console.log(888);
        })
    var a = $('li:eq(0)').clone(true);
    $('ul').append(a);
    </script>
</body>
</html>

11、wrap包裹

wrap（在外面包裹）循环遍历包裹，参数 function

<body>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
   </ul>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        $('li').wrap('<div>');
    </script>
</body>

结果：

wrapInner（在里面包裹）循环遍历包裹，参数 function

<body>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
   </ul>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        $('li').wrapInner('<span>');
    </script>
</body>

结果：

wrapAll 包裹选中的所有元素会破坏结构

<body>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <span>span</span>
   </ul>
   <div>
       <li>4</li>
   </div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        $('li').wrapAll('<div>');
    </script>
</body>

结果：

unwrap解除包裹，结构化标签不能删除

<body>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <span>span</span>
   </ul>
   <div>
       <li>4</li>
   </div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        $('li').unwrap();
    </script>

结果：

$('li').unwrap().unwrap();

结果，删除包裹，最远到body，body是结构化标签，不会被删除

12、add()

A.add(B) 选中元素A和B集中操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <span>span</span>
   </ul>
   <div>
       <li>4</li>
   </div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        $('li:eq(0)').add($('li:eq(2)')).css({color:'red'});
    </script>
</body>
</html>

结果：

13、slice();

$('li').slice(0,2)截取算头不算尾

<body>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <span>span</span>
   </ul>
   <div>
       <li>4</li>
   </div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        $('li').slice(0,2).css({color:'red'});
    </script>
</body>

结果：

14、empty();清空html

15、serialize 串联表单数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <!-- form用来提交表单数据，但是没提交一次，页面就会刷新一次，不好用，用 -->
   <form action="">
       <input type="text" name = "username">
       <input type="text" name = "age">
       <input type="submit">
   </form>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        $('input:eq(2)').click(function(e){
            e.preventDefault();//取消form提交表单数据默认事件
            console.log($('form').serialize());
            // 用.serialize()串联表单数据，提交给后台用
        })
    </script>
</body>
</html>

结果：

serializeArray 串联数据成数组

十二、动画animation

animate( properties [, duration] [, easing] [, complete] )有四个参数：

properties：一组包含作为动画属性和终值的样式属性和及其值的集合
duration(可选)：动画执行时间，其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing(可选)：要使用的过渡效果的名称，如："linear" 或"swing"
complete(可选)：在动画完成时执行的函数

其中参数easing默认有两个效果："linear"和"swing"

12.1 简单动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
   <div></div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        $('div').animate({width:200,height:200,opacity:0.4},1000);
    </script>
</body>
</html>

12.2 速度方式：linear、swing

$('div').animate({width:200,height:200,opacity:0.4},1000,'linear');

$('div').animate({width:200,height:200,opacity:0.4},1000,'swing');

速度方式的插件：jquery.easing.js

12.3 连续动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrapper{
            position: relative;
            height: 500px;
            width: 500px;
        }
        .wrapper div{
            position: absolute;
            width: 100px;
            height: 100px;
        }
        .wrapper .dg{
            top: 0px;
            left: 0px;
            background: blue;
            z-index: 3;
        }
        .wrapper .ds{
            top: 0px;
            left: 200px;
            background: red;
        }
        .wrapper .es{
            top: 200px;
            left: 200px;
            background: pink;
        }
    </style>
</head>
<body>
   <div class="wrapper">
       <div class="dg">div1</div>
       <div class="ds">div2</div>
       <div class="es">div3</div>
   </div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        $('.dg').animate({left:200},2000,'swing').animate({left:200,top:200},2000,'linear');
    </script>
</body>
</html>

12.4 停止动画 stop(参数一，参数二)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrapper{
            position: relative;
            height: 500px;
            width: 500px;
        }
        .wrapper div{
            position: absolute;
            width: 100px;
            height: 100px;
        }
        .wrapper .dg{
            top: 0px;
            left: 0px;
            background: blue;
            z-index: 3;
        }
        .wrapper .ds{
            top: 0px;
            left: 200px;
            background: red;
        }
        .wrapper .es{
            top: 200px;
            left: 200px;
            background: pink;
        }
    </style>
</head>
<body>
   <div class="wrapper">
       <div class="dg">div1</div>
       <div class="ds">div2</div>
       <div class="es">div3</div>
   </div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        $('.dg').animate({left:200},2000,'swing').animate({left:200,top:200},2000,'linear');
        $(document).click(function(){
            $('.dg').stop();
        })
       
    </script>
</body>
</html>

第一个参数：是否停止后续动画，false：不停止，true：停止

第二个参数：是否立即到达当前目标点，false：不到达，true：到达

stop()，相当于stop（false,false）阻止当前运动，继续后续运动

stop(true) 阻止后续所有运动,相当于stop(true,false)

stop(true, true) 停止当前所有运动停在当前目标点

stop(false, true) 跳过当前运动并到达目标点，执行后续运动

12.5 finish()停止当前运动并且达到最后运动的目标点，相当于stop(),stop(false,false)

12.6 delay() 延迟参数延迟时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrapper{
            position: relative;
            height: 500px;
            width: 500px;
        }
        .wrapper div{
            position: absolute;
            width: 100px;
            height: 100px;
        }
        .wrapper .dg{
            top: 0px;
            left: 0px;
            background: blue;
            z-index: 3;
        }
        .wrapper .ds{
            top: 0px;
            left: 200px;
            background: red;
        }
        .wrapper .es{
            top: 200px;
            left: 200px;
            background: pink;
        }
    </style>
</head>
<body>
   <div class="wrapper">
       <div class="dg">div1</div>
       <div class="ds">div2</div>
       <div class="es">div3</div>
   </div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        $('.dg').animate({left:200},2000,'swing').delay(3000).animate({left:200,top:200},2000,'linear');
        $(document).click(function(){
            $('.dg').stop();
        })
       
    </script>
</body>
</html>

十三、滑动

slideUp()通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。slideUp(speed,callback)

slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。

slideToggle(speed, callback)

通过使用滑动效果（高度变化）来切换元素的可见状态。如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素

十四、淡入淡出

fadeIn()淡入

fadeOut()淡出

fadeToggle()切换淡入淡出

十五、trigger主动触发事件

trigger 主动触发事件参数 1.事件类型 2.参数

trigger 传递参数 trigger('click', data); $('li').on('click', function (e,data) {})参数是在事件处理函数的第二个参数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div></div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        $('div').click(function(event,a){
            $(this).animate({width:$(this).width() + a});
        })
        $('div').trigger('click',[100])
    </script>
</body>

</html>

trigger可以触发自定义事件 eat

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div></div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        $('div').on('eat',function(event,a){
            $(this).animate({width:$(this).width() + a});
        })
        var timer = setInterval(function(){
            if($('div').width() > 300){
                $('div').remove();
                clearInterval(timer);
            }
            else{
                $('div').trigger('eat',100)
            }
        },500)    
    </script>
</body>

</html>

十六、工具方法

工具方法：以$.*** jQuery.***这种方式调用，此类方法定义在jQuery函数上面

实例方法：$(‘div’).html()实例方法，此类方法定义在原型上

16.1 $.type() 判断参数的数据类型

原生js判断类型的三种方法

1.arr instanceof Array

2.arr.constructor == Array

3.Object.prototype.toString.call(arr)

1,2两种有局限性，不精确，3比较通用

16.2 $.trim 消除前后空格

<script>
       var str = '     dg   ';
       console.log('|'+$.trim(str)+'|');
    </script>

16.3 $.proxy()

$.proxy()改变this指针方向参数1：function,参数2:函数执行期上下文

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div></div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
       var obj = {
           init :function(){
               this.bindEvent();
           },
           bindEvent:function(){
               $('div').click($.proxy(this.cb,this,1,2));
           },
           cb:function(a,b){
               console.log(a + " " + b);
           }
       }
       obj.init();
    </script>
</body>

</html>

16.4 $.noConflict() 防止冲突

在很多JavaScript库使用$作为一个函数或变量名，正如jquery做的一样。如果我们需要同时使用jQuery和其他JavaScript库，我们可以使用$.noConfilct把$控制权交给其他库。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div></div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
       var b = $.noConflict();
       b('div').click(function(){
           console.log(123);
       })
    </script>
</body>

</html>

16.5 $.parseJSON()

$.parseJSON() 函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象。

$.parseJSON() 字符转换成json 要求非常严格，外部是单引号，内部属性是双引号不需要回车符

var obj = jQuery.parseJSON('{"name": "wang","age":18}');

16.6 $.makeArray()

$.makeArray 把类数组转换成数组

<script>
       var array = {
           name:"wang",
           age:18,
           length:2
       }
       var arr = $.makeArray(array);
    </script>

17、jQuery 高级

$.extend() 插件扩展1提供新的jQuery工具方法

$.fn.extend()插件扩展2提供新的jQuery实例方法

$.extend()还可以合并对象，浅拷贝，obj2改变，obj1也变

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        var obj1 = {
            person1:{
                name:'wang',
                age:20
            },
            number1:1
        }
        var obj2 = {
            person2:{
                name:'tong',
                age:29
            },
            number2:2
        }
        $.extend(obj1,obj2);
    </script>
</body>

</html>

$.extend(true)，加上参数true，深拷贝，obj2和新的obj1相互独立

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        var obj1 = {
            person1:{
                name:'wang',
                age:20
            },
            number1:1
        }
        var obj2 = {
            person2:{
                name:'tong',
                age:29
            },
            number2:2
        }
        $.extend(true,obj1,obj2);
        obj2.person2.name = 'guo'
        console.log(obj2);
    </script>
</body>

</html>

结果：

18、var cb = $.Callbacks() 回调函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        function fn1(){
            console.log('fn1')
        }
        function fn2(){
            console.log('fn2')
        }
        function fn3(){
            console.log('fn3')
        }
        //$.Callbacks()可以管理函数队列
        var cb = $.Callbacks();
        // 调用用add()
        cb.add(fn1,fn2,fn3);
        //执行用fire
        cb.fire();
    </script>
</body>

</html>

18.1 $.Callbacks() 四个参数：

once 只执行一次fire()方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        function fn1(){
            console.log('fn1')
        }
        function fn2(){
            console.log('fn2')
        }
        function fn3(){
            console.log('fn3')
        }
        //$.Callbacks()可以管理函数队列
        var cb = $.Callbacks('once');
        // 调用用add()
        cb.add(fn1,fn2,fn3);
        //执行用fire
        cb.fire();
        cb.fire();
        cb.fire();
    </script>
</body>

</html>

memory 记忆

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        function fn1(){
            console.log('fn1')
        }
        function fn2(){
            console.log('fn2')
        }
        function fn3(){
            console.log('fn3')
        }
        //$.Callbacks()可以管理函数队列
        var cb = $.Callbacks('memory');
        // 调用用add()
        cb.add(fn1,fn2);
        //执行用fire
        cb.fire();
        cb.add(fn3);
    </script>
</body>

</html>

unique oCb.add(aa,aa,aa);只执行一次aa

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        function fn1(){
            console.log('fn1')
        }
        function fn2(){
            console.log('fn2')
        }
        function fn3(){
            console.log('fn3')
        }
        //$.Callbacks()可以管理函数队列
        var cb = $.Callbacks('unique');
        // 调用用add()
        cb.add(fn1,fn1);
        //执行用fire
        cb.fire();
    </script>
</body>

</html>

stopOnFalse

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        function fn1(){
            console.log('fn1');
        }
        function fn2(){
            console.log('fn2');
            return false;
        }
        function fn3(){
            console.log('fn3');
        }
        //$.Callbacks()可以管理函数队列
        var cb = $.Callbacks('stopOnFalse');
        // 调用用add()
        cb.add(fn1,fn2);
        cb.add(fn3);
        //执行用fire
        cb.fire();
        
    </script>
</body>

</html>

结果：

混合使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        function fn1(){
            console.log('fn1')
        }
        function fn2(){
            console.log('fn2')
        }
        function fn3(){
            console.log('fn3')
        }
        //$.Callbacks()可以管理函数队列
        var cb = $.Callbacks('unique memory');
        // 调用用add()
        cb.add(fn1,fn1);
        //执行用fire
        cb.fire();
        cb.add(fn3);
    </script>
</body>

</html>

19、$.Defferred()

$.Deferred ()延迟对象，相当于有状态的Callbacks();

添加函数

done fail progress

触发函数：

resolve reject notify

oDf.resolve() -> done(function(){})

oDf.reject() -> fail(function(){})

oDf.reject() -> progress(function() {})

done, fail ----> once memory

progress ----> memory

nofity 进行时的意思,成功失败的结果还没出现,所以此函数,触发后 done 和 fail 还可以触发一个

done fail 触发一个之后就不能触发其他的了 ---> 最终状态已经告知

$.deferred .promise() ------> 不能触发函数(无状态)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        function aa(){
            var dfd = $.Deferred();
            setInterval(function(){dfd.notify()},500);
            setInterval(function(){dfd.reject()},1000);
            setInterval(function(){dfd.resolve()},2000);
            return dfd.promise();
        }
        var cb = aa();
        cb
        .done(function(){
            console.log('OK');
        })
        .fail(function(){
            console.log('ERROR');
        })
        .progress(function(){
            console.log('doing');
        })
    </script>
</body>

</html>

$.when() ---->返回的是延迟对象参数也是延迟对象当参数延迟对象全部触发done的时候最后会触发when返回延迟对象的done函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        function aa(){
            var dfd = $.Deferred();
            dfd.reject();
            return dfd.promise();
        }
        function bb(){
            var dfd = $.Deferred();
            dfd.resolve();
            return dfd.promise();
        }
        var cb = aa();
        var cb2 = bb();
        $.when(cb,cb2)
        .done(function(){
            console.log('OK');
        })
        .fail(function(){
            console.log('ERROR');
        })
        .progress(function(){
            console.log('doing');
        })
    </script>
</body>

</html>

结果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script src='jquery-3.3.1.min.js'></script>
    <script>
        function aa(){
            var dfd = $.Deferred();
            dfd.resolve();
            return dfd.promise();
        }
        function bb(){
            var dfd = $.Deferred();
            dfd.resolve();
            return dfd.promise();
        }
        var cb = aa();
        var cb2 = bb();
        $.when(cb,cb2)
        .done(function(){
            console.log('OK');
        })
        .fail(function(){
            console.log('ERROR');
        })
        .progress(function(){
            console.log('doing');
        })
    </script>
</body>

</html>

结果：

posted @ 2018-04-04 12:36 Sundy‘s园阅读(211) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Sundy’园

Nothing is impossible for a willing heart！