當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery入门学习

發布時間：2025/4/9 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery入门学习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

　　　　　　　　　　　　jQuery介紹

jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。

jQuery使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，能夠極大地簡化JavaScript編程。它的宗旨就是：“Write less, do more.“

　　　　　　　　　　　　jQuery優勢

一款輕量級的JS框架。jQuery核心js文件才幾十kb，不會影響頁面加載速度。

豐富的DOM選擇器,jQuery的選擇器用起來很方便，比如要找到某個DOM對象的相鄰元素，JS可能要寫好幾行代碼，而jQuery一行代碼就搞定了，再比如要將一個表格的隔行變色，jQuery也是一行代碼搞定。

鏈式表達式。jQuery的鏈式操作可以把多個操作寫在一行代碼里，更加簡潔。

事件、樣式、動畫支持。jQuery還簡化了js操作css的代碼，并且代碼的可讀性也比js要強。

Ajax操作支持。jQuery簡化了AJAX操作，后端只需返回一個JSON格式的字符串就能完成與前端的通信。

跨瀏覽器兼容。jQuery基本兼容了現在主流的瀏覽器，不用再為瀏覽器的兼容問題而傷透腦筋。

插件擴展開發。jQuery有著豐富的第三方的插件，例如：樹形菜單、日期控件、圖片切換插件、彈出窗口等等基本前端頁面上的組件都有對應插件，并且用jQuery插件做出來的效果很炫，并且可以根據自己需要去改寫和封裝插件，簡單實用。

　　　　　　　　　　　? ?jQuery內容

選擇器? ? ? ? ?2.篩選器? ? ?3 .樣式操作? ? ? 4.文本操作? ? ? 5.屬性操作? ??

? ? ? ? ?6.文檔處理? ? ? 7.事件? ? ? ? ?8.動畫效果? ? ? ?9.插件? ? ? ? ? ? 10.each,data, Ajax

　　　　　　　　　　　? ?jQuery對象

jQuery對象就是通過jQuery包裝DOM對象后產生的對象。jQuery對象是 jQuery獨有的。如果一個對象是?jQuery對象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：獲取id值為?i1的元素的html代碼。其中?html()是jQuery里的方法。

相當于：?document.getElementById("i1").innerHTML;

雖然?jQuery對象是包裝?DOM對象后產生的，但是?jQuery對象無法使用?DOM對象的任何方法，同理?DOM對象也沒不能使用?jQuery里的方法。

一個約定，我們在聲明一個jQuery對象變量的時候在變量名前面加上$

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? jQuery基礎語法

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(selector).action()

var $variable = jQuery對像 var variable = DOM對象 $variable[0]//jQuery對象轉成DOM對象

$("#i1").html();//jQuery對象可以使用j jQuery對象和DOM對象的使用： Query的方法 $("#i1")[0].innerHTML;// DOM對象使用DOM的方法

　　　　　　　　　　一.尋找元素(選擇器和篩選器)?

a.選擇器：

1.基本選擇器：　　　　

1 $("*") $("#id") $(".class") $("element") $(".class,p,div")

2.層級選擇器：

$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")

3..基本篩選器：

$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")

4.屬性選擇器：

$('[id="div1"]') $('["alex="sb"][id]')

5.表單選擇器

$("[type='text']")----->$(":text") #注意只適用于input標簽 : $("input:checked")

　使用方法：

script>$("li").css("color","red"); #數組 $("li:first").css("color","red"); #第一個$("li:last").css("color","red"); #第二個 $("li:eq(2)").css("color","red"); #查找索引 $("li:even").css("color","red"); #基數行 $("li:odd").css("color","red"); #偶數行 $("li:gt(1)").css("color","red"); #大于某個數 $("li:lt(2)").css("color","red"); #小于某個數</script> </body> </html> 基本選擇器演示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body><p alex="sb">1111</p> <p alex="sb">1111</p> <p alex="sb" id="p4">1111</p><script src="jquery-3.2.1.js"></script><script>$("[alex]").css("color","red") #都變紅 $("[alex='sb']").css("color","red") #都變紅 $("[alex='sb'][id='p4']").css("color","red") #最后一個變紅</script> </body> </html> 屬性選擇器演示 !DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body><input type="text"> <input type="checkbox"> <input type="submit"><script src="jquery-3.2.1.js"></script><script>$("[type='text']").css("width","300px");$(":text").css("width","300px"); #簡寫</script> </body> </html> 表單選擇器演示

?b.篩選器：

1.過濾篩選器 :

$("li").eq(2) $("li").first() $("ul li").hasclass("test")

2.查找篩選器：

$("div").find(".test")

下一個元素：
$(".test").next()　　　　? $(".test").nextAll()?? $(".test").nextUntil()　　　　

上一個元素：
$("div").prev()????????? $("div").prevAll()?????????? $("div").prevUntil()?? ?

? 父親元素：

　$(".test").parent()? ? ? $(".test").parents()? ? ? ? 　$(".test").parentUntil() ? 兒子和兄弟元素：? ? ? ? ? ? ? ? ? ? ? 　$("div").siblings()? ??$("#id").children();// 兒子們
? ? 　? $("#id").find()// 搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的后代元素的好方法。

示例：左側菜單：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>左側菜單示例</title><style>.left {position: fixed;left: 0;top: 0;width: 20%;height: 100%;background-color: rgb(47, 53, 61);}.right {width: 80%;height: 100%;}.menu {color: white;}.title {text-align: center;padding: 10px 15px;border-bottom: 1px solid #23282e; }.items {background-color: #181c20; }.item {padding: 5px 10px;border-bottom: 1px solid #23282e; }.hide {display: none;}</style> </head> <body><div class="left"><div class="menu"><div class="title">菜單一</div><div class="items"><div class="item">111</div><div class="item">222</div><div class="item">333</div></div><div class="title">菜單二</div><div class="items hide"><div class="item">111</div><div class="item">222</div><div class="item">333</div></div><div class="title">菜單三</div><div class="items hide"><div class="item">111</div><div class="item">222</div><div class="item">333</div></div></div> </div> <div class="right"></div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script>$(".title").click(function (){ // jQuery綁定事件// 隱藏所有class里有.items的標簽$(".items").addClass("hide"); //批量操作$(this).next().removeClass("hide");}); </script> View
empty remove 演示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body><div class="c1"><p>ppp</p></div><button>button</button><script src="jquery-3.2.1.js"></script><script>$("button").click(function () {$("p").empty()})</script></body> </html> View Code

clone input標簽演示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body><div class="outer"><div class="iterm"><button οnclick="add(this)">+</button><input type="text"></div></div> <script src="jquery-3.2.1.js"></script><script>function add(self) {var $clone_obj=$(self).parent().clone();$clone_obj.children("button").text("-");$clone_obj.children("button").attr("onclick","remove_obj(this)");$(".outer").append($clone_obj);}function remove_obj(self) {$(self).parent().remove()}</script></body> </html> View Code

　　　　樣式操作? ? ?

樣式類

addClass();// 添加指定的CSS類名。 removeClass();// 移除指定的CSS類名。 hasClass();// 判斷樣式存不存在 toggleClass();// 切換CSS類名，如果有就移除，如果沒有就添加。 CSS：
css("color","red")//DOM操作：tag.style.color="red"

　示例：

$("p").css("color", "red"); //將所有p標簽的字體設置為紅色

　位置：

offset()//獲取匹配元素在當前窗口的相對偏移或設置元素位置 position()//獲取匹配元素相對父元素的偏移 scrollTop()//獲取匹配元素相對滾動條頂部的偏移 scrollLeft()//獲取匹配元素相對滾動條左側的偏移

.offset()方法允許我們檢索一個元素相對于文檔（document）的當前位置。

和?.position()的差別在于：?.position()是相對于相對于父級元素的位移。

　　　　文本操作? ? ? ? ? ? ?

HTML代碼:

html()// 取得第一個匹配元素的html內容 html(val)// 設置所有匹配元素的html內容

文本值：

text()//取得所有匹配元素的內容 text(val)//設置所有匹配元素的內容

值：

val()// 取得第一個匹配元素的當前值 val(val)// 設置所有匹配元素的值 val([val1, val2])// 設置checkbox、select的值

示例：

獲取被選中的checkbox或radio的值：

　創建一個使用例子：

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>jQuery val示例</title> </head> <body><label for="s1">城市</label> <select id="s1"><option value="beijing">北京市</option><option value="shanghai">上海市</option><option selected value="guangzhou">廣州市</option><option value="shenzhen">深圳市</option> </select> <hr> <label for="s2">愛好</label> <select id="s2" multiple="multiple"><option value="basketball" selected>籃球</option><option value="football">足球</option><option value="doublecolorball" selected>雙色球</option> </select><script src="jquery-3.2.1.min.js"></script> <script>// 單選下拉框$("#s1").val("shanghai");// 多選下拉框$("#s2").val(["basketball", "football"]); </script> </body> </html> jQuery val()值使用

　　　　　　　　　　　　　　　　　　　　二.操作元素(屬性，css，文檔處理)

? ? ? 屬性操作? ?

用于ID等或自定義屬性：

1 #--------------------------屬性 2 $("").attr(); #新建屬性查看屬性修改屬性自己定義的屬性 3 $("").removeAttr();　　　　　　　#刪除這個Attr屬性 4 $("").prop();　　　　　　　　　　　#固有的屬性 5 $("").removeProp(); 6 #--------------------------CSS類 7 $("").addClass(class|fn) 8 $("").removeClass([class|fn]) 9 #--------------------------HTML代碼/文本/值 10 $("").html([val|fn]) 11 $("").text([val|fn]) 12 $("").val([val|fn|arr]) #取固有屬性，input標簽 13 #--------------------------- 14 $("").css("color","red")　

attr的演示：

主代碼：

<div class="div1" con="c1"></div><script src="jquery-3.2.1.js"></script> <script>console.log($("div").attr("con")) #查看屬性的值$("div").attr("con","c2") #修改屬性$("div").attr("alex","c2") #新建屬性

prot演示示例：　

prop() // 獲取屬性 removeProp() // 移除屬性 <input type="checkbox" checked="checked">是否可見 <input type="checkbox" >是否可見<script src="jquery-3.2.1.js"></script> <script>console.log($(":checkbox:first").prop("checked")) //打印當前上面的內容
console.log($(":checkbox:last").prop("checked"))

示例：全選、反選、取消

<input type="checkbox" value="1"> <input type="radio" value="2"> <script>$(":checkbox[value='1']").prop("checked", true);$(":radio[value='2']").prop("checked", true); </script>

?　　/

注意：

在1.x及2.x版本的jQuery中使用attr對checkbox進行賦值操作時會出bug，在3.x版本的jQuery中則沒有這個問題。為了兼容性，我們在處理checkbox和radio的時候盡量使用特定的prop()，不要使用attr("checked", "checked")。

<input type="checkbox" value="1"> <input type="radio" value="2"> <script>$(":checkbox[value='1']").prop("checked", true);$(":radio[value='2']").prop("checked", true); </script>

示例：全選、反選、取消

文檔處理

添加到指定元素內部的后面

$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B

添加到指定元素內部的前面

$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 從DOM中刪除所有匹配的元素。 empty()// 刪除匹配的元素集合中所有的子節點。

例子：

點擊按鈕在表格添加一行數據。

點擊每一行的刪除按鈕刪除當前行數據。

替換

replaceWith() replaceAll()

克隆

clone()// 參數

克隆示例：

?點擊復制按鈕

事件

常用事件

click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) change(function(){...}) keyup(function(){...})

keydown和keyup事件組合示例：

?按住shift鍵批量操作

hover事件示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>hover示例</title><style>* {margin: 0;padding: 0;}.nav {height: 40px;width: 100%;background-color: #3d3d3d;position: fixed;top: 0;}.nav ul {list-style-type: none;line-height: 40px;}.nav li {float: left;padding: 0 10px;color: #999999;position: relative;}.nav li:hover {background-color: #0f0f0f;color: white;}.clearfix:after {content: "";display: block;clear: both;}.son {position: absolute;top: 40px;right: 0;height: 50px;width: 100px;background-color: #00a9ff;display: none;}.hover .son {display: block;}</style> </head> <body> <div class="nav"><ul class="clearfix"><li>登錄</li><li>注冊</li><li>購物車<p class="son hide">空空如也...</p></li></ul> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> $(".nav li").hover(function () {$(this).addClass("hover");},function () {$(this).removeClass("hover");} ); </script> </body> </html>

實時監聽input輸入值變化示例：

?input值變化事件

事件綁定

.on(?events?[,?selector?],function(){})

events：事件
selector: 選擇器（可選的）
function: 事件處理函數

移除事件

.off(?events?[,?selector?][,function(){}])

off()?方法移除用?.on()綁定的事件處理程序。

events：事件
selector: 選擇器（可選的）
function: 事件處理函數

阻止后續事件執行

return?false;?// 常見阻止表單提交等

注意：

像click、keydown等DOM中定義的事件，我們都可以使用`.on()`方法來綁定事件，但是`hover`這種jQuery中定義的事件就不能用`.on()`方法來綁定了。

想使用事件委托的方式綁定hover事件處理函數，可以參照如下代碼分兩步綁定事件：

$('ul').on('mouseenter', 'li', function() {//綁定鼠標進入事件$(this).addClass('hover'); }); $('ul').on('mouseleave', 'li', function() {//綁定鼠標劃出事件$(this).removeClass('hover'); });

頁面載入

當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。這是事件模塊中最重要的一個函數，因為它可以極大地提高web應用程序的響應速度。

兩種的代碼：

$(document).ready(function(){ // 在這里寫你的JS代碼... })

簡寫：

$(function(){ // 你在這里寫你的代碼 })

文檔加載完綁定事件，并且阻止默認事件發生：

?登錄校驗示例

事件委托

事件委托是通過事件冒泡的原理，利用父標簽去捕獲子標簽的事件。

示例：

表格中每一行的編輯和刪除按鈕都能觸發相應的事件。

##這是一個委托事件找到table大表格中的input 中帶有delete樣式類的進行綁定點擊事件 $("table").on("click", "input.delete", function () {
##把body標簽中的tr變量追加到tr新建的標簽中
$("tbody").append(trEle);
#找到當前點擊事件的上級的上級后進行刪除事件 $(this).parent().parent().remove();

$("table").on("click", ".delete", function () {// 刪除按鈕綁定的事件 })

動畫效果

// 基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) // 滑動 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) // 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]]) // 自定義（了解即可） animate(p,[s],[e],[fn])

自定義動畫示例：

?點贊特效簡單示例

補充

each

jQuery.each(collection, callback(indexInArray, valueOfElement))：

循環:

描述：一個通用的迭代函數，它可以用來無縫迭代對象和數組。數組和類似數組的對象通過一個長度屬性（如一個函數的參數對象）來迭代數字索引，從0到length - 1。其他對象通過其屬性名進行迭代。

方法一》

li =[10,20,30,40] $.each(li,function(i, v){console.log(i, v);//index是索引，ele是每次循環的具體元素。 })

輸出：

010 120 230 340

.each(function(index, Element))：

描述：遍歷一個jQuery對象，為每個匹配元素執行一個函數。

.each()?方法用來迭代jQuery對象中的每一個DOM元素。每次回調函數執行時，會傳遞當前循環次數作為參數(從0開始計數)。由于回調函數是在當前DOM元素為上下文的語境中觸發的，所以關鍵字?this?總是指向這個元素。

// 為每一個li標簽添加foo $("li").each(function(){$(this).addClass("c1"); });

注意: jQuery的方法返回一個jQuery對象，遍歷jQuery集合中的元素 - 被稱為隱式迭代的過程。當這種情況發生時，它通常不需要顯式地循環的?.each()方法：

也就是說，上面的例子沒有必要使用each()方法，直接像下面這樣寫就可以了：

$("li").addClass("c1"); // 對所有標簽做統一操作

注意：

在遍歷過程中可以使用?return?false提前結束each循環。

終止each循環

return false；

伏筆...

.data()

在匹配的元素集合中的所有元素上存儲任意相關數據或返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。

.data(key, value):

描述：在匹配的元素上存儲任意相關數據。

$("div").data("k",100);//給所有div標簽都保存一個名為k，值為100

.data(key):

描述: 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值—通過?.data(name,?value)或?HTML5 data-*屬性設置。

$("div").data("k");//返回第一個div標簽中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的數據，不加key參數表示移除所有保存的數據。

$("div").removeData("k"); //移除元素上存放k對應的數據

示例：

模態框編輯的數據回填表格

插件(了解即可)

jQuery.extend(object)

jQuery的命名空間下添加新的功能。多用于插件開發者向 jQuery 中添加新函數時使用。

示例：

jQuery.fn.extend(object)

一個對象的內容合并到jQuery的原型，以提供新的jQuery實例方法。

單獨寫在文件中的擴展：

(function(jq){jq.extend({funcName:function(){...},}); })(jQuery);

例子：

自定義的jQuery登錄驗證插件

?HTML文件 ?JS文件

?傳參版插件：

?HTML文件 ?JS文件

課后習題：

登錄+驗證

左側菜單

表格-增、刪、改、查

好文要頂?已關注?收藏該文?? Q1mi
關注 - 25
粉絲 - 131 我在關注他?取消關注 2 0 ??上一篇：Python連接MySQL數據庫之pymysql模塊使用
??下一篇：Bootstrap框架 posted @?2018-01-02 21:00?Q1mi?閱讀(1419) 評論(0)?編輯?收藏

轉載于:https://www.cnblogs.com/jsp0/p/8891339.html

總結

以上是生活随笔為你收集整理的jQuery入门学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： lLinux 下 Stress 压力测试
下一篇： bzoj 4945: [Noi2017]