jQuery 是一套JavaScript腳本庫，注意 jQuery 是腳本庫,而不是腳本框架。"庫"不等于"框架"。jQuery 并不能幫助我們解決腳本的引用管理和功能管理,這些都是腳本框架要做的事。

腳本庫能夠幫助我們完成編碼邏輯,實現業務功能。使用 jQuery 將極大的提高編寫javascript代碼的效率, 讓寫出來的代碼更加優雅, 更加健壯。

使用 jQuery 的這些功能函數,能夠幫助我們快速完成各種功能,而且會讓我們的代碼異常簡潔。

javascript腳本在不同瀏覽器的兼容性一直是 Web 開發人員的噩夢，比如在 jQuery 中就通過統一event對象,讓我們可以在所有瀏覽器中使用event.target獲取事件對象。

• 一、選擇器（selector）
  • 1、基本選擇器
  • 2、層級選擇器
  • 3、基本篩選器
• 二、篩選器
• 三、操作元素（action）
  • 1、 屬性操作
  • 2、CSS操作
  • 3、文檔處理
  • 4、事件

總結一下，jQuery封裝了JavaScript + DOM，可以寫的更少做的更多。本文僅對常用內容做一個總結，方便日后把相關知識點快速撿起來。

jQuery語法基本格式：$(selector).action()

鏈式編程

jQuery速查表

一、選擇器（selector）

1、基本選擇器

#id element .class * 包含body selector1,selector2,selectorN 并列選擇，組合$("p").css("color","red") $("#div1").text("it works") $(".div2").css("background","yellow")

2、層級選擇器

ancestor descendant 所有后代 parent > child 只有兒子 prev + next 后面緊鄰的下一個 prev ~ siblings 后面所有的兄弟同輩

3、基本篩選器

• 針對索引進行篩選

:first 第一個 :even 索引為偶數 :odd 索引為奇數 :eq(index) 索引等于 :gt(index) 索引大于 :lt(index) 索引小于$("li:first") $("li:even") $("li:eq(2)") $("li:gt(1)")

其他

:not(selector) 非 :header :focus

針對內容進行篩選

:contains(text)$("div:contains('moumou')"):empty 選擇內容為空的:has(selector) 如包含P標簽$("div:has(p)").addClass("test");

• 針對屬性進行篩選----重要常用

[attribute] 也可以自定義屬性 [attribute=value] [attr1][attr2][attr3] 多個屬性并列<div id="div1" selfdefine="moumou"/>$("div[selfdefine]")$("div[id='div1']")

• 針對表單進行篩選

:input :checkbox$("input") 等價于 $(":input")$("[type='text']") 等價于 $(":text")$("input[type='checkbox']") 等價于 $(":checkbox")

針對表單對象屬性篩選

:enabled :disabled 禁用標簽 :checked :selected$("input:checked") $("select option:selected")

二、篩選器

過濾篩選器

\\通過索引過濾 eq(index|-index) first() last()hasClass(class)$("p:eq(1)").css("fontSize","30px") $("p").eq(1).css("fontSize","30px") //優勢后者不需要字符串拼接

查找篩選器

children([expr]) 只有兒子，沒有孫子 find(e|o|e) 所有后代$("div").children(".test") $("div").find(".test") next([expr]) 緊鄰的下一個 nextAll([expr]) 下面的所有滿足條件的集合 nextUntil([e|e][,f]) 到**為止$(".test").next() $(".test").nextAll() $(".test").nextUntil()prev([expr]) 緊鄰的上一個 prevall([expr]) prevUntil([e|e][,f])$("div").prev() $("div").prevAll() $("div").prevUntil()parent([expr]) 父親 parents([expr]) 父親爺爺等祖先 parentsUntil([e|e][,f])$(".test").parent() $(".test").parents() $(".test").parentUntil() siblings([expr]) 后面的兄弟$("div").siblings()

三、操作元素（action）

1、 屬性操作

//HTML代碼/文本/值 $("p").text() $("p").html() $(":checkbox").val()$(".test").attr("attr") $(".test").attr("attr","value") $(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")$(".test").prop("checked",true)$(".test").addClass("hide") $(".test").removeClass("hide")

取消全選的實例

<button onclick="selectAll();">全選</button><button onclick="cancel();">取消</button><button onclick="reverse();">反選</button><table border="1"><tr><td><input type="checkbox"></td><td>11111</td></tr><tr><td><input type="checkbox"></td><td>11111</td></tr><tr><td><input type="checkbox"></td><td>11111</td></tr></table><script src="jquery-1.8.2.js"></script> <script>function selectAll() {$("table :checkbox").prop("checked",true)}function cancel() {$("table :checkbox").prop("checked",false)}function reverse() {$("table :checkbox").each(function(){if ($(this).prop("checked")){$(this).prop("checked",false)}else {$(this).prop("checked",true)}}) } </script>

each 函數需要注意的問題：

// each return 退出與外層函數無關 // each return false 提示each退出 function f1(){var li=[11,22,23,44]//x,y索引和值$.each(li,function (x,y) {console.log(y);if (x == 1){return false;}});return console.log("ok"); }

2、CSS操作

(樣式) css("{color:'red',backgroud:'blue'}")

(位置) offset() position() scrollTop() scrollLeft()

(尺寸) height() width()

//scrollTop距離頂部的距離window.onscroll=function(){var current=$(window).scrollTop();console.log(current) }

3、文檔處理

內部插入

append() appendTo() $("#c1").append("<b>hello</b>") $("p").appendTo("div")prepend() prependTo()

外部插入

before() insertBefore() after insertAfter() replaceWith() 替換 remove() 刪除標簽 empty() 清空內容 clone() 復制某標簽

4、事件

整個文檔拓撲結構加載再執行js代碼

// 所有函數放入其中，需要等待整個文檔加載完，避免找不到 $(document).ready(function(){...}) $(function(){...})

綁定事件

//js中的寫法 <button class="result" onclick="show(this)"></button> function show(self){self.lalalala; }//jQuery的寫法 $(".result").click(function(this){this.lalalala; })$("p").click(function(){})$("p").bind("click",function(){}) //用的時候再綁定事件 事件委托 $("ul").delegate("li","click",function(){})

轉載于:https://www.cnblogs.com/lidyan/p/6913739.html

總結

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

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