jquery本質是乙個js檔案,裡面是js常用功能的封裝。比如繫結事件,修改內容,修改樣式等。
$()是乙個函式,是jquery()的簡寫,它的一些過載函式見下。
$(elements)
將乙個或多個dom物件(原生js獲取到的dom物件)轉化為jquery物件。
$('#id1').html() //返回id為id1的jquery物件,然後呼叫html()方法。此方法依然返回jquery物件,可以鏈式呼叫。
document.getelementbyid(「id1」).innerhtml;//等同於上一句
$(callback)
等同於$(document).redy(callback),dom文件載入完畢後再執行。例 $(function());
$(selector)
最常用的,根據選擇器選擇元素並轉化為jquery物件返回。
引用可以放在標籤對內或中最後的位置。
乙個例子:
語法描述
$(this)
當前 html 元素
$("p")
所有 元素
$("p.intro")
所有 class="intro" 的 元素
$(".intro")
所有 class="intro" 的元素
$("#intro")
id="intro" 的元素
$("ul li:first")
每個 })
},function(),500)//滑鼠移開後半秒後再消失
});
//設定乙個屬性
$(selector).attr("href","");
//設定多個屬性
$(selector).attr();
//增添乙個類選擇器
$("div").addclass("important");
//增添多個類選擇器
$("#div1").addclass("important blue");
//刪除乙個類選擇器
$("div").removeclass("important");
//返回css屬性中某個屬性的值
$("p").css("background-color");
//設定css屬性中某個屬性的值
$("p").css("background-color","yellow");
//設定css屬性中多個屬性的值
$("p").css();
$(selector).text("hello world!");//設定元素的文字值
$(selector).text() //返回所選元素的文字內容
$(selector).html() //設定或返回所選元素的內容(包括 html 標記)
$(selector).
val("hello world!");//設定輸入框的值
$(selector).
val();//讀取輸入框的值
主要用於實時改變導航條的選中狀態,見圖1。
圖1 導航條滾動監聽
$(window).
scroll(function() {}
//jquery函式,當滾動條發生滾動時(滑鼠滾輪也算)得到呼叫。
document.body.
scrolltop;,獲得已經滾過去的頁面的高度
$("#grade1").
offset().top; 指定元素相對於整個html頁面的頂部距離
後者減前者就是指定元素離螢幕頂端的距離。小於某個閥值時,比如100px就更新導航條的樣式。
$(selector).
scrolltop() //設定或讀取已經翻過去的內容高度(並不一定是整個頁面,比如文字域的豎直滾動條)。
$('#showid')[0].
scrollheight //獲取當前節點的高度。
圖2 使用$(selector).
scrolltop($(selector)[0].
scrollheight); 做到滾動條總是在最下面的效果
JQuery (簡化dom操作)
jquery本質是乙個js檔案,裡面是js常用功能的封裝。比如繫結事件,修改內容,修改樣式等。是乙個函式,是jquery 的簡寫,它的一些過載函式見下。elements 將乙個或多個dom物件 原生js獲取到的dom物件 轉化為jquery物件。id1 html 返回id為id1的jquery物件,...
jQuery操作DOM物件
val 方法 作用 設定或返回表單元素的值,例如 input,select,textarea的值 獲取匹配元素的值,只匹配第乙個元素 selector val 這裡的val 是空值,尤其注意 設定所有匹配到的元素的值 selector val 具體值 text 方法 作用 設定或獲取匹配元素的文字內...
Jquery操作DOM節點
1 向dom節點中追加元素 結果 我想說 你好 結果 我想說 你好 prepend 向每個匹配元素內部前置元素 例如 我想說 p prepend 你好 結果 你好我想說 prependto 將所有匹配的元素前置到指定的元素中 例如 我想說 你好 prependto p 結果 你好我想說 after ...