jQuery學習筆記(1)
阿新 • • 發佈:2019-01-07
1.頁面載入時就執行
<script>
$(document).ready(function(){
alert("hello jquery")
})
//簡寫
$(function(){
alert("hello jquery")
})
</script>
類似於原生語法中的
<script>
window.onload = function(){}
</script>
區別:
- $(document).ready在頁面框架下載完就執行,而window.onload必須頁面全部載入完畢(包含圖片下載)後。
- $(document).ready可以重複寫多個,每次執行結果都不同,window.onload儘管可以執行多個,但是僅輸出最後一個執行結果。
2.鏈式呼叫
<script>
$(".title").click(function(){
$(this).addClass("active").next(".item").css("display","block")
})
</script>
next() 方法返回被選元素的後一個同級元素。
3.toggleClass() 方法
<script>
$( "button").click(function(){
$("p").toggleClass("main");
});
</script>
toggleClass() 對設定或移除被選元素的一個或多個類進行切換。
該方法檢查每個元素中指定的類。如果不存在則新增類,如果已設定則刪除之。這就是所謂的切換效果。
3.val() 方法
val() 方法用來獲取元素的值。該方法常用於表單中獲取或設定物件的值。
注意:val(array) 方法其引數也可以是陣列的形式。其作用是設定元素被選中。
<script>
$(":radio").val(["radio2" ,"radio3"])
//id為radio2和radio3的單選框被選中
</script>
4.事件冒泡
如圖所示,當body,div,還有按鈕都綁定了點選事件的時候,單擊按鈕,事件在冒泡的過程中先後又執行了div,body中的事件,所以共有三次事件的執行過程。我們可以用stopPropagation()方法阻止冒泡。
$(function() {
$("body,div,#btnShow").click(function(event) {//點選事件
alert(111);
event.stopPropagation();//阻止冒泡過程
//return false;也是阻止冒泡過程
})
})
除了stopPropagation()方法阻止冒泡,還可以用return false阻止冒泡過程
$(function() {
$("body,div,#btnShow").click(function(event) {//點選事件
alert(111);
return false;//阻止冒泡過程
})
})
5.bind( )繫結事件
<script type="text/javascript">
$(function() {
$("#btnBind").bind("click mouseout", function() {
$(this).attr("disabled", "disabled"); //按鈕不可用
})
})
</script>
bind方法中,第二個引數data為可選項,表示作為event.data屬性值傳遞到事件物件的額外資料物件,實際上該引數很少使用。
<div>姓名:<input type="text" class="txt" /></div>
<div id="divTip" class="clsTip"></div>
<script type="text/javascript">
$(function() {
var message = "執行的是focus事件";
$(".txt").bind("focus", { msg: message }, function(event) {
$("#divTip").show().html(event.data.msg); //設定文字
});
message = "執行的是change事件";
$('.txt').bind('change', { msg: message }, function(event) {
$("#divTip").show().html(event.data.msg); //設定文字
});
})
</script>
6.hover( )方法
hover(over,out)
引數over為滑鼠移到元素時觸發的函式, 引數out為滑鼠移出元素時觸發的函式,
<div class="clsFrame">
<div class="clsTitle">jQuery簡介</div>
<div class="clsContent"> jQuery是由美國人John Resig於2006年建立的一個開源專案,它的主旨是:以更少的程式碼,實現更多的功能(Write less,do more)。</div>
</div>
<script type="text/javascript">
$(function() {
$(".clsTitle").hover(function() {
$(".clsContent").show();
}, function() {
$(".clsContent").hide();
})
})
</script>
7.trigger( )方法
trigger( )方法的功能是在所選擇的元素上觸發指定型別的事件。
姓名:<input id="Text1" type="text" class="txt" value="緣滅" />
<div id="divTip" style="padding-top:5px"></div>
<script type="text/javascript">
$(function() {
var oTxt = $("input"); //獲取文字框
oTxt.trigger("select"); //自動選中文字框
oTxt.bind("btn_Click", function() {//編寫文字框自定義事件
var txt = $(this).val(); //獲取自身內容
$("#divTip").html(txt); //顯示在頁面中
})
oTxt.trigger("btn_Click"); //自動觸發自定義事件
})
</script>