一、基礎選擇器：
$(“p”)會得到一組P標籤元素,其中“p”表示CSS中的標籤選擇器。$()中的()不一定是指定元素，也可能是函數。$()方法是jQuery()簡寫。- $("div").html("Hello iMooc!”); //元素選擇器
- $("#my_id”) $(".red”) //id class
$("button").attr("disabled","no”); //attr()方法的功能是設置或獲取元素的某項屬性值。- $("*”) $(“div *”) //所有元素
- $(".red,.green”) //選多個元素
- $("div label”) //層次選擇器
- $("div > label”) //子層次選擇器
- $(“prev + next”) $("p+label") //查找與“prev”元素緊鄰的下一個“next”元素
- $(“prev ~ siblings”) $("p~label")
//prev ~ siblings獲取prev 元素後面全部相鄰的元素 - $(“li:first”)//一組相同標籤元素中的第1個元素
- $("li:last”) //給最後的li標籤文字添加紅色。
- $("li:eq(3)”) //從0開始
- li:contains('土豪’) $("li:contains('jQuery')")//按照文本內容來查找一個或多個元素
- $("li:has('label')”) //包含的元素名稱來過濾
- $("p:hidden")
$("input:hidden") //
:hidden過濾選擇器的功能是獲取全部不可見的元素 $("li:visible”) //:visible過濾選擇器獲取的是全部可見的元素- $("li[title='蔬菜']”) //屬性選擇器
- $("li[title*='果']”) //包含的所有
- $("li:first-child”) //首個子元素
- :last-child //末個子元素
實例：
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li hidden>6</li>
<li hidden>7</li>
<li hidden>8</li>
<a href="javascript:;">更多</a>
</ul>
<script type="text/javascript">
$("a").click(function(){
if($("a").text() === "更多"){
$("a").text("簡化");
$("li:hidden").css("display","list-item");
}else{
$("a").text("更多");
$("li:eq(6)").css("display","none");
$("li:eq(7)").css("display","none");
$("li:eq(5)").css("display","none");
}
});
</script>
</body>或者：$("li[class=no]").show(); $("li[class=no]").hide();
二、表單選擇器：
:input表單選擇器獲取表單元素,不僅包括所有<input>標記的表單元素，而且還包括<textarea>、<select> 和 <button>標記的表單元素 $(“#frmTest :input")- $("#frmTest :text”) //文本輸入框
- $("#frmTest :password").addClass("bg_red");
- $("#frmTest :radio").attr("disabled”,true); //單選 disable 1.布爾“disabled” 2removeAttr 3“"
- $("#frmTest :checkbox").attr("disabled",false); //複選框
- $("#frmTest input:submit").addClass("bg_red"); //提交按鈕 注意篩選表單的按鈕
- $("#frmTest :image").addClass("bg_red”); //圖像
- $("#frmTest :button").addClass("bg_blue”); 按鈕
- $("#frmTest :checked").attr("disabled", true);// true,false沒有雙引號,表示布爾類型
- $("#frmTest :selected").text(); //下拉列表選中狀態的
三、操作DOM元素
- $("#a1").attr("href" , "www.imooc.com”); var $url = $("#a1").attr("href");
//
attr(屬性名)格式是獲取元素屬性名的值，attr(屬性名，屬性值)格式則是設置元素屬性名的值。 - var $content = "<b>唉，我又變胖了！</b>";$("#html").html($content); $("#text").text($content);//使用
html()和text()方法操作元素的內容，當兩個方法的參數爲空時，表示獲取該元素的內容，而如果方法中包含參數，則表示將參數值設置爲元素內容。 - $("#content").css({"background-color":"red","color":"white"});//通過
addClass()和css()方法可以方便地操作元素中的樣式，前者括號中的參數爲增加元素的樣式名稱，後者直接將樣式的屬性內容寫在括號中。 - $("#content").removeClass("white blue");//使用
removeAttr(name)和removeClass(class)分別可以實現移除元素的屬性和樣式的功能，前者方法中參數表示移除屬性名，後者方法中參數則表示移除的樣式名 - $("body").append(rethtml());//
append(content)方法的功能是向指定的元素中追加內容，被追加的content參數，可以是字符、HTML元素標記，還可以是一個返回字符串內容的函數。 - $(content).appendTo(selector),參數content表示需要插入的內容，參數selector表示被選的元素，即把content內容插入selector元素內，默認是在尾部。 var $html = "<span class='red'>小青蛙</span>" $($html).appendTo("div");
$(selector).before(content)和$(selector).after(content)//使用before()和after()方法可以在元素的前後插入內容，它們分別表示在整個元素的前面和後面插入指定的元素或內容 var $html = "<span class='red'>兄弟。</span>" $(".green").after($html);- $("body").append($(".red").clone()); //調用
clone()方法可以生成一個被選元素的副本，即複製了一個被選元素，包含它的節點、文本和屬性 $(selector).replaceWith(content)和$(content).replaceAll(selector)//replaceWith()和replaceAll()方法都可以用於替換元素或元素中的內容，但它們調用時，內容和被替換元素所在的位置不同 $($html).replaceAll(".green");$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)//wrap()和wrapInner()方法都可以進行元素的包裹，但前者用於包裹元素本身，後者則用於包裹元素中的內容 $(".red").wrapInner("<i></i>");- $(selector).each(function(index))//使用
each()方法可以遍歷指定的元素集合，在遍歷時，通過回調函數返回遍歷元素的序列號，參數function爲遍歷時的回調函數，index爲遍歷元素的序列號，它從0開始，如：
$("span").each(function (index) {if (index == 1) {$(this).attr("class", "red");
}});
remove()方法刪除所選元素本身和子元素，該方法可以通過添加過濾參數指定需要刪除的某些元素，而empty()方法則只刪除所選元素的子元素。empty()可以理解爲刪除了本身內容
四、jQuery 事件與應用
$(document).ready(function(){})等價於$(function(){});//ready()只要頁面的DOM結構加載後便觸發$(selector).bind(event,[data]
function),
bind()方法綁定元素的事件非常方便$(function () {
$("#btntest").bind("click mouseout", function () {
$(this).attr("disabled", "true");
})
});
$(selector).hover(over，out);//over參數爲移到所選元素上觸發的函數，out參數爲移出元素時觸發的函數。
$(selector).toggle(fun1(),fun2(),funN(),…);//click事件中綁定多個函數
$("#btntest").bind("click", function () {
$("div").toggle({
function(){
$(this).hide();
},function(){
$(this).show();
}
});
});$("div").unbind("click dblclick");//
unbind()方法可以移除元素已綁定的事件$(selector).one(event,[data],fun)
//one()方法可以綁定元素任何有效的事件，但這種方法綁定的事件只會觸發一次$(selector).trigger(event) //
trigger()方法可以直接手動觸發元素指定的事件
$("div").trigger("change-color");文本框的focus和blur事件,獲得和失去焦點時觸發
$("input")
.bind("focus", function () {
$("div").html("請輸入您的姓名！");
});
$("input").bind("blur", function () {
if ($(this).val().length == 0)
$("div").html("你的名稱不能爲空！");
});
});下拉列表框的change事件
$(selector).live(event,[data],fun) //與bind()功能相同，live()方法還可以綁定動態元素
$(function () {
$("#btntest").live("click mouseout", function () {
$(this).attr("disabled", "false");
});
$("body").append("<input id='btntest' type='button' value='點擊或移出就不可用了' />");
});五、動畫特效:
$(selector).hide(speed,[callback])和$(selector).show(speed,[callback])
//參數speed設置隱藏或顯示時的速度值，可爲“slow”、“fast”或毫秒數值，可選項參數callback爲隱藏或顯示動作執行完成後調用的函數名。$(selector).live(event,[data],fun) //與bind()功能相同，live()方法還可以綁定動態元素
$(function () {
$("#btntest").live("click mouseout", function () {
$(this).attr("disabled", "false");
});
$("body").append("<input id='btntest' type='button' value='點擊或移出就不可用了' />");
});<body>
<h3>toggle()方法的動畫切換效果</h3>
<div>
<h4>
<span class="fl">我喜歡吃的水果</span>
<span class="fr" id="spnTip">顯示</span>
</h4>
<ul>
<li>蘋果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
var $spn = $("#spnTip");
$("h4").bind("click", function () {
$("ul").toggle("slow",function(){
$spn.html() == "隱藏" ? $spn.html("顯示") : $spn.html("隱藏");
});
});
});
</script>
</body>$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback])
//滑動效果slideToggle()方法可以切換slideUp()和slideDown()<body>
<h3>使用slideToggle()方法切換滑動效果</h3>
<div>
<h4>
<span class="fl">我喜歡吃的水果</span>
<span class="fr" id="spnTip">向下滑</span></h4>
<ul>
<li>蘋果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
<input id="hidval" type="hidden" value="0"/>
</div>
<script type="text/javascript">
$(function () {
var $spn = $("#spnTip");
$("h4").bind("click", function () {
$("ul").slideToggle("slow",function() {
$spn.html() == "向下滑" ? $spn.html("向上滑") : $spn.html("向下滑");
});
})
});
</script>
</body>$(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback])
//淡入淡出 $(selector).fadeTo(speed,opacity,[callback])//調用
fadeTo()方法，可以將所選擇元素的不透明度以淡入淡出的效果調整爲指定的值,其中speed參數爲效果的速度，opacity參數爲指定的不透明值，它的取值範圍是0.0~1.0，可選項參數callback爲效果完成後，回調的函數名
$(this).fadeTo("slow",0.2);$(selector).animate({params},speed,[callback])
//自定義動畫效果,其中，params參數爲製作動畫效果的CSS屬性名與值，speed參數爲動畫的效果的速度，單位爲毫秒，可選項callback參數爲動畫完成時執行的回調函數名。
$("span").animate({
width: "80px",
height: "80px"
},
3000, function () {
$("#tip").html("執行完成!");
});調用
animate()方法不僅可以製作簡單漸漸變大的動畫效果，而且還能製作移動位置的動畫，在移動位置之前，必須將被移元素的“position”屬性值設爲“absolute”或“relative”，否則，該元素移動不了。$("span").animate({
left: "+=100px"
}, 3000, function () {
$(this).animate({
height: '+=30px',
width: '+=30px'
}, 3000, function () {
$("#tip").html("執行完成!");
});
});$(selector).stop([clearQueue],[goToEnd])
//stop()方法的功能是在動畫完成之前，停止當前正在執行的動畫效果，這些效果包括滑動、淡入淡出和自定義的動畫,其中，兩個可選項參數clearQueue和goToEnd都是布爾類型值，前者表示是否停止正在執行的動畫，後者表示是否完成正在執行的動畫，默認爲false$(selector).delay(duration) //延遲
六、實現Ajax應用
load(url,[data],[callback])
//使用
load()方法通過Ajax請求加載服務器中的數據，並把返回的數據放置到指定的元素中，參數url爲加載服務器地址，可選項data參數爲請求時發送的數據，callback參數爲數據請求成功後，執行的回調函數。$("ul")
.html("<img src='Images/Loading.gif' alt=''/>")
.load("http://www.imooc.com/data/fruit_part.html",function(){
$this.attr("disabled", true);
});jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
//使用getJSON()方法可以通過Ajax異步請求的方式，獲取服務器中的數組，並對獲取的數據進行解析，顯示在頁面中,url參數爲請求加載json格式文件的服務器地址，可選項data參數爲請求時發送的數據，callback參數爲數據請求成功後，執行的回調函數.$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getJSON("http://www.imooc.com/data/sport.json",function(data){
$this.attr("disabled", "true");
$.each( data,function (index, sport) {
if(index==3)
$("ul").append("<li>" + sport["name"] + "</li>");
});
});
})
});jQuery.getScript(url,[callback])或$.getScript(url,[callback])
//使用getScript()方法異步請求並執行服務器中的JavaScript格式的文件
//向服務器發送get\post請求
$.get(url,[callback])
$.get("http://www.imooc.com/data/info_f.php",function(data) {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫：" + data.name + "</li>");
$("ul").append("<li>男朋友對我說：" + data.say + "</li>");
}, "json");$.post(url,[data],[callback])
$.post("http://www.imooc.com/data/check_f.php",{
num:$("#txtNumber").val()
},
function (data) {
$("ul").append("<li>你輸入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
});
$(selector).serialize() //使用
serialize()方法可以將表單中有name屬性的元素值進行序列化，生成標準URL編碼文本字符串，直接可用於ajax請求
$("#litest").html($("form").serialize());jQuery.ajax([settings])或$.ajax([settings])
//使用ajax()方法是最底層、功能最強大的請求服務器數據的方法，它不僅可以獲取服務器返回的數據，還能向服務器發送請求並傳遞數值,
(其中參數settings爲發送ajax請求時的配置對象，在該對象中，url表示服務器請求的路徑，data爲請求時傳遞的數據，dataType爲服務器返回的數據類型，success爲請求成功的執行的回調函數，type爲發送數據請求的方式，默認爲get)$.ajax({
url:"http://www.imooc.com/data/check.php",
data: { num: $("#txtNumber").val() },
type:"post",
success: function (data) {
$("ul").append("<li>你輸入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
//使用ajaxSetup()方法可以設置Ajax請求的一些全局性選項值，設置完成後，後面的Ajax請求將不需要再添加這些選項值$(function () {
$.ajaxSetup({
type:"post",
success:function(data){
$("ul").append("<li>你輸入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
$("#btnShow_1").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check.php"
});
})
$("#btnShow_2").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check_f.php"
});
})
});
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
//ajaxStart()和ajaxStop()方法是綁定Ajax事件。ajaxStart()方法用於在Ajax請求發出前觸發函數，ajaxStop()方法用於在Ajax請求完成後觸發函數。
(兩個方法中括號都是綁定的函數，當發送Ajax請求前執行ajaxStart()方法綁定的函數，請求成功後，執行ajaxStop
()方法綁定的函數)七、jQuery插件
$(form).validate({options})
//其中form參數表示表單元素名稱，options參數表示調用方法時的配置對象，所有的驗證規則和異常信息顯示的位置都在該對象中進行設置。
$("#frmV").validate(
{
/*自定義驗證規則*/
rules: {
email:{
required:true,
email:true
}
},
/*錯誤提示位置*/
errorPlacement: function (error, element) {
error.appendTo(".tip");
}
}
);
$(form). ajaxForm ({options})
//通過表單form插件，調用
ajaxForm()方法，實現ajax方式向服務器提交表單數據，並通過方法中的options對象獲取服務器返回數據，其中form參數表示表單元素名稱；options是一個配置對象，用於在發送ajax請求過程，設置發送時的數據和參數$(function () {
var options = {
url: "http://www.imooc.com/data/form_f.php",
target: ".tip"
}
$(form).ajaxForm(options);
});
$(linkimage).lightBox({options})
//該插件可以用圓角的方式展示選擇中的圖片，使用按鈕查看上下張圖片，在加載圖片時自帶進度條，還能以自動播放的方式瀏覽圖片 其中linkimage參數爲包含圖片的<a>元素名稱，options爲插件方法的配置對象
$(function () {
$('.divPics a').lightBox({
overlayBgColor: "#666", //圖片瀏覽時的背景色
overlayOpacity: 0.5, //背景色的透明度
containerResizeSpeed: 600 //圖片切換時的速度
})
});
$(linkimage).jqzoom({options})
//在調用jqzoom圖片放大鏡插件時，需要準備一大一小兩張一樣的圖片，在頁面中顯示小圖片，當鼠標在小圖片中移動時，調用該插件的
jqzoom()方法，顯示與小圖片相同的大圖片區域，從而實現放大鏡的效果$(function () {
$("#jqzoom").jqzoom({ //綁定圖片放大插件jqzoom
zoomWidth: 123, //小圖片所選區域的寬
zoomHeight: 123, //小圖片所選區域的高
zoomType: 'reverse' //設置放大鏡的類型
});
});
保存：
$.cookie(key，value)；讀取：$.cookie(key)，刪除：$.cookie(key，null)//使用cookie插件後，可以很方便地通過cookie對象保存、讀取、刪除用戶的信息，還能通過cookie插件保存用戶的瀏覽記錄其中參數key爲保存cookie對象的名稱，value爲名稱對應的cookie值。
<script src="http://www.imooc.com/data/jquery.cookie.js" type="text/javascript"></script>
$(function () {
if ($.cookie("email")) {
$("#email").val($.cookie("email"));
}
$("#btnSet").bind("click", function () {
if ($("#chksave").is(":checked")) {
$.cookie("email",$("#email").val(), {
path: "/", expires: 7
})
}
else {
$.cookie("email",null, {
path: "/"
})
}
});
});
$(textbox).autocomplete(urlData,[options]);
//搜索插件的功能是通過插件的
autocomplete()方法與文本框相綁定，當文本框輸入字符時，綁定後的插件將返回與字符相近的字符串提示選擇
,其中，textbox參數爲文本框元素名稱，urlData爲插件返回的相近字符串數據，可選項參數options爲調用插件方法時的配置對象var arrUserName = ["王五", "劉明", "李小四", "劉促明", "李淵", "張小三", "王小明"];
$("#txtSearch").autocomplete(arrUserName,{
minChars: 0, //雙擊空白文本框時顯示全部提示數據
formatItem: function (data, i, total) {
return "<I>" + data[0] + "</I>"; //改變匹配數據顯示的格式
},
formatMatch: function (data, i, total) {
return data[0];
},
formatResult: function (data) {
return data[0];
}
}).result(SearchCallback);
function SearchCallback(event, data, formatted) {
$(".tip").show().html("您的選擇是：" + (!data ? "空" : formatted));
}
八、jQuery 工具類函數
$(function () {
var strTmp = "您的瀏覽器名稱是：";
if ($.browser.chrome) { //谷歌瀏覽器
strTmp += "Chrome";
}
if ($.browser.mozilla) { //火狐相關瀏覽器
strTmp += "Mozilla FireFox";
}
strTmp += "<br /><br /> 版本號是：" //獲取版本號
+$.browser.version;
$(".content").html(strTmp);
});
$.support.boxModel 顯示當前瀏覽器是否屬於標準的w3c盒子模型
w3c盒子模型不包含，IE盒子模型則包含，Width和Height這兩個屬性值中是否包含padding和border的值 <!DOCTYPE html>
$.isEmptyObject(obj); //檢測對象是否爲空
$.isPlainObject (obj); //檢測對象是否爲通過
{}或new
Object()關鍵字創建的原始對象$.contains (container, contained);
//調用名爲
$.contains的工具函數，能檢測在一個DOM節點中是否包含另外一個DOM節點，如果包含，返回true，否則，返回false值
參數container表示一個DOM對象節點元素，用於包含其他節點的容器，contained是另一個DOM對象節點元素，用於被其他容器所包含$.contains(node_a,node_b)
$.trim (str); 調用名爲
$.trim的工具函數，能刪除字符串中左右兩邊的空格符，但該函數不能刪除字符串中間的空格
var strNew = $.trim(strOld);$. param
(obj); //調用名爲
$.
param的工具函數，能使對象或數組按照key/value格式進行序列化編碼，該編碼後的值常用於向服務端發送URL請求,參數obj表示需要進行序列化的對象，該對象也可以是一個數組，整個函數返回一個經過序列化編碼後的字符串
var objNewInfo =$.param(objInfo);(p.s:param和serialize的區別是什麼？前者是對任意的參數進行URL地址格式的轉換)
$. extend
({options}); //調用名爲
$.
extend的工具函數，可以對原有的工具函數進行擴展，自定義類級別的jQuery插件(function ($) {
$.extend({
"MinNum": function (p1, p2) {
return (p1 > p2) ? p2 : p1;
}
});
})(jQuery);
$(function () {
$("#btnShow").bind("click", function () {
$(".tip").html("");
var strTmp = "17與18中最小的數是：";
strTmp +=$.MinNum (17, 18);
//顯示在頁面中
$(".tip").show().append(strTmp);
});
});
$. extend
(obj1,obj2,…objN); //除使用
$.extend擴展工具函數外，還可以擴展原有的Object對象，在擴展對象時，兩個對象將進行合併，當存在相同屬性名時，後者將覆蓋前者,參數obj1至objN表示需要合併的各個原有對象var objNewInfo =$.extend(objInfo,objMess);
//通過焦點改變背景顏色
(function($){
$.extend({
"overChangeColor":function(linli){
linli.css("background-color","#aaa");
},
"outChangeColor":function(linli){
linli.css("background-color","#fff");
}
})
})(jQuery);
$(function () {
$("li").bind("mouseout",function(){
$.outChangeColor($(this));
});
$("li").bind("mouseover",function(){
$.overChangeColor($(this));
})
});
