- 相關(guān)推薦
我學(xué)習(xí)jquery的經(jīng)驗
原來Jquery就是一個javascript寫的一個庫，它給我們提供了很多常用的方法，使用這些方法可以兼容多種瀏覽器，使用它可以達(dá)到很好的動畫效果，下面就來看看那些年的學(xué)習(xí)筆記吧
一、$符號
1、選擇器
可以選擇html標(biāo)簽，也可選擇ID,Class等
如下：
復(fù)制代碼 代碼如下:
$(
function() {
$("table.datalist tr:nth-child(odd)").addClass("one");//odd:匹配奇數(shù)，even：偶數(shù)，nth-child:匹配其父元素下的第N個子或奇偶元素，從1開始
var obj = $("h2 a"); //得到h２下面的a,返回的是一個數(shù)組
for (var i = 0; i < obj.length; i++) {
obj[i].innerHTML = i.toString();
}
var obj1 = $("#demo");
obj1.append("Demo_Id");
var obj2 = $(".Class"); //得到的是一個數(shù)組
alert(obj2);
$("div ul li:has(a)").addClass("Two"); //得到里中有a的標(biāo)符添加一個Class="Two"
$("li:lt(2)").addClass("one"); //得到前三個li，添加一個Class＝"one"，下標(biāo)是從０開始的
$("p>span").addClass("Two"); //得到p下的span,parent>child
}
)
2、得到標(biāo)記中的屬性
復(fù)制代碼 代碼如下:
var sTitle = $("p>span").attr("Title"); //得到標(biāo)記中的屬性值
$("p>a").text(sTitle);//設(shè)置值，若是用text()得到值，則是得到的文本，不包含html
3、設(shè)置屬性
復(fù)制代碼 代碼如下:
$("button:gt(0)").attr("disabled", "disabled"); //得到第一個button后的button,然后設(shè)置它們的disable屬性為不可用，沒有這個屬性就返回undefined
$("img").attr({ src: "test.jpg", alt: "Test Image" });
3.1、刪出屬性
$("img").removeAttr("src");
4、修改Class，如果存在（不存在）就刪除（添加）一個類。
復(fù)制代碼 代碼如下:
$(
function() {
$("div>p").mouseover(
function() {
$(this).toggleClass("HightLight");//修改樣式class
}
);
}
4.1、移出Class
$("p").removeClass("selected");
4.2、添加Class
$("p").addClass("selected");
5、圖片的復(fù)制
$("img:eq(0)").clone().appendTo($("p")); //得到第一張圖片
6、事件綁定，可以綁定多個相同的事件
復(fù)制代碼 代碼如下:
$(function() {
$("img").bind("click", function() {//綁定事件
alert("你點(diǎn)啊�。�");
});
$("img").bind("click", function() {//綁定事件
alert("你點(diǎn)啊�。�");
});
})
7、移出事件
復(fù)制代碼 代碼如下:
$(function() {
$("input[type=button]").click(function() {
$("img").unbind("click", eventImg);//unbind來移出方法
alert("移出事件！");
});
})
8、元素的顯示和隱藏
復(fù)制代碼 代碼如下:
$(function() {
$("#demobtnF").click(function() {
$("#p_btn").show(); //顯示
});
$("#demobtn").click(function() {
$("span:first").hide();//隱藏
});
})
漸入漸出的效果：在show(),與hide()方法上傳一個時間參數(shù)，從而得到淡入淡出的效果
復(fù)制代碼 代碼如下:
$(function() {
$("#Button1").click(function() {
$("#imgs").show(10000);
});
$("#Button2").click(function() {
$("#imgs").hide(5000);
});
})
復(fù)制代碼 代碼如下:
二、淡入淡出的實(shí)現(xiàn)方法
1、fadeIn()與fadeOut()：使用方法與show()、hide()一樣，效果更好
如下：
復(fù)制代碼 代碼如下:
$("#Button3").click(function() {
$("#imgs").fadeIn(10000);
});
$("#Button4").click(function() {
$("#imgs").fadeOut(5000);
});
2、幻燈片效果-由slideUp()與slideDown()方法實(shí)現(xiàn)
復(fù)制代碼 代碼如下:
$("#Button1").click(function() {
$("#imgs").slideUp(10000);
});
$("#Button2").click(function() {
$("#imgs").slideDown(5000);
});
三、Jquery功能函數(shù)
1、瀏覽器的檢測$.browser, 如下：
復(fù)制代碼 代碼如下:
if ($.browser.msie) return alert("IE");
if ($.browser.safari) return alert("safari");
if ($.browser.mozilla) return alert("mozilla");
if ($.browser.opera) return alert("opera");
2、盒子模型$.boxModel如下：
alert($.boxModel ? "standard" : "IE");
3、處理javascript對象$.each(arr,function) //對數(shù)組的每個對象用function函數(shù)處理
如下：
復(fù)制代碼 代碼如下:
var aArr = ["one", "two", "three"];
$.each(aArr, function(iNum, value) {
alert(iNum + "," + value);
});
$.grep(Arr,funtion(value)):過濾
示例：
復(fù)制代碼 代碼如下:
var aArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var DemoArr = $.grep(aArray, function(value) {
return value > 4;
});
document.write(DemoArr.join());
$.map(Array,function(value,index))
本文全部來源于那些年的學(xué)習(xí)筆記。
總結(jié)
Jquery庫中有很多函數(shù)，還有一些，特別是Jquery里的Ajax,是非常重要的，此文以回憶那些年學(xué)習(xí)Jquery的日子。
【我學(xué)習(xí)jquery的經(jīng)驗】相關(guān)文章：
學(xué)習(xí)經(jīng)驗分享:新概念英語復(fù)習(xí)方法11-20
小升初經(jīng)驗分享范文09-06
關(guān)于word的心得經(jīng)驗體會09-19
中考復(fù)習(xí)經(jīng)驗總結(jié)03-15
項目管理的20條經(jīng)驗分享08-03
關(guān)于考研復(fù)試經(jīng)驗談02-07
中考語文復(fù)習(xí)經(jīng)驗總結(jié)12-01
戶外裝備配置33條小經(jīng)驗09-05