整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
屬性操作
attr(name)：獲取屬性值
attr(key,value)：設置屬性值
attr(properties)：一次設置多個屬性值, 要求參數是一個json對象
removeAttr(name)：移除屬性
2 對class屬性的操作
addClass(class)：添加class
removeClass(class)：移除class
toggleClass(class)：如果有對應的class屬性值, 則移除, 反之則添加
hasClass(class)：如果有對應的class屬性值, 則返回true, 反之返回false
3 對style屬性的操作
css(name)：獲取到指定的css屬性值
css(name,value)：設置指定的css屬性值
css(properties)：一次設置多個css屬性值 要求參數必須是json對象
4 尺寸
width()： 獲取元素的寬度
width(value)： 設置元素的寬度
height()： 獲取元素的高度
height(value)：設置元素的高度
5 文本
innerHTML() javascript方法
html()： 獲取雙邊標簽中的內容
html(val)： 設置雙邊標簽中的內容
innerTEXT javascript方法, 兼容性差
text()： 獲取雙邊標簽中的內容, 不能解析HTML標簽
text(val)： 設置雙邊標簽中的內容, 不能解析HTML標簽
6 表單的值
val()： 獲取元素的value屬性值
val(val)：設置元素的value屬性值
屬性和屬性值語法規則：
$("img").attr({
src: "img07.jpg",
title: "紫荊公寓",
width:300, //參考HTML語法, 可以不加單位
height:"200px", //也可以加單位, 但必須加引號
alt: "紫荊公寓"
});$('div').css({
"font-size":"40px", //帶橫線的必須加引號
"font-weight":"bold",
color:"red"
});$('div').css({
fontSize:"40px", //駝峰式寫法, 可以不加引號
"font-weight":"bold",
color:"red"
});4 鍵/值的引號問題
鍵可以加引號, 也可不加引號;
但是對值要求很嚴格, 字符串型的必須加引號
$("img").attr({
src: "img07.jpg", //值是字符串型必須加引號
"title": "紫荊公寓", //鍵可加也可不加引號
width:300,
height:"200px",
alt: "紫荊公寓"
});5 采用json寫法的鍵/值對格式：用英文","隔開
ext()方法會把包含的字符轉義處理,html()則不會.所謂轉義就是字符的另一種顯示方法,例如"<" 顯示成 "<",這就是轉義了,其中的<就是<的轉義字符.還有很多可以轉義的字符,可以搜索下看看.
下邊是項目中用到的2個語句:span中包含了jquery的語句輸出結果.
1. $('.title').text("<img src=" ">");
顯示結果為<img src=" ">,這里的<img src=" ">不會被解析成html的img標簽,而是以存字母文字的形式顯示,也就是單純的字符串:<img src=" "> .并且f12查看源碼時看到span包含的<img src=" ">文字內容外層有雙引號哦.看下圖,
?
如果你用右鍵選擇編輯為html,則看到其中的轉義字符<這就說明我們的<被轉移了,
?
如果我們想把<img>顯示成標簽,被瀏覽器解析.那么就需要如下方法.
2. $('.title').html("<img >");
顯示結果為解析后的html代碼段,那么這里的<img >就會按照h5的標簽img圖片進行解析顯示了.下圖是f12的頁面代碼結果span中的<img>標簽外層無雙引號,且頁面此時會顯示出來圖片.
?
?
jQuery官網：https://jquery.com/
jQuery是一個高效、輕量并且功能豐富的js庫。
核心在于查詢query。
jQuery是一個優秀的js函數庫，是React/Vue/Angular框架之外中大型項目的首選。
jQuery的主旨是write less, do more。
引入jQuery的方式有2種，一種是項目中直接引入jQuery的min.js文件，一種是使用服務器端jQuery文件（使用cdn）腳本標簽方式引入。
在官網的：https://jquery.com/download/ 鏈接下可以下載到完整的代碼，放到項目文件的js文件夾下。
<script src="static/js/jquery-3.7.1.min.js"></script>在網站：https://www.bootcdn.cn/ 可以獲得穩定、快速、免費的cdn加速服務。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>開發過程中一般使用非min.js文件方便調試，生產環境部署上線時才使用min.js這種壓縮文件。
從源碼中可以看出，jQuery的整體邏輯可以用以下簡單的結構進行描述：
( function( global, factory ) {
// 判斷有無window環境的一堆邏輯代碼
})( typeof window !=="undefined" ? window : this, function( window, noGlobal ) {
// 構造jQuery的一些邏輯代碼
return jQuery
});從源碼中可以看出，jQuery被定義為一個函數，函數中返回了一個實例對象（看new關鍵字）。
繼續跟蹤源碼 new jQuery.fn.init( selector, context)，這個函數中調用了makeArray，當然在其他if判斷語句中也有返回偽數組對象（比如，定義了length字段，還有[0]的操作），這里拿makeArray作為演示。
查看makeArray函數：
所以這個返回實例對象，是一個偽數組。
$('#menu-trigger') instanceof Array // false
$('#menu-trigger') instanceof Object // true從源碼中可以看出，將jQuery函數和window.$ 以及window.jQuery綁定賦值，所以使用jQuery和$ 標識符就可以直接使用jQuery。通常在項目中直接使用$標識符，快捷簡省。
所以在引入jQuery的項目中：
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()
// 設置名為btn的class對應的dom標簽的文本內容
$('.btn').text('自定義文本內容')通過$(param)傳入的是selector、element、標簽情況下，返回的是包含1個或者多個dom元素對象的偽數組。
// 基礎標簽和class
// 選擇了所有的div和span標簽
$('div, span')
// 選擇所有具有某個class的標簽
$('div.container')
// 層次選擇器
$('ul span') // ul標簽下的所有span元素
$('ul>span') // ul標簽下的所有子span元素
$('.container+li') // class為container的元素后的下一個li元素
$('ul .item~*') // class為item的元素后面所有兄弟元素
// 過濾選擇器
$('div:first') // 選擇第一個div
$('div:last') // 最后一個div
$('div:not(.container)') // class不為container的所有div
$('div:lt(3):gt(0)') // 所有div元素中的大于0小于3的div元素，表示1和2索引處的dom元素
$('div:containers("hello world")') // 內容為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表格的奇數行背景樣式設置
$('table>tbody>tr:odd')
// form表單中
$(':text') // 所有單行輸入框
$(':text:disabled') // 所有disabled的input輸入框
$(':checkbox') // 所有checkbox
$(':checkbox:checked') // 所有選中的checkbox
$('select').val() // select標簽選中的option的value值直接修改css屬性（如果其dom標簽存在這個css屬性）
$('#container').css('background', 'red');
$('#container').css({ 'background' : 'red', 'color': 'blue' }) // 一組屬性清空某標簽下的所有dom：
$('.carousel-inner').empty();給某標簽下添加dom標簽：
$('.carousel-inner').append(domStr);移除、添加class：
$('.carousel-indicators li').removeClass('active');
$('.carousel-indicators li:first').addClass('active');獲取dom標簽上的屬性：
$('.about-img-1>img').attr('src');設置標簽的屬性：
$('.about-img-1>img').attr('src', (data && data['image']) ? data['image'] : '');點擊：
$('.category-product-page-ul>li').click(function(e) {
e.preventDefault();
console.log('this is:', this); // 打印對應的dom標簽
});hover：
$('#container').hover(
function() {
// 當鼠標進入元素時執行的函數
},
function() {
// 當鼠標離開元素時執行的函數
}
);監聽事件：
$('.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請求：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
