js

最新推荐文章于 2022-12-01 21:45:00 发布

TaoYeeeee

最新推荐文章于 2022-12-01 21:45:00 发布

阅读量192

点赞数 1

原文链接：https://www.antmoe.com/posts/849f1f08/index.html

版权

二、jQuery 核心函数和工具方法

jQuery 核心函数

jQuery 的核心函数就是 $();，圆括号内可以传递函数、字符串选择器、字符串代码片段、DOM 元素等。

传递函数
```
$(function () {  
    alert(1)
})
```

字符串选择器

返回一个 jQuery 对象，对象中保存了找到的 DOM 元素

$(function () {   
    var $box1 = $(".box1")  
    var $box2 = $("#box2") 
    console.log($box1)
    console.log($box2)
})

字符串代码片段

返回一个 jQuery 对象，对象中保存了创建的 DOM 元素

$(function () {    var $p = $('<p>我是段落</p>')    console.log($p)})

接收一个 DOM 元素

DOM 元素会被包装成一个 jQuery 对象返回。

$(function () {   
    var span = document.getElementsByTagName('span')[0]   
    console.log(span)   
    var $span = $(span)  
    console.log($span)
})

jQuery 对象

jQuery 对象是一个伪数组对象（有 0 到 length-1 的属性，并且有 length 属性）

$(function () {  
    var $div = $('div') 
    console.log($div)
})

静态方法与实例方法

静态方法通过类名调用

// 1. 定义一个类
function AClass() {
    
}
// 2. 给这个类添加一个静态方法
// 直接添加给类的就是静态方法
AClass.staticMethod = function () { 
    alert('staticMethod')
}
// 静态方法通过类名调用
AClass.staticMethod();

实例方法通过对象调用

// 定义一个类
function AClass() {
    
}
// 给这个类添加一个实例方法
AClass.prototype.instanceMethod = function () {    
    alert('instanceMethod')
}
// 创建一个实例（创建一个对象）
var a = new AClass()
// 实例方法通过类的实例调用
a.instanceMethod()

each 方法

原生 forEach 方法可以遍历数组，但不可以遍历伪数组。

var arr = [1, 3, 5, 7, 9]
/*       
原生遍历：     
第一个参数：遍历到的元素   
第二个参数，遍历到的索引   
注意：原生forEach只能遍历数组，不能遍历伪数组    
*/
arr.forEach(function (value, index) {   
    console.log(index, value)})
// 伪数组测试
var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 7, length: 5 }
obj.forEach(function (value, index) { 
    console.log(index, value)
})

jQuery 的 each 方法既可以遍历数组，又可以遍历伪数组

var arr = [1, 3, 5, 7, 9]
var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 7, length: 5 }   
$.each(arr, function (index, value) { 
    console.log(index, value)
})
$.each(obj, function (index, value) {  
    console.log(index, value)
})

map 方法

原生 map 方法可以遍历数组，但不可以遍历伪数组。

var arr = [1, 3, 5, 7, 9]
var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 7, length: 5 }
// 1. 利用原生的JS的map方法遍历
/*    
第一个参数：当前遍历到的元素    
第二个参数：当前遍历到的索引     
第三个参数：当前被遍历的数组      
注意点：   
不能遍历伪数组    
*/
arr.map(function (value, index, arr) {   
    console.log(value, index, arr)
})
obj.map(function (value, index, arr) {  
    console.log(value, index, arr)
})

jQuery 的 map 方法既可以遍历数组，又可以遍历伪数组

var arr = [1, 3, 5, 7, 9]var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 7, length: 5 }
$.map(arr, function (value, index) {  
    console.log(value, index)})$.map(obj, function (value, index) {    console.log(value, index)})

jQuery 中的 each 静态方法和 map 静态方法的区别

each 静态方法默认的返回值就是遍历谁就返回谁，而 map 静态方法默认的返回值就是一个空数组
each 静态方法不支持在回调函数中对遍历的数组进行处理，map 静态方法可以在回调函数中通过 return 对遍历的数组进行处理

去掉字符串首尾空格

$.trim(str)，该方法返回一个新的字符串。

var str = '    tzk    'var $res = $.trim(str)console.log('---' + str + '---') // ---    tzk    ---console.log('---' + $res + '---') // ---tzk---

判断传入的对象是否是 window 对象

$.isWindow(obj)，该方法返回一个布尔值。如果传入对象是 window 则返回 true，否则返回 false。

var w = windowvar res = $.isWindow(w);console.log(res) //true

判断是否为数组

$.isArray(arr)，该方法返回一个布尔值，只有数组才会返回 true，其他类型均返回 false（包括伪数组）。

判断是否为函数

$.isFunction(fn)，该方法返回一个布尔值。只有是一个函数时，才会返回 true。

var res = $.isFunction(fn)

jQuery 的本质上就是一个函数。

暂停 ready 的执行

默认情况下当页面加载完毕，JQuery 的 ready 入口函数将会自动执行。$.holdReady(true) 可以暂停入口函数的执行，而 $.holdReady(false) 可以恢复执行。

<!DOCTYPE html>
<html lang="en">  
    <head>     
        <meta charset="UTF-8">    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js">
        </script>
        <script>
            // $.holdReady(true) 暂停ready执行    
            $.holdReady(true)     
            $(document).ready(function () {     
                alert('ready')     
            });    
        </script>   
    </head>   
    <body>    
        <button>回复ready事件</button>   
        <script>        
            var btn = document.getElementsByTagName('button')[0]            
            btn.onclick = function () {      
                $.holdReady(false)      
            }    
        </script> 
    </body>
</html>

三、jQuery 属性操作

jQuery 内容选择器

为了方便测试，先将 DOM 元素写为以下格式：

<div></div>
<div>我是div</div>
<div>我是div123</div>
<div><span></span></div>
<div><p></p></div>

:empty 找到既没有文本内容也没有子元素的指定元素。

这个选择器对于以上内容只能找到第一个 div。
```
var $div = $('div:empty')console.log($div)
```
:parent 找到有文本内容或有子元素的指定元素

可以找到除第一个意外的四个元素
```
var $div = $('div:parent')console.log($div)
```
:contains(text) 找到包含指定文本内容的指定元素

视内容找到包含内容的 div
```
var $div = $('div:contains("我是div123")')console.log($div)
```
:has(selector) 找到包含指定子元素的指定元素

视搜索内容找到包含此子元素的元素
```
var $div = $('div:has("span")')console.log($div)
```

属性和属性节点

什么是属性

对象身上保存的变量就是属性

function Person() {}var p = new Person()p.name = 'tzk'

如何操作属性

对象。属性名称 = 值

对象。属性名称

对象 [‘属性名称’] = 值

对象 [‘属性名称’]
```
// 赋值属性
p['name'] = 'tzk'
// 获取属性
console.log(p.name)
```
什么是属性节点

`` 在编写 HTML 代码时，在 HTML 标签中添加的属性就是属性节点。

在浏览器中找到 span 这个 DOM 元素之后，展开看到的都是属性。

在 attributes 属性中保持的所有内容都是属性节点。

操作属性节点

var span = document.getElementsByTagName('span')[0]
// 设置属性
span.setAttribute('name', 'tzk')
// 获取属性
console.log(span.getAttribute('name'))

属性和属性节点的区别

任何对象都有属性，但只有 DOM 对象才有属性节点

attr 方法

attr(name|pro|key,val|fn) 方法

获取或者设置属性节点的值

参数

可以传递一个参数，代表获取节点的值

无论找到多少个元素，只会返回第一个元素指定的属性节点的值。

<!DOCTYPE html>
<html lang="en">  
    <head>      
        <meta charset="UTF-8">   
        <meta name="viewport" content="width=device-width, initial-scale=1.0">    
        <title>Document</title>   
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>        
        <script>       
            $(function () {          
                console.log($("span").attr('class'))
                // span1      
            })     
        </script>   
    </head>  
    <body>    
        <span class="span1" name='name1'></span>    
        <span class="span2" name='name2'></span>   
    </body>
</html>

也可以传递两个参数，设置属性节点的值

如果设置值，找到多少个元素就会设置多少个元素。

如果设置的节点不存在，那么会新增该属性。

<!DOCTYPE html>
<html lang="en">  
    <head>     
        <meta charset="UTF-8">     
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
        <title>Document</title>    
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>    
        <script>  
            $(function () {     
                $('span').attr('class', 'box')        
            })   
        </script> 
    </head>   
    <body>  
        <span class="span1" name='name1'></span>   
        <span class="span2" name='name2'></span>  
    </body>
</html>

removeAttr(name) 节点

删除属性节点

参数

会删除所有找到元素指定的属性节点

删除一个节点

<!DOCTYPE html>
<html lang="en">  
    <head>   
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">    
        <title>Document</title>        
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>      
        <script>   
            $(function () {          
                $('span').removeAttr('class')      
            })     
        </script> 
    </head> 
    <body>  
        <span class="span1" name='name1'></span>   
        <span class="span2" name='name2'></span>  
    </body>
</html>

删除多个属性

只需要在传递参数时用空格隔开即可。
```
$('span').removeAttr('class name')
```

prop 方法

prop 方法与 attr 方法一致。

设置或新增属性

$("span").eq(0).prop('demo', 'name1')
$("span").eq(1).prop('demo', 'tzk')

image-20200615152658852

获取属性

console.log($('span').prop('demo')) 
//name1

删除属性
```
$("span").removeProp('demo')
```

操作属性节点

官方推荐在操作属性节点时，具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用 prop(), 其他的使用 attr()

console.log($('.input1').prop('checked')) //trueconsole.log($('.input1').attr('checked')) //checkedconsole.log($('.input2').prop('checked')) //falseconsole.log($('.input2').attr('checked')) 
//undefined

图片切换的小案例

<!DOCTYPE html>
<html lang="en"><head> 
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>Document</title>   
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>   
    <script>  
        $(function () {   
            // 编写jQuery相关代码 
            // 1. 给按钮添加点击事件   
            var btn = document.getElementsByTagName('button')[0]   
            btn.onclick = function () {     
            // 2. 获取输入框输入的内容      
            var input = document.getElementsByTagName('input')[0]     
            var text = input.value     
            // 3. 修改img的src属性节点的值        
            $('img').attr('src', text)            
                // $('img').prop('src', text)    
            }    
        }) 
    </script>
    </head>
    <body>  
        <input type="text">   
        <button>切换图片</button><br /> 
        <img src="https://www.baidu.com/img/dongsc_eb45d000832f8e889ff64951eaf7f381.gif" alt="">
    </body>
</html>

jQuery 类操作相关方法

<!DOCTYPE html>
<html lang="en">   
    <head>       
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Document</title>    
        <style>   
            * {    
                margin: 0;     
                padding: 0;     
            }     
            .class1 {    
                width: 100px;          
                height: 100px;      
                background: red;       
            }    
            .class2 {     
                border: 5px solid black       
            }     
        </style>    
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>        <script>     
        $(function () {     
            var btns = document.getElementsByTagName('button') 
            })      
        </script>   
    </head> 
    <body>     
        <button>添加类</button>   
        <button>删除类</button>     
        <button>切换类</button>    
        <div></div>  
    </body>
</html>

添加与删除类

btns[0].onclick = function () {  
    // 添加多个类用空格隔开
    $('div').addClass('class1 class2')
}
btns[1].onclick = function () { 
    // 删除多个类用空格隔开   
    $('div').removeClass('class1 class2')
}

切换类

btns[2].onclick = function () {  
    // 多个用空格隔开 
    $('div').toggleClass('class1 class2')
}

文本值相关操作

<!DOCTYPE html>
<html lang="en"> 
    <head>      
        <meta charset="UTF-8">   
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Document</title>     
        <style>      
            * {              
                margin: 0;   
                padding: 0;       
            }       
            div {      
                width: 100px;     
                height: 100px;        
                border: 1px solid #000;   
            }   
        </style> 
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>        <script>       
        $(function () {   
            var btns = document.getElementsByTagName('button')  
            })  
        </script>
    </head> 
    <body>   
        <button>设置HTML</button>   
        <button>获取HTML</button>     
        <button>设置text</button>      
        <button>获取text</button>  
        <button>设置value</button>   
        <button>获取text</button>    
        <div></div>    
        <input type="text"> 
    </body>
</html>

html([val|fn])，用于设置元素的 html 元素。

类似原生 js 中的 innerHTML 方法
- 如果传入参数，则代表将当前元素的 html 修改为参数输入内容
```
btns[0].onclick = function () {  
    $('div').html('<p>我是一个段落<span>我是一个span</span></p>')
}
```
- 如果不传入参数，则代表获取当前元素的 HTML 代码。
```
btns[1].onclick = function () { 
    console.log($('div').html())
}
```

text([val|fn])

类似原生 js 中的 innerText 方法。参数传入与 html() 方法一模一样

btns[2].onclick = function () {  
    $('div').text('<p>我是一个段落<span>我是一个span</span></p>')
}
btns[3].onclick = function () {  
    console.log($('div').text())
}

val([val|fn|arr])

与 value 属性类似。参数传入与前两种一模一样。

btns[4].onclick = function () { 
    $('input').val('请输入内容：')
}
btns[5].onclick = function () {  
        $('input').val()
    }

操作样式方法

设置属性值

逐个设置

$('div').css('width', '100px')
$('div').css('height', '100px')
$('div').css('background', 'red')

链式设置

如果大于 3 步，建议分开

$('div').css('width', '100px').css('height', '100px').css('background', 'blue')

批量设置

参数可以传入一个对象，对象内传入 css 样式。

$('div').css({  
    width: '100px', 
    height: '100px', 
    background: 'red'
})

获取 css 样式。

传入参数即需要获取的样式名称。
```
console.log($('div').css('width'))
```
image-20200615180236759

尺寸和位置相关

尺寸

以 width() 方法为例。

<!DOCTYPE html>
<html lang="en">   
    <head>      
        <meta charset="UTF-8">   
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Document</title>    
        <style>     
            * {         
                margin: 0;          
                padding: 0;        
            }      
            .father {        
                width: 200px;       
                height: 200px;         
                border: 50px solid #000;      
                background: red;      
                margin-left: 50px;      
                position: relative;    
            }     
            .son {    
                width: 100px;      
                height: 100px;          
                background: blue;          
                position: absolute;       
                left: 50px;             
                top: 50px;      
            }      
        </style>   
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>        <script>      
        $(function () {     
            var btns = document.getElementsByTagName('button')  
            btns[0].onclick = function () {   
                // 获取元素的宽度 
                console.log($('.father').width()) 
                //200         
            }        
            btns[1].onclick = function () {      
                console.log($('.father').width('500px'))       
            }   
        })     
        </script> 
    </head>
    <body>   
        <div class="father"> 
            <div class="son"></div>   
        </div>     
        <button>获取</button>   
        <button>设置</button>  
    </body>
</html>

位置

offset() 获取距离窗口的偏移位。

获取

例如获取距离左边的偏移位 $('div').offset().left

设置

参数内传入一个对象，对象内写需要设置的属性

btns[1].onclick = function () {  
    $('.son').offset({      
        left: 10   
    })}

<!DOCTYPE html>
<html lang="en">
    <head>   
        <meta charset="UTF-8">   
        <meta name="viewport" content="width=device-width, initial-scale=1.0">      
        <title>Document</title>    
        <style>    
            * {                
                margin: 0;    
                padding: 0;      
            }    
            .father {  
                width: 200px;        
                height: 200px;         
                border: 50px solid #000;     
                background: red;          
                margin-left: 50px;    
                position: relative;    
            }       
            .son {  
                width: 100px;   
                height: 100px;    
                background: blue;  
                position: absolute;   
                left: 50px;        
                top: 50px;     
            }     
        </style>   
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>       
        <script>     
        $(function () {    
            var btns = document.getElementsByTagName('button')      
            btns[0].onclick = function () {         
                console.log($('.son').offset().left) 
                //150            
            }         
            btns[1].onclick = function () {           
                $('.son').offset({        
                    left: 10        
                })         
            }   
        })  
        </script>    
    </head>  
    <body>  
    <div class="father">     
        <div class="son"></div>    
        </div>     
        <button>获取</button> 
        <button>设置</button>    
    </body>
</html>

position 获取元素距离定位元素的偏移位

该方法只有获取不能设置，但可以通过 css 方式进行设置

<!DOCTYPE html>
<html lang="en"><head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title>    
    <style>    
        * {    
            margin: 0;      
            padding: 0;      
        }   
        .father { 
            width: 200px;     
            border: 50px solid #000;        
            background: red;        
            margin-left: 50px;     
            position: relative;     
        }      
        .son { 
            width: 100px;      
            height: 100px;       
            background: blue;      
            position: absolute;       
            left: 50px;    
            top: 50px;    
        }  
    </style>  
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>    
    <script>     
    $(function () {   
        var btns = document.getElementsByTagName('button')      
        btns[0].onclick = function () {      
            console.log($('.son').position().left) 
            //50      
        }        
        btns[1].onclick = function () {      
            // 无法设置，即使设置也不生效   
            $('.son').position({     
                left: 10        
            })         
        }      
    })  
    </script>
    </head>
    <body>   
    <div class="father">
        <div class="son"></div>  
        </div>   
        <button>获取</button>  
        <button>设置</button>
    </body>
</html>

scrollTop 方法

获取滚动偏移量

元素

btns[0].onclick = function () {   
    console.log($('.scroll').scrollTop())
}

网页

console.log($('html').scrollTop())

IE 浏览器下可能无法获取，需要将 html 换成 body。常用写法如下：

console.log($('html').scrollTop()+$('body').scrollTop())

设置滚动偏移量

参数传入为整型，而不是字符串类型。
- 元素
```
btns[1].onclick = function () {  
    $('.scroll').scrollTop(300)
}
```
- 网页
```
$('html').scrollTop(300)
```
  同样的 IE 浏览器不可使用，需要对 body 进行设置。通常写法如下：
```
$('html,body').scrollTop(300)
```

四、jQuery 事件相关

事件绑定

绑定方式有两种：

直接通过.eventName(fn) 方式绑定。
```
$('button').click(function () {  
    alert('hello tzk')
})
```
- 编码效率高
- 部分事件 jQuery 没有实现
通过 on(eventName,function) 方式绑定
```
$('button').on('click', function () { 
    alert('hello tzk')
})
```
- 编码效率略低
- 所有 JavaScript 事件都可以添加

注意：以上两种绑定方式均不会被覆盖，并且可以添加多个事件。

$('button').click(function () {  
    alert('hello tzk')
})
$('button').click(function () {   
    alert(123)
})
$('button').mouseleave(function () { 
    alert(mouseleave)
})

事件解绑

事件解绑只有一个方法 off()，只需要用需要解绑的元素调用此方法即可。

function test1() {    
    alert('hello tzk')
}
function test2() {
        alert('hello 123')
}
$('button').click(test1)
$('button').click(test2)
$('button').mouseleave(function () {   
    alert('mouseleave')
})
$('button').mouseenter(function () {  
    alert('mouseenter')
})

对于以上事件绑定：

不传入参数

会移除 button 元素的所有绑定事件。
```
$('button').off()
```
传入一个参数

会移除所有指定类型的事件。
```
$('button').off('click')
```
传入两个参数

会移除指定类型的指定事件
```
$('button').off('click', test1)
```

jQuery 事件冒泡和默认行为

什么是事件冒泡

当父子级关系时，如果为父级与子级同时绑定事件。当触发子级事件时，也会触发父级事件。

例如：

<div class="father">  
    <div class="son"></div>
</div><script>   
$(function () {    
    $('.son').click(function () {    
        alert('son')    
    })      
    $('.father').click(function () {     
        alert('father')  
    }) 
})</script>

如何阻止事件冒泡

在子级事件中添加 return false 或者 event.stopPropagation()

$('.son').click(function (event) {   
    alert('son')   
    // return false   
    event.stopPropagation()
})

阻止事件冒泡一定要在子级添加。

什么是默认行为

默认行为指一些标签默认的行为，例如 a 标签默认跳转网页。

如何阻止默认行为

两种方式。

$('a').click(function (event) {   
    alert('弹出注册框')  
    // return false 
    event.preventDefault()
})

事件自动触发

事件自动触发有两个方法，参数传入为字符串形式的事件名称。

trigger

会触发事件冒泡

$('.son').click(function (event) {   
    alert('son')
})
$('.father').click(function () {   
    alert('father')
})
$('.son').trigger('click')

不会阻止默认行为

$('input[type="submit"]').click(function () {    
    alert('被点击了！')
})
$('input[type="submit"]').trigger('click')

triggerHandler

不会触发事件冒泡

$('.son').click(function (event) {   
    alert('son')
})
$('.father').click(function () {   
    alert('father')
})
$('.son').triggerHandler("click")

会阻止默认行为

$('input[type="submit"]').click(function () {   
    alert('被点击了！')
})
$('input[type="submit"]').triggerHandler('click')

a 标签的默认行为

对 a 标签设置自动事件时，无法触发其默认行为。

$('a').click(function () {  
    alert('a')
})
$('a').trigger('click')

如果想要触发其默认行为则需要如下更改：

<a href="http://baidu.com" target="_blank">
    <span>注册</span>
</a>
$('span').click(function () {  
    alert('a')
})
$('span').trigger('click')

自定义事件

自定义事件需要满足的条件：

只能通过 on 绑定事件

$('.son').on('myClick', function () {  
    alert('son')
})

事件必须通过 trigger 触发
```
$('.son').trigger('myclick')
```

事件命名空间

想要使事件的命名空间有效，必须满足两个条件

事件是通过 on 来绑定的

用.Name 的方式区分是谁添加的。

$('.son').on('myClick.zs', function () {   
    alert('son')
})
$('.son').on('myClick.ls', function () { 
    alert('son')
})

通过 trigger() 触发事件

触发两个事件
```
$('.son').trigger('myClick')
```

只触发某一个

// 将事件名称填写完整即可
$('.son').trigger('myClick.ls')

面试题（细节）

利用 trigger 触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发，而父元素没有命名空间的事件不会被触发

$('.father').on('myClick.ls', function () {   
    alert('father click1')
})
$('.father').on('myClick', function () {    
    alert('father click2')
})
$('.son').on('myClick.ls', function () { 
    alert('son click1')
})
$('.son').trigger('myClick.ls')

利用 trigger 触发子元素不带命名空间的事件，那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发

$('.father').on('myClick.ls', function () {    
    alert('father click1')
})
$('.father').on('myClick', function () {  
    alert('father click2')
})
$('.son').on('myClick.ls', function () { 
    alert('son click1')
})
$('.son').trigger('myClick')

事件委托

什么是事件委托

请别人帮忙做事情，然后将昨晚的结果反馈给我们

将 li 的点击事件委托给 ul 元素监听。

$('ul').delegate('li', 'click', function () {    
    console.log($(this).html())
})

利用事件委托完成弹出框

<!DOCTYPE html>
<html lang="en">   
    <head>      
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Document</title>   
        <style>        
            * {     
                margin: 0;       
                padding: 0;         
            }       
            html,  
            body {        
                width: 100%;            
                height: 100%;      
            }       
            .mask {    
                width: 100%;   
                height: 100%;  
                background: rgba(0, 0, 0, .5);  
                position: fixed;          
                left: 0;          
                top: 0;        
            }        
            .login {    
                width: 570px;     
                /* height: 290px; */     
                margin: 100px auto;    
                position: relative;    
            }        
            .login>span {       
                width: 50px;    
                height: 50px;      
                position: absolute;     
                top: 0;       
                right: 0;     
            }       
        </style>  
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>        <script>     
        $(function () {  
            $('a').click(function () {        
                var $mask = $('<div class="mask"><div class= "login" ><img src="https://ae01.alicdn.com/kf/U0acca6abe69449398ddbe1f56f032ecaw.jpg" alt=""><span></span></div>')               
                $('body').append($mask)         
                $('body').delegate('.login>span', 'click', function () {    
                    $mask.remove()     
                })        
                return false   
            })   
        })    
        </script>  
    </head> 
    <body>  
        <!-- <div class="mask">
<div class="login"><img src="https://ae01.alicdn.com/kf/U0acca6abe69449398ddbe1f56f032ecaw.jpg" alt=""><span></span>
</div></div> -->   
      
        <a href="https://www.baidu.com">注册</a>   
        <div>       
            我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落      
            我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落     
            我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落       
            我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落       
            我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落       
            我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落      
            我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落     
            我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落        
            我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落       
            我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落    
            我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落    
        </div> 
    </body>
</html>

移入移出事件

移入事件 mouseover 移出事件 mouseout。这种方法子元素被移入移出也会触发父元素的事件。

$(function () {  
    $('.father').mouseover(function () {   
        console.log('鼠标移入了')  
    })  
    $('.father').mouseout(function () {  
        console.log('鼠标移出了')  
    })
})

为了解决以上问题，jQuery 提供了另外两个方法：鼠标移入 mouseenter 和鼠标移出 mouseleave。

同时监听移入与移出

使用的方法为 hover，这个方法可以接收一个或两个参数，并且不会子元素被移入移出也会触发父元素的事件。

一个参数

$('.father').hover(function () {    
    console.log('移入/移除 执行的函数')
})

一个参数代表移入移出都执行此函数。

两个参数

$('.father').hover(function () { 
    console.log('移入执行的函数')
}, 
                   function () { 
    console.log('移出执行的函数')
})

第一个参数代表移入时执行的函数，第二个参数代表移出时执行的函数。

电影排行榜案例

实现思路

将内容 DIV 设置为隐藏
当鼠标移入后将隐藏的 div 显示出来
当鼠标移出后将显示的 div 隐藏起来

直译方式

$('li').mouseenter(function () {   
    $(this).addClass('current')
})
$('li').mouseleave(function () {   
    $(this).removeClass('current')
})

简化方式 1

$('li').hover(function () {  
    $(this).addClass('current')
},
              function () {   
    $(this).removeClass('current')
})

简化方式 2

$('li').hover(function () { 
    $(this).toggleClass('current')
})

完整代码

<!DOCTYPE html>
<html lang="en"><head> 
    <meta charset="UTF-8">   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <title>Document</title>  
    <style>    
        * {   
            margin: 0;    
            padding: 0;   
        }   
        .box {  
            width: 300px;    
            height: 450px;       
            margin: 50px auto;          
            border: 1px solid #000;   
        }    
        .box>h1 { 
            font-size: 20px;         
            line-height: 35px;     
            color: deeppink;    
            padding-left: 10px;   
            border-bottom: 1px dashed #ccc;  
        }    
        ul>li {   
            list-style: none;     
            padding: 5px 10px;     
            border: 1px dashed #ccc;    
        }   
        ul>li:nth-child(-n+3) span {   
            background-color: deeppink;    
        }     
        ul>li>span {    
            display: inline-block;     
            height: 20px;        
            width: 20px;         
            background: #ccc;      
            text-align: center;        
            line-height: 20px;     
            margin-right: 10px;     
        }   
        .content { 
            overflow: hidden;        
            margin-top: 5px;     
            display: none;       
        }  
        .content>img { 
            width: 80px;     
            height: 120px;    
            float: left;     
        }      
        .content>p {       
            width: 180px;      
            height: 120px;     
            float: right;       
            font-size: 12px;    
            line-height: 20px;   
        }     
        .current .content {         
            display: block;    
        }    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>   
    <script>     
        $(function () {  
            $('li').hover(function () {     
                $(this).toggleClass('current')    
            })     
            // $('li').mouseenter(function () {   
            //     $(this).addClass('current')        
            // })         
            // $('li').mouseleave(function () {    
            //     $(this).removeClass('current')      
            // })     
            // $('li').hover(function () {      
            //     $(this).addClass('current')        
            // }, function () {     
            //     $(this).removeClass('current')     
            // })     
        })  
    </script>
    </head>
    <body>
    <div class="box">  
        <h1>电影排行榜</h1> 
        <ul>         
            <li><span>1</span>电影名称        
                <div class="content">     
                    <img                        src="https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile2@latest/2020/06/16/d0efe1580ab93f0e6b1a04bb07a8259f.png">      
                    <p>测试文字哈哈哈</p>               
                </div>        
            </li>         
            <li><span>2</span>电影名称<div class="content">      
                <img                        src="https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile2@latest/2020/06/16/d0efe1580ab93f0e6b1a04bb07a8259f.png">          
                <p>测试文字哈哈哈</p>   
                </div>        
            </li>       
            <li><span>3</span>电影名称<div class="content">    
                <img                        src="https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile2@latest/2020/06/16/d0efe1580ab93f0e6b1a04bb07a8259f.png">     
                <p>测试文字哈哈哈</p>     
                </div>        
            </li>       
            <li><span>4</span>电影名称<div class="content">       
                <img                        src="https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile2@latest/2020/06/16/d0efe1580ab93f0e6b1a04bb07a8259f.png">       
                <p>测试文字哈哈哈</p>     
                </div>     
            </li>        
            <li><span>5</span>电影名称<div class="content">       
                <img                        src="https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile2@latest/2020/06/16/d0efe1580ab93f0e6b1a04bb07a8259f.png">   
                <p>测试文字哈哈哈</p>  
                </div>     
            </li>   
        </ul>   
        </div>
    </body>
</html>

Tab 选项卡

实现思路

HTML 结构

<div class="box">  
    <ul class="nav">   
        <li class="current">123</li> 
        <li>123</li>  
        <li>123</li>    
        <li>123</li>    
    </ul>  
    <ul class="content">    
        <li class="show">        
            <img src="https://ae02.alicdn.com/kf/U5303870feaa24803b2a9debcfb260c79T.jpg">        </li>    
        <li>     
            <img src="https://ae02.alicdn.com/kf/U3e7e3e14488d431b9b1178ddddc1fdd4T.jpg">        </li>       
        <li>        
            <img src="https://ae01.alicdn.com/kf/U0b5025b6d75b45c1a2590c1fdc6d5bcbq.jpg">        </li>     
        <li>     
            <img src="https://ae01.alicdn.com/kf/U7015657127cf4f8dbd19d9f03fd38636F.jpg">        </li>  
    </ul>
</div>

基本思路

监听鼠标移入事件

修改被移入选项卡的背景颜色
获取当前移入选项卡的索引
根据索引找到对应的图片
显示找到的图片

$('.nav>li').mouseenter(function () {   
    // 1.1 修改被移入选项卡的背景颜色 
    $(this).addClass('current')  
    // 1.2 获取当前移入选项卡的索引   
    var index = $(this).index()  
    console.log(index)  
    // 1.3 根据索引找到对应的图片 
    var $li = $('.content>li').eq(index)
    // 1.4 显示找到的图片  
    $li.addClass('show')
})

监听鼠标移出事件

还原被移入选项卡的背景颜色
获取当前移出选项卡的索引
根据索引找到对应图片
隐藏图片

$('.nav>li').mouseleave(function () { 
    // 1.1 还原被移入选项卡的背景颜色   
    $(this).removeClass('current')  
    // 1.2 获取当前移出选项卡的索引   
    var index = $(this).index() 
    // 1.3 根据索引找到对应图片 
    var $li = $('.content>li').eq(index) 
    // 1.4 隐藏图片   
    $li.removeClass('show')
})

对于实现 tab 选项卡的简单思路

主要用到 siblings() 方法，该方法取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

$('.nav>li').mouseenter(function () { 
    // 1.1 修改被移入选项卡的背景颜色  
    $(this).addClass('current') 
    // 1.2 还原其他兄弟选项卡的颜色    $(this).siblings().removeClass('current')  
    // 1.3 获取当前移入选项卡的索引    
    var index = $(this).index()   
    // 1.4 根据索引找到对应的图片  
    var $li = $('.content>li').eq(index)
    // 1.5 隐藏兄弟图片  
    $li.siblings().removeClass('show')   
    // 1.6 显示找到的图片  
    $li.addClass('show')
})

完整代码

<!DOCTYPE html>
<html lang="en">   
    <head>   
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>     
        <style>      
            * {      
                margin: 0;    
                padding: 0;        
            }            
            .box {      
                width: 440px;     
                height: 298px;      
                margin: 50px auto;    
                border: 1px solid #000;     
            }            
            .nav>li {      
                list-style: none;        
                width: 110px;        
                height: 50px;        
                background: orange;      
                text-align: center;       
                float: left;           
                line-height: 50px;       
            }      
            .nav>.current { 
                background: #ccc;   
            }      
            .content>li {  
                list-style: none;       
                display: none;        
                text-align: center;      
            }     
            .content>.show {    
                display: block;        
            }         
            .content>li>img {      
                width: 240px;        
            }     
        </style>   
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>       
        <script>       
        $(function () {     
            /*      
            // 1. 监听选项卡的移入事件     
            $('.nav>li').mouseenter(function () {     
            // 1.1 修改被移入选项卡的背景颜色    
            $(this).addClass('current')       
            // 1.2 获取当前移入选项卡的索引   
            var index = $(this).index()       
            console.log(index)             
            // 1.3 根据索引找到对应的图片    
            var $li = $('.content>li').eq(index)   
            // 1.4 显示找到的图片          
            $li.addClass('show')      
            })    
            // 1. 监听选项卡的移出事件  
            $('.nav>li').mouseleave(function () {   
            // 1.1 还原被移入选项卡的背景颜色   
            $(this).removeClass('current')   
            // 1.2 获取当前移出选项卡的索引      
            var index = $(this).index()     
            // 1.3 根据索引找到对应图片       
            var $li = $('.content>li').eq(index)   
            // 1.4 隐藏图片           
            $li.removeClass('show')     
            })          
            */       
            // 1. 监听选项卡的移入事件    
            $('.nav>li').mouseenter(function () { 
                // 1.1 修改被移入选项卡的背景颜色   
                $(this).addClass('current')      
                // 1.2 还原其他兄弟选项卡的颜色   
                $(this).siblings().removeClass('current')   
                // 1.3 获取当前移入选项卡的索引          
                var index = $(this).index()         
                // 1.4 根据索引找到对应的图片       
                var $li = $('.content>li').eq(index)    
                // 1.5 隐藏兄弟图片          
                $li.siblings().removeClass('show')   
                // 1.6 显示找到的图片            
                $li.addClass('show')  
            })       
        })     
        </script> 
    </head>   
    <body>   
        <div class="box">  
            <ul class="nav">   
                <li class="current">123</li>    
                <li>123</li>        
                <li>123</li>  
                <li>123</li>     
            </ul>     
            <ul class="content">     
                <li class="show">   
                    <img src="https://ae02.alicdn.com/kf/U5303870feaa24803b2a9debcfb260c79T.jpg">                </li>         
                <li>         
                    <img src="https://ae02.alicdn.com/kf/U3e7e3e14488d431b9b1178ddddc1fdd4T.jpg">                </li>              
                <li>      
                    <img src="https://ae01.alicdn.com/kf/U0b5025b6d75b45c1a2590c1fdc6d5bcbq.jpg">                </li>            
                <li>       
                    <img src="https://ae01.alicdn.com/kf/U7015657127cf4f8dbd19d9f03fd38636F.jpg">                </li>          
            </ul>     
        </div>  
    </body>
</html>

五、jQuery 动效

显示隐藏动画

显示 show() 动画，隐藏动画 hide()，切换动画 toggle()

这三个方法都可以传入参数：

一个参数

代表动画完成的时间
两个参数

第一个表示动画完成的时间，第二个参数表示动画完成后执行的回调函数

$(function () {  
    $('button').eq(0).click(function () {    
        $('div').show(1000, function () {  
            alert('显示动画执行完毕') 
        })
    })  
    $('button').eq(1).click(function () { 
        $('div').hide(1000, function () {    
            alert('隐藏动画执行完毕')     
        })  
    })  
    $('button').eq(2).click(function () {      
        $('div').toggle(1000, function () {       
            alert('切换动画执行完毕')    
        })
    })
})

对联广告案例

监听网页滚动

当滚动到一定量时，展示图片否则隐藏图片

$(function () {  
    // 1. 监听网页的滚动 
    $(window).scroll(function () {   
        // 1.1 获取网页滚动的偏移位   
        var offset = $('html,body').scrollTop()  
        // 1.2 判断网页是否滚动到了指定的位置  
        if (offset >= 500) {        
            // 1.3 显示广告        
            $('img').show(1000)   
        } else {        
            $('img').hide(1000)     
        } 
    })
})

    <!DOCTYPE html>
    <html lang="en">    
        <head>       
            <meta charset="UTF-8"> 
            <meta name="viewport" content="width=device-width, initial-scale=1.0">     
            <title>Document</title> 
            <style>        
                * {       
                    margin: 0;    
                    padding: 0;    
                }       
                .left {     
                    float: left;   
                    position: fixed;  
                    left: 0;           
                    top: 200px;         
                }         
                .right {   
                    float: right;   
                    position: fixed;     
                    right: 0;           
                    top: 200px;      
                }      
                img {      
                    display: none;     
                }     
            </style>     
            <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>        <script>       
            $(function () {     
                // 1. 监听网页的滚动     
                $(window).scroll(function () {    
                    // 1.1 获取网页滚动的偏移位     
                    var offset = $('html,body').scrollTop()   
                    // 1.2 判断网页是否滚动到了指定的位置         
                    if (offset >= 500) {                   
                        // 1.3 显示广告      
                        $('img').show(1000)      
                    } else {           
                        $('img').hide(1000)          
                    }           
                })         
            })  
            </script>   
        </head>  
        <body>  
            <img src="https://ae03.alicdn.com/kf/Ub8d7c62873d74ebda173addf2b82d741T.jpg" class="left">     
            <img src="https://ae03.alicdn.com/kf/Ub8d7c62873d74ebda173addf2b82d741T.jpg"             class="right"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>   
        </body>
</html>

展开收起动画

显示 slideDown() 动画，隐藏动画 slideUp()，切换动画 slideToggle()

这三个方法都可以传入参数：

一个参数

代表动画完成的时间
两个参数

第一个表示动画完成的时间，第二个参数表示动画完成后执行的回调函数

$('button').eq(0).click(function () {  
    $('div').slideDown(1000, function () {
        alert('展开完毕')   
    })
})
$('button').eq(1).click(function () {
    $('div').slideUp(1000, function () {   
        alert('收起完毕')  
    })
})
$('button').eq(1).click(function () {
    $('div').slideToggle(1000, function () {  
        alert('切换完毕')   
    })
})

折叠菜单案例

<!DOCTYPE html>
<html lang="en">
    <head>  
    <meta charset="UTF-8">   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
        <title>Document</title>   
        <style>   
            * {     
                margin: 0;        
                padding: 0;     
            }      
            .nav {    
                list-style: none;       
                width: 300px;     
                margin: 100px auto;    
            }    
            .nav>li {    
                border: 1px solid #000;     
                line-height: 35px;       
                border-bottom: none;    
                text-indent: 2em;        
                position: relative;      
            }       
            .nav>li:last-child {   
                border-bottom: 1px solid #000;   
                border-bottom-left-radius: 5px;    
                border-bottom-right-radius: 5px;    
            }     
            .nav>li:first-child {  
                border-top-left-radius: 5px; 
                border-top-right-radius: 5px; 
            }      
            .nav>li>span {      
                background: url("https://ae02.alicdn.com/kf/U7eebc02d0d5e4be287d88baf368f0019S.jpg") no-repeat center;      
                display: inline-block;    
                width: 32px;   
                height: 32px;       
                position: absolute;  
                right: 10px;       
                top: 5px;       
            }      
            .sub {     
                display: none; 
            }     
            .sub>li {   
                list-style: none;   
                background-color: mediumorchid;    
                border: 1px solid white;   
            }     
            .sub>li:hover {     
                background-color: red;     
            }      
            .nav>.current>span {  
                transform: rotate(90deg) 
            }   
        </style>   
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>   
        <script>     
            $(function () {   
                // 1. 监听一级菜单的点击事件    
                $('.nav>li').click(function () { 
                    // 1.1 拿到二级菜单 
                    var $sub = $(this).children('.sub')  
                    // 1.2 让二级菜单显示       
                    $sub.slideDown(1000)       
                    // 1.3 拿到所有非当前二级菜单   
                    var otherSub = $(this).siblings().children('.sub')   
                    console.log(otherSub)      
                    // 1.4 让所有非当前二级菜单收起   
                    otherSub.slideUp(1000)    
                    // 1.5让被点击的一级菜单箭头旋转   
                    $(this).addClass('current')     
                    // 1.6 让所有非一级菜单箭头还原  
                    $(this).siblings().removeClass('current')    
                })      
            })  
        </script>
    </head>
    <body>    
        <ul class="nav">   
            <li>一级菜单<span></span>  
                <ul class="sub">     
                    <li>二级菜单</li>     
                    <li>二级菜单</li>     
                    <li>二级菜单</li>     
                    <li>二级菜单</li>     
                    <li>二级菜单</li>       
                </ul>
            </li>    
            <li>一级菜单<span></span>   
                <ul class="sub">     
                    <li>二级菜单</li>    
                    <li>二级菜单</li>     
                    <li>二级菜单</li>      
                    <li>二级菜单</li>       
                    <li>二级菜单</li>       
                </ul>   
            </li>    
            <li>一级菜单<span></span>  
                <ul class="sub">   
                    <li>二级菜单</li>  
                    <li>二级菜单</li>   
                    <li>二级菜单</li>   
                    <li>二级菜单</li>    
                    <li>二级菜单</li>   
                </ul>
            </li>  
            <li>一级菜单<span></span>       
                <ul class="sub">   
                    <li>二级菜单</li>          
                    <li>二级菜单</li>       
                    <li>二级菜单</li>     
                    <li>二级菜单</li>        
                    <li>二级菜单</li>       
                </ul>   
            </li>     
            <li>一级菜单<span></span>     
                <ul class="sub">  
                    <li>二级菜单</li>    
                    <li>二级菜单</li>        
                    <li>二级菜单</li>      
                    <li>二级菜单</li>         
                    <li>二级菜单</li>        
                </ul>  
            </li>   
            <li>一级菜单<span></span>   
                <ul class="sub">       
                    <li>二级菜单</li>      
                    <li>二级菜单</li>      
                    <li>二级菜单</li>       
                    <li>二级菜单</li>         
                    <li>二级菜单</li>         
                </ul>    
            </li>     
            <li>一级菜单<span></span>         
                <ul class="sub">       
                    <li>二级菜单</li>           
                    <li>二级菜单</li>        
                    <li>二级菜单</li>      
                    <li>二级菜单</li>     
                    <li>二级菜单</li>       
                </ul>   
            </li>      
            <li>一级菜单<span></span>    
                <ul class="sub">        
                    <li>二级菜单</li>        
                    <li>二级菜单</li>      
                    <li>二级菜单</li>          
                    <li>二级菜单</li>    
                    <li>二级菜单</li>     
                </ul>    
            </li>   
        </ul>
    </body>
</html>

下拉菜单案例

在 jQuery 中，如果需要执行动画，建议在执行动画之前先调用 stop 方法，然后在执行动画。

当使用 stop 时：

不适用 stop 时：

<!DOCTYPE html>
<html lang="en">
    <head> 
    <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Document</title>   
        <style>       
            * {    
                margin: 0;  
                padding: 0;      
            }    
            .nav {
                list-style: none;  
                width: 300px;      
                height: 50px;   
                background: red;  
                margin: 100px auto;    
            }      
            .nav>li {       
                width: 100px; 
                height: 50px;       
                line-height: 50px;    
                text-align: center;  
                float: left;     
            }   
            .sub {   
                list-style: none;        
                background-color: royalblue;   
                display: none  
            }  
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>   
        <script>      
        $(function () {       
            // 1. 监听一级菜单的移入事件      
            $('.nav>li').mouseenter(function () {       
                // 1.1 拿到二级菜单  
                var $sub = $(this).children('.sub')     
                // 1.2 停止当前正在运动的动画     
                $sub.stop()      
                // 1.3 让二级菜单展开  
                $sub.slideDown(1000)     
            })     
            // 2. 监听一级菜单的移出事件   
            $('.nav>li').mouseleave(function () {       
            // 1.1 拿到二级菜单     
            var $sub = $(this).children('.sub')      
            // 1.2 停止当前正在运动的动画        
            $sub.stop()       
                // 1.3 让二级菜单收起    
                $sub.slideUp(1000)   
            })   
        })  
        </script>
    </head>
    <body>  
    <ul class="nav">    
        <li>一级菜单        
            <ul class="sub">        
                <li>二级菜单</li>     
                <li>二级菜单</li>     
                <li>二级菜单</li>      
            </ul>   
        </li>    
        <li>一级菜单</li>   
        <li>一级菜单</li>   
        </ul>
    </body>
</html>

淡入淡出动画

fadeIn 淡入
fadeOut 淡出
fadeToggle 切换

以上三个方法均可传入两个参数：

时间
回调函数

与上述几种方法相似

fadeTo 淡入到・・・

三个参数分别为：时间，淡入到（程度），回调函数

$('buton').eq(3).click(function () { 
    $('div').fadeTo(1000, 0.5, function () { 
        alert('淡入到完毕') 
    })
})

弹窗广告案例

<!DOCTYPE html>
<html lang="en"> 
    <head>    
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Document</title>     
        <style>    
            * {    
                margin: 0;     
                padding: 0;      
            }        
            .ad {       
                position: fixed;      
                right: 0;         
                bottom: 0;    
                display: none;   
            }         
            .ad>span {  
                display: inline-block;       
                width: 30px;        
                height: 30px;      
                position: absolute;
                top: 0;       
                right: 0;
            }    
        </style>     
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
        
        <script>      
            $(function () {      
                // 1. 监听span的点击事件       
                $('span').click(function () { 
                    $('.ad').remove()       
                })          
                // 2. 执行广告动画     
                $('.ad').stop().slideDown(1000).fadeOut(1000).fadeIn(1000)   
            })     
        </script>   
    </head> 
    <body>      
    <div class="ad">    
        <img src="https://ae03.alicdn.com/kf/U2f875afd3ec347f38fc58fc5a091f97dd.jpg" alt="">       
        <span></span>      
        </div>  
    </body>
</html>

自定义动画

自定义动画的方法为 animate，可接收三个或四个参数：

三个参数

三个参数分别为动画代码，时长，回调函数

$('button').eq(0).click(function () {   
    $('.one').animate({    
        width: 500  
    }, 1000, function () { 
        alert('自定义动画执行完毕')   
    })
})

四个参数

四个参数分别表示：

第一个参数

接收一个对象，可在对象中修改属性
第二个参数

指定动画时长
第三个参数

指定动画节奏，默认是 swing
第四个参数

动画执行完毕之后的回调函数

$('button').eq(0).click(function () { 
    $('.one').animate({    
        marginLeft: 500  
    }, 5000, function () {  
        // alert('自定义动画执行完毕')    
    })
})
$('button').eq(0).click(function () { 
    $('.two').animate({   
        marginLeft: 500  
    }, 5000, 'linear', function () {   
        // alert('自定义动画执行完毕') 
    })
})

累加属性

累加属性就是在原来基础上再次增加。在第一个参数值得位置填写字符传表达式即可。

$('button').eq(1).click(function () {   
    $('.two').animate({     
        width: "+=100"  
    }, 1000, function () {   
        alert('自定义动画执行完毕') 
    })
})

关键字

关键字属性即传值时传入关键字，例如 hide,toggle

$('button').eq(2).click(function () { 
    $('.two').animate({   
        // width: 'hide'    
        width: 'toggle' 
    }, 1000, function () {
        alert('自定义动画执行完毕') 
    })
})

stop 方法和 delay 方法

delay(time) 用于延迟动画。例如：

$('.one').animate({   
    width: 500,
}, 1000).delay(2000).animate({    
    height: 500
}, 1000)

stop(bool) 方法表示停止动画，但其可以传入参数：

$('.one').animate({   
    width: 500,
}, 2000).animate({  
    height: 500
}, 2000).animate({   
    height: 100
}, 2000).animate({    
    width: 100
}, 2000)

例如如上代码，完整的效果为：

stop(true) 与 stop(true,false)

立即停止当前所有动画，包括后续动画
stop()、stop(false)、stop(false,false)

立即停止当前所有动画，继续执行后续的动画
stop(false,true)

立即完成当前动画，继续执行后续动画
stop(true true)

立即完成当前的，并且停止后续所有

图标特效

<!DOCTYPE html>
<html lang="en">
    <head>   
    <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title> 
        <style>  
            * {    
                margin: 0;  
                padding: 0;   
            }    
            ul {    
                list-style: none;    
                width: 400px;      
                height: 250px;     
                border: 1px solid #000;         
                margin: 100px auto;     
            }     
            ul>li {      
                width: 100px;      
                height: 50px;       
                margin-top: 50px;    
                text-align: center;   
                float: left;       
                overflow: hidden;     
            }      
            ul>li>span {   
                display: inline-block;    
                width: 24px;        
                height: 24px;    
                background: url('https://ae02.alicdn.com/kf/U8f6d143a1f9d4323976a7df7486f7e2cT.jpg') no-repeat 0 0;          
                position: relative;    
            }   
        </style> 
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
        <script>    
            $(function () {     
                // 1. 遍历所有li   
                $('li').each(function (index, ele) { 
                    var $url = "url('https://ae02.alicdn.com/kf/U8f6d143a1f9d4323976a7df7486f7e2cT.jpg') no-repeat 0 " + index * -24 + "px"         
                    // 1.2 设置新的图片位置    
                    $(this).children('span').css('background', $url)     
                })    
                // 2 监听li移入事件   
                $('li').mouseenter(function () { 
                    // 2.1 将图片上移    
                    $(this).children('span').animate({     
                        top: -50         
                    }, 1000, function () {        
                        // 2.2 将图标定位到下方           
                        $(this).css('top', '50px')   
                        // 2.3 将图标复位     
                        $(this).animate({     
                            top: 0      
                        }, 1000)      
                    })       
                })      
            })   
        </script>
    </head>
    <body> 
        <ul>   
            <li><span></span> 
                <p>百度</p>   
            </li>        
            <li><span></span>   
                <p>百度</p>     
            </li>     
            <li><span></span>   
                <p>百度</p>  
            </li>   
            <li><span></span>
                <p>百度</p>  
            </li>     
            <li><span></span>       
                <p>百度</p>  
            </li>   
            <li><span></span>   
                <p>百度</p>    
            </li>   
            <li><span></span>   
                <p>百度</p> 
            </li>    
            <li><span></span>     
                <p>百度</p>   
            </li>   
        </ul>
    </body>
</html>

无限循环滚动

为了让图片无缝衔接，需要在末尾添加与开头两个一模一样的元素。即 html 元素就变成了

<div> 
    <ul>    
        <li><img src="https://ae01.alicdn.com/kf/U1a8fa2929bca4fddb8b38411e9751104b.jpg"></li>      
        <li><img src="https://ae04.alicdn.com/kf/Ue87bb1c5ad4c4c8c9c3a664f3619b126h.jpg"></li>    
        <li><img src="https://ae01.alicdn.com/kf/U3f740877f20040bd8f37c94440f26b569.jpg"></li>       
        <li><img src="https://ae03.alicdn.com/kf/Ua2b193cb94224ed796104020743af8aes.jpg"></li>     
        <li><img src="https://ae01.alicdn.com/kf/U1a8fa2929bca4fddb8b38411e9751104b.jpg"></li>     
        <li><img src="https://ae04.alicdn.com/kf/Ue87bb1c5ad4c4c8c9c3a664f3619b126h.jpg"></li>   
    </ul>
</div>

鼠标移入事件

鼠标移入时，应停止当前动画并且为所有非当前选中的元素添加模板。

// 停止动画
clearInterval(timer)
// 给非当前选中添加模板
$(this).siblings().fadeTo(100, 0.5)

鼠标移出时

让图片继续滚动，并且去除所有蒙版

// 继续滚动
autoPlay()
// 去除所有的蒙版
$('li').fadeTo(100, 1)

<!DOCTYPE html>
<html lang="en">
    <head>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>  
        <style>   
            * {         
                margin: 0;     
                padding: 0;       
            }    
            div {     
                width: 600px;       
                height: 161px;    
                border: 1px solid #000;     
                margin: 100px auto;       
                overflow: hidden;      
            }    
            ul {        
                width: 1800px; 
                list-style: none;  
                height: 161px;    
                background: #000;   
            }   
            ul>li {     
                float: left;   
            }    </style> 
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>   
        <script>   
            $(function () {   
                // 0 定义遍历保存偏移位    
                var offset = 0    
                // 1. 让图片滚动起来 
                var timer;        
                function autoPlay() {
                    timer = setInterval(function () {      
                        offset += -10       
                        if (offset <= -1200) {  
                            offset = 0   
                        }                
                        $('ul').css('marginLeft', offset)   
                    }, 50)    
                }        
                autoPlay()  
                // 2. 监听li的移入和移出事件       
                $('li').hover(function () {     
                    // 停止动画         
                    clearInterval(timer)  
                    // 给非当前选中添加模板  
                    $(this).siblings().fadeTo(100, 0.5) 
                }, function () {         
                    // 继续滚动       
                    autoPlay()       
                    // 去除所有的蒙版       
                    $('li').fadeTo(100, 1) 
                })     
            })   
        </script>
    </head>
    <body>  
        <div>   
            <ul>       
                <li>
                    <img src="https://ae01.alicdn.com/kf/U1a8fa2929bca4fddb8b38411e9751104b.jpg"></li>            
                <li>
                    <img src="https://ae04.alicdn.com/kf/Ue87bb1c5ad4c4c8c9c3a664f3619b126h.jpg"></li>          
                <li>
                    <img src="https://ae01.alicdn.com/kf/U3f740877f20040bd8f37c94440f26b569.jpg"></li>       
                <li>
                    <img src="https://ae03.alicdn.com/kf/Ua2b193cb94224ed796104020743af8aes.jpg"></li>     
                <li>
                    <img src="https://ae01.alicdn.com/kf/U1a8fa2929bca4fddb8b38411e9751104b.jpg"></li>       
                <li>
                    <img src="https://ae04.alicdn.com/kf/Ue87bb1c5ad4c4c8c9c3a664f3619b126h.jpg"></li>     
            </ul> 
        </div>
    </body>
</html>
v {     
                width: 600px;       
                height: 161px;    
                border: 1px solid #000;     
                margin: 100px auto;       
                overflow: hidden;      
            }    
            ul {        
                width: 1800px; 
                list-style: none;  
                height: 161px;    
                background: #000;   
            }   
            ul>li {     
                float: left;   
            }    </style> 
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>   
        <script>   
            $(function () {   
                // 0 定义遍历保存偏移位    
                var offset = 0    
                // 1. 让图片滚动起来 
                var timer;        
                function autoPlay() {
                    timer = setInterval(function () {      
                        offset += -10       
                        if (offset <= -1200) {  
                            offset = 0   
                        }                
                        $('ul').css('marginLeft', offset)   
                    }, 50)    
                }        
                autoPlay()  
                // 2. 监听li的移入和移出事件       
                $('li').hover(function () {     
                    // 停止动画         
                    clearInterval(timer)  
                    // 给非当前选中添加模板  
                    $(this).siblings().fadeTo(100, 0.5) 
                }, function () {         
                    // 继续滚动       
                    autoPlay()       
                    // 去除所有的蒙版       
                    $('li').fadeTo(100, 1) 
                })     
            })   
        </script>
    </head>
    <body>  
        <div>   
            <ul>       
                <li>
                    <img src="https://ae01.alicdn.com/kf/U1a8fa2929bca4fddb8b38411e9751104b.jpg"></li>            
                <li>
                    <img src="https://ae04.alicdn.com/kf/Ue87bb1c5ad4c4c8c9c3a664f3619b126h.jpg"></li>          
                <li>
                    <img src="https://ae01.alicdn.com/kf/U3f740877f20040bd8f37c94440f26b569.jpg"></li>       
                <li>
                    <img src="https://ae03.alicdn.com/kf/Ua2b193cb94224ed796104020743af8aes.jpg"></li>     
                <li>
                    <img src="https://ae01.alicdn.com/kf/U1a8fa2929bca4fddb8b38411e9751104b.jpg"></li>       
                <li>
                    <img src="https://ae04.alicdn.com/kf/Ue87bb1c5ad4c4c8c9c3a664f3619b126h.jpg"></li>     
            </ul> 
        </div>
    </body>
</html>

TaoYeeeee

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js

二、jQuery 核心函数和工具方法jQuery 核心函数jQuery 的核心函数就是 $();，圆括号内可以传递函数、字符串选择器、字符串代码片段、DOM 元素等。传递函数$(function () { alert(1)})字符串选择器返回一个 jQuery 对象，对象中保存了找到的 DOM 元素$(function () { var $box1 = $(".box1") var $box2 = $("#box2") console
复制链接

扫一扫