個(gè)人博客已上線娇钱，歡迎前去訪問評(píng)論泞莉！
無媛無故 - wangchloe的個(gè)人博客
以下內(nèi)容若有問題煩請(qǐng)即時(shí)告知我予以修改馍管，以免誤導(dǎo)更多人掸掏。
1. jQuery獲取物體信息
js
obj.offsetWidth
obj.offsetHeight
obj.offsetLeft
obj.offsetTop
obj.parentNode 結(jié)構(gòu)父級(jí) 根：document
obj.offsetParent 定位父級(jí) 根：body
js處理小數(shù)較弱茁影，取出時(shí)取整Math.round()
jQuery(只封裝了以下方法)
obj.width();純widthobj.height();純heightobj.outerWidth();盒子模型的width (width+padding+border) => offsetWidthobj.outerHeight();盒子模型的height (height+padding+border) => offsetHeightobj.position().left;距離定位父級(jí)left值 (不包括margin) => offsetLeftobj.position().top;距離定位父級(jí)top值 (不包括margin) => offsetTopobj.offset().left;距離定位父級(jí)left值 (包括margin)obj.offset().top;距離定位父級(jí)top值 (包括margin)obj.scrollTop();元素相對(duì)滾動(dòng)條頂部的偏移obj.scrollLeft();元素相對(duì)滾動(dòng)條左側(cè)的偏移
父級(jí)
-
obj.parent()結(jié)構(gòu)父級(jí) 根：document => parentNode -
obj.parents()返回被選元素的所有祖先元素，直到<html> -
obj.offsetParent()定位父級(jí) 根：body => offsetParent
子級(jí)
-
obj.children()返回被選元素的所有直接子元素 -
obj.find()返回被選元素的后代元素丧凤，一路向下直到最后一個(gè)后代
2. jQuery篩選
(1) 過濾
-
.eq(index)- index >= 0 正向選取(0代表第一個(gè)募闲，1代表第二個(gè))
- index < 0 反向選取(-1代表倒數(shù)第一個(gè))
.first().last().hasClass(className)
(2) 查找
-
.find(tagName/className/id)eg:oBox.find('ol li');
3. jQuery <=> js
(1) 原生js轉(zhuǎn)jQuery對(duì)象
$() 包裹
this -> $(this)
document -> $(document)
<script>
var oDiv = document.getElementById('div1');
$(oDiv).html('xxx');
</script>
(2) jQuery轉(zhuǎn)原生js對(duì)象
[] / get()
$('div')[0].innerHTML = 'xxx';$('div').get(0).innerHTML = 'xxx;
4. jQuery鏈?zhǔn)竭\(yùn)動(dòng)
obj.css(...).html(...).attr(...).click();
5. jQuery循環(huán)
obj.each(function(){...});
eg:
<script>
$('div').each(function(index, element) { // 索引浩螺，當(dāng)前元素
console.log($(element).html); // **element是原生對(duì)象，需轉(zhuǎn)成jq對(duì)象
$(this); // 當(dāng)前對(duì)象
});
</script>
<script>
// $.each()用于遍歷數(shù)組元素或?qū)ο髮傩? var array = [ 12, "jQuery", true ];
$.each( array, function(i, value){
// i 表示當(dāng)前迭代元素的索引或?qū)ο蟮膶傩悦Q
// value 表示當(dāng)前迭代的數(shù)組元素或?qū)ο蟮膶傩灾? // this 與 value 相同
alert( i + " = " + value );
// 如果函數(shù)return false仍侥，將終止遍歷
});
// $.map()用于遍歷數(shù)組元素或?qū)ο髮傩砸觯⒚看螆?zhí)行遍歷函數(shù)的返回值封裝為數(shù)組返回
var obj = { name: "jQuery", age: 20, isAdmin: true };
var resultArray = $.map( obj, function(value, i){ // 注意參數(shù)順序與each()不同
// value 表示當(dāng)前迭代的數(shù)組元素或?qū)ο蟮膶傩灾? // i 表示當(dāng)前迭代元素的索引或?qū)ο蟮膶傩悦Q
// this 指向全局對(duì)象(window)
if( typeof value === "number"){
return null; // 如果函數(shù)返回null或undefined，則不會(huì)添加到結(jié)果數(shù)組中
}else{
return value;
}
} );
// resultArray 為 [ "jQuery", true ]
//$.grep()用于遍歷數(shù)組元素农渊，并根據(jù)函數(shù)的返回值(true/false)來過濾數(shù)組元素
var array2 = [ "Hello", 12, "jQuery", true ];
var resultArray2 = $.grep( array2, function(value, i){ // 注意參數(shù)順序與each()不同
// value 表示當(dāng)前迭代的數(shù)組元素
// i 表示當(dāng)前迭代元素的索引
// this 指向全局對(duì)象(window)
return i % 2 == 0; // 保留返回值不為false的元素
} );
// resultArray2 為 [ "Hello", "jQuery" ];
</script>
6. jQuery工具
-
$.trim(str);去掉字符串起始和結(jié)尾的空格 -
$.browser.version;瀏覽器版本
eg:
<script>
if($.browse.version.substring(0, 1) == '6') {
// IE6 code here
}
</script>
7. jQuery Ajax
$.ajax({...});
- type: 'get/post'
<script>
$.ajax({
url: URL,
data: {},
type: 'get',
error: fn,
complete: fn,
time: 3000;
success: function(str) {
console.log(str);
}
})
</script>
8. jQuery jsonp
$.ajax({...});
- dataType: 'jsonp'
- cbName: 'callback/cb'
<script>
$.ajax({
url: URL,
data: {},
dataType: 'jsonp',
cbName: 'callback',
success: function(json) {
console.log(json);
}
});
</script>
9. jQuery插件
寫插件
$: jq
fn: 幫助
jq里面除了插件里的this以外厨幻，其他都是原生的js
jquery的$.extend和$.fn.extend作用及區(qū)別
一個(gè)插件
$.fn.插件名 = fn;
<script>
$.fn.插件名 = function() {
this.css('name', 'value'); // 插件中的this不用加$
}
$('div').插件名();
</script>
一組插件
$.fn.extend(...);
插件調(diào)用不能用鏈?zhǔn)?/p>
<script>
$.fn.extend({
插件名1: function() {
this.css('name', 'value');
},
插件名2: function() {
this.css('name', 'value');
}
})
// 插件調(diào)用不能用鏈?zhǔn)? $('div').插件名1();
$('div').插件名2();
</script>
更多內(nèi)容可以訂閱本人微信公眾號(hào)，一起開啟前端小白進(jìn)階的世界腿时！
公眾號(hào)是堅(jiān)持日更的况脆，不發(fā)文的時(shí)候推送一些我覺得好用的前端網(wǎng)站或者看到的一些問題的解決方案，也更便于大家交流批糟，就醬格了。
