Jquery重點一
//全選
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').attr('checked', true);
});
//全不選
$("#CheckedNo").click(function(){
$('[type=checkbox]:checkbox').attr('checked', false);
});
//反選
$("#CheckedRev").click(function(){
$('[name=items]:checkbox').each(function(){
//此處用JQ寫法頗顯囉嗦。體現不出JQ飄逸的感覺。
//$(this).attr("checked", !$(this).attr("checked"));
//直接使用JS原生程式碼簡單實用
this.checked=!this.checked;
});
2、下拉框左右變換
$('#add').click(function() {
//獲取選中的選項刪除並追加給對方
$('#select1 option:selected').appendTo('#select2');
});
//全部移到左邊
$('#remove_all').click(function() {
$('#select2 option').appendTo('#select1');
});
//雙擊選項
$('#select1').dblclick(function(){
//繫結雙擊事件
//獲取全部的選項,刪除並追加給對方
$("option:selected",this).appendTo('#select2');
//追加給對方
});
3、表格行變色
$(function(){
$("tr:odd").addClass("odd");
/* 奇數行新增樣式*/
$("tr:even").addClass("even");
/* 偶數行新增樣式*/
})
4、DOM解析
var $para = $("p"); // 獲取<p>節點
var $li = $("ul li:eq(1)"); // 獲取第二個<li>元素節點
如果要給新增屬性則必須是以$開頭的物件輸出則不要$
var p_txt = $para.attr("title"); // 輸出<p>元素節點屬性title
var ul_txt = $li.attr("title"); // 獲取<ul>裡的第二個<li>元素節點的屬性title
var li_txt = $li.text(); // 輸出第二個<li>元素節點的text
41、建立Dom節點
var $li_1 = $("<li></li>"); // 建立第一個<li>元素
var $li_2 = $("<li></li>"); // 建立第二個<li>元素
var $parent = $("ul"); // 獲取<ul>節點。<li>的父節點
$parent.append($li_1); // 新增到<ul>節點中使之能在網頁中顯示
$parent.append($li_2); // 可以採取鏈式寫法$parent.append($li_1).append($li_2);
4.2、刪除節點
$("ul li:eq(1)").remove(); // 獲取第二個<li>元素節點後將它從網頁中刪除。
4.3刪除指定節點 $("ul li").remove("li[title!=菠蘿]"); //把<li>元素中屬性title不等於"菠蘿"的<li>元素刪除
4.4清空節點內容 $("ul li:eq(1)").empty(); // 找到第二個<li>元素節點後清空此元素裡的內容
4.5克隆節點 $("ul li").click(function(){
$(this).clone().appendTo("ul"); // 複製當前點選的節點並將它追加到<ul>元素
})
4.6替換節點
$("p").replaceWith("<strong>你最不喜歡的水果是?</strong>");
4.7包裹節點
$("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起來
4.8屬性操作
//設定<p>元素的屬性'title'
$("input:eq(0)").click(function(){
$("p").attr("title","選擇你最喜歡的水果.");
});
4.9樣式操作
//獲取樣式
$("input:eq(0)").click(function(){
alert( $("p").attr("class") );
});
//設定樣式
$("input:eq(1)").click(function(){
$("p").attr("class","high");
});
//追加樣式
$("input:eq(2)").click(function(){
$("p").addClass("another");
});
//刪除全部樣式
$("input:eq(3)").click(function(){
$("p").removeClass();
});
//刪除指定樣式
$("input:eq(4)").click(function(){
$("p").removeClass("high");
});
//重複切換樣式
$("input:eq(5)").click(function(){
$("p").toggleClass("another");
});
5、遍歷節點
var $p1 = $("p").next();
alert( $p1.html() ); // 緊鄰<p>元素後的同輩元素
var $ul = $("ul").prev();
alert( $ul.html() ); // 緊鄰<ul>元素前的同輩元素
var $p2 = $("p").siblings();
alert( $p2.html() ); // 緊鄰<p>元素的唯一同輩元素
6、Bind事件
$(document).bind("click", function (e) {
$(e.target).closest("li").css("color","red");
})
<div id="panel">
<h5 class="head">什麼是jQuery?</h5>
<div class="content">
jQuery是繼Prototype之後又一個優秀的JavaScript庫它是一個由 John Resig 創建於2006年1月的開源專案。jQuery憑藉簡潔的語法和跨平臺的相容性極大地簡化了JavaScript開發人員遍歷HTML文件、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的程式碼風格改變了JavaScript程式設計師的設計思路和編寫程式的方式。 </div>
</div>
第一種:$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
});
$("#panel h5.head").bind("mouseout",function(){
$(this).next().hide();
})
第二種:$("#panel h5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
第三種:$("#panel h5.head").toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
7、動畫
$("#panel").click(function(){
$(this).animate({left: "500px"}, 3000);
})
8、層次選擇器
//選擇 body內的所有div元素.
$('#btn1').click(function(){
$('body div').css("background","#bbffaa");
})
//在body內的選擇 元素名是div 的子元素.
$('#btn2').click(function(){
$('body > div').css("background","#bbffaa");
})
//選擇 所有class為one 的下一個div元素.
$('#btn3').click(function(){
$('.one + div').css("background","#bbffaa");
})
//選擇 id為two的元素後面的所有div兄弟元素.
$('#btn4').click(function(){
$('#two ~ div').css("background","#bbffaa");
9、表單選擇器
var $alltext = $("#form1 :text");
var $allpassword= $("#form1 :password");
var $allradio= $("#form1 :radio");
var $allcheckbox= $("#form1 :checkbox");
var $allsubmit= $("#form1 :submit");
var $allimage= $("#form1 :image");
var $allreset= $("#form1 :reset");
var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配
var $allfile= $("#form1 :file");
var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea");
var $AllInputs = $("#form1 :input");
var $inputs = $("#form1 input");