parent()函数
场景：返回匹配元素的父元素集合
html代码：
<div><p>11111</p></div><div class="parent"><p>22222222</p></div>
js代码：
$("p").parent() //获取到所有p标签的父元素集合
$("p").parent('.parent') //获取到只带有.parent样式父元素集合
parent()函数返回结果如图所示：
is()函数
场景：根据选择器检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
场景1：
html代码：
<form><input class="btn btn-default" type="button" value="Input"></form>
<!-- <div><input class="btn btn-default" type="button" value="Input"></div> -->
js代码：
console.log($(".btn").is('input'));
console.log($(".btn").parent().is("form"));
结果：
true
true
场景2：
html代码：
<!-- <form><input class="btn btn-default" type="button" value="Input"></form> -->
<div><input class="btn btn-default" type="button" value="Input"></div>
js代码：
console.log($(".btn").is('input'));
console.log($(".btn").parent().is("form"));
结果：
true
false
场景3：
html代码：
<form><input class="btn btn-default" type="button" value="Input"></form>
<div><input class="btn btn-default" type="button" value="Input"></div>
js代码：
console.log($(".btn").is('input'));
console.log($(".btn").parent().is("form"));
结果：
true
true
data()函数
场景：
1、在元素上存放或读取数据
2、根据HTML5规范中，可以读取预存的data-[key]值HTML data-* 属性
案例1：在元素上存放或读取数据
html代码：
<div></div>
js代码：
console.log($("div").data("key1")); // undefined
$("div").data("key1", "hello world~");
console.log($("div").data("key1")); // hello world~
案例2：
html代码：读取预存的data-[key]值
<button type="button" id="myButton" data-loading-text="Loading..." data-aaaaa-text="111111"> Loading state </button>
js代码：
//获取data-loading-text里Loading...这个值
console.log($("#myButton").data("loading-text"));
//结果：Loading...
//不带参数的$("#myButton").data()；，则表示一次性将所有以data-开头的参数都收集起来
console.log($("#myButton").data());
//结果：{loadingText: "Loading...", aaaaaText: 111111}
Bootstrap中的很多JS插件都是利用了这个特性，在HTML元素上定义了一些必要的参数，比如是否开启键盘事件等等。
html()函数
1、获取第一个匹配元素的html内容
2、用于设定HTML内容的值
案例如下：
html代码：
<div><p>22222222</p></div><div><p>11111</p></div>
js代码：
console.log($("p").html());
//只显示第一个p标签内容
//结果：22222222
$("p").html("Hello worl~");
//页面两个p标签内容均修改,显示如下
//Hello worl~
//Hello worl~
val()函数
1、获得匹配元素的当前值
2、设置元素的当前值
案例如下：
html代码：
<input class="btn btn-default" type="button" value="Input">
js代码：
console.log($("input").val()); //Input
$("input").val("hello world!"); //按钮显示成hello world!
addClass()函数
为所有匹配的元素添加指定的类名。
案例如下：
html代码：
<div><p>11111</p></div><div><p>22222222</p></div>
js代码：
$("div").addClass("selected");
html结果：
<div class="selected"><p>11111</p></div><div class="selected"><p>22222222</p></div>
removeClass()函数
为所有匹配的元素删除指定的类名。
案例如下：
html代码：
<div class="selected"><p>11111</p></div><div class="selected"><p>22222222</p></div>
js代码：
$("div").removeClass("selected");
//html结果：
<div class=""><p>11111</p></div><div class=""><p>22222222</p></div>
toggleClass()函数
1、切换类的状态，如果所选元素存在指定的类就删除，如果所选元素不存在指定的类就添加
2、用于决定所选元素是否包含该类
案例如下：
html代码：
<div><p>11111</p></div><div><p>22222222</p></div>
js代码：
$("div").toggleClass("selected");
html结果：
<div class="selected"><p>11111</p></div><div class="selected"><p>22222222</p></div>
html代码：
<div class="selected"><p>11111</p></div><div class="selected">
js代码：
$("div").toggleClass("selected");
html结果：
<div><p>11111</p></div><div><p>22222222</p></div>
$("div").toggleClass("selected",true); //无论是否有selected，有则不处理，无则添加
html结果：
<div class="selected"><p>11111</p></div><div class="selected"><p>22222222</p></div>
$("div").toggleClass("selected",false); //无论是否有selected，有则删除，无则不处理
html结果：
<div><p>11111</p></div><div><p>22222222</p></div>
attr() 函数
1、获取第一个匹配元素的属性值
2、用于设定所有匹配元素的属性值
案例如下：
html代码：
<div><p class="p1">11111</p></div><div><p class="p2">22222222</p></div>
js代码：
console.log($("p").attr("class")); //p1 [第一个匹配元素的属性值]
$("p").attr("class","p111111111")
html结果：
<div><p class="p111111111">11111</p></div><div><p class="p111111111">22222222</p></div>
removeAttr函数
删除所有匹配元素的指定的属性值
案例如下：
html代码：
<div><p class="p111111111">11111</p></div><div><p class="p111111111">22222222</p></div>
js代码：
$("p").removeAttr("class","p111111111")
html结果
<div><p>11111</p></div><div><p>22222222</p></div>
prop() 函数
和attr() 函数区别在于:设置或者获取元素boolean类型的属性值
1、获取第一个匹配元素的属性值
2、用于设定所有匹配元素的属性值
html代码：
<input type="button" value="Input">
<input type="button" value="Input">
js代码:
console.log($("input[type='button']").prop("disabled"));
//false[第一个匹配元素的属性值]
$("input[type='button']").prop("disabled",true)
html结果
<input type="button" value="Input" disabled="">
<input type="button" value="Input" disabled="">
on函数
在选择的元素上监听事件
案例如下：
html代码：
<div>
<input type="button" value="Input">
<a type="button" href="#">Link</a>
<button type="submit">Button</button>
</div>
js代码：
//第一种常见用法，在所选择的元素上直接监听事件
$("div").on("click", function(){
alert("hello world");
});
//第二种bootstrape框架用法，在所选择的元素上监听事件，根据事件的冒泡规则过滤触发事件的选择器元素的后代元素
$(document).on("click", '[type="button"]', function(){
alert("hello world");
});
//此案例中，当点击<button type="submit">Button</button>按钮的时候不会触发点击事件，原因是因为不满足子元素过滤规则
off函数
在选择的元素上取消监听事件
案例如下
html代码：
<p>1111111</p>
<p>2222222</p>
<p>3333333</p>
js代码：
//在p标签上监听点击事件，当点击p标签的时候会弹出alert数据
$("p").on("click", function(){
alert("hello world");
});
//在p标签上取消点击事件，当点击p标签的时候不会触发之前监听的事件
$("p").off("click");
补充说明：
Bootstrap框架，它对jQuery的on和off的使用稍有不同，例如如下案例：
$(document).on('click.bs.td.data-api','td',function (e){};
上述的on在使用时选择器变成了document。它的好处是只在document上绑定一个单击事件，利用冒泡的机制，在单击的时候检查是否是td元素，如果是才处理。如果我们把td作为选择器，一个页面有多少td元素就会绑定多少个click事件，这样性能会大大降低。
trigger函数
根据选择器选择的所有元素触发指定的事件类型
案例如下：
html代码：
<p>1111111</p>
<p>2222222</p>
<p>3333333</p>
js代码：
//定义click事件
$("p").on("click", function(){
alert("hello");
});
//不需要鼠标点击调用click事件，用如下代码即可触发所有p元素的click事件,会导致页面弹出3次alert
$("p").trigger("click");
trigger函数传参的写法
$("p").on("click", function(e,param1,param2){
alert(param1 +"-"+ param2);
});
// 通过数组的方式向on监听的事件传参
$("p").trigger("click",["11111","2222222"]);
each函数
jquery循环遍历函数
案例如下：
html代码：
<p>aaaaaaaaa</p>
<p>bbbbbbbbb</p>
<p>ccccccccc</p>
js代码：
$("p").each(function(i){
$(this).html("p"+i)
});
html最终渲染结果：
<p>p0</p>
<p>p1</p>
<p>p2</p>
解释：
选择器选择所有的p标签，each函数循环遍历每个p标签进行处理，i变量表示当前是第几个选中的p标签，函数内部的this表示当前选中的p标签，通过 $(this)就可以把当前p标签变成jquery对象，然后就可以调用jquery方法进行使用了。
$.extend()函数
用一个或多个其他对象来扩展第一个对象，返回被扩展的第一个对象。
案例如下：
var defaultObj = { loadingText: 'loading...' };
var options = { loadingText: '加载中...', name: "bar" };
var data = $.extend({}, defaultObj, options)
console.log(defaultObj);
console.log(data);
//这种情况不会修改defaultObj 的数据，因为它不是第一个被扩展的对象
// {loadingText: "loading..."}
//{loadingText: "加载中...", name: "bar"}
var data = $.extend(defaultObj, options)
console.log(defaultObj);
console.log(data);
//{loadingText: "加载中...", name: "bar"}
//{loadingText: "加载中...", name: "bar"}
//这种情况会修改defaultObj 的数据，因为它位于第一个参数
