jquery的一點小總結
阿新 • • 發佈:2019-02-03
1:選擇器:
id選擇器 :
$('#username') 相當於 document.getElementById("username");
$('.username') 這個就像css裡面的class = username
$('p') 獲得p標籤
$('p>input') 獲得子標籤,也就是獲得p標籤下面的input標籤
$('p,div,span')同時獲得多個標籤
$(':input')獲得表單標籤
$('input[name='username']')獲得name等於username的input標籤
$("td:odd")表格的隔行
2:以前我們在頁面載入的時候老喜歡用onload
現在學習jquery以後就不再用它了,因為jquery有了另一個更好的它
$(document) .ready(function(){
$('p').click(function(){
$(this).hide();
});
});
利用上面的知識點寫一個簡單的隱藏效果,以前我們寫隱藏效果主要是通過
document.getElementById("pp").style.display="none"
現在我們通過jquery來達到同樣的效果
$(document).ready(function(){
$("button").click(function(){
$("#pp").hide();
});
});
同樣可得出隱藏有幾種寫法:
第一種可以通過指定id來進行隱藏:
$("#id1").hide();
第二種可以通過class來進行隱藏
$(".class1").hide();
第三種可以通過標籤來進行隱藏
$("p").hide();
第四種可以通過this來表示當前的使用物件
$(this).hide();
當然也可以隱藏子元素比如
$("ul .classli").hide();
隱藏所有class = classli的ul標籤的內容,當然id的子元素也可以
$("ul#id1").hide()也可以
當然有隱藏那肯定有顯示了
$("ul #id1").show()
屬性選擇器:
比如要想找
$("[src]") 選取所有帶有src屬性的元素
$("[src='a.jpg']") 選取所有帶有src屬性的並且src=a.jpg的元素
$("[src$='a']")選取以a結尾的src元素
jquery的css選擇器
比如我想給
$("p").css("background-color","red");
第一個元素可以這楊表示
$("ul li:first")表示ul元素下面的第一個li元素
jquery事件:
單擊事件:
$("#id").click(function(){
})
獲得焦點事件:
$("#id").focus(function(){
})
滑鼠移過事件
$("#id").mouseover(function(){
})
jquery給我們封裝好一個顯示和隱藏切換的方法
toggle()方法,這樣的話我們就可以切換直接切換了,比如
$("#iddd").click(function(){
$("p").toggle();
})
這樣的話就可以得到一種隱藏跟顯示的效果了!
jquery封裝了向上滾動和向下滾動的效果,只要呼叫相應的方法即可!
$("#shidup").click(function(){
$("#up").slideUp();
})
$("#shiddown").click(function(){
$("#down").slideDown();
})
$("#slidetoggle").click(function(){
$("#toggle").slideToggle();
})
還有一種特效就是漸漸的變透明和消失,jquery裡面也有封裝好的方法
$("div").click(function(){
$(this).fadeOut("show",32);
})
還有fadeIn();
jquery裡面還有一個還好的函式就是自定義動畫函式animate();
$("#button").click(function(){
$("#box").annimate({left:30px},"slow");
$("#box").annimate({right:30px},"slow");
})
jquery裡面的回撥函式
比如你想讓標籤span隱藏2000毫秒以後回撥一個函式就這麼寫
$("span").hide(1000,function(){
alert("已經隱藏了");
})
改變html內容
$("p").html="okkk"
$("p").append="this is add"//追加內容
$("p").before //在匹配的元素前面新增
$("p").after //在匹配的元素後面新增
新增css樣式:
$("p").css("background-color","red")
$("p").css({"background-color":"red","font-size":"12px"})
$("p").height()
$("p").width()
jquery給ajax提供了很多便利的方法可以直接呼叫
$.get(url,data,callback,type)
$.post(url,data.callback,type)
$.load(url,data,callback)
$.getJSon(url,data,callback)
在jquery裡面
$("ul li:first")第一行
$("ul li:lat")最後一行
$("tr:odd")偶數行
$("tr:odd")奇數行
所有type="button"的元素
$(":button")
同理所有type="radion"的元素
$(":radio")
id選擇器 :
$('#username') 相當於 document.getElementById("username");
$('.username') 這個就像css裡面的class = username
$('p') 獲得p標籤
$('p>input') 獲得子標籤,也就是獲得p標籤下面的input標籤
$('p,div,span')同時獲得多個標籤
$(':input')獲得表單標籤
$('input[name='username']')獲得name等於username的input標籤
$("td:odd")表格的隔行
2:以前我們在頁面載入的時候老喜歡用onload
現在學習jquery以後就不再用它了,因為jquery有了另一個更好的它
$(document) .ready(function(){
$('p').click(function(){
$(this).hide();
});
});
利用上面的知識點寫一個簡單的隱藏效果,以前我們寫隱藏效果主要是通過
document.getElementById("pp").style.display="none"
現在我們通過jquery來達到同樣的效果
$(document).ready(function(){
$("button").click(function(){
$("#pp").hide();
});
});
同樣可得出隱藏有幾種寫法:
第一種可以通過指定id來進行隱藏:
$("#id1").hide();
第二種可以通過class來進行隱藏
$(".class1").hide();
第三種可以通過標籤來進行隱藏
$("p").hide();
第四種可以通過this來表示當前的使用物件
$(this).hide();
當然也可以隱藏子元素比如
$("ul .classli").hide();
隱藏所有class = classli的ul標籤的內容,當然id的子元素也可以
$("ul#id1").hide()也可以
當然有隱藏那肯定有顯示了
$("ul #id1").show()
屬性選擇器:
比如要想找
$("[src]") 選取所有帶有src屬性的元素
$("[src='a.jpg']") 選取所有帶有src屬性的並且src=a.jpg的元素
$("[src$='a']")選取以a結尾的src元素
jquery的css選擇器
比如我想給
$("p").css("background-color","red");
第一個元素可以這楊表示
$("ul li:first")表示ul元素下面的第一個li元素
jquery事件:
單擊事件:
$("#id").click(function(){
})
獲得焦點事件:
$("#id").focus(function(){
})
滑鼠移過事件
$("#id").mouseover(function(){
})
jquery給我們封裝好一個顯示和隱藏切換的方法
toggle()方法,這樣的話我們就可以切換直接切換了,比如
$("#iddd").click(function(){
$("p").toggle();
})
這樣的話就可以得到一種隱藏跟顯示的效果了!
jquery封裝了向上滾動和向下滾動的效果,只要呼叫相應的方法即可!
$("#shidup").click(function(){
$("#up").slideUp();
})
$("#shiddown").click(function(){
$("#down").slideDown();
})
$("#slidetoggle").click(function(){
$("#toggle").slideToggle();
})
還有一種特效就是漸漸的變透明和消失,jquery裡面也有封裝好的方法
$("div").click(function(){
$(this).fadeOut("show",32);
})
還有fadeIn();
jquery裡面還有一個還好的函式就是自定義動畫函式animate();
$("#button").click(function(){
$("#box").annimate({left:30px},"slow");
$("#box").annimate({right:30px},"slow");
})
jquery裡面的回撥函式
比如你想讓標籤span隱藏2000毫秒以後回撥一個函式就這麼寫
$("span").hide(1000,function(){
alert("已經隱藏了");
})
改變html內容
$("p").html="okkk"
$("p").append="this is add"//追加內容
$("p").before //在匹配的元素前面新增
$("p").after //在匹配的元素後面新增
新增css樣式:
$("p").css("background-color","red")
$("p").css({"background-color":"red","font-size":"12px"})
$("p").height()
$("p").width()
jquery給ajax提供了很多便利的方法可以直接呼叫
$.get(url,data,callback,type)
$.post(url,data.callback,type)
$.load(url,data,callback)
$.getJSon(url,data,callback)
在jquery裡面
$("ul li:first")第一行
$("ul li:lat")最後一行
$("tr:odd")偶數行
$("tr:odd")奇數行
所有type="button"的元素
$(":button")
同理所有type="radion"的元素
$(":radio")