jQuery基礎知識
1. $和jquery的關系
- $其實是jQuery的別名
- 一般直接使用$符號
在許多JavaScript庫中都會有$作為標記，如果同時使用多個JavaScript庫時難免會出現沖突，
2. jQuery兩種入口函式
// 入口函式
$(function(){
})
$(document).ready(function(){
})
3. jquery的多種選擇器
3.1基礎選擇器
$("div") $("#box") $(".box")
3.2層級選擇器
$("ul li") $("ul>li")
3.3篩選選擇器
$("ul li:first").css("color","red"); 選擇第一個
$("ul li:last").css("color","red"); 選擇最后一個
$("ul li:eq(2)").css("color","red"); 選擇指定的 eq里面的是索引號 從0開始
$("ul li:odd").css("color","red"); 索引號為奇數的元素
$("ul li:even").css("color","red"); 索引號為偶數的元素
4. jquery的css設定語法
選擇器.css("屬性名","屬性值") 單個屬性設定
選擇器.css({
"屬性名"：”屬性值“,
"屬性名"：“屬性值”
})
示例代碼
$("div").css("border","1px solid #000");
$("#box").css({
"width":"100px",
"height":"100px",
"background-color":"red"
})
5. jquery的內容和屬性設定的多種語法
5.1 設定內容 - text()、html() 以及 val()
我們將使用前一章中的三個相同的方法來設定內容：
- text() - 設定或回傳所選元素的文本內容
- html() - 設定或回傳所選元素的內容（包括 HTML 標記）
- val() - 設定或回傳表單欄位的值
5.2 設定屬性 - attr() -prop()
prop() 方法用于設定/改變元素固有屬性值
attr() 方法也用于設定/改變自定義屬性值，
下面的例子演示如何改變（設定）鏈接中 href 屬性的值：
$("button").click(function(){
$("#runoob").attr("href","http://www.csdn.com");
});
attr() 方法也允許同時設定多個屬性，
$("button").click(function(){
$("#runoob").attr("href"："http://www.csdn.com", "title" : "CSDN官網");
});
prop代碼示例
$("button").click(function(){
var $x = $("div");
$x.prop("color","FF0000");
});
6. DOM節點的關系和增加、洗掉節點
//DOM節點
parent() 父元素
parents(指定父元素) 父元素集合
find() 后代子節點
siblings() 所有兄弟節點
next() 后邊的一個兄弟節點
prev() 后邊的一個兄弟節點
nextAll() 后邊的所有兄弟節點
prevAll() 前邊的所有兄弟節點
addClass("類名") 添加類名
removeClass() 移除型別
toggleClass() 切換類名
// jquery中節點增刪
append() 尾部追加
prepend() 頭部追加
$("添加的內容").appendTo("父節點")
remove 洗掉自身所有子元素
empty 保留自身
7. 定時器和清除定時器
setInterval() //設定定時器
clearInterval() //清除定時器
8. jquery的影片函式寫法
語法：
hide()隱藏
show()顯示
slideUp() 滑上
slideDown() 滑下
$(selector).animate(styles,speed,easing,callback)
styles:產生影片效果的一個或多個 CSS 屬性/值，
speed:規定影片的速度，
easing: 可選，規定在影片的不同點中元素的速度，默認值是 "swing"， ("swing" - 在開頭/結尾移動慢，在中間移動快
"linear" - 勻速移動)
callback:animate 函式執行完之后，要執行的函式，
jquery影片的淡入淡出
jQuery 提供了下面幾種方法可以實作顯示的淡入淡出效果：
fadeIn() //淡入
fadeOut() //淡出
fadeToggle() //淡入淡出
fadeTo() // 實作淡化到指定的透明度
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/208187.html
標籤：其他