本文為大家介紹了jQuery中常用知識點及函數，包含許多細節方面的知識，下面我們一起學習一下。
jQuery中為我們提供了很多有用的屬性，自己總結的一些常用的函數。個人認為在在線排盤開發中會比較常用的，僅供大家學習和參考。
剛開始學習前端的時候開始整理這個文檔，現在內容已經逐漸增多。雖然現在看起來，文檔里的內容非常簡單，但是看著這些內容，好像還依稀記得這一行行代碼當時被記錄的情景。所以我想把這段回憶保存起來，為剛接觸前端的童鞋們提供一個簡單的查詢的途徑，也以此來緬懷我的前端學習之路。
** 此文檔，我會持續更新 **
--------------------------------------------------------------------------------
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)));其他
git常用命令
1、git config user.name / user.email //查看當前git的用戶名稱、郵箱2、git clone https://github.com/jarson7426/javascript.git //clone倉庫到本地。3、修改本地代碼，提交到分支: git add file / git commit -m “新增文件”4、把本地庫推送到遠程庫: git push origin master5、查看提交日志：git log -56、返回某一個版本：git reset --hard 1237、創建分支：git branch name / git checkout name8、合并name分支到當前分支：git merge name9、刪除本地分支：git branch -d name10、刪除遠程分支： git push origin :daily/x.x.x11、git checkout -b mydev origin/daily/1.0.0 //把遠程daily分支映射到本地mydev分支進行開發12、合并遠程分支到當前分支 git pull origin daily/1.1.113、發布到線上：git tag publish/0.1.5git push origin publish/0.1.5:publish/0.1.5
以上內容是小編給大家介紹的jQuery常用知識點總結以及平時封裝常用函數，希望對大家有所幫助！
新聞熱點
疑難解答
