溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
一．簡(jiǎn)介
二．尋找元素
1.選擇器
1.1 基本選擇器
$(“*”):選擇所有標(biāo)簽
$(“#idname”):選擇id=idname的標(biāo)簽
$(“#classname”):選擇class=classname的標(biāo)簽
$(“#TagName”):選擇Tag=TagName的標(biāo)簽
$(“.classname,p,div”):選擇class=classname,p及div的所有標(biāo)簽
該部分代碼塊如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p1">這是P標(biāo)簽1</p>
<div id="d1">welcome to jQuery
<div class="outer">這是div標(biāo)簽外圍1
<div class="inner">這是div標(biāo)簽內(nèi)部</div>
<p>這是P標(biāo)簽2</p>
</div>
</div>
<span class="outer">這是span標(biāo)簽</span>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
// $("p").css("color","red"); //對(duì)所有的P標(biāo)簽進(jìn)行操作(tagname)
// $("*").css("color","green"); //對(duì)所有的標(biāo)簽進(jìn)行操作(*)
// $("#d1").css("color","yellow"); //對(duì)id="d1"的標(biāo)簽進(jìn)行操作(#idname)
$(".outer,#p1,span").css("color","pink"); //對(duì)classname="outer",id="p1",tagname="span"的所有標(biāo)簽進(jìn)行操作
</script>
</html>1.2 層級(jí)選擇器
$(".inner p")：calssname="inner"標(biāo)簽內(nèi)的所有p標(biāo)簽 $(".inner>p"):calssname="inner"標(biāo)簽內(nèi)的所有p標(biāo)簽
$(".inner+p"):calssname="inner"標(biāo)簽下方相鄰的p標(biāo)簽
$(".inner~p"):calssname="inner"標(biāo)簽下方所有的p標(biāo)簽(僅要求下方即可，可以不相鄰)
該部分實(shí)例代碼塊如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p1">這是P標(biāo)簽1</p>
<div id="d1">welcome to jQuery
<div class="outer">這是div標(biāo)簽外圍1
<p>這是P標(biāo)簽2</p>
<div class="inner">這是div標(biāo)簽內(nèi)部
<p>這是P標(biāo)簽31</p>
<p>這是P標(biāo)簽32</p>
</div>
<p>這是P標(biāo)簽4</p>
<span class="outer">這是span標(biāo)簽1</span>
<p>這是P標(biāo)簽5</p>
</div>
<p>這是P標(biāo)簽5</p>
</div>
<span class="outer">這是span標(biāo)簽</span>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
// $(".inner p").css("color","red") //對(duì)calssname="inner"標(biāo)簽下的所有p標(biāo)簽進(jìn)行操作
// $(".inner>p").css("color","red") //對(duì)calssname="inner"標(biāo)簽下的所有p標(biāo)簽進(jìn)行操作
// $(".inner+p").css("color","red") //對(duì)calssname="inner"標(biāo)簽下方相鄰的p標(biāo)簽進(jìn)行操作
$(".inner~p").css("color","red") //對(duì)calssname="inner"標(biāo)簽下方所有的p標(biāo)簽(僅要求下方即可，可以不相鄰)進(jìn)行操作
</script>
</html>1.3 基本篩選器
$(ele:frist):第1個(gè)ele標(biāo)簽
$(ele:eq(n)):第N個(gè)ele標(biāo)簽
$(ele:last):最后1個(gè)ele標(biāo)簽
$("li:even"):對(duì)排序?yàn)榛鶖?shù)的li標(biāo)簽進(jìn)行操作
$("li:odd"):對(duì)排序?yàn)榕紨?shù)的li標(biāo)簽進(jìn)行操作
$("li:gt(2)"):對(duì)大于第二個(gè)(不包含第2個(gè))的li標(biāo)簽(排序從0開始)進(jìn)行操作
$("li:lt(2)"):對(duì)小于第二個(gè)(不包含第2個(gè))的li標(biāo)簽(排序從0開始)進(jìn)行操作
該部分代碼塊如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul type="circle">
<li>第一個(gè)li標(biāo)簽</li>
<li>第二個(gè)li標(biāo)簽</li>
<li>第三個(gè)li標(biāo)簽</li>
<li>第四個(gè)li標(biāo)簽</li>
<li>第五個(gè)li標(biāo)簽</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
// $("li:first").css("color","red") //對(duì)第一個(gè)li標(biāo)簽進(jìn)行操作
// $("li:eq(3)").css("color","green") //對(duì)第三個(gè)li標(biāo)簽進(jìn)行操作
// $("li:last").css("color","pink") //對(duì)最后一個(gè)li標(biāo)簽進(jìn)行操作
// $("li:even").css("color","green") //對(duì)排序?yàn)榛鶖?shù)的li標(biāo)簽進(jìn)行操作
// $("li:odd").css("color","red") //對(duì)排序?yàn)榕紨?shù)的li標(biāo)簽進(jìn)行操作
// $("li:gt(2)").css("color","red") //對(duì)大于第二個(gè)(不包含第2個(gè))的li標(biāo)簽(排序從0開始)進(jìn)行操作
// $("li:lt(2)").css("color","green") //對(duì)小于第二個(gè)(不包含第2個(gè))的li標(biāo)簽(排序從0開始)進(jìn)行操作
</script>
</body>
</html>1.4屬性選擇器
$(“[class=’classname’][id=’idname’]”)：選擇class=’classname’且id=’idname’的標(biāo)簽進(jìn)行操作；
代碼塊如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul type="circle">
<li id="l1" class="l">第一個(gè)li標(biāo)簽</li>
<li id="l2" class="l">第二個(gè)li標(biāo)簽</li>
<li>第三個(gè)li標(biāo)簽</li>
<li>第四個(gè)li標(biāo)簽</li>
<li>第五個(gè)li標(biāo)簽</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$("[class='l'][id='l2']").css("color","red") //對(duì)class='l'且id='l2'的標(biāo)簽進(jìn)行操作
</script>
</body>
</html>1.5 表單選擇器
$(“:type”):其中type的值為text/checkbox/radio的任意一種，對(duì)type=’text’的input標(biāo)簽進(jìn)行操作；
代碼塊如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text"> 111
<input type="checkbox"> 222
<input type="radio"> 333
<input type="text"> 444
<script src="jquery-3.3.1.js"></script>
<script>
$(":text").css("width","300px")
$(":checkbox").css("width","200px")
$(":radio").css("height","50px")
</script>
</body>
</html>2.篩選器
常見的篩選器如下:
$(".outer p").hasClass("pp") //判斷class='outer'下的class='pp'的p標(biāo)簽是否存在，返回結(jié)果為布爾值
$(".outer").eq(2).css("color","red")//操作第二個(gè)class='outer'的標(biāo)簽
$(".outer").children("p").css("color","green") //class='outer'內(nèi)的第一個(gè)p標(biāo)簽
$(".outer").find("p").css("color","red") //class='outer'內(nèi)的所有p標(biāo)簽
//next向下
$(".inner1").next("p").css("color","red") //class='inner1'下方(與其同級(jí)別)其與其相鄰的第1個(gè)p標(biāo)簽
$(".inner1").nextAll("p").css("color","red") //class='inner1'下方(與其同級(jí)別)的所有p標(biāo)簽
$(".inner1").nextUntil(".p53").css("color","red") //class='inner1'下方(與其同級(jí)別)的直到class='p53'(不包含p53)的所有p標(biāo)簽
//prev向上
$(".inner2").prev().css("color","red") //class='inner2'上方(與其同級(jí)別)其與其相鄰的第1個(gè)標(biāo)簽
$(".inner2").prevAll().css("color","red") //class='inner2'上方(與其同級(jí)別)的所有標(biāo)簽
$(".inner2").prevUntil("#u1").css("color","red") //class='inner2'上方(與其同級(jí)別)的直到id='u1'(不包含u1)的所有p標(biāo)簽
//parent向外
$(".pp").parent().css("color","red") //對(duì)class='pp'的第一級(jí)父級(jí)標(biāo)簽進(jìn)行操作
$(".pp").parents().css("color","red") //對(duì)class='pp'的所有父級(jí)標(biāo)簽進(jìn)行操作,默認(rèn)直到HTML的最外層html標(biāo)簽
$(".pp").parentsUntil("#d1").css("color","red") //對(duì)class='pp'的直到id='d1'(不包含d1這一層)的所有父級(jí)標(biāo)簽進(jìn)行操作
//兄弟標(biāo)簽
$(".pp").siblings().css("color","red") //對(duì)class='pp'所有兄弟標(biāo)簽(即:與.pp同級(jí)的所有標(biāo)簽)進(jìn)行操作
代碼塊如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p1">這是P標(biāo)簽1</p>
<div id="d1">welcome to jQuery
<div class="outer">這是div標(biāo)簽外圍1
<p>這是P標(biāo)簽2</p>
<div class="inner1">這是div標(biāo)簽內(nèi)部
<p class="pp">這是P標(biāo)簽31</p>
<p>這是P標(biāo)簽32</p>
</div>
<u id="u1">這是下劃線</u>
<span class="outer">這是span標(biāo)簽1</span>
<p>這是P標(biāo)簽4</p>
<span class="outer2">這是span標(biāo)簽2</span>
<p>這是P標(biāo)簽51</p>
<div class="inner2">這是div標(biāo)簽內(nèi)部2
<p>這是P標(biāo)簽321</p>
<p>這是P標(biāo)簽322</p>
</div>
<p>這是P標(biāo)簽52</p>
<p class="p53">這是P標(biāo)簽53</p>
<p>這是P標(biāo)簽54</p>
</div>
<p>這是P標(biāo)簽6</p>
</div>
<span class="outer">這是span標(biāo)簽</span>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
// $(".outer p").hasClass("pp") //判斷class='outer'下的class='pp'的p標(biāo)簽是否存在，返回結(jié)果為布爾值
// $(".outer").eq(2).css("color","red") //操作第二個(gè)class='outer'的標(biāo)簽
// $(".outer").children("p").css("color","green") //class='outer'內(nèi)的第一個(gè)p標(biāo)簽
// $(".outer").find("p").css("color","red") //class='outer'內(nèi)的所有p標(biāo)簽
//next向下
// $(".inner1").next("p").css("color","red") //class='inner1'下方(與其同級(jí)別)其與其相鄰的第1個(gè)p標(biāo)簽
// $(".inner1").nextAll("p").css("color","red") //class='inner1'下方(與其同級(jí)別)的所有p標(biāo)簽
// $(".inner1").nextUntil(".p53").css("color","red") //class='inner1'下方(與其同級(jí)別)的直到class='p53'(不包含p53)的所有p標(biāo)簽
//prev向上
// $(".inner2").prev().css("color","red") //class='inner2'上方(與其同級(jí)別)其與其相鄰的第1個(gè)標(biāo)簽
// $(".inner2").prevAll().css("color","red") //class='inner2'上方(與其同級(jí)別)的所有標(biāo)簽
// $(".inner2").prevUntil("#u1").css("color","red") //class='inner2'上方(與其同級(jí)別)的直到id='u1'(不包含u1)的所有p標(biāo)簽
//parent向外
// $(".pp").parent().css("color","red") //對(duì)class='pp'的第一級(jí)父級(jí)標(biāo)簽進(jìn)行操作
// $(".pp").parents().css("color","red") //對(duì)class='pp'的所有父級(jí)標(biāo)簽進(jìn)行操作,默認(rèn)直到HTML的最外層html標(biāo)簽
// $(".pp").parentsUntil("#d1").css("color","red") //對(duì)class='pp'的直到id='d1'(不包含d1這一層)的所有父級(jí)標(biāo)簽進(jìn)行操作
//兄弟標(biāo)簽
// $(".pp").siblings().css("color","red") //對(duì)class='pp'所有兄弟標(biāo)簽(即:與.pp同級(jí)的所有標(biāo)簽)進(jìn)行操作
</script>
</html>三．jQuery其他操作
1.屬性
$(":checkbox:first").attr("custome") //attr()一個(gè)值是進(jìn)行查詢屬性值
$(":checkbox:first").attr("myclass","test") //attr()一個(gè)值是進(jìn)行查詢屬性值，兩個(gè)值是進(jìn)行賦值
$(":checkbox:first").prop("custome") //prop()一個(gè)值是進(jìn)行查詢屬性值
$(":checkbox:first").prop("class","myclss") //prop()一個(gè)值是進(jìn)行查詢屬性值，兩個(gè)值是進(jìn)行賦值
實(shí)例代碼塊：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="checkbox" checked="checked">男
<input type="checkbox" custome="myself">女
</div>
<script src="jquery-3.3.1.js"></script>
<script>
//attr方法既可操作元素自帶的屬性又可操作元素自定義的屬性
// console.log($(":checkbox:first").attr("custome"))
// console.log($(":checkbox:last").attr("custome"))
// console.log($(":checkbox:first").attr("myclass","test")) //attr()一個(gè)值是進(jìn)行查詢屬性值，兩個(gè)值是進(jìn)行賦值
//prop方法只能操作元素自帶的屬性
// console.log($(":checkbox:first").prop("custome"))
// console.log($(":checkbox:last").prop("custome"))
// console.log($(":checkbox:first").prop("class","myclss")) //prop()一個(gè)值是進(jìn)行查詢屬性值，兩個(gè)值是進(jìn)行賦值
// console.log($(":checkbox:first").hasClass("myclss"))
//attr方法既可操作元素自帶的屬性又可操作元素自定義的屬性
// console.log($(":checkbox:first").removeAttr("custome"))
// console.log($(":checkbox:last").removeAttr("custome"))
//prop方法只能操作元素自帶的屬性
// console.log($(":checkbox:first").removeProp("custome"))
// console.log($(":checkbox:last").removeProp("custome"))
</script>
</body>
</html>2 操作class的值
$(":checkbox:first").addClass(classname);//addClass(classname) 增加class
$(":checkbox:first").removeClass(classname);//removeClass(classname) 增加class
示例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="checkbox" checked="checked" class="input1">男
<input type="checkbox" custome="myself">女
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(":checkbox:first").addClass("input2");//addClass(classname) 增加class
console.log($(":checkbox:first").hasClass("input2"))
$(":checkbox:first").removeClass("input2");//removeClass(classname) 增加class
console.log($(":checkbox:first").hasClass("input2"))
</script>
</body>
</html>3.操作HTML代碼/文本/值
$(":checkbox:first").html() //獲取html的代碼(不帶自身標(biāo)簽,但是包含div的文本及子標(biāo)簽下的所有html內(nèi)容)
$(".d1").text() //獲取text的內(nèi)容(不帶div標(biāo)簽,包含div及子標(biāo)簽下的所有文本)
$(".d1").html("newhtml")) //設(shè)置(更改整個(gè)div下的)html的代碼(不帶div標(biāo)簽,但是帶div下的所有子標(biāo)簽)
$(".d1").text("newtxet")) //設(shè)置(更改)整個(gè)div下的text的代碼(不帶div標(biāo)簽,但是帶div下的所有子標(biāo)簽)
$(":text").val() //獲取input的value值。注意:只能用于獲取再帶value屬性的值
$(":text").val("newvalue") //獲取input的value值。注意:只能用于獲取再帶value屬性的值
實(shí)例代碼塊如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div class="d1">
這個(gè)div標(biāo)簽
<p value="p">保險(xiǎn)業(yè)務(wù)</p>
<input type="text" value="input">
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
// $(":checkbox:first").html() //獲取html的代碼(不帶自身標(biāo)簽,但是包含div的文本及子標(biāo)簽下的所有html內(nèi)容)
// console.log($(".d1").html())
// $(":checkbox:first").text() //獲取html的代碼(帶自身標(biāo)簽)
// console.log($(".d1").text()) //獲取text的內(nèi)容(不帶div標(biāo)簽,包含div及子標(biāo)簽下的所有文本)
// $(".d1").html("newhtml")) //設(shè)置(更改整個(gè)div下的)html的代碼(不帶div標(biāo)簽,但是帶div下的所有子標(biāo)簽)
// console.log($(".d1").html("<h2>hhh</h2>"))
// $(".d1").text("newtxet")) //設(shè)置(更改)整個(gè)div下的text的代碼(不帶div標(biāo)簽,但是帶div下的所有子標(biāo)簽)
// console.log($(".d1").text("<h2>hhh</h2>"))
// $(":text").val() //獲取input的value值。注意:只能用于獲取再帶value屬性的值
// console.log($(":text").val())
// console.log($("p").val()) //因?yàn)閜標(biāo)簽中不是自帶的value屬性，所以無法通過val()方法獲取對(duì)應(yīng)的value值
// $(":text").val("newvalue") //獲取input的value值。注意:只能用于獲取再帶value屬性的值
$(":text").val("newinput") //設(shè)置input標(biāo)簽的value值為newinput
console.log($(":text").val())
</script>
</body>
</html>4.Css樣式操作
$("#d1").css("color","red") //單個(gè)css樣式設(shè)置
//$("#d1").css({"color":"red","background-color":"pink"}) //多個(gè)css樣式設(shè)置
實(shí)例代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<div class="d1">
這個(gè)div標(biāo)簽
<p value="p">保險(xiǎn)業(yè)務(wù)</p>
<input type="text" value="input">
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$("#d1").css("color","red") //單個(gè)css樣式設(shè)置
//$("#d1").css({"color":"red","background-color":"pink"}) //多個(gè)css樣式設(shè)置
</script>
</body>
</html>5.jQuery循環(huán)方式
三種循環(huán)方法，1.js的for循環(huán)語法；2.$.each(callbackobj,function(形參x,形參2))，其中形參1的值是遍歷對(duì)象的索引，形參2的值是索引對(duì)應(yīng)的值;3.$.elements.each(),其中$.elements表示元素集合；
實(shí)例代碼塊如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>p標(biāo)簽1</p>
<p>p標(biāo)簽2</p>
<p>p標(biāo)簽3</p>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
arr=["aaa",222,"ccc"]
//方式一,js的for循環(huán)方式
for(i=0;i<arr.length;i++){
$("p").eq(i).html(arr[i]);
}
//方式二,jQuery的$.each()函數(shù),其中each(callbackobj,function(x,y)),callbackobj為要遍歷的對(duì)象,function(x,y)函數(shù)為固定格式,形參x,y分別表示遍歷對(duì)象的索引和索引對(duì)應(yīng)的值
$.each(arr,function (a,b) {
console.log(a);
console.log(b);
})
//jQuery的$.elements.each()函數(shù)
$("p").each(function () {
// $(this) //集合循環(huán)的每個(gè)對(duì)象
console.log($(this).html())
})
</script>
</html>5.1循環(huán)的一個(gè)應(yīng)用(全選/反選/取消)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
background-color: lemonchiffon;
text-align: center;
}
td{
width: 100px;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><input class="check" type="checkbox"></td>
<td>玫瑰</td>
<td>杜鵑</td>
</tr>
<tr>
<td><input class="check" type="checkbox"></td>
<td>白菜</td>
<td>西紅柿</td>
</tr>
<tr>
<td > <input class="check" type="checkbox"></td>
<td>蘋果</td>
<td>香梨</td>
</tr>
<tr>
<td><button onclick="selectAll()">全選</button></td>
<td><button onclick="reserve()">反選</button></td>
<td><button onclick="cancel()" >取消</button></td>
</tr>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
function selectAll(){
$(".check").each(function () {
$(".check").prop("checked",true)
})
}
function reserve() {
$(".check").each(function () {
if($(this).prop("checked")){
$(this).prop("checked",false)
}
else {
$(this).prop("checked",false)
}
})
}
function cancel(){
$(".check").each(function () {
$(".check").prop("checked",false)
})
}
</script>
</body>
</html>四．jQuery文檔處理
1.內(nèi)部文檔插入
append()的用法，作用:在父標(biāo)簽下添加一個(gè)子標(biāo)簽
appendTo()的用法，作用:將子標(biāo)簽添加到父標(biāo)簽下
prepend(),用法:將標(biāo)簽添加到指定標(biāo)簽的前面
prepend(),用法:將標(biāo)簽添加到指定標(biāo)簽的前面
實(shí)例代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="inner">
<p>這個(gè)是P標(biāo)簽</p>
</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//定義一個(gè)變量，并創(chuàng)建一個(gè)標(biāo)簽賦值給該變量
var $eleh2= $("<h2>這是append的h2標(biāo)簽</h2>")
//append()的用法，作用:在父標(biāo)簽下添加一個(gè)子標(biāo)簽
$(".inner").append($eleh2);
var $eleh3= $("<h3>這是appendTo的h3標(biāo)簽</h3>")
//appendTo()的用法，作用:將子標(biāo)簽添加到父標(biāo)簽下
$eleh3.appendTo(".inner")
var $eleh4 = $("<h4>這是prepend的h4標(biāo)簽</h4>")
//prepend(),用法:將標(biāo)簽添加到指定標(biāo)簽的前面
$(".inner").prepend($eleh4)
var $eleh5 = $("<h5>這是prependTo的h5標(biāo)簽</h5>")
//prepend(),用法:將標(biāo)簽添加到指定標(biāo)簽的前面
$eleh5.prependTo(".inner")
</script>
</html>2.外部插入
after()用法:例如:A.after(B),將標(biāo)簽B插入到A標(biāo)簽之后
insertAfter()用法:例如:B.insertAfter(A),將標(biāo)簽B插入到A標(biāo)簽之后
before()用法:例如:A.before(B),將標(biāo)簽B插入到A標(biāo)簽之前
insertAfter()用法:例如:B.insertAfter(A),將標(biāo)簽B插入到A標(biāo)簽之前
實(shí)例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="inner">
<p>這個(gè)是P標(biāo)簽</p>
</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
var $eleh2= $("<h2>這是after的h2標(biāo)簽</h2>")
//after()用法:例如:A.after(B),將標(biāo)簽B插入到A標(biāo)簽之后
$(".inner").after($eleh2)
var $eleh3= $("<h2>這是insertAfter的h2標(biāo)簽</h2>")
//insertAfter()用法:例如:B.insertAfter(A),將標(biāo)簽B插入到A標(biāo)簽之后
$eleh3.insertAfter(".inner")
var $eleh4= $("<h4>這是before的h2標(biāo)簽</h4>")
//before()用法:例如:A.before(B),將標(biāo)簽B插入到A標(biāo)簽之前
$(".inner").before($eleh4)
var $eleh5= $("<h2>這是insertAfter的h5標(biāo)簽</h2>")
//insertAfter()用法:例如:B.insertAfter(A),將標(biāo)簽B插入到A標(biāo)簽之前
$eleh5.insertBefore(".inner")
</script>
</html>3.替換
replaceWith()用法:例如:B.replaceWith(A),將標(biāo)簽B替換成標(biāo)簽A
實(shí)例代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="inner">
<p>這個(gè)是P標(biāo)簽</p>
</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//替換
var $eleh5= $("<h2>這是insertAfter的h5標(biāo)簽</h2>")
//replaceWith()用法:例如:B.replaceWith(A),將標(biāo)簽B替換成標(biāo)簽A
$("p").replaceWith($eleh5)
</script>
</html>4.清空/刪除
$("p").empty(); //只會(huì)清空標(biāo)簽中的內(nèi)容，不會(huì)刪除標(biāo)簽本身
$("p").remove() //會(huì)刪除整個(gè)標(biāo)簽本身(包含標(biāo)簽內(nèi)部的內(nèi)容)
實(shí)例代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="inner">
<p>這個(gè)是P標(biāo)簽</p>
</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//清空、刪除
$("p").empty(); //只會(huì)清空標(biāo)簽中的內(nèi)容，不會(huì)刪除標(biāo)簽本身
$("p").remove() //會(huì)刪除整個(gè)標(biāo)簽本身(包含標(biāo)簽內(nèi)部的內(nèi)容)
</script>
</html>5.復(fù)制
$("p").clone() //clone()用法:A.clone()復(fù)制一次A標(biāo)簽
五．Css操作
1.Css樣式操作
1.1$("#d1").css("color","red") //單個(gè)css樣式設(shè)置
1.2$("#d1").css({"color":"red","background-color":"pink"}) //多個(gè)css樣式設(shè)置
實(shí)例代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<div class="d1">
這個(gè)div標(biāo)簽
<p value="p">保險(xiǎn)業(yè)務(wù)</p>
<input type="text" value="input">
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$("#d1").css("color","red") //單個(gè)css樣式設(shè)置
//$("#d1").css({"color":"red","background-color":"pink"}) //多個(gè)css樣式設(shè)置
</script>
</body>
</html>2.位置
2.1 offset()是相對(duì)于視口(瀏覽器窗口)的距離
2.2 position()是相對(duì)于進(jìn)行了定位的父級(jí)容器的距離,所有標(biāo)簽的默認(rèn)定位均是瀏覽器視口
示例代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
color: red;
}
.d1{
width: 200px;
height: 200px;
background-color: aquamarine;
}
.d2{
width: 100px;
height: 100px;
background-color: fuchsia;
}
.inner{
position: absolute;
}
</style>
</head>
<body>
<div class="outer">
<div class="d1"></div>
<div class="inner">
<div class="d2"></div>
</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//offset()是相對(duì)于視口(瀏覽器窗口)的距離
//$(".d1").html("top="+$(".d1").offset().top+";left="+$(".d1").offset().left) //相對(duì)于視口(瀏覽器窗口)的距離
// $(".d2").html("top="+$(".d2").offset().top+";left="+$(".d2").offset().left) //相對(duì)于視口(瀏覽器窗口)的距離
//position()是相對(duì)于進(jìn)行了定位的父級(jí)容器的距離,所有標(biāo)簽的默認(rèn)定位均是瀏覽器視口
//$(".d1").html("top="+$(".d1").position().top+";left="+$(".d1").position().left)
//d1父級(jí)是outer,outer未進(jìn)行定位所以默認(rèn)選用瀏覽器來進(jìn)行計(jì)算位置
//$(".d2").html("top="+$(".d2").position().top+";left="+$(".d2").position().left)
//d2父類是inner,inner進(jìn)行絕對(duì)定位，所以d2的位置是相對(duì)于inner來進(jìn)行計(jì)算的
</script>
</html>2.3 $(window).scrollTop():滾動(dòng)條滾動(dòng)離頂部的距離
$(window).scrollTop(num):設(shè)置滾動(dòng)條滾動(dòng)離頂部的距離等于num(單位px)
實(shí)例代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.d1,.d2{
width: 100%;
height: 800px;
}
.d1{
width: 2000px;
overflow: scroll;
background-color: lavenderblush;
}
.d2{
background-color: darkgoldenrod;
}
.returntop{
width: 80px;
height: 30px;
background-color: lemonchiffon;
color: indianred;
text-align: center;
line-height: 30px;
font-size: 10px;
position: fixed;
bottom: 20px;
right: 20px;
}
.returnleft{
width: 80px;
height: 30px;
background-color: lemonchiffon;
color: indianred;
text-align: center;
line-height: 30px;
font-size: 10px;
position: fixed;
top: 20px;
right: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div class="d1">
</div>
<div class="returnleft hide">返回左部</div>
<div class="d2"></div>
<div class="returntop hide">返回頂部</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//window.onscroll 通過window對(duì)象的onscroll來監(jiān)聽
window.onscroll = function () {
if($(window).scrollTop()>500){
$(".returntop").removeClass("hide")
}
else if($(window).scrollTop()<=500){
$(".returntop").addClass("hide")
}
}
//window.onscroll 通過window對(duì)象的onscroll來監(jiān)聽
//注意:兩個(gè)監(jiān)聽事件,以后一個(gè)時(shí)間為主
window.onscroll = function () {
if($(window).scrollLeft()>500){
console.log(">100")
$(".returnleft").removeClass("hide")
}
else{
console.log("<=100")
$(".returnleft").addClass("hide")
}
}
$(".returntop").click(function () {
$(".d1").scrollTop(0);
})
$(".returnleft").click(function () {
$(window).scrollLeft(0);
})
</script>
</html>3.尺寸
3.1 height()/width():指內(nèi)容區(qū)的高寬,不包含padding和margin區(qū)域
3.2 innerHeight()/innerHeight():指包含padding區(qū)域的高寬
3.3 outerHeight()/outerWidth():指包含padding區(qū)域的高寬
3.4 outerHeight(true)/outerWidth(true):指帶true參數(shù)則包含padding和margin區(qū)域的高寬
實(shí)例代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
color: red;
}
.d1{
width: 200px;
height: 200px;
background-color: aquamarine;
margin: 10px;
padding: 5px;
}
.d2{
width: 100px;
height: 100px;
background-color: fuchsia;
}
.inner{
position: absolute;
}
</style>
</head>
<body>
<div class="outer">
<div class="d1"></div>
<div class="inner">
<div class="d2"></div>
</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
$(".d1").html("height="+$(".d1").height()+";width="+$(".d1").width()) //height()/width():指內(nèi)容區(qū)的高寬,不包含padding和margin區(qū)域
$(".d1").html("innerHeight="+$(".d1").innerHeight()+";innerWidth="+$(".d1").innerWidth()) //innerHeight()/innerHeight():指包含padding區(qū)域的高寬
$(".d1").html("outerHeight="+$(".d1").outerHeight()+";outerWidth="+$(".d1").outerWidth()) //outerHeight()/outerWidth():指包含padding區(qū)域的高寬
$(".d1").html("outerHeight="+$(".d1").outerHeight(true)+";outerWidth="+$(".d1").outerWidth(true)) //outerHeight(true)/outerWidth(true):指帶true參數(shù)則包含padding和margin區(qū)域的高寬</script>
</html>六．事件
1.事件綁定方式
1.1格式:格式:$("").bind("event",function()){function body}
注意:同一個(gè)標(biāo)簽綁定了先后綁定了2個(gè)事件，則按jquery代碼先后順序執(zhí)行這2個(gè)事件
1.2事件解除綁定方式
格式:$("").unbind("event")
代碼塊如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>aaa</li>
<li class="b">bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//需求:給所有的li標(biāo)簽綁定點(diǎn)擊(click)事件，點(diǎn)擊后彈框提示
//格式:$("").bind("event",function()){function body}
$("ul li").bind("click",function () {
alert("bind click event");
})
//給第3個(gè)li標(biāo)簽解除綁定事件
//格式:$("").unbind("event")
$("ul li").eq(2).unbind("click")
//同一個(gè)標(biāo)簽綁定了先后綁定了2個(gè)事件，則按jquery代碼先后順序執(zhí)行這2個(gè)事件
$("ul li").eq(3).bind("click",function () {
alert("3333");
})
</script>
</html>2.事件委托
需求:給所有的li標(biāo)簽綁定點(diǎn)擊(click)事件，點(diǎn)擊后彈框提示,并且點(diǎn)擊addli是添加一個(gè)li標(biāo)簽;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>aaa</li>
<li class="b">bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
<button class="add">addli</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//需求:給所有的li標(biāo)簽綁定點(diǎn)擊(click)事件，點(diǎn)擊后彈框提示,并且點(diǎn)擊addli是添加一個(gè)li標(biāo)簽
$("ul li").bind("click",function () {
alert("999牌感冒靈");
})
$(".add").bind("click",function () {
var $ele = $("<li>");
var len = $("li").length;
$ele.html(len+1);
$("ul").append($ele);
})
</script>
</html>此時(shí)發(fā)現(xiàn)，后面添加的li標(biāo)簽的點(diǎn)擊事件不再進(jìn)行彈框提示，那么如何解決該問題呢？
我們使用另外一種方式解決.格式:
$("").on("event",[elementsselector],[data],function()){function body}
代碼塊如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>aaa</li>
<li class="b">bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
<button class="add">addli</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//需求:給所有的li標(biāo)簽綁定點(diǎn)擊(click)事件，點(diǎn)擊后彈框提示,并且點(diǎn)擊addli是添加一個(gè)li標(biāo)簽
// $("ul li").bind("click",function () {
// alert("999牌感冒靈");
// }) //該方法，后增的li標(biāo)簽點(diǎn)擊事件不能進(jìn)行彈框提示
$(".add").bind("click",function () {
var $ele = $("<li>");
var len = $("li").length;
$ele.html(len+1);
$("ul").append($ele);
})
//此時(shí)發(fā)現(xiàn)，后面添加的li標(biāo)簽的點(diǎn)擊事件不再進(jìn)行彈框提示，那么如何解決該問題呢？我們使用另外一種方式解決
//格式:$(" ").on("event",[elementsselector],[data],function()){}
$("ul").bind("click","li",function () {
alert("999牌感冒靈");
})
</script>
</html>3.事件綁定與事件委托的區(qū)別
事件綁定(bind)和事件委托(on)在處理上并不相同，事件綁定是先找到要觸發(fā)事件的元素(標(biāo)簽)，直接進(jìn)行事件綁定(也就是說事先已經(jīng)拿到了所有的需要綁定的元素)；而事件委托是先找到觸發(fā)事件元素的父級(jí)，相當(dāng)于臨時(shí)綁定，只有當(dāng)觸發(fā)時(shí)才發(fā)進(jìn)行綁定(也就是說事先沒有指定哪些元素可以觸發(fā)事件，在后期可變化)。所以，事件委托可以實(shí)現(xiàn)2中的需求而事件綁定則不行。
4.事件準(zhǔn)備
我們知道，js代碼是加載一行執(zhí)行一行，如果把JavaScript代碼放在document之前，則會(huì)發(fā)生找到元素而不能正確執(zhí)行JavaScript代碼，達(dá)不到理想中的效果。在jQuery中也一樣，為了解決該問題，JavaScript中使用了load方法，在jQuery中使用read方法。
格式1:$(document).ready(function () {
等待document加載完成才執(zhí)行的代碼塊
}
格式2:$(function () {
等待document加載完成才執(zhí)行的代碼塊
})
實(shí)例代碼如下:(改寫2中的代碼塊)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
//需求:給所有的li標(biāo)簽綁定點(diǎn)擊(click)事件，點(diǎn)擊后彈框提示,并且點(diǎn)擊addli是添加一個(gè)li標(biāo)簽
$(document).ready(function () {
$(".add").bind("click",function () {
var $ele = $("<li>");
var len = $("li").length;
$ele.html(len+1);
$("ul").append($ele);
})
$("ul").bind("click","li",function () {
alert("999牌感冒靈");
})
})
</script>
</head>
<body>
<ul>
<li>aaa</li>
<li class="b">bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
<button class="add">addli</button>
</body>
</html>5.事件委托中data參數(shù)的使用
事件委托格式:
$("").on("event",[elementsselector],[data],function()){function body}
作用:將data中的參數(shù)傳給function函數(shù)使用
實(shí)例代碼塊如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
data = {name:"張三",age:"22"}
function showinfo(event){
alert(event.data.name+";"+event.data.age);
}
$("li").on("click",data,showinfo)
})
</script>
</head>
<body>
<ul>
<li>aaa</li>
<li class="b">bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
<button class="add">addli</button>
</body>
</html>七．jQuery動(dòng)畫效果
1.切換效果
$().show(time) 效果顯示函數(shù)time單位為毫秒，可不帶時(shí)間,不帶時(shí)間則快速展示
$().hide(time) 效果隱藏函數(shù)time單位為毫秒，可不帶時(shí)間,不帶時(shí)間則快速隱藏
$().toggle(time) 效果切換函數(shù)time單位為毫秒，可不帶時(shí)間,不帶時(shí)間則快速切換(切換是指當(dāng)前為顯示狀態(tài)的則變成隱藏效果，當(dāng)前為隱藏狀態(tài)的則變成顯示效果)
代碼塊如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(window).ready(function () {
$(".b1").click(function () {
//$().show(time) 效果顯示函數(shù)time單位為毫秒，可不帶時(shí)間,不帶時(shí)間則快速展示
$("img").show(1000);
})
$(".b2").click(function () {
//$().hide(time) 效果隱藏函數(shù)time單位為毫秒，可不帶時(shí)間,不帶時(shí)間則快速隱藏
$("img").hide(1000);
})
$(".b3").click(function () {
//$().toggle(time) 效果切換函數(shù)time單位為毫秒，可不帶時(shí)間,不帶時(shí)間則快速切換(切換是指當(dāng)前為顯示狀態(tài)的則變成隱藏效果，當(dāng)前為隱藏狀態(tài)的則變成顯示效果)
$("img").toggle(1000);
})
})
</script>
</head>
<body>
<div>
<img src="bfff64c7.jpg" title="None">
</div>
<button class="b1">顯示</button>
<button class="b2">隱藏</button>
<button class="b3">切換</button>
</body>
</html>2.滑動(dòng)效果
與切換效果類似，三個(gè)對(duì)應(yīng)的函數(shù)分別為：$().slideDown();$().slideUp();$().slideToggle();
實(shí)例代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(window).ready(function () {
$(".b1").click(function () {
//$().slideDown(time) 效果顯示函數(shù)time單位為毫秒，可不帶時(shí)間,不帶時(shí)間則快速展示
$("img").slideDown(1000);
})
$(".b2").click(function () {
//$().slideUp(time) 效果隱藏函數(shù)time單位為毫秒，可不帶時(shí)間,不帶時(shí)間則快速隱藏
$("img").slideUp(1000);
})
$(".b3").click(function () {
//$().slideToggle(time) 效果切換函數(shù)time單位為毫秒，可不帶時(shí)間,不帶時(shí)間則快速切換(切換是指當(dāng)前為顯示狀態(tài)的則變成隱藏效果，當(dāng)前為隱藏狀態(tài)的則變成顯示效果)
$("img").slideToggle(1000);
})
})
</script>
</head>
<body>
<div>
<img src="bfff64c7.jpg" title="None">
</div>
<button class="b1">顯示</button>
<button class="b2">隱藏</button>
<button class="b3">切換</button>
</body>
</html>3.淡入淡出
根據(jù)更改透明度來展示或隱藏元素
$().fadeIn(time) 效果淡出(顯示,透明值為1)函數(shù)time單位為毫秒，可不帶時(shí)間,不帶時(shí)間則快速淡化展示
$().fadeOut(time) 效果淡入(隱藏,透明值為0)函數(shù)time單位為毫秒，可不帶時(shí)間,不帶時(shí)間則快速淡化隱藏
$().fadeToggle(time) 淡入淡出效果切換函數(shù),time單位為毫秒，可不帶時(shí)間,不帶時(shí)間則快速切換(切換是指當(dāng)前為顯示狀態(tài)的則淡化變成隱藏效果，當(dāng)前為隱藏狀態(tài)的則淡化變成顯示效果)
$().fadeTo(time,pram) 效果切換到指定效果函數(shù),time單位為毫秒(必須帶)，pram為設(shè)置淡入淡出最終的透明值(必須帶),(該函數(shù)是將當(dāng)前狀態(tài)切換到設(shè)定的透明度效果狀態(tài))
實(shí)例代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(window).ready(function () {
$(".b1").click(function () {
//$().fadeIn(time) 效果淡出(顯示,透明值為1)函數(shù)time單位為毫秒，可不帶時(shí)間,不帶時(shí)間則快速淡化展示
$("img").fadeIn(1000);
})
$(".b2").click(function () {
//$().fadeOut(time) 效果淡入(隱藏,透明值為0)函數(shù)time單位為毫秒，可不帶時(shí)間,不帶時(shí)間則快速淡化隱藏
$("img").fadeOut(1000);
})
$(".b3").click(function () {
//$().fadeToggle(time) 淡入淡出效果切換函數(shù),time單位為毫秒，可不帶時(shí)間,不帶時(shí)間則快速切換(切換是指當(dāng)前為顯示狀態(tài)的則淡化變成隱藏效果，當(dāng)前為隱藏狀態(tài)的則淡化變成顯示效果)
$("img").fadeToggle(1000);
})
$(".b4").click(function () {
//$().fadeTo(time,pram) 效果切換到指定效果函數(shù),time單位為毫秒(必須帶)，pram為設(shè)置淡入淡出最終的透明值(必須帶),(該函數(shù)是將當(dāng)前狀態(tài)切換到設(shè)定的透明度效果狀態(tài))
$("img").fadeTo(1000,0.3);
})
})
</script>
</head>
<body>
<div>
<img src="bfff64c7.jpg" title="None">
</div>
<button class="b1">顯示</button>
<button class="b2">隱藏</button>
<button class="b3">切換</button>
<button class="b4">特定切換</button>
</body>
</html>4.回調(diào)函數(shù)
下列所有的function函數(shù)均為回調(diào)函數(shù)，回調(diào)函數(shù)即為等待執(zhí)行完某函數(shù)后再去執(zhí)行的函數(shù)。
$().show(time,function () {
//等待time毫秒執(zhí)行完show()函數(shù)后再執(zhí)行function
function body
});
$().hide(time,function () {
//等待time毫秒執(zhí)行完hide()函數(shù)后再執(zhí)行function
function body
});
$().toggle(time,function () {
//等待time毫秒執(zhí)行完toggle()函數(shù)后再執(zhí)行function
function body
});
$().slideDown(time,function () {
//等待time毫秒執(zhí)行完slideDown()函數(shù)后再執(zhí)行function
function body
});
$().slideUp(time,function () {
//等待time毫秒執(zhí)行完slideUp()函數(shù)后再執(zhí)行function
function body
});
$().slideToggle(time,function () {
//等待time毫秒執(zhí)行完slideToggle()函數(shù)后再執(zhí)行function
function body
});
$().fadeIn(time,function () {
//等待time毫秒執(zhí)行完fadeIn()函數(shù)后再執(zhí)行function
function body
});
$().fadeOut(time,function () {
//等待time毫秒執(zhí)行完fadeOut()函數(shù)后再執(zhí)行function
function body
});
$().fadeToggle(time,function () {
//等待time毫秒執(zhí)行完fadeToggle()函數(shù)后再執(zhí)行function
function body
});
$().fadeTo(time,pram,function () {
//等待time毫秒執(zhí)行完fadeTo()函數(shù)后再執(zhí)行function
function body
});
八．jQuery擴(kuò)展方法/插件機(jī)制(自定義方法)
作用:當(dāng)jQuery中的標(biāo)準(zhǔn)庫提供的方法不能達(dá)到我們想要的效果時(shí)，我們可以通過擴(kuò)展方法來自定義方法來讓jQuery調(diào)用已達(dá)到理想效果。
用jQuery寫自己寫插件時(shí)，最核心的兩個(gè)方法。
1.為jQuery添加一個(gè)靜態(tài)方法,格式:$.extend(object)
實(shí)例代碼塊如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//為jQuery添加一個(gè)靜態(tài)方法
//格式:$.extend(object)
$.extend({
min:function (a,b) { //自定義的函數(shù)必須用別名的方式
return(a<b?a:b);
},//注意此處用的是逗號(hào)
max:function (a,b) { //自定義的函數(shù)必須用別名的方式
return(a<b?b:a);
}
})
$(".p1").click(function () {
alert($.min(4,78));
})
alert($.max(4,78));
})
</script>
</head>
<body>
<div>
<p class="p1">點(diǎn)我呀</p>
</div>
</body>
</html>2.為jQuery添加一個(gè)方法,格式:$.fn.extend(object)
實(shí)例代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//為jQuery添加一個(gè)方法
//格式:$.fn.extend(object)
$.fn.extend({
min1:function (a,b) { //自定義的函數(shù)必須用別名的方式
return(a<b?10*a:10*b);
},//注意此處用的是逗號(hào)
max1:function (a,b) { //自定義的函數(shù)必須用別名的方式
return(a<b?10*b:10*a);
}
})
$(".p1").click(function () {
alert($.fn.min1(4,78)); 使用自定義函數(shù)
})
alert($.fn.max1(4,78)); 使用自定義函數(shù)
})
</script>
</head>
<body>
<div>
<p class="p1">點(diǎn)我呀</p>
</div>
</body>
</html>九.歡迎關(guān)注作者公眾號(hào)
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼