zoukankan html css js c++ java

jQuery

一、jQuery介绍

　　jQuery是一个轻量级的、兼容多浏览器的JavaScript库。使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供Ajax交互。其宗旨是："Write less, do more."

二、jQuery对象

　　jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法：例如$("#id1").html();

$("#id1").html()的意思是：获取id值为id1的元素的html代码。其中 html()是jQuery里的方法。相当于：document.getElementById("id1").innerHTML;

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法；同理，DOM对象也不能使用jQuery里的方法；乱使用会报错。

//约定：如果获取的是jQuery对象，那么要在变量前面加上$
var $variable = jQuery对象
var variable = DOM对象

//jQuery对象转成DOM对象
$variable[0]

//举个例子，jQuery对象和DOM对象的使用
$("#id1").html();  //jQuery对象可以使用jQuery的方法
$("#id1")[0].innerHTML;  //DOM对象使用DOM的方法

jQuery基础语法：$(selector).action()

三、查找标签

3.1 基本选择器

$("#id")     id选择器
$("tag")     标签选择器
$(".class")  类选择器
$("div.c1")  配合使用:找到有.c1类的div标签
$("*")       所有元素选择器
$("#id, .class, tag")  组合选择器

3.2 层级选择器

x与y可以为任意选择器

$("x y")  x的所有后代y（子子孙孙）
$("x>y")  x的所有儿子y（儿子）
$("x+y")  找到所有紧挨在x后面的y
$("x~y")  x之后所有的兄弟y

3.3 属性选择器

$([attribute])
$([attribute=value])   属性等于
$([attribute!=value])  属性不等于

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
</head>
<body>

属性选择器练习html代码

//示例
<input type="password">
<input type="checkbox">

$("[type='password']")  这样写也能查到
$("input[type='password']")   取到password类型的input标签
$("input[type!='checkbox']")  取到不是checkbox类型的input标签
$("[name='pd']")
$("[id='id1']")   属性选择器不要单单只局限于用在input标签

3.4 表单选择器

只有input标签的type类型才能使用下面这种简化后的选择器，$(":text")

$(":text")  相当于$("[type='text']")，以下也是
$(":password")  找到所有password类型的input标签
$(":radio")
$(":checkbox")
$(":file")
$(":submit")
$(":reset")
$(":button")

表单对象属性：

$(":enabled")
$(":disabled")
%(":checked")
%(":selected")

或者类似如下：
%("input:enabled")
%("option:selected")

例子：

<form>
    <label for="id1">干嘛呢:</label>
    <input id="id1" name="email" disabled/>
    <label for="id2"></label>
    <input id="id2" name="pd">

    <label for="s1"></label>
    <select id="s1">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou" selected>广州</option>
        <option value="shenzhen" disabled>深圳</option>
    </select>
</form>

$("input:enabled")  找到可用的input标签
$(":selected")  找到所有被选中的option

3.5 基本筛选器

:first　　　　第一个
:last　　　　 最后一个
:eq(index)　 索引等于index的那个元素
:even　　　　 匹配所有索引值为偶数的元素，从 0 开始计数
:odd　　　　  匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)　 匹配所有大于给定索引值的元素
:lt(index)　 匹配所有小于给定索引值的元素
:not(元素选择器)　　移除所有满足not条件的标签
:has(元素选择器)　　选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

例子：

$("div:has(h1)")      找到所有后代中有h1标签的div标签
$("div:has(.c1)")     找到所有后代中有c1样式类的div标签
$("li:not(.c1)")      找到所有后代中不包含c1样式类的li标签
$("li:not(:has(a))")  找到所有后代中不含a标签的li标签

四、筛选器方法

4.1 往后找元素

$("#id0").next()
$(".cl0").nextAll()
$("div0").nextUntil("p0")

4.2 往前找元素

$("#id0").prev()
$(".cl0").prevAll()
$("div0").prevUntil("p0")

4.3 找父亲元素

$("#id0").parent()
$(".cl0").parents()　　查找当前元素的所有父辈元素
$("div0").parentsUntil(div1)　　查找当前元素的所有父辈元素，直到遇到匹配的那个元素为止

4.4 找儿子和兄弟元素

$("#id").children()　　儿子们
$("#id").siblings()　　兄弟们

4.5 指定元素查找

搜索所有与指定表达式匹配的元素。这是找出正在处理的元素的后代元素的好方法。

$("div").find("p")    等价于$("div p")

4.6 筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")　　从结果集中过滤出有c1样式类的，等价于$("div.c1")

除了 filter 还有：

.first()  获取匹配的第一个元素
.last()   获取匹配的最后一个元素
.not()    从匹配元素的集合中删除与指定表达式匹配的元素
.has()    保留包含特定后代的元素，去掉那些不含有指定后代的元素
.eq()     索引值等于指定值的元素

五、操作标签

5.1 class类操作

$("").addClass("")　　   添加指定的CSS类名
$("").removeClass("")　　移除指定的CSS类名
$("").hasClass("")　　   判断样式存不存在
$("").toggleClass("")　　切换CSS类名，如果有就移除，如果没有就添加

5.2 CSS操作

基本操作
$("").css("color","pink")
$("").css({"color":"pink","font-size":"20px"})

位置操作
$("").offset()  获取匹配元素在当前窗口的相对偏移
$("").offset({top:100,left:100})  设置元素位置
$("").position()   获取匹配元素相对父元素的偏移
$("").scrollTop()  获取匹配元素相对滚动条顶部的偏移
$("").scrollLeft() 获取匹配元素相对滚动条左侧的偏移

尺寸操作
$("").heigth()  content
$("").width()
$("").innerHeight()  content+padding
$("").innerWidth()
$("").outerHeight()  content+padding+border
$("").outerWigth()

.offset() 方法允许我们检索一个元素相对于文档（document）的当前位置；和 .position() 的差别在于 .position()是相对于父级元素的位移。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>位置相关示例之返回顶部</title>
  <style>
    .c1 {
       100px;
      height: 200px;
      background-color: red;
    }

    .c2 {
      height: 50px;
       50px;

      position: fixed;
      bottom: 15px;
      right: 15px;
      background-color: #2b669a;
    }
    .hide {
      display: none;
    }
    .c3 {
      height: 100px;
    }
  </style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>

<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#b1").on("click", function () {
    $(".c1").offset({left: 200, top:200});
  });


  $(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });
  $("#b2").on("click", function () {
    $(window).scrollTop(0);
  })
</script>
</body>
</html>
.scrollTop返回顶部示例

.scrollTop返回顶部示例

5.3 文本操作

$("").html()  取得第一个匹配元素的html内容
$("").html("content")  设置所有匹配元素的html内容
$("").text()  取得所有匹配元素的text内容
$("").text("content")  设置所有匹配元素的text内容

$("").val()  取得第一个匹配元素的当前值（匹配到多个也只是取第一个value）
$(":checkbox").val()  匹配到多个checkbox，也只是取第一个value
$("").val("value1")    设置所有匹配元素的value值
$("").val(["value1","value2"])  设置多个值

对于匹配到多个元素，如何去全部值呢？

//例子：对于checkbox中选中的多个值，应该这样取
var $checkedEles = $(":checkbox:checked");
for (var i=0;i<$checkedEles.length;i++){
    console.log($($checkedEles[i]).val());  
}

5.4 属性操作

用于id等、或自定义属性：

$("").attr("attrName")　　返回第一个匹配元素的属性值
$("").attr("attrName", "attrValue")　　为所有匹配元素设置一个属性值
$("").attr({"k1": "v1", "k2":"v2"})　　为所有匹配元素设置多个属性值
$("").removeAttr("ar")　　从每一个匹配的元素中删除一个属性

//例子
$("img").attr("src")
$("img").attr("src",URL)  可以设置一个变量存储值，再将变量放进来即可
$("img").removeAttr("src")

下面这个方法也是取属性，用于checkbox和radio，返回的是布尔值。

比如说获取一个选择框，判断它有没有被选中，就用 prop()

$("").prop()    获取属性
$("").removeProp()    移除属性

.attr()和.prop()的区别:

虽然都是属性，但他们所指的属性并不相同，attr 所指的属性是 HTML 标签属性，而 prop 所指的是 DOM 对象属性，可以认为 attr 是显式的，而 prop 是隐式的。

例子1：没有默认选中项

<input type="checkbox" id="c1">

对于.attr()
$("#c1").attr("checked") --> undefined
对于.prop()
$("#c1").prop("checked") -->  false

选中该项
$("#c1").prop("checked",true)

可以看到attr获取一个标签内没有的东西会得到 undefined，而 prop 获取的是这个 DOM 对象的属性，因此 checked 为 false 。

例子2：有默认选中项

<input type="checkbox" id="c1" checked>

对于.attr()
$("#c1").attr("checked") --> "checked"
对于.prop()
$("#c1").prop("checked") -->  true

取消默认勾选项
$("#c1").prop("checked",false)

证明 attr 的局限性，它的作用范围只限于 HTML 标签内的属性，而 prop 获取的是这个 DOM 对象的属性，选中返回 true，没选中返回 false 。

例子3：自定义属性

$("#i1").attr("me")     自定义属性
$("#i1").prop("me") --> undefined

可以看到prop不支持获取标签的自定义属性

总结：

对于标签上有的能看到的属性和自定义属性都用 attr
对于返回布尔值的比如 checkbox、radio 和 option 的是否被选中都用 prop

注意！！！

在1.x及2.x版本的 jQuery 中使用 attr 对 checkbox 进行赋值操作时会出 bug，在3.x版本的 jQuery 则没有这个问题。为了兼容性，我们在处理 checkbox 和 radio 的时候尽量使用特定的 prop()，不要使用 attr("checked", "checked")

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
    $(":checkbox[value='1']").prop("checked", true);
    $(":radio[value='2']").prop("checked", true);
</script>

5.5 文档处理

先来个例子：

<ul id="u1">
    <li id="l1">1</li>
    <li>2</li>
    <li>3</li>
</ul>

var liEle = document.createElement("li")  jQuery没有创建标签方式，只能使用原生DOM方式，一定要记住
liEle.innerText=4
$("ul").append(liEle)

添加到指定元素内部的后面

$("A").append("B")    把B追加到A
$("A").appendTo("B")  把A追加到B

添加到指定元素内部的前面

$("A").prepend("B")    把B前置到A
$("A").prependTo("B")  把A前置到B

添加到指定元素外部的后面

$("A").after("B")　　　   把B放到A的后面
$("A").insertAfter("B")  把A放到B的后面

添加到指定元素外部的前面

$("A").before("B")        把B放到A的前面
$("A").insertBefore("B")  把A放到B的前面

移除和清空元素

$("").remove()  从DOM中删除所有匹配的元素
$("").empty()   删除匹配的元素集合中所有的子节点

$("ul").remove()  移除ul，什么都没了，ul没了
$("ul").empty()   清空ul下的所有东西，ul还在

替换

$("A").replaceWith("B")  用B标签替换A标签
$("A").replaceAll("B")   用A标签替换所有的B标签

克隆

一般使用class属性值克隆，这样克隆出来的就属于同一个类了

$(".c1").clone()  克隆.c1类的标签

六、事件

6.1 常用事件

$("").click(function(){...})    当xx被鼠标点击时发生click事件...
$("").hover(function(){...})    当鼠标指针悬停在xx上面时发生hover事件...
$("").focus(function(){...})    当xx获得焦点时发生focus事件...
$("").change(function(){...})   当xx改变时发生change事件...
$("").keyup(function(){...})    当按键被送开时xx发生keyup事件...
$("form").submit(function(){...})    当提交表单时发生submit事件...

6.2 绑定事件&移除事件

绑定：

$("").on(events [,selector], function(){...})

events：事件
selector：选择器（可选的）
function：事件处理函数

移除：

$("").off(events [,selector], function(){...})

.off() 方法移除用 .on() 方法绑定的事件处理程序

注意：

像 click、keydown 等 DOM 中定义的事件，可以使用 .on() 方法来绑定事件，但是 hover 这种 jQuery 中定义的事件就不能用 .on() 方法来绑定了。

想使用事件委托的方式绑定 hover 事件处理函数，可以参照如下代码分两步绑定事件：

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
    $(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
    $(this).removeClass('hover');
});

6.3 阻止默认事件

return false; 常见阻止表单提交等
e.preventDefault();

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="">
    <button id="b1">点我</button>
</form>

<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        // return false;
        e.preventDefault();
    });
</script>

</body>
</html>
阻止默认事件

阻止默认事件

6.4 阻止事件冒泡

　　.stopPropagation() 是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。什么是冒泡事件？如在一个按钮是绑定一个"click"事件，那么"click"事件会依次在它的父级元素中被触发。stopPropagation 就是阻止目标元素的事件冒泡到父级元素。如：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        // e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

阻止事件冒泡

如上代码中，如果 e.stopPropagation() 被注释掉了，那么点击文字会依次发出 span、p、div 三个警报，这就是事件冒泡，只要把代码中 e.stopPropagation() 的注释去掉，即可阻止事件冒泡，只会发出一个 span 警报。

6.5 页面载入

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

jQuery中有两种方法（第二种为简写）：

$(document).ready(function(){...})
$(function(){...})

除了上面这两种页面加载后执行事件的方式，还有window.onload

区别：

window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

6.6 事件委托

什么叫事件委托？事件委托（事件代理）即是利用事件冒泡原理，只指定一个事件处理程序，就可以管理某一类型的所有事件。

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

示例：

表格中每一行的编辑和删除按钮都能触发相应的事件。

$("table").on("click", ".delete", function () {
    //删除按钮绑定的事件
})

6.7 动画效果

// 显示隐藏
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">切换</button>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function() {
        $("#hide").click(function () {
            $("p").hide(1000);
        });
        $("#show").click(function () {
            $("p").show(1000);
        });

        //用于切换被选元素的 hide() 与 show() 方法。
        $("#toggle").click(function () {
            $("p").toggle();
        });
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            text-align: center;
            background-color: hotpink;
            border:solid 1px red;
            display: none;
            padding: 50px;
        }
    </style>
</head>
<body>

<div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">toggle</div>
<div id="content">Hello world！</div>

<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function(){
        $("#slideDown").click(function(){
             $("#content").slideDown(1000);
             });
        $("#slideUp").click(function(){
             $("#content").slideUp(1000);
             });
        $("#slideToggle").click(function(){
            $("#content").slideToggle(1000);
             })
        });
</script>

</body>
</html>
滑动

滑动

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1{
            display:none;
             80px;
            height: 80px;
            background-color: hotpink;
        }
    </style>
</head>
<body>

<button id="in">fadein</button>
<button id="out">fadeout</button>
<button id="toggle">fadeToggle</button>
<button id="fadeTo">fadeTo</button>
<div id="id1"></div>

<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function(){
        $("#in").click(function(){
            $("#id1").fadeIn(1000);
            });
        $("#out").click(function(){
            $("#id1").fadeOut(1000);
            });
        $("#toggle").click(function(){
            $("#id1").fadeToggle(1000);
            });
        $("#fadeTo").click(function(){
            $("#id1").fadeTo(1000,0.4);
            });
        });
</script>

</body>
</html>

淡入淡出

淡入淡出

七、补充

7.1 .each()

jQuery.each(collection,callback(indexArray,valueOfElement));

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>111</div>
<div>222</div>
<div>333</div>
<div>444</div>
<div>555</div>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script>
    let $ele = $("div");
    $.each($ele,function () {
        console.log(this)
    })
</script>
</body>
</html>

.each(function(index,Element));

let $ele = $("div");
$ele.each(function (k,v) {
    console.log(k,v)
});
$ele.each(function (k) {
    console.log(k)
});
$ele.each(function () {
    console.log(this)
});

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

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

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

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

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

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

注意：

return false;提前结束each循环。如果只是退出当前这一次循环，直接写一个return;即可。

7.2 .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对应的数据

用处：模态框编辑的数据回填表格

7.3 插件（了解）

jQuery.extend(object)

jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

<script>
    jQuery.extend({
        min:function(a, b){return a < b ? a : b;},
        max:function(a, b){return a > b ? a : b;}
    });
    jQuery.min(2,3);// => 2
    jQuery.max(4,5);// => 5
</script>

jQuery.fn.extend(object)

一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。

<script>
      jQuery.fn.extend({
        check:function(){
              return this.each(function(){this.checked =true;});
        },
           uncheck:function(){
          return this.each(function(){this.checked =false;});
        }
      });
    // jQuery对象可以使用新添加的check()方法了。
    $("input[type='checkbox']").check();
</script>

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div> <p> <span>点我</span> </p></div><script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script><script> $("span").click(function (e) { alert("span"); // e.stopPropagation(); });
$("p").click(function () { alert("p"); }); $("div").click(function () { alert("div"); })</script></body></html>
阻止事件冒泡

查看全文

相关阅读:
iOS 10 的一个重要更新-用 UIViewPropertyAnimator 编写动画
 iOS 10 的一个重要更新-线程竞态检测工具 Thread Sanitizer
iOS 10 的一个重要更新-开发 iMessage 的第三方插件
 状态栏白色
 iOS 对 HTTPS 证书链的验证
 Xcode8 带来的新特性和坑
 升级cocoapods1.1.1版本
 (这也不是，那也不是，怎么办？)无论何时坚持自己的原则，当选准了目标，就不放弃，做最好的自己。我们必须要有一定的看法，正确的做法；有时，我们无法避免他人在旁的批评或劝告，但我们是无法取悦每个人的，否则将失去了方向，迷失了自己。
笑话集锦(1)
最感动的一首现代诗(转)(修正了一点翻译)

原文地址：https://www.cnblogs.com/onesea/p/13158618.html