一 注意:
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的...