jquery 學習 總結
OM = Document Object Model(文檔對象模型)
一.基礎
1. <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
可以減少加載時間,提高加載速度
2. 選擇器
$(this) $("p:first") :even :odd
3. 事件
鼠標事件 鍵盤事件 表單事件 文檔窗口事件
4. hide() 和 show() 方法來隱藏和顯示 HTML 元素 toggle()切換 hide() 和 show() 方法
5. 淡入淡出效果 fadeIn() fadeOut() fadeToggle() fadeTo()
6. 滑動 slideDown() slideUp() slideToggle()
7. 動畫 animate({left:‘100px‘},"slow") 方法用於創建自定義動畫 使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right
也可以定義相對值(該值相對於元素的當前值)。需要在值的前面加上 += 或 -= $("div").animate({ left:‘250px‘, height:‘+=150px‘, width:‘+=150px‘ });
stop() 方法用於停止動畫或效果,在它們完成之前
stop() 方法適用於所有 jQuery 效果函數,包括滑動、淡入淡出和自定義動畫。
8. $(document).ready(function(){
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落現在被隱藏了");
});
});
}); //回調函數
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("現在段落被隱藏了");
});
}); //非回調函數
二.操作 HTML 元素和屬性
- text() - 設置或返回所選元素的文本內容
- html() - 設置或返回所選元素的內容(包括 HTML 標記)
- val() - 設置或返回表單字段的值
attr() 方法用於獲取屬性值。 $("#runoob").attr("href")
$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; }); }); ///回調函數 return
append/prepend 是在選擇元素內部嵌入。
after/before 是在元素外面追加。
刪除元素和內容
- remove() - 刪除被選元素(及其子元素)
- empty() - 從被選元素中刪除子元素
remove(".italic"); 對被刪元素進行過濾
三.遍歷 DOM 樹
- parent()
- parents()
- parentsUntil()方法返回介於兩個給定元素之間的所有祖先元素
- children() 方法返回被選元素的所有直接子元素。
- find()方法返回被選元素的後代元素,一路向下直到最後一個後代。
- siblings() 方法返回被選元素的所有同胞元素。
- next() 方法返回被選元素的下一個同胞元素。
- nextAll() 方法返回被選元素的所有跟隨的同胞元素。
- nextUntil() 方法返回介於兩個給定參數之間的所有跟隨的同胞元素。
- prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似,只不過方向相反而已:它們返回的是前面的同胞元
- first(), last() 和 eq(),它們允許您基於其在一組元素中的位置來選擇一個特定的元素
- filter() 方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除,匹配的元素會被返回。
-
not() 方法返回不匹配標準的所有元素。
提示:not() 方法與 filter() 相反。
四.Ajax
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部內容加載成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
jquery 學習 總結