jquery學習總結

2021-09-19 12:21:42 字數 3192 閱讀 5966

1.dom物件

var divdom = document.getelementbyid("mydiv");
2.jquery物件
var divjquery = $("#mydiv");
3.dom轉jquery物件
var domtojquery = $(divdom);
4.jquery轉dom物件
var jquerytodom = divjquery[0];
1.基礎選擇器
// id選擇器


var div1 = $("#div1");


console.log(div1);


// 類選擇器


var cls = $(".test");


console.log(cls);


// 元素選擇器


var divs = $("div");


console.log(divs);


// 通用選擇器


var all = $("*");


console.log(all); 


// 組合選擇器


var group = $("#div1,span,.test");


console.log(group);
2.層次選擇器
層次擇器


父選擇器


子選擇器


選擇器2選擇器2中的div


這是乙個p


其他div


// 後代選擇器	ancestor descendant	$("#parent div")


var houdai = $("#parent div");


// 子代選擇器 parent > child $("#parent>div")


var zidai = $("#parent > div");


// 相鄰選擇器 prev + next $(".blue + img") 只會查詢指定元素的下乙個指定元素（只往下找一次元素）


var xl = $("#child + p");


// 同輩選擇器 prev ~ sibling $(".blue ~ img")


var tb = $(".gray ~ img");
3.表單選擇器
var inputs = $(":input"); // 表單選擇器，所有表單元素（包括select,textarea,button）


var inputs2 = $("input"); //元素選擇器
4.過濾選擇器
愛好:


籃球爬床


**爬床1


**1
:checkbox 選擇所有checkbox元素

var checkboxs = $(":checkbox");
:checked 選擇所有被選中的元素

var ckeckeds = $(":checkbox:checked");
:eq(index) 匹配指定下標的元素

var second = $(":checkbox:eq(1)");
:gt(index) 匹配下標大於指定值的所有元素

var gtfirst = $(":checkbox:gt(0)");
:odd 選擇每個相隔的（奇數） 元素

:even 選擇每個相隔的（偶數） 元素

var odds= $(":checkbox:odd");
1.操作元素的屬性

獲取屬性的值

attr(屬性名稱) 獲取指定的屬性值，操作 checkbox 時選中返回 checked，沒有選中返回 undefined。

prop(屬性名稱) 獲取具有true和false兩個屬性的屬性值 prop(『checked』)

設定屬性的值

attr(屬性名稱,屬性值);

prop(屬性名稱,屬性值);

移除屬性

removeattr(屬性名) 移除指定的屬性 removeattr(『checked』)

如果屬性的返回值是true或false（checked、selected、disabled），使用prop()方式；其他屬性使用attr();

// 獲取元素的屬性


var hef = $("a").attr("href"); 


// 獲取核取方塊的選中狀態


var ck1 = $("#ck1").attr("checked");


// 設定屬性的值


$("a").attr("href","");


//移除屬性


$("a").removeattr("href");
2.操作元素的樣式
// addclass() 新增樣式，原來的樣式保留，如果出現相同的樣式，以後面定義樣式為準


$("#conred").addclass("larger");


// css() 


// 新增乙個具體樣式 css("樣式名","樣式值")


$("#remove").css("color","red");


// 同時新增多個具體的樣式名 css()


$("#remove").css()
3.操作元素的內容
// 設定（非表單）元素的內容


// 包含的html標籤


$("#html").html(""); 


// $("#html").html("上海");


// 不包含html標籤,只能設定純文字


$("#text").text("");

jQuery學習總結

function jquery jquery function fn是jquery建構函式的prototype屬性的別名 通過布林型別的 boxmodel標誌可以知道當前頁面使用的是哪乙個方框模型 如果頁面使用w3c標準的方框模型，被設定為true 如果頁面使用ie瀏覽器的方框模型 有時稱為傳統模型...

JQuery學習總結

按照案例導向來總結 首先要想辦法找到元素 1.基本的語法，載入 2.相關選擇器 基本，層級，屬性 文件操作的篩選 3.dom物件和jq物件 前面有 符號 的轉換 然後要繫結事件 比dom的事件少乙個on 操作有bind，hover等 然後做一些屬性操作 attr，addclass，html等 然後注...

jQuery學習總結

1 查詢dom元素進行取值和賦值的操作 在特定節點位置進行內容的取值和賦值操作 innerhtml 2 針對元素進行事件監聽。3 通過操作dom節點結合改變元素的css樣式，達到絢麗的動畫效果。4 對dom元素進行ajax操作。對於jquery來說，可以對這四部分提供完美的實現 a jquery擁有...