整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
jQuery官網(wǎng)：https://jquery.com/
jQuery是一個(gè)高效、輕量并且功能豐富的js庫(kù)。
核心在于查詢query。
jQuery是一個(gè)優(yōu)秀的js函數(shù)庫(kù)，是React/Vue/Angular框架之外中大型項(xiàng)目的首選。
jQuery的主旨是write less, do more。
引入jQuery的方式有2種，一種是項(xiàng)目中直接引入jQuery的min.js文件，一種是使用服務(wù)器端jQuery文件（使用cdn）腳本標(biāo)簽方式引入。
在官網(wǎng)的：https://jquery.com/download/ 鏈接下可以下載到完整的代碼，放到項(xiàng)目文件的js文件夾下。
<script src="static/js/jquery-3.7.1.min.js"></script>在網(wǎng)站：https://www.bootcdn.cn/ 可以獲得穩(wěn)定、快速、免費(fèi)的cdn加速服務(wù)。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>開發(fā)過(guò)程中一般使用非min.js文件方便調(diào)試，生產(chǎn)環(huán)境部署上線時(shí)才使用min.js這種壓縮文件。
從源碼中可以看出，jQuery的整體邏輯可以用以下簡(jiǎn)單的結(jié)構(gòu)進(jìn)行描述：
( function( global, factory ) {
// 判斷有無(wú)window環(huán)境的一堆邏輯代碼
})( typeof window !=="undefined" ? window : this, function( window, noGlobal ) {
// 構(gòu)造jQuery的一些邏輯代碼
return jQuery
});從源碼中可以看出，jQuery被定義為一個(gè)函數(shù)，函數(shù)中返回了一個(gè)實(shí)例對(duì)象（看new關(guān)鍵字）。
繼續(xù)跟蹤源碼 new jQuery.fn.init( selector, context)，這個(gè)函數(shù)中調(diào)用了makeArray，當(dāng)然在其他if判斷語(yǔ)句中也有返回偽數(shù)組對(duì)象（比如，定義了length字段，還有[0]的操作），這里拿makeArray作為演示。
查看makeArray函數(shù)：
所以這個(gè)返回實(shí)例對(duì)象，是一個(gè)偽數(shù)組。
$('#menu-trigger') instanceof Array // false
$('#menu-trigger') instanceof Object // true從源碼中可以看出，將jQuery函數(shù)和window.$ 以及window.jQuery綁定賦值，所以使用jQuery和$ 標(biāo)識(shí)符就可以直接使用jQuery。通常在項(xiàng)目中直接使用$標(biāo)識(shí)符，快捷簡(jiǎn)省。
所以在引入jQuery的項(xiàng)目中：
console.log(typeof $); // function
console.log($===jQuery); // true
console.log($() instanceof Object); // true通常形式為：$(param)
$(function() {
console.log("dom finished and execute this");
})
$('#btn').click(function () {
// 這里的this是id為#btn的dom元素
console.log(this.innerHTML)
console.log($(this).html())
})
$('<input type="number"></input>').appendTo('div')let list=[1, 2, 3]
$.each(list, function(i, ele) {
console.log(i, ele)
})
$.trim(' hello world ')// class中名為btn的dom元素有多少
$('.btn').length
$('.btn')[0]
$('.btn').get(0)
$('.btn').index()
// 設(shè)置名為btn的class對(duì)應(yīng)的dom標(biāo)簽的文本內(nèi)容
$('.btn').text('自定義文本內(nèi)容')通過(guò)$(param)傳入的是selector、element、標(biāo)簽情況下，返回的是包含1個(gè)或者多個(gè)dom元素對(duì)象的偽數(shù)組。
// 基礎(chǔ)標(biāo)簽和class
// 選擇了所有的div和span標(biāo)簽
$('div, span')
// 選擇所有具有某個(gè)class的標(biāo)簽
$('div.container')
// 層次選擇器
$('ul span') // ul標(biāo)簽下的所有span元素
$('ul>span') // ul標(biāo)簽下的所有子span元素
$('.container+li') // class為container的元素后的下一個(gè)li元素
$('ul .item~*') // class為item的元素后面所有兄弟元素
// 過(guò)濾選擇器
$('div:first') // 選擇第一個(gè)div
$('div:last') // 最后一個(gè)div
$('div:not(.container)') // class不為container的所有div
$('div:lt(3):gt(0)') // 所有div元素中的大于0小于3的div元素，表示1和2索引處的dom元素
$('div:containers("hello world")') // 內(nèi)容為hellow world的div元素
$('div:hidden') // style中display: none的div元素
$('div[data]') // 有data屬性的div元素, example: <div data=""></div>
$('div[data="123"]') // 有data屬性且值為123的div元素, example: <div data="123"></div>
// 示例，使table表格的奇數(shù)行背景樣式設(shè)置
$('table>tbody>tr:odd')
// form表單中
$(':text') // 所有單行輸入框
$(':text:disabled') // 所有disabled的input輸入框
$(':checkbox') // 所有checkbox
$(':checkbox:checked') // 所有選中的checkbox
$('select').val() // select標(biāo)簽選中的option的value值直接修改css屬性（如果其dom標(biāo)簽存在這個(gè)css屬性）
$('#container').css('background', 'red');
$('#container').css({ 'background' : 'red', 'color': 'blue' }) // 一組屬性清空某標(biāo)簽下的所有dom：
$('.carousel-inner').empty();給某標(biāo)簽下添加dom標(biāo)簽：
$('.carousel-inner').append(domStr);移除、添加class：
$('.carousel-indicators li').removeClass('active');
$('.carousel-indicators li:first').addClass('active');獲取dom標(biāo)簽上的屬性：
$('.about-img-1>img').attr('src');設(shè)置標(biāo)簽的屬性：
$('.about-img-1>img').attr('src', (data && data['image']) ? data['image'] : '');點(diǎn)擊：
$('.category-product-page-ul>li').click(function(e) {
e.preventDefault();
console.log('this is:', this); // 打印對(duì)應(yīng)的dom標(biāo)簽
});hover：
$('#container').hover(
function() {
// 當(dāng)鼠標(biāo)進(jìn)入元素時(shí)執(zhí)行的函數(shù)
},
function() {
// 當(dāng)鼠標(biāo)離開元素時(shí)執(zhí)行的函數(shù)
}
);監(jiān)聽事件：
$('.bigImage').on("mousemove", function( e ) {
// do something
});const json='/static/js/data/xxx.json';
$.ajax({
url: json,
dataType: 'json',
success: function(data) {
// do something
},
error: function(jqXHR, textStatus, errorThrown) {
console.error('Fail to read json:', textStatus, errorThrown, json);
}
});post請(qǐng)求：
過(guò) jQuery，可以很容易地添加新元素/內(nèi)容。
添加新的 HTML 內(nèi)容
我們將學(xué)習(xí)用于添加新內(nèi)容的四個(gè) jQuery 方法：
append() - 在被選元素的結(jié)尾插入內(nèi)容
prepend() - 在被選元素的開頭插入內(nèi)容
after() - 在被選元素之后插入內(nèi)容
before() - 在被選元素之前插入內(nèi)容
jQuery append() 方法
jQuery append() 方法在被選元素的結(jié)尾插入內(nèi)容。
實(shí)例
$("p").append("追加文本");
jQuery prepend() 方法
jQuery prepend() 方法在被選元素的開頭插入內(nèi)容。
實(shí)例
$("p").prepend("在開頭追加文本");
通過(guò) append() 和 prepend() 方法添加若干新元素
在上面的例子中，我們只在被選元素的開頭/結(jié)尾插入文本/HTML。
不過(guò)，append() 和 prepend() 方法能夠通過(guò)參數(shù)接收無(wú)限數(shù)量的新元素。可以通過(guò) jQuery 來(lái)生成文本/HTML（就像上面的例子那樣），或者通過(guò) JavaScript 代碼和 DOM 元素。
在下面的例子中，我們創(chuàng)建若干個(gè)新元素。這些元素可以通過(guò) text/HTML、jQuery 或者 JavaScript/DOM 來(lái)創(chuàng)建。然后我們通過(guò) append() 方法把這些新元素追加到文本中（對(duì) prepend() 同樣有效）：
實(shí)例
functionappendText(){vartxt1="<p>文本。</p>"; // 使用 HTML 標(biāo)簽創(chuàng)建文本vartxt2=$("<p></p>").text("文本。"); // 使用 jQuery 創(chuàng)建文本vartxt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 創(chuàng)建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素}
jQuery after() 和 before() 方法
jQuery after() 方法在被選元素之后插入內(nèi)容。
jQuery before() 方法在被選元素之前插入內(nèi)容。
實(shí)例
$("img").after("在后面添加文本"); $("img").before("在前面添加文本");
通過(guò) after() 和 before() 方法添加若干新元素
after() 和 before() 方法能夠通過(guò)參數(shù)接收無(wú)限數(shù)量的新元素。可以通過(guò) text/HTML、jQuery 或者 JavaScript/DOM 來(lái)創(chuàng)建新元素。
在下面的例子中，我們創(chuàng)建若干新元素。這些元素可以通過(guò) text/HTML、jQuery 或者 JavaScript/DOM 來(lái)創(chuàng)建。然后我們通過(guò) after() 方法把這些新元素插到文本中（對(duì) before() 同樣有效）：
實(shí)例
functionafterText(){vartxt1="<b>I </b>"; // 使用 HTML 創(chuàng)建元素vartxt2=$("<i></i>").text("love "); // 使用 jQuery 創(chuàng)建元素vartxt3=document.createElement("big"); // 使用 DOM 創(chuàng)建元素txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在圖片后添加文本}
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
query 中有很多種追加元素的方法，今天就介紹幾種最常用的，做個(gè)筆記，記錄一下。
append()：方法可以在被選元素的內(nèi)部的結(jié)尾處插入內(nèi)容
語(yǔ)法：
$(selector).append(content)
例：jq在元素內(nèi)部的結(jié)尾處追加元素
代碼：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mochu">
<div>我是原來(lái)的內(nèi)容</div>
<div>飛鳥慕魚博客</div>
</div>
<script>
$('#mochu').append('<p>我要是插入的內(nèi)容</p>');
</script>
</body>
</html>
代碼運(yùn)行結(jié)果，如下圖
注：
1、如果使用JS動(dòng)態(tài)修改HTML元素后，只能在瀏覽器的控制臺(tái)中查看
2、查看方法：瀏覽器 按 F12
jQuery prepend()：方法在被選元素內(nèi)部的起始位置插入內(nèi)容
語(yǔ)法：
$(selector).prepend(content)
例：JQ在元素內(nèi)部的開始位置追加HTML元素
代碼：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mochu">
<div>我是原來(lái)的內(nèi)容</div>
<div>飛鳥慕魚博客</div>
</div>
<script>
$('#mochu').prepend('<p>我是利用prepend方法插入的內(nèi)容</p>');
</script>
</body>
</html>
運(yùn)行結(jié)果如下圖：
jQuery before()：方法在被選元素的前面插入元素，形成兄弟節(jié)點(diǎn)
語(yǔ)法：
$(selector).before(content)
例：jq在指定元素前面追加內(nèi)容
代碼：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mochu">
<div>我是原來(lái)的內(nèi)容</div>
<div>飛鳥慕魚博客</div>
</div>
<script>
$('#mochu').before('<p>我是利用before方法插入的內(nèi)容</p>');
</script>
</body>
</html>
代碼運(yùn)行結(jié)果：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
