前端JQuery 語法

1 關于表格基數偶數背景顏色變換的

2 關于has后代 ? 和not非

?

3 jQuery 和dom的轉換?

dom 轉換成jQuery 用$(包起來) 不加引號

?

?

?4 ?關于 next 和pre 的運用 注意不能until 的值是取不到的

?5 jQuery支持支持批量操作　

　　　　 $(".cover").removeClass("hide");
$(".modal").removeClass("hide");
$(".cover, .modal").removeClass("hide"); // 支持批量操作（必須是統一的操作）

6篩選器

下一個元素：

$("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2")

上一個元素：

$("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2")

父親元素：

$("#id").parent() $("#id").parents() // 查找當前元素的所有的父輩元素
$("#id").parentsUntil() // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。

?

兒子和兄弟元素：

$("#id").children();// 兒子們 $("#id").siblings();// 兄弟們

查找元素：

$("#id").find()// 搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的后代元素的好方法。

?

?

補充：

.first()// 　　獲取匹配的第一個元素 .last()// 　　獲取匹配的最后一個元素 .not()// 　　 從匹配元素的集合中刪除與指定表達式匹配的元素 .has()// 　　保留包含特定后代的元素，去掉那些不含有指定后代的元素。

?

?7樣式操作

樣式類

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()是相對于相對于父級元素的位移。

?

?

?

height() width() innerHeight() innerWidth() outerHeight() outerWidth()

?

?

?

8 文本操作

HTML代碼：

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

?

?

文本值：

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

值：

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

?

9 關于dom 和jQuery 元素標簽的寫法

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

拿上面那個例子舉例，jQuery對象和DOM對象的使用：

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

dom ? innerHTML

dom ?innerTEXT

jQuery ?.html

jQuery ?.text

?

10 屬性操作

用于ID等或自定義屬性：

attr(attrName)// 　　　　　　　　 返回第一個匹配元素的屬性值 attr(attrName, attrValue)// 　　為所有匹配元素設置一個屬性值 attr({k1: v1, k2:v2})// 　　　　為所有匹配元素設置多個屬性值 removeAttr()// 　　　　　　　　　　從每一個匹配的元素中刪除一個屬性

?

?

用于checkbox和radio

prop() // 獲取屬性 返回布爾值 removeProp() // 移除屬性

?

?

注意：

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

?

11通過主要應用在input 中的type 的值 固定的格式 ? ?：type值 ?就是查找所有的選框

例子：

// 示例 <input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']");// 取到checkbox類型的input標簽 $("input[type!='text']");// 取到類型不是text的input標簽

表單常用篩選：

:text :password
:file :radio :checkbox
:submit :reset :button

例子：

$(":checkbox") // 找到所有的checkbox

表單對象屬性:

:enabled :disabled :checked :selected

?

?

?

?

轉載于:https://www.cnblogs.com/xiaoluoboer/p/8184659.html

總結

以上是生活随笔為你收集整理的day 55 前端的全部內容，希望文章能夠幫你解決所遇到的問題。

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