jQuery简介

目录

• jQuery功能简介
• jQuery宗旨
• 需要知道的jQuery的使用
• jQuery文件下载
• jQuery的导入
  • 方式一
  • 方式二
• jQuery基本语法
  • 基本语法
  • jQuery与js代码对比
• jQuery查找标签 --- 选择器
  • 基本选择器
    • id选择器
    • class选择器
    • 标签选择器
    • 重点注意知识
  • 组合选择器/分组与嵌套
  • 基本筛选器
  • 属性选择器
  • 表单筛选器 --- 针对form表单
  • 筛选器方法
• jQuery操作标签
  • 操作类
    • js原生代码与jQuery对比
  • 操作标签的样式（css）
  • 位置操作 --- scrollTop
  • 标签的尺寸
  • 操作标签内文本
    • js原生代码与jQuery对比
    • jQuery操作标签内文本
  • 获取用户输入的值
    • js原生代码与jQuery对比
    • jQuery获取值操作
  • 操作标签属性
    • js原生代码与jQuery对比
    • jQuery操作标签的属性
  • jQuery操作HTML文档
    • js原生代码与jQuery对比
    • jQuery操作HTML文档
• jQuery事件
  • 标签绑定事件的方式
    • 第一种
    • 第二种
  • 克隆事件
  • 左侧菜单
  • 返回顶部
  • 自定义登陆校验
  • input实时监控
  • hover事件
  • 键盘按键按下事件
  • 模态框
  • 阻止后续事件执行
  • 阻止冒泡事件
  • 事件委托
  • 页面加载
• 动画效果
  • 隐藏hide/展示show
  • 向下向上滑动
  • 渐变
• each()
  • 描述
  • 迭代数组
  • 迭代jQuery对象
  • 终止each循环
• data()
  • 描述
  • .data(key, value):
  • .data(key):
  • .removeData(key):

jQuery功能简介

jQuery内部封装了原生的js代码，还额外添加了很多的功能

jQuery可以通过书写更少的代码完成js操作

jQuery类似python的模块，叫类库

兼容多个浏览器，在使用jQuery的时候就不需要考虑浏览器兼容问题

jQuery宗旨

write less do more
让你用更少的代码完成更多的事情

需要知道的jQuery的使用

选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax(重点 django部分学)

jQuery文件下载

jQuery官网打开，点击下载，选择压缩版or选择非压缩版

复制粘贴到文本文件中，将后缀名改为.js,然后将此文件放在项目中的文件夹中即可

jQuery的导入

方式一

将下载好的js文件放在项目文件下即可

<script src="jQuery.js">

方式二

直接引入jQuery提供的CDN服务(基于网络直接请求加载)

CDN:内容分发网络
CDN有免费的也有收费的
前端免费的cdn网站:bootcdn

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  """你的计算机必须要有网络"""

jQuery基本语法

基本语法

jQuery(选择器).action()
秉持着jQuery的宗旨 jQuery简写	$
jQuery()  === $()

jQuery与js代码对比

• 将p标签内部的文本颜色改为红色

// js原生代码
let pEle = document.getElementById('p1');
pEle.style.color = 'red';

// jQuery代码
$('p').css('color','blue')

jQuery查找标签 --- 选择器

基本选择器

id选择器

$('#d1');
jQuery.fn.init [p#d1]

class选择器

$('.c1');
jQuery.fn.init [div#d2.c1, prevObject: jQuery.fn.init(1)]

标签选择器

$('span');
jQuery.fn.init [span#d3, prevObject: jQuery.fn.init(1)]

重点注意知识

// 选择器产生的数组中是jQuery对象

// jQuery对象如何变成标签对象：索引取到的就是标签对象了
$('#d1')[0];
<p id=​"d1">​p​</p>​
document.getElementById('d1');
<p id=​"d1">​p​</p>​

// 标签对象如何转jQuery对象
$(document.getElementById('d1'));
jQuery.fn.init [p#d1]

组合选择器/分组与嵌套

$('div')
w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)]
$('div.c1')
w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('div#d1')
w.fn.init [div#d1, prevObject: w.fn.init(1)]
$('*')
w.fn.init(19) [html, head, meta, title, meta, link, script, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: w.fn.init(1)]
               
$('#d1,.c1,p')  # 并列+混用
w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]
              
$('div span')  # 后代
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
$('div>span')  # 儿子
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div+span')  # 毗邻
w.fn.init [span, prevObject: w.fn.init(1)]
$('div~span')  # 弟弟
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]

基本筛选器

对已经得到的结果进行二次筛选

$('ul li')
w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
               
$('ul li:first')  # 大儿子 
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
               
$('ul li:last')  # 小儿子
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
               
$('ul li:eq(2)')		# 放索引
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
               
$('ul li:even')  # 偶数索引 0包含在内
w.fn.init(5) [li, li, li, li.c1, li#d1, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li#d1length: 5prevObject: w.fn.init [document]__proto__: Object(0)
              
$('ul li:odd')  # 奇数索引
w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength: 5prevObject: w.fn.init [document]__proto__: Object(0)
              
$('ul li:gt(2)')  # 大于索引
w.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li5: li#d16: lilength: 7prevObject: w.fn.init [document]__proto__: Object(0)
              
$('ul li:lt(2)')  # 小于索引
w.fn.init(2) [li, li, prevObject: w.fn.init(1)]0: li1: lilength: 2prevObject: w.fn.init [document]__proto__: Object(0)
              
$('ul li:not("#d1")')  # 移除满足条件的标签
w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]
         
$('div')
w.fn.init(2) [div, div, prevObject: w.fn.init(1)]
$('div:has("p")')  # 选取出包含一个或多个标签在内的标签
w.fn.init [div, prevObject: w.fn.init(1)]

属性选择器

$('[username]')
w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]
$('[username="jason"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$('p[username="egon"]')
w.fn.init [p, prevObject: w.fn.init(1)]

$('[type]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
$('[type="text"]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]

表单筛选器 --- 针对form表单

$('input[type="text"]')
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)

$('input[type="password"]')
w.fn.init [input, prevObject: w.fn.init(1)]

$(':text')  # 等价于上面第一个
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)

$(':password')  # 等价于上面第二个
w.fn.init [input, prevObject: w.fn.init(1)]


:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...

表单对象属性
:enabled
:disabled
:checked
:selected

"""特殊情况"""
$(':checked')  # 它会将checked和selected都拿到
w.fn.init(2) [input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0)

$(':selected')  # 它不会 只拿selected
w.fn.init [option, prevObject: w.fn.init(1)]

$('input:checked')  # 自己加一个限制条件
w.fn.init [input, prevObject: w.fn.init(1)]

筛选器方法

$('#d1').next()  # 同级别下一个
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span#d1]__proto__: Object(0)

$('#d1').nextAll()  # 同级别下所有
w.fn.init(5) [span, div#d2, span, span, span.c1, prevObject: w.fn.init(1)]0: span1: div#d22: span3: span4: span.c1length: 5prevObject: w.fn.init [span#d1]__proto__: Object(0)

$('#d1').nextUntil('.c1')  # 不包括最后一个
w.fn.init(4) [span, div#d2, span, span, prevObject: w.fn.init(1)]0: span1: div#d22: span3: spanlength: 4prevObject: w.fn.init [span#d1]__proto__: Object(0)
              
              
$('.c1').prev()  # 上一个
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span.c1, prevObject: w.fn.init(1)]__proto__: Object(0)

$('.c1').prevAll() # 上面所有
w.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: w.fn.init(1)]

$('.c1').prevUntil('#d2') # 到id为d2的标签为止，不包括id为d2的标签
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
              
$('#d3').parent()  # 第一级父标签
w.fn.init [p, prevObject: w.fn.init(1)]0: plength: 1prevObject: w.fn.init [span#d3]__proto__: Object(0)
$('#d3').parent().parent()
w.fn.init [div#d2, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent()
w.fn.init [body, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent()
w.fn.init [html, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent()
w.fn.init [document, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent().parent()
w.fn.init [prevObject: w.fn.init(1)]
$('#d3').parents()  # 获得每一级的父标签
w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]
$('#d3').parentsUntil('body')
w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)]
              
              
$('#d2').children()  # 儿子
              
$('#d2').siblings()  # 同级别上下所有
              
              
              
$('div p')
# 等价           
$('div').find('p')  # find从某个区域内筛选出想要的标签 
              
              
"""对基本筛选器进行优化"""
$('div span:first')
w.fn.init [span, prevObject: w.fn.init(1)]
$('div span').first()
w.fn.init [span, prevObject: w.fn.init(3)]0: spanlength: 1prevObject: w.fn.init(3) [span, span#d3, span, prevObject: w.fn.init(1)]__proto__: Object(0)
                                                                                    
$('div span:last')
w.fn.init [span, prevObject: w.fn.init(1)]
$('div span').last()
                                                                                    
w.fn.init [span, prevObject: w.fn.init(3)]
$('div span:not("#d3")')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div span').not('#d3')
w.fn.init(2) [span, span, prevObject: w.fn.init(3)]

jQuery操作标签

操作类

js原生代码与jQuery对比

	js原生代码	jQuery版本
增加类	classList.add()	addClass()
删除类	classList.remove()	removeClass(
判断是否包含类	classList.contains()	hasClass()
toggle方法	classList.toggle()	toggleClass()

操作标签的样式（css）

<p>111</p>
<p>222</p>
// 需求：一行代码将第一个p标签变成红色第二个p标签变成绿色
$('p').first().css('color','red').next().css('color','green');
/*
jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法
*/

位置操作 --- scrollTop

// 当前位置距离浏览器窗口顶端的距离
$(window).scrollTop();

// 设置页面距离窗口顶端的距离
$(window).scrollTop(300);

标签的尺寸

// 代码准备
<p>p</p>

// 文本自身的高度
$('p').height();
20.8
// 文本自身的宽度
$('p').width();
490.4 

// 文本+padding
$('p').innerHeight();
$('p').innerWidth();

// 文本+padding+border
$('p').outerHeight();
$('p').outerWidth();

操作标签内文本

js原生代码与jQuery对比

js原生代码	jquery
innerText	text()
innerHTML	html()

jQuery操作标签内文本

// 查看标签内所有文本
$('div').text();
// 查看标签内包括标签在内的文本
$('div').html();

// 修改标签内部文本
$('div').text('今天是520');
$('div').html('今天是520');
$('div').text('<h1>520</h1>');
$('div').html('<h1>520</h1>');

获取用户输入的值

js原生代码与jQuery对比

js原生代码	jquery
.value	.val()

jQuery获取值操作

// 获取输入框内用户输入的数据
$('#d1').val();
// 设置输入框内显示的数据
$('#d1').val('520(´▽`ʃ♡ƪ)');

// 获取用户上传的文件
$('#d2').val()  // 获取文件路径
$('#d2')[0].files[0]  // 获取文件具体信息，先将jQuery对象转为标签对象

操作标签属性

js原生代码与jQuery对比

	js原生代码	jquery
设置属性	setAttribute()	attr(name,value)
获得属性	getAttribute()	attr(name)
删除属性	removeAttribute()	removeAttr(name)

• 补充知识

在用变量存储对象的时候 js中推荐使用	
	XXXEle			标签对象
jQuery中推荐使用
	$XXXEle			jQuery对象

jQuery操作标签的属性

• 对于标签上有能够看到的属性和自定义属性

// 获得jQuery对象
let $pELe = $('p');
// 获取该对象的id
$pEle.attr('id');
// 获取该对象的类
$pEle.attr('class');
// 为对象设置属性
$pEle.attr('class','c1');
// 移除某一个属性
$pEle.removeAttr('class')

• 对于返回布尔值，比如checkbox radio option是否被选中用prop

$('#d3').attr('checked')
"checked"
$('#d2').attr('checked')
undefined
$('#d2').attr('checked')
undefined
$('#d4').attr('checked')
undefined
$('#d3').attr('checked')
"checked"
$('#d3').attr('checked','checked')  # 无效
w.fn.init [input#d3]
           
           
$('#d2').prop('checked')
false
$('#d2').prop('checked')
true
$('#d3').prop('checked',true)
w.fn.init [input#d3]
$('#d3').prop('checked',false)
w.fn.init [input#d3]

jQuery操作HTML文档

js原生代码与jQuery对比

js原生代码	jquery
createElement('p')	$(' ')
appendchild()	append()

jQuery操作HTML文档

// 创建标签
let $pEle = $('<p>');
// 为标签添加文本内容
$pEle.text('今天是520')；
// 为标签添加属性
$pEle.attr('id','d1');


// 指定在哪个表签的尾部追加
$('#d2').append($pEle);
or
$pEle.appendto($('#d2'));

// 指定在哪个表签额头部追加
$('#d2').prepend($pEle);
or
$pEle.prependto($('#d2'));

// 放在某个标签后面
$('#d2').after($pEle);
or
$pEle.insertAfter($('#d2'))

// 放在某个标签前面
$('#d2').before($pEle);
or
$pEle.insertBefore($('#d2'))


// 将标签从DOM树中移除
$('#d2').remove()

// 清空标签内的所有内容
$('#d2').empty();

jQuery事件

标签绑定事件的方式

第一种

// jQuery对象.事件(触发事件实现的功能)
$('#d1').click(function(){
    alter('几岁了呀')
})

第二种

// 功能更加强大，支持事件委托
// jQuery对象.on('事件',触发事件实现的功能)
$('#d1').on('click',function(){
    alert('忘记几岁了')
})

克隆事件

• 实现效果：点击标签就复制一份一模一样的在页面上显示

    <style>
        #d1 {
            height: 50px;
            width: 50px;
            background: hotpink;
            border: 3px solid black;
        }
    </style>
</head>
<body>
    <button id="d1">click</button>
    <script>

        $('#d1').on('click',function () {
            console.log(this);  // this指代是当前被操作的标签对象
            // clone默认情况下只克隆html和css 不克隆事件,括号内加true即可克隆事件
            $(this).clone(true).insertAfter($('body'))
        })
    </script>
</body>

左侧菜单

• 实现效果，三个菜单，点击某一个菜单时显示该菜单下的目录，另两个菜单的目录隐藏

 <style>
        body,html {
            margin: 0;
            height: 100%;
            width: 100%;
        }
       #v1 {
           float: left;
           height: 100%;
           width: 30%;
           background: #888888;
           text-align: center;
           color: #eeeeee;
           font-size: 20px;
       }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <div id="v1">
        <div class="menu" id="d1">菜单一
            <p class="title">1</p>
            <p class="title">2</p>
            <p class="title">3</p>
        </div>
        <div class="menu" id="d2">菜单二
            <p class="title">4</p>
            <p class="title">5</p>
            <p class="title">6</p>
        </div>
        <div class="menu" id="d3">菜单三
            <p class="title">1</p>
            <p class="title">2</p>
            <p class="title">3</p>
        </div>
    </div>

    <script>
        $('.menu').click(function () {
            // 让所有菜单下的标题都有hide隐藏属性
            $('.title').addClass('hide');
            // 点击哪个菜单，就删除哪个菜单下的标题的hide属性
            $(this).children().removeClass('hide')
        })
    </script>

返回顶部

• 实现效果：当浏览页面的窗口距离浏览器顶部一定距离时，显示回到顶部

    <style>
        body,html {
            margin: 0;
            height: 100%;
            width: 100%;
        }
        #d1 {
            background: #4e4e4e;
            height: 800px;
            width: 100%;
        }
        #d2 {
            background: #888888;
            height: 800px;
            width: 100%;
        }
        #d3 {
            background: #333333;
            height: 800px;
            width: 100%;
        }
        #d4 {

            position: fixed;
            right: 20px;
            bottom: 20px;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <a href="" id="'d1"></a>
    <div id="d1">

    </div>
    <div id="d2">

    </div>
    <div id="d3">

    </div>
    <a href="" class="hide" id="d4">回到顶部</a>


    <script>
        $(window).scroll(function () {
            if ($(window).scrollTop() <= 300) {
                $('#d4').addClass('hide')
            } else {
                $('#d4').removeClass('hide')
            }
        })
    </script>
</body>

自定义登陆校验

• 实现效果：在获取用户名和密码的时候，如果用户没有填写，应该给用户提示信息

<p>username:
    <input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>password:
    <input type="text" id="password">
    <span style="color: red"></span>
</p>
<button id="d1">提交</button>

<script>
    let $userName = $('#username')
    let $passWord = $('#password')
    $('#d1').click(function () {
        // 获取用户输入的用户名和密码 做校验
        let userName = $userName.val()
        let passWord = $passWord.val()
        if (!userName){
            $userName.next().text("用户名不能为空")
        }
        if (!passWord){
            $passWord.next().text('密码不能为空')
        }
    })
    $('input').focus(function () {
        $(this).next().text('')
    })
</script>

input实时监控

• 实现效果：用户输入什么，后端就可以接收到什么

<input type="text" id="d1">

<script>
    $('#d1').on('input',function () {
        console.log(this.value)  
    })
</script>

hover事件

• 实现效果：鼠标悬浮在某一个标签上出现弹窗效果，移走出现弹窗效果

<script>
    // $("#d1").hover(function () {  // 鼠标悬浮 + 鼠标移开
    //     alert(123)
    // })

    $('#d1').hover(
        function () {
            alert('我来了')  // 悬浮
    },
        function () {
            alert('我溜了')  // 移开
        }
    )
</script>

键盘按键按下事件

• 实现效果：按下键盘上的按键，后端可以收到按的是哪个

<script>
    $(window).keydown(function (event) {
        console.log(event.keyCode)
        if (event.keyCode === 16){
            alert('你按了shift键')
        }
    })
</script>

模态框

阻止后续事件执行

• 实现效果阻止表单提交的刷新功能

<form action="">
    <span id="d2"></span>
    <input type="submit" id="d1" value="click me">
    <script>
        $('#d1').click(function () {
            $('#d2').text('刚吃了皮蛋瘦肉粥')
            // 阻止标签后续事件的执行 方式一
            return false
            // 阻止标签后续事件的执行 方式2
        //  e.preventDefault()
        })
    </script>
</form>

阻止冒泡事件

• 嵌套在父级标签内部的标签与父级标签有相同的功能时，触发子标签的事件，父标签分事件也会跟着触发，目的就是阻止这样的现象发生

<body>
    <div id="d3">div
        <p id="d2">div>p
            <span id="d1">div>p>span</span>
        </p>
    </div>
    <script>

        $('#d1').click(function () {
            alert('span')
        });
        $('#d2').click(function () {
            alert('p')
        });
        $('#d3').click(function (e) {
            alert('div')
            // 阻止事件冒泡的方式1
            // return false
            // 阻止事件冒泡的方式2
            // e.stopPropagation()
        })
</script>


</body>

事件委托

• 实现效果：给页面上所有的button标签绑定点击事件

<button>是兄弟，就来砍我!!!</button>

<script>
    // 给页面上所有的button标签绑定点击事件
    // $('button').click(function () {  // 无法影响到动态创建的标签
    //     alert(123)
    // })

    // 事件委托     
    $('body').on('click','button',function () {
        alert(123)  // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
    })
</script>

页面加载

# 等待页面加载完毕再执行代码
window.onload = function(){
  // js代码
}

"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
  // js代码
})
# 第二种
$(function(){
  // js代码
})
# 第三种
"""直接写在body内部最下方"""

动画效果

隐藏hide/展示show

    <style>
        body,html {
            height: 100%;
            width:100%;
        }
        #d3  {
            height: 100%;
            width: 30%;
            background: #888888;
            border: 3px solid red;
        }
        #d1,#d2 {
            display: block;
            float: left;
        }

    </style>
</head>
<body>
    <div id="d3">div</div>
    <button id="d1">隐藏</button>
    <button id="d2">显示</button>
    <script >
        $('#d1').on('click',function () {
            $('#d3').hide(5000)

        });
        $('#d2').click(function () {
            $('#d3').show(5000)
        })
    </script>
</body>

向下向上滑动

<style>
        body,html {
            height: 100%;
            width:100%;
        }
        #d3  {
            height: 100%;
            width: 30%;
            background: #888888;
            border: 3px solid red;
        }
        #d1,#d2 {
            display: block;
            float: left;
        }

    </style>
</head>
<body>
    <div id="d3">div</div>
    <button id="d1">隐藏</button>
    <button id="d2">显示</button>
    <script >
        $('#d1').on('click',function () {
            $('#d3').slideUp(5000)

        });
        $('#d2').click(function () {
            $('#d3').slideDown(5000)
        })
    </script>
</body>

渐变

 <style>
        body,html {
            height: 100%;
            width:100%;
        }
        #d3  {
            height: 100%;
            width: 30%;
            background: #888888;
            border: 3px solid red;
        }
        #d1,#d2 {
            display: block;
            float: left;
        }

    </style>
</head>
<body>
    <div id="d3">div</div>
    <button id="d1">隐藏</button>
    <button id="d2">显示</button>
    <button id="d4">渐变至</button>

    <script >
        $('#d1').on('click',function () {
            $('#d3').fadeIn(5000)

        });
        $('#d2').click(function () {
            $('#d3').fadeOut(5000)
        });
        $('#d4').click(function () {
            $('#d3').fadeTo(5000,0.5)
        })
    </script>
</body>

each()

描述

jQuery.each(collection, callback(indexInArray, valueOfElement))：

描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

迭代数组

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

// 运行结果
010
120
230
340

迭代jQuery对象

.each(function(index, Element))：

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

// 为每一个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：

也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

$("li").addClass("c1");  // 对所有标签做统一操作

终止each循环

在遍历过程中可以使用 return false提前结束each循环

return false；

data()

描述

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value):

描述：在匹配的元素上存储任意相关数据。

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key):

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据

$("div").removeData("k");  //移除元素上存放k对应的数据