在實際開發中，jQuery的實踐性非常強大。上一篇本人已經整理出了一部分基礎知識點，該文即是對以上的補充和擴展。
//獲取文本框的值
//txt.value
var val = $("#txt").val(); //沒有參數表示獲取值
//設置文本框的值
//txt.value = "123123";
$("#txt").val("這是val設置的值"); // 有參數表示設置值
// 設置屬性
$("#btnSetAttr").click(function () {
// getAttribute
// 用法跟 css 方法完全相同
// $("a").attr("title", "傳智播客"); //設置單個屬性
$("a").attr({ //設置多個屬性
"title": "傳智播客",
"data-abc": "自定義屬性"
});
});
// 獲取屬性
$("#btnGetAttr").click(function () {
/*var a = $("a").attr("title");
console.log(a);*/
// $("a").attr("width");
});
// 設置選中/不選中
// input.checked = true;
// input.checked = flase;
$(id/class名).attr("checked",布爾值);
// :checkbox 作用：獲取到所有復選框
【注意】checked、selected、disabled要使用.prop()方法。
prop方法通常用來影響DOM元素的動態狀態，而不是改變的HTML屬性。
// 獲取內容
// 文本內容：js -> innerText / textContent
$("button:eq(0)").click(function () {
// text() 作用：獲取或者是設置內容
var txt = $("div").text();
alert(txt);
});
// 設置文本內容
$("button:eq(1)").click(function () {
// 設置內容，參數表示 要設置的內容
$("div").text("這是動態設置的內容");
});
// 獲取HTML內容
$("button:eq(2)").click(function () {
alert($("div").html());
});
// 獲取高度
$("#getHeight").click(function () {
/* var h = $("div").css("height");
console.log(h); // 200px 字符串 */
/* var h = $("div").height(); // 數值
h *= 2;
console.log(h); */
});
// 設置高度
$("#setHeight").click(function () {
// 參數：數值類型
// $("div").height(500);
// 參數：字符串
// $("div").height("500");
$("div").height("500px");
});
// 獲取元素的坐標值
$("button:eq(0)").click(function () {
// 不傳參數表示獲取
var offset = $("div").offset();
console.log(offset); // 返回值：{top: 29, left: 8}
});
// 設置元素的坐標值
$("button:eq(1)").click(function () {
// 注意：設置坐標值的時候，如果這個元素沒有定位或者定位為默認值 static
// 那麼offset() 會把這個元素的定位設置為：position: relative;
$("div").offset({
top: 200,
left: 400
});
});
$("button").bind("click mouseenter", function() {});
// 第一個參數：表示事件的名稱
// 第二個參數：表示事件處理函數
// 綁定多個事件
$("button").bind({
click: function () {},
mouseenter: function () {}
});
// 缺點：無法給動態創建出來的元素綁定事件
// 第一個參數：表示 一個選擇器，實際要觸發事件的元素
// 第二個參數：表示要觸發的事件名稱
// 第三個參數：表示 事件處理函數
$("div").delegate("p", "click", function() {
var txt = $(this).text(); // 獲取當前元素的內容
});
【說明】
①事件是什麼時候綁定的？
——頁面加載就綁定了所有的事件
②事件是什麼時候執行的？
——單擊事件：單擊； mouseenter：鼠標移上來的
// 第一個參數：表示要綁定的事件名稱
// 第二個參數：表示要觸發事件的元素（selector）
// 第三個參數：表示事件處理函數
$("div").on("click", ".cls", function () {
var txt = $(this).text(); // 獲取當前元素的內容
});
$("button:eq(1)").bind("click", function () {
// 解除第一個按鈕綁定的事件
// 不傳參數，表示所有的事件都解綁了
// 穿參數，表示解綁 事件的名稱
//$("button").eq(0).unbind("click mouseenter");
// $("button").eq(0).undelegate();
});
// 注意：解綁事件的時候 是解除的綁定事件的元素
2）使用off 解綁
$("#btnOff").on("click", function () {
// 解除第一個按鈕的事件綁定
// 參數：表示要解除事件的名稱
// 如果是解除多個事件，只需要把多個事件名稱以空格分割 作為一個字符串
$("#btn").off("click mouseenter");
// 如果不穿參數表示把所有的事件都解除綁定
$("div").off();
// 解除通過 代理 的方式綁定的事件
// 第一個參數表示：要解除事件的名稱
// 第二個參數表示：只解除通過代理方式綁定的事件
$("div").off("click", "**");
});
// 觸發文本框獲得焦點事件
// trigger() 作用：觸發事件，同時觸發了浏覽器的默認行為
$("#txt").trigger("focus"); // 參數：表示觸發事件的類型
// triggerHandler() 作用：只觸發事件，不觸浏覽器的發默認行為
2）
$(function () {
// target 表示觸發事件的元素 並不一定是 this
// currentTarget === this
$("button").on("click", function (event) {
console.log(event);
});
$("div").on("click", function () {
console.log(event);
});
// -----------------------------------------------
$("div").on("click", "button", function () {
// 此時， target為觸發事件的按鈕
// currentTarget 為綁定事件的元素
console.log(event);
});
});
// 鏈式編程代碼示例 $(“li”).parent(“ul”).parent(“div”).siblings(“div”).children(“div”).html(“內容”); 鏈式編程原理：return this; 通常情況下，只有設置操作才能把鏈式編程延續下去。因為獲取操作的時候，會返回獲取到的相應的值，無法返回 this。 end(); // 結束當前鏈最近的一次過濾操作，並且返回匹配元素之前的一次狀態。
// 設置操作 $(“div”).css(“color”, “red”); // 獲取操作 $(“div”).css(“color”); // 返回第一個元素的值 // 隱式迭代的意思是：在方法的內部會為匹配到的所有元素進行循環遍歷，執行相應的方法；而不用我們再進行循環，簡化我們的操作，方便我們調用。 // 如果獲取的是多元素的值，大部分情況下返回的是第一個元素的值。
// each() 作用：進行遍歷
// 參數：是一個匿名函數
$("li").each(function (index, ele) {
// index: 索引號
// ele : 表示元素本身 但是它是一個dom對象
// index : 0 1 2 3 .... 9
var opacity = (index + 1) / 10;
// ele.style.opacity = opacity;
$(ele).css("opacity", opacity);
});
var j = $.noConflict(); // noConflict() 作用：讓jQuery釋放對$的控制權，讓其他庫能夠使用$符號，達到多庫共存的目的。此後，只能使用jQuery來調用jQuery提供的方法
jQuery.color.js // animate()自定義動畫：不支持背景的動畫效果 // animate動畫支持的屬性列表3）如何創建jQuery插件
http://learn.jquery.com/plugins/basic-plugin-creation/
// 全局jQuery函數擴展方法
$.pluginName = function() {};
// jQuery對象擴展方法
$.fn. pluginName = function() {};
官方API：http://api.jqueryui.com/category/all/
其他教程：jQueryUI教程
3）基本使用
<!--第一步：引樣式文件--> <link rel="stylesheet" href="plugins/jquery-ui.css"/> <!--第二步：引jQuery文件--> <script src="jquery-1.12.2.js"></script> <!--第三步：引jQueryUI的文件--> <script src="plugins/jquery-ui.js"></script>