jQuery常用知識點(diǎn)總結(jié)以及平時封裝常用函數(shù)

更新時間：2016年02月23日 09:56:43 投稿：mrr

這篇文章主要介紹了jQuery常用知識點(diǎn)總結(jié)以及平時封裝常用函數(shù) 的相關(guān)資料,需要的朋友可以參考下

本文為大家介紹了jQuery中常用知識點(diǎn)及函數(shù)，包含許多細(xì)節(jié)方面的知識，下面我們一起學(xué)習(xí)一下。

jQuery中為我們提供了很多有用的屬性，自己總結(jié)的一些常用的函數(shù)。個人認(rèn)為在在線排盤開發(fā)中會比較常用的，僅供大家學(xué)習(xí)和參考。

剛開始學(xué)習(xí)前端的時候開始整理這個文檔，現(xiàn)在內(nèi)容已經(jīng)逐漸增多。雖然現(xiàn)在看起來，文檔里的內(nèi)容非常簡單，但是看著這些內(nèi)容，好像還依稀記得這一行行代碼當(dāng)時被記錄的情景。所以我想把這段回憶保存起來，為剛接觸前端的童鞋們提供一個簡單的查詢的途徑，也以此來緬懷我的前端學(xué)習(xí)之路。

** 此文檔，我會持續(xù)更新 **
--------------------------------------------------------------------------------

jquery常用知識點(diǎn)

jquery效果

隱藏/顯示：

hide/show(speed,callback); speed(空/slow/fast/毫秒)
$("#hide").click(function(){
$("p").hide();//隱藏 p標(biāo)簽;
$("p").show();//顯示 p＝標(biāo)簽;
});

淡入/淡出：

fadeIn/fadeout(speed,callback)
$(“#click”).click(function(){
$(“#div1”).fadeIn();//直接顯示；
$(“#div2”).fadeIn(“slow”);//慢慢顯示；
$(“#div3”).fadeIn(3000);//用3秒時間顯示；
})

滑動：slideDown/slideUp(speed,callback)

$(“#click”).click(function(){
$(“#div1”).slideDown();//直接下滑；
$(“#div2”).slideDown(“slow”);//慢慢下滑；
$(“#div3”).slideDown (3000);//用3秒時間下滑；
})

動畫：

$(".btn1").click(function(){
$("#box").animate({
height:"300px", 
width:"300px"
}); //將寬高變?yōu)?00px；
});

jQuery DOM

獲取文本值、屬性值：

<p id=”test”>這是一段文字中的<b>粗體</b></p>
<input id=”input” value=”文本值”/>
<a id=”a” href=”http://...”></a>

js代碼：

$(“#test”).text();//輸出“這是一段文字中的粗體”
$(“#test”).html();//輸出“這是一段文字中的<b>粗體</b>”
$(“#input”).val();//輸出“文本值”
$(“#a”).attr(“href”);//輸出“http://...”, 獲取元素屬性值

設(shè)置文本屬性值：

js代碼：

$(“#test”).text('');
$(“#test”).html('');
$(“#input”).val('');
$(“#a”).attr('href','xxx');

添加元素：

$(“#test”).append(“<span>添加文本</span>”;//在id=test的標(biāo)簽?zāi)┪蔡砑舆@段代碼
$(“#test”).prepend(“<span>添加文本</span>”;//在被選標(biāo)簽的開頭添加這段代碼
$(“#test”).after(“<span>添加文本</span>”;//在被選標(biāo)簽之后添加這段代碼
$(“#test”).before(“<span>添加文本</span>”;//在被選 標(biāo)簽之前添加這段代碼

刪除元素：

$(“#div1”).remove();//刪除被選元素及其所有的子元素
$(“#div1”).empty();//刪除被選元素的所有子元素
$(“#div1”).remove(“.info”);//刪除被選元素的類名為info的子元素

查找元素：

$("#test").parent(); //返回被選元素的直接父級元素（只是一個）；
$("#test").parents(); //返回被選元素所有的祖先元素；
$("#test").children(空/選擇器);//值為空時返回被選元素的所有直接子元素（很多），為選擇器時返回特定子元素（只是一個）；
$("#test").find('.aaa'); //在test元素下尋找類名為aaa的元素
$("#test").next(); //返回被選元素的下一個同胞元素（只一個）；

操作css:

addClass/removeClass(“…”);//向元素添加/刪除類名
$(“p”).css(“color”);//返回p元素的color樣式屬性的值
$(“p”).css(“color”,”red”);//把p元素的color屬性設(shè)為red
$(“p”).css({“color”:””red”, “font-size”:”14px”});//同時給p設(shè)置多個屬性值

jQuery AJAX:

jquery ajax函數(shù)

我自己封裝了一個ajax的函數(shù)，代碼如下：

var Ajax = function(url, success) {
$.ajax({
url: url,
type: 'get',
dataType: 'json',
timeout: 10000,
success: function(d) {
var data = d.data;
success && success(data);
},
error: function(e) {
throw new Error(e);
}
});
};
// 使用方法：
Ajax('/data.json', function(data) {
console.log(data);
});

jsonp：

有時候我們?yōu)榱丝缬颍褂胘sonp的方法，我也封裝了一個函數(shù)：

function jsonp(config) {
var options = config || {}; // 需要配置url, success, time, fail四個屬性
var callbackName = ('jsonp_' + Math.random()).replace(".", "");
var oHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement('script');
oHead.appendChild(oScript);
window[callbackName] = function(json) { //創(chuàng)建jsonp回調(diào)函數(shù)
oHead.removeChild(oScript);
clearTimeout(oScript.timer);
window[callbackName] = null;
options.success && options.success(json); //先刪除script標(biāo)簽，實(shí)際上執(zhí)行的是success函數(shù)
};
oScript.src = options.url + '?' + callbackName; //發(fā)送請求
if (options.time) { //設(shè)置超時處理
oScript.timer = setTimeout(function () {
window[callbackName] = null;
oHead.removeChild(oScript);
options.fail && options.fail({ message: "超時" });
}, options.time);
}
};
// 使用方法：
jsonp({
url: '/b.com/b.json',
success: function(d){
//數(shù)據(jù)處理
},
time: 5000,
fail: function(){
//錯誤處理
} 
});

封裝的常用函數(shù)

$(window).scroll(function() {
var a = $(window).scrollTop();
if(a > 100) {
$('.go-top').fadeIn();
}else {
$('.go-top').fadeOut();
}
});
$(".go-top").click(function(){
$("html,body").animate({scrollTop:"0px"},'600');
});

阻止冒泡函數(shù)

function stopBubble(e){
e = e || window.event; 
if(e.stopPropagation){ 
e.stopPropagation(); //W3C阻止冒泡方法 
}else { 
e.cancelBubble = true; //IE阻止冒泡方法 
} 
}

獲取url中“?”后的對象屬性值

var getURLParam = function(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)', "ig").exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
};

深度拷貝對象

function cloneObj(obj) {
var o = obj.constructor == Object ? new obj.constructor() : new obj.constructor(obj.valueOf());
for(var key in obj){
if(o[key] != obj[key] ){
if(typeof(obj[key]) == 'object' ){
o[key] = mods.cloneObj(obj[key]);
}else{
o[key] = obj[key];
}
}
}
return o;
}

生成隨機(jī)數(shù)

function randombetween(min,max){
return min + (Math.random() * (max-min +1));
}
console.log(parseInt(randombetween(50,100)));

其他

git常用命令

1、git config user.name \ user.email //查看當(dāng)前git的用戶名稱、郵箱
2、git clone https://github.com/jarson7426/javascript.git //clone倉庫到本地。
3、修改本地代碼，提交到分支: git add file \ git commit -m “新增文件”
4、把本地庫推送到遠(yuǎn)程庫: git push origin master
5、查看提交日志：git log -5
6、返回某一個版本：git reset --hard 123
7、創(chuàng)建分支：git branch name \ git checkout name
8、合并name分支到當(dāng)前分支：git merge name
9、刪除本地分支：git branch -d name
10、刪除遠(yuǎn)程分支： git push origin :daily/x.x.x
11、git checkout -b mydev origin/daily/1.0.0 //把遠(yuǎn)程daily分支映射到本地mydev分支進(jìn)行開發(fā)
12、合并遠(yuǎn)程分支到當(dāng)前分支 git pull origin daily/1.1.1
13、發(fā)布到線上：
git tag publish/0.1.5
git push origin publish/0.1.5:publish/0.1.5

以上內(nèi)容是小編給大家介紹的jQuery常用知識點(diǎn)總結(jié)以及平時封裝常用函數(shù)，希望對大家有所幫助！

您可能感興趣的文章: