JQuery 總結(1) 選擇器的使用

2022-01-29 18:33:51 字數 2309 閱讀 1945

一 注意:

1.dom物件:通過原生js獲取的dom物件(dom樹上的節點就是,比如)

2.jquery物件:通過jquery 選擇器獲取的

jquery物件智慧型用jquery中封裝的方法,不能使用dom物件的方法 同理 dom也是一樣

二 選擇器相互更換:

1.dom轉換成jq物件  $(「dom物件」)

2.jq物件轉換成dom物件 $("div")[index]  或者 $("div").get(index)

三 基本選擇器

1. #id > $("#id名"), 

2. .class > $(".class名")   

3. element標籤 > $("div") 

4.群組選擇器 > $("div,p")

5.* > $("*")

四 後代選擇器 子元素選擇器 緊鄰的同輩選擇器

1.$("#id  li"), 這個是所有的後代

2. $("#id > li"), 這個是只查到兒子為止

3. $("#id + p ") 緊挨著#id 後面的p元素

4. $("#id ~ p ") 在#id 後面的同輩兄弟p元素

五.表單元素選擇器

三 屬性新增

1.  新增css

$(".bb").css()

獲取css

console.log($(".p2").css("width"))    在這裡獲取到css樣式內容  要提取數字 parseint

2.新增屬性和檢視屬性

固有屬性:id class src href  title type alt value.attr支援固有和自定義  ,.prop 只支援固有(判斷checkbox動態返回true和false)

$('img').attr('src','1.jpg') 這種就是給img新增屬性,[這個最好給固有屬性新增],

($("div").attr('class')); 獲取這個物件的class屬性

$("#ccc").removeattr("class") 刪除樣式

延伸 點選哪個按鈕 下面img分別顯示不同的

console.log($(this).css(["width","background"])) 同時檢視兩個屬性。200px

console.log($(this).width()) 200  number

width()content,

innerwidth()content+padding,

outerwidth() content+padding+border,

outerwidth(true) content+padding+border+margin,

console.log($(this).css("left"))   350px

console.log($(this).offset().left)   358   [相對視窗]

console.log($(this).position().left)  350  【相對有定位的父級】

arr.join(",")拼接字串

p2 內容

p3 內容

p4 內容

p5 內容

可以設定多個值

$("img").attr();

在原生js中 document.getelementsbytagname("input")[0] . setattribute("type","button"); 

五  獲取螢幕尺寸 偏移相關

$.offset().left  是指當前元素距離文件左邊多少距離

var left=($(".p2")r.offset().left;

var top1=($(".p2").offset().top;

注意 $.position().left 這個才是獲取 css中left的值

六 載入完dom 再執行函式:

winodw.onload=function(){} 所有包含載入完,然後再執行 效率低 而且只能使用一次。

$(document).ready( fn)   簡寫 $(fn) 可以使用多次。

jQuery選擇器總結 1

jquery id id選擇器,class class選擇器,選擇所有標籤,div 標籤選擇器,選擇所有div,span,id 選擇所有span標籤和id為id的所有標籤的並集 body div body標籤內所有的div body div body標籤的所有子元素div,孫子不要 id div i...

jQuery選擇器總結

父元素中所有的子元素,不包括後代元 父元素 子元素 選擇某元素的緊挨著的元素 如果不存在則什麼都不選擇 某元素 需要查詢的元素 層次選擇器4 個 選擇父元素中的某些元素 父元素 子元素 選擇選擇兄弟元素 可以間隔其他元素 某元素 需要查詢的元素 簡單選擇器10 個 簡單選擇器的特點是有個 first...

Jquery選擇器總結

jquery中的選擇器通用的格式為 selector 這裡的selector總的來說可以按照幾種類別進行選擇 1 按照元素的名稱選 這時直接寫元素的名稱即可,此時返回的是所有該名稱元素的集合。如 a 選擇所有的元素,是個集合陣列 p 選擇所有的元素 2 按照元素的id屬性選擇 這時selector的...