整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
1、開關燈示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
height: 400px;
width: 400px;
border-radius: 50%;
}
.bg_green{background-color: green}
.bg_red{background-color: red}
</style>
</head>
<body>
<div id="d1" class="c1 bg_red bg_green"></div>
<button id="d2">變色</button>
<script>
let btnEle = document.getElementById('d2')
let divEle = document.getElementById('d1')
btnEle.onclick = function () { //點擊時調用事件句柄
divEle.classList.toggle('bg_red') //有則刪除，無則添加
}
</script>
</body>
</html>2、input框獲取焦點示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" value="hello world" id="d1">
<script>
let iEle=document.getElementById('d1') // 點擊了后執行的操作（獲取焦點）
iEle.onfocus = function (){
iEle.value ='' // 重新賦值為空
}
iEle.onblur = function (){ // 鼠標點擊了其他地方執行的操作（移除焦點）
iEle.value ='goodbye'
}
</script>
</body>
</html>3、input框實時刷新時間實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1" style="display: block;height: 50px;width:200px">
<button id="d2">開始</button>
<button id="d3">結束</button>
<script>
//4、創建一個變量t，用來存儲定時器
let t = null
//1、 把要操作的標簽生成對象
let inputEle = document.getElementById('d1')
let starEle = document.getElementById('d2')
let endEle = document.getElementById('d3')
//2、定義一個函數用于展示實時時間
function showTime(){
let time = new Date(); // 生成一個時間對象
inputEle.value = time.toLocaleString() //獲取當前時間，并賦值給input標簽
}
//3、給頁面上的按鈕綁定功能，一個開始，一個結束
starEle.onclick = function (){
if (!t){
t=setInterval(showTime,1000) //每點擊一下就會生成一個定時器
}
}
endEle.onclick = function (){
clearInterval(t) //只能清除一個定時器
t = null
}
</script>
</body>
</html>4、省市聯動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="d1" >
<option value="---請選擇---" selected disabled>---請選擇---</option>
</select>
<select name="" id="d2"></select>
<script>
let proEle = document.getElementById('d1')
let cityEle = document.getElementById('d2')
//1、先模擬省市數據
data={
'江西':['南昌','九江','贛州','上饒'],
'浙江':['杭州','義烏','紹興','嘉興'],
'江蘇':['南京','蘇州','泰州','南通'],
'廣東':['廣州','深圳','惠州','清遠']
};
//2、for循獲取到省
for (let key in data){
//2.1 將省信息做成一個個option標簽，并添加到第一個select框中
//1 創建option框
let opEle = document.createElement('option')
//2 設置value
opEle.value = key
//3 設置文本
opEle.innerText = key
//4 添加到第一個select中
proEle.appendChild(opEle)
}
//3、設置文本域變化事件，使得再更換省的時候可以更新市
proEle.onchange = function (){
//先清空市select中所有的option
cityEle.innerHTML = ''
//先獲取到用戶選擇的省
let getPro = proEle.value
//獲取對應的市信息
let getCity = data[getPro]
//添加默認選擇標簽
let oppEle = document.createElement('option')
oppEle.innerText = '-請選擇-'
oppEle.setAttribute('selected','selected')
oppEle.setAttribute('disabled','disabled')
cityEle.appendChild(oppEle)
//for循環所有的市，渲染到第二個select中
for(let i=0;i<getCity.length;i++){
//拿到市名
let city = getCity[i]
//創建標簽
let opEle = document.createElement('option')
//設置文本
opEle.innerText = city
//設置值
opEle.value = city
//添加到第二個select中
cityEle.appendChild(opEle)
}
}
</script>
</body>
</html>jQuery 是一個快速、小巧且功能強大的 JavaScript 庫。它通過簡化 JavaScript 編程，使開發人員能夠更輕松地操作 HTML 文檔、處理事件、執行動畫效果以及處理 AJAX 請求等。
jQuery基本語法：
jQuery（選擇器）.action（）
可以簡寫：jQuery() ===$()基本選擇器：
1. 元素選擇器：使用元素名稱選擇 HTML 元素。例如：`$("p")` 會選擇所有的 `<p>` 元素。
2. ID 選擇器：使用元素的 ID 屬性選擇指定的元素。例如：`$("#myElement")` 會選擇具有 ID 屬性為 "myElement" 的元素。
3. 類選擇器：使用元素的類名選擇指定的元素。例如：`$(".myClass")` 會選擇具有類名為 "myClass" 的元素。
4.屬性選擇器：使用元素的屬性選擇指定的元素。例如：$("[name='myName']") 會選擇具有 name 屬性值為 "myName" 的元素。
通過jQuery選擇器獲取到的對象都是jQuery對象，如需使用JavaScript代碼對其進行操作的話，則需要轉換成標簽對象。
$("#myElement")[0] //轉成標簽對象同樣，標簽對象也可轉成jQuery對象：
$(document.getElementByid('#myElement')) //轉成jQuery對象組合分組嵌套選擇器：
jQuery也支持組合選擇器：
$('div#d1') //選擇具有 id 屬性為 "d1" 的 <div> 元素。
$('div.c1') //選擇具有 class 屬性為 "c1" 的 <div> 元素。
... ...
$('div span') //后代選擇器，用于選擇 <div> 元素內的所有 <span> 元素。
$('div>span') //子元素選擇器，用于選擇 <div> 元素的直接子元素中的 <span> 元素。
$('div+span') //相鄰元素選擇器，用于選擇緊接在 <div> 元素后面的第一個 <span> 元素。
$('div~span') //兄弟元素選擇器，用于選擇所有在 <div> 元素后出現的同級別的 <span> 元素。基本篩選器：
在jQuery中，篩選器可以根據不同的條件來選擇匹配的元素，從而實現對元素的精確控制和操作。
jQuery提供了許多基本篩選器，用于選擇匹配指定條件的元素。以下是一些常用的基本篩選器：
- `:first`：選擇第一個匹配的元素。
- `:last`：選擇最后一個匹配的元素。
- `:even`：選擇索引為偶數的元素（從0開始計數）。
- `:odd`：選擇索引為奇數的元素（從0開始計數）。
- `:eq(index)`：選擇索引為指定值的元素。
- `:gt(index)`：選擇索引大于指定值的元素。
- `:lt(index)`：選擇索引小于指定值的元素。
- `:header`：選擇所有標題元素（如`<h1>`、`<h2>`等）。
- `:not(selector)`：選擇不匹配給定選擇器的元素。
- `:has(selector)`：選擇包含匹配給定選擇器的元素。
- `:contains(text)`：選擇包含指定文本內容的元素。
$('ul li') #ul下面的所有li子標簽
$('ul li:first') #ul下面的第一個li子標簽 $('ul li').first()
$('ul li:last') #ul下面的最后一個li子標簽 $('ul li').last()
$('ul li:eq(2)') #放索引，根據索引取值
$('ul li:even') #偶數索引，0包含在內
$('ul li:odd') #奇數索引
$('ul li:gt(2)') #大于索引
$('ul li:lt(2)') #小于索引
$('div:has("p")') #選舉出包含一個標簽，或多個標簽在內的標簽（父級）
$('ul li:not("#d1")') # 移除所有滿足條件的標簽這些基本篩選器可以與其他選擇器和方法組合使用，以便更精確地選擇和操作網頁中的元素。
表單篩選器：
特殊情況
篩選器方法：
介：
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
關于jQuery開發教程的詳細內容：（點擊下方“了解更多”，記得收藏哦~）
（本課程可以幫助學員掌握jQuery開發技術，適合人群前端開發者學習）
jQuery 選擇器：
允許您對元素組或單個元素進行操作。
3.1 元素選擇器
使用 CSS 選擇器來選取 HTML 元素。
3.2 屬性選擇器 [ ]
帶有給定屬性的元素。
$('[title]').hide();
改變 HTML 元素的 CSS 屬性。
3.3 CSS 選擇器
$('p').css('background-color', 'red');
語言特點：
jQuery的選擇機制構建于Css的選擇器，它提供了快速查詢DOM文檔中元素的能力，而且大大強化了JavaScript中獲取頁面元素的方式。
jQuery中內置了一系列的動畫效果，可以開發出非常漂亮的網頁，許多網站都使用jQuery的內置的效果，比如淡入淡出、元素移除等動態特效。
AJAX是異步的JavaScript和ML的簡稱，可以開發出非常靈敏無刷新的網頁，特別是開發服務器端網頁時，比如PHP網站，需要往返地與服務器通信，如果不使用AJAX，每次數據更新不得不重新刷新網頁，而使用AJAX特效后，可以對頁面進行局部刷新，提供動態的效果。
jQuery提供了對基本JavaScript結構的增強，比如元素迭代和數組處理等操作。
jQuery提供了各種頁面事件，它可以避免程序員在HTML中添加太事件處理代碼，最重要的是，它的事件處理器消除了各種瀏覽器兼容性問題。
jQuery可以修改網頁中的內容，比如更改網頁的文本、插入或者翻轉網頁圖像，jQuery簡化了原本使用JavaScript代碼需要處理的方式。
語言評價：
jQuery 是繼prototype 之后又一個優秀的輕量級JavaScript 框架。其宗旨是———“Write Less, Do More”,寫更少的代碼,做更多的事情。 它是一個快速和簡潔的JavaScript 庫，可以簡化HTML 文檔元素的遍歷，事件處理，動畫和Ajax 交互以實現快速Web 開發，它被設計用來改變編寫JavaScript 腳本的方式。
jQuery 的文檔非常豐富，因為其輕量級的特性，文檔并不復雜，隨著新版本的發布，可以很快被翻譯成多種語言，這也為jQuery 的流行提供了條件。jQuery 被包在語法上，jQuery 支持CSS1-3 的選擇器， 兼容IE 6.0+, FF 2+,Safari 3.0+, Opera 9.0+, Chrome 等瀏覽器。同時，jQuery 有約幾千種豐富多彩的插件，大量有趣的擴展和出色的社區支持，這彌補了jQuery功能較少的不足并為jQuery 提供了眾多非常有用的功能擴展。加之其簡單易學，jQuery 很快成為當今最為流行的JavaScript 庫，成為開發網站等復雜度較低的Web 應用程序的首選JavaScript 庫，并得到了大公司如微軟，Google 的支持。
jQuery 最有特色的語法特點就是與CSS 語法相似的選擇器，并且它支持CSS1 到CSS3 的幾乎所有選擇器，并兼容所有主流瀏覽器，這為快速訪問DOM 提供了方便。
阿里云開發者社區全面升級，一站式體驗，用得更爽：https://developer.aliyun.com?spm=a2c41.12958151.0.0（復制網址鏈接到瀏覽器，記得收藏）
好程序員web前端學習路線分享jQuery學習技巧，jQuery在web前端學習中是一個必不可少的內容，很多小伙伴都在學習這階段的時候遇到問題，今天我們就來聊一下jQuery，讓我們一起來看一看吧！
1、關于頁面元素的引用
通過jquery的$引用元素包括通過id、class、元素名以及元素的層級關系及dom或者xpath條件等方法，且返回的對象為jquery對象(集合對象)，不能直接調用dom定義的方法。
2、jQuery對象與dom對象的轉換
只有jquery對象才能使用jquery定義的方法。注意dom對象和jquery對象是有區別的，調用方法時要注意操作的是dom對象還是jquery對象。普通的dom對象一般可以通過$轉換成jquery對象。
如：$(document.getElementById("msg"))則為jquery對象，可以使用jquery的方法。
由于jquery對象本身是一個集合。所以如果jquery對象要轉換為dom對象則必須取出其中的某一項，一般可通過索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get[1]，$("td")[5]這些都是dom對象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下幾種寫法都是正確的：
$("#msg").html;
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
3、如何獲取jQuery集合的某一項
對于獲取的元素集合，獲取其中的某一項(通過索引指定)可以使用eq或get(n)方法或者索引號獲取，要注意，eq返回的是jquery對象，而get(n)和索引返回的是dom元素對象。對于jquery對象只能使用jquery的方法，而dom對象只能使用dom的方法，如要獲取第三個
元素的內容。
有如下兩種方法：
$("div").eq(2).html;//調用jquery對象的方法
$("div").get(2).innerHTML;//調用dom的方法屬性
4、同一函數實現set和get
Jquery中的很多方法都是如此，主要包括如下幾個：
· $("#msg").html;//返回id為msg的元素節點的html內容。
· $("#msg").html("new content");
· //將“new content” 作為html串寫入id為msg的元素節點內容中,頁面顯示粗體的new content
· $("#msg").text;//返回id為msg的元素節點的文本內容。
· $("#msg").text("newcontent");
· //將“new content” 作為普通文本串寫入id為msg的元素節點內容中,頁面顯示new content
· $("#msg").height;//返回id為msg的元素的高度
· $("#msg").height("300");//將id為msg的元素的高度設為300
· $("#msg").width;//返回id為msg的元素的寬度
· $("#msg").width("300");//將id為msg的元素的寬度設為300
· $("input").val(");//返回表單輸入框的value值
· $("input").val("test");//將表單輸入框的value值設為test
· $("#msg").click;//觸發id為msg的元素的單擊事件
· $("#msg").click(fn);//為id為msg的元素單擊事件添加函數
· 同樣blur,focus,select,submit事件都可以有著兩種調用方法
5、集合處理功能
· $.extend({
· min:function(a, b){return a < b?a:b; },
· max:function(a, b){return a > b?a:b; }
· });//為jquery擴展了min,max兩個方法
· 使用擴展的方法(通過“$.方法名”調用)：
· alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
6、支持方法的連寫
所謂連寫，即可以對一個jquery對象連續調用各種不同的方法。
例如：
$("p").click(function{alert($(this).html)})
.mouseover(function{alert('mouseover event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i ]});
7、操作元素的樣式
主要包括以下幾種方式：
· $("#msg").css("background");//返回元素的背景顏色
· $("#msg").css("background","#ccc")//設定元素背景為灰色
· $("#msg").height(300);$("#msg").width("200"); //設定寬高
· $("#msg").css({color: "red", background:"blue" });//以名值對的形式設定樣式
· $("#msg").addClass("select");//為元素增加名稱為select的class
· $("#msg").removeClass("select");//刪除元素名稱為select的class
· $("#msg").toggleClass("select");//如果存在(不存在)就刪除(添加)名稱為select的class
8、完善的事件處理功能
Jquery已經為我們提供了各種事件處理方法，我們無需在html元素上直接寫事件，而可以直接為通過jquery獲取的對象添加事件。
如：
$("#msg").click(function{alert("good")})//為元素添加了單擊事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i ]})
//為三個不同的p元素單擊事件分別設定不同的處理
jQuery中幾個自定義的事件：
(1)hover(fn1,fn2)：一個模仿懸停事件(鼠標移動到一個對象上面及移出這個對象)的方法。當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。
//當鼠標放在表格的某行上時將class置為over，離開時置為out。
$("tr").hover(function{
$(this).addClass("over");
},
function{
$(this).addClass("out");
});
(2)ready(fn):當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。
$(document).ready(function{alert("Load Success")})
//頁面加載完畢提示“Load Success”,相當于onload事件。與$(fn)等價
(3)toggle(evenFn,oddFn):每次點擊時切換要調用的函數。如果點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二個函數。隨后的每次點擊都重復對這兩個函數的輪番調用。
//每次點擊時輪換添加和刪除名為selected的class。
$("p").toggle(function{
$(this).addClass("selected");
},function{
$(this).removeClass("selected");
});
(4)trigger(eventtype):在每一個匹配的元素上觸發某類事件。
例如：
$("p").trigger("click");//觸發所有p元素的click事件
(5)bind(eventtype,fn)，unbind(eventtype): 事件的綁定與反綁定
從每一個匹配的元素中(添加)刪除綁定的事件。
例如：
$("p").bind("click",function{alert($(this).text);}); //為每個p元素添加單擊事件
$("p").unbind;//刪除所有p元素上的所有事件
$("p").unbind("click")//刪除所有p元素上的單擊事件
9、幾個實用特效功能
其中toggle和slidetoggle方法提供了狀態切換功能。
如toggle方法包括了hide和show方法。
slideToggle方法包括了slideDown和slideUp方法。
10、幾個有用的jQuery方法
$.browser.瀏覽器類型：檢測瀏覽器類型。有效參數：safari, opera,msie,mozilla。如檢測是否ie：$.browser.isie，是ie瀏覽器則返回true。
$.each(obj,fn)：通用的迭代函數。可用于近似地迭代對象和數組(代替循環)。
如
$.each([0,1,2], function(i, n){ alert( "Item #" + i + ": " + n );});
等價于：
vartempArr=[0,1,2];
for(vari=0;i
alert("Item#"+i+": "+tempArr[ i ]);
}
也可以處理json數據，如
$.each({ name: "John", lang: "JS" }, function(i, n){ alert("Name: " + i + ", Value: " + n ); });
結果為：
Name:name,Value:John
Name:lang,Value:JS
$.extend(target,prop1,propN)：用一個或多個其他對象來擴展一個對象，返回這個被擴展的對象。這是jquery實現的繼承方式。
如：
$.extend(settings,options);
//合并settings和options，并將合并結果返回settings中，相當于options繼承setting并將繼承結果保存在setting中。
var settings =$.extend({}, defaults, options);
//合并defaults和options，并將合并結果返回到setting中而不覆蓋default內容。
可以有多個參數(合并多項并返回)
$.map(array,fn)：數組映射。把一個數組中的項目(處理轉換后)保存到到另一個新數組中，并返回生成的新數組。
如：
vartempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr內容為：[4,5,6]
vartempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr內容為：[2,3]
$.merge(arr1,arr2):合并兩個數組并刪除其中重復的項目。
如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.trim(str)：刪除字符串兩端的空白字符。
如：$.trim(" hello, how are you? "); //返回"hello,how are you? "
11、解決自定義方法或其他類庫與jQuery的沖突
很多時候我們自己定義了$(id)方法來獲取一個元素，或者其他的一些js類庫如prototype也都定義了$方法，如果同時把這些內容放在一起就會引起變量方法定義沖突，Jquery對此專門提供了方法用于解決此問題。
使用jquery中的jQuery.noConflict;方法即可把變量$的控制權讓渡給第一個實現它的那個庫或之前自定義的$方法。之后應用Jquery的時候只要將所有的$換成jQuery即可，如原來引用對象方法$("#msg")改為jQuery("#msg")。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
