jQuery經常使用知識點總結以及平時封裝經常使用函數

jquery效果

隱藏/顯示：

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

淡入/淡出：

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"
}); //將寬高變爲300px；
});

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://...」, 獲取元素屬性值

設置文本屬性值：

js代碼：

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

添加元素：

$(「#test」).append(「<span>添加文本</span>」;//在id=test的標籤末尾添加這段代碼
$(「#test」).prepend(「<span>添加文本</span>」;//在被選標籤的開頭添加這段代碼
$(「#test」).after(「<span>添加文本</span>」;//在被選標籤以後添加這段代碼
$(「#test」).before(「<span>添加文本</span>」;//在被選 標籤以前添加這段代碼

刪除元素：

$(「#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屬性設爲red
$(「p」).css({「color」:」」red」, 「font-size」:」14px」});//同時給p設置多個屬性值

jQuery AJAX:

jquery ajax函數

我本身封裝了一個ajax的函數，代碼以下：

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：

有時候咱們爲了跨域，要使用jsonp的方法，我也封裝了一個函數：

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) { //建立jsonp回調函數
oHead.removeChild(oScript);
clearTimeout(oScript.timer);
window[callbackName] = null;
options.success && options.success(json); //先刪除script標籤，實際上執行的是success函數
};
oScript.src = options.url + '?' + callbackName; //發送請求
if (options.time) { //設置超時處理
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){
//數據處理
},
time: 5000,
fail: function(){
//錯誤處理
} 
});

封裝的經常使用函數

$(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');

阻止冒泡函數

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;
}

生成隨機數

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

判斷手機橫豎屏狀態

<script type="text/javascript">
function hengshuping(){
  if(window.orientation==180||window.orientation==0){
        alert("豎屏狀態！")       
   }
if(window.orientation==90||window.orientation==-90){
        alert("橫屏狀態！")        
    }
 }
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
</script>

 

其餘

git經常使用命令

一、git config user.name \ user.email //查看當前git的用戶名稱、郵箱
二、git clone https://github.com/jarson7426/javascript.git //clone倉庫到本地。
三、修改本地代碼，提交到分支: git add file \ git commit -m 「新增文件」
四、把本地庫推送到遠程庫: git push origin master
五、查看提交日誌：git log -5
六、返回某一個版本：git reset --hard 123
七、建立分支：git branch name \ git checkout name
八、合併name分支到當前分支：git merge name
九、刪除本地分支：git branch -d name
十、刪除遠程分支： git push origin :daily/x.x.x
十一、git checkout -b mydev origin/daily/1.0.0 //把遠程daily分支映射到本地mydev分支進行開發
十二、合併遠程分支到當前分支 git pull origin daily/1.1.1
1三、發佈到線上：
git tag publish/0.1.5
git push origin publish/0.1.5:publish/0.1.5