个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客
以下内容若有问题烦请即时告知我予以修改，以免误导更多人。
1. jQuery获取物体信息
js
-
obj.offsetWidth
-
obj.offsetHeight
-
obj.offsetLeft
-
obj.offsetTop
-
obj.parentNode 结构父级 根：document
-
obj.offsetParent 定位父级 根：body
js处理小数较弱，取出时取整Math.round()
jQuery(只封装了以下方法)
-
obj.width();纯width -
obj.height();纯height -
obj.outerWidth();盒子模型的width (width+padding+border) => offsetWidth -
obj.outerHeight();盒子模型的height (height+padding+border) => offsetHeight -
obj.position().left;距离定位父级left值 (不包括margin) => offsetLeft -
obj.position().top;距离定位父级top值 (不包括margin) => offsetTop -
obj.offset().left;距离定位父级left值 (包括margin) -
obj.offset().top;距离定位父级top值 (包括margin) -
obj.scrollTop();元素相对滚动条顶部的偏移 -
obj.scrollLeft();元素相对滚动条左侧的偏移
父级
-
obj.parent()结构父级 根：document => parentNode -
obj.parents()返回被选元素的所有祖先元素，直到<html> -
obj.offsetParent()定位父级 根：body => offsetParent
子级
-
obj.children()返回被选元素的所有直接子元素 -
obj.find()返回被选元素的后代元素，一路向下直到最后一个后代
2. jQuery筛选
(1) 过滤
-
.eq(index)- index >= 0 正向选取(0代表第一个，1代表第二个)
- index < 0 反向选取(-1代表倒数第一个)
-
.first() -
.last() -
.hasClass(className)
(2) 查找
-
.find(tagName/className/id)eg:oBox.find('ol li');
3. jQuery <=> js
(1) 原生js转jQuery对象
$() 包裹
this -> $(this)
document -> $(document)
<script>
var oDiv = document.getElementById('div1');
$(oDiv).html('xxx');
</script>
(2) jQuery转原生js对象
[] / get()
$('div')[0].innerHTML = 'xxx';$('div').get(0).innerHTML = 'xxx;
4. jQuery链式运动
obj.css(...).html(...).attr(...).click();
5. jQuery循环
obj.each(function(){...});
eg:
<script>
$('div').each(function(index, element) { // 索引，当前元素
console.log($(element).html); // **element是原生对象，需转成jq对象
$(this); // 当前对象
});
</script>
<script>
// $.each()用于遍历数组元素或对象属性
var array = [ 12, "jQuery", true ];
$.each( array, function(i, value){
// i 表示当前迭代元素的索引或对象的属性名称
// value 表示当前迭代的数组元素或对象的属性值
// this 与 value 相同
alert( i + " = " + value );
// 如果函数return false，将终止遍历
});
// $.map()用于遍历数组元素或对象属性，并将每次执行遍历函数的返回值封装为数组返回
var obj = { name: "jQuery", age: 20, isAdmin: true };
var resultArray = $.map( obj, function(value, i){ // 注意参数顺序与each()不同
// value 表示当前迭代的数组元素或对象的属性值
// i 表示当前迭代元素的索引或对象的属性名称
// this 指向全局对象(window)
if( typeof value === "number"){
return null; // 如果函数返回null或undefined，则不会添加到结果数组中
}else{
return value;
}
} );
// resultArray 为 [ "jQuery", true ]
//$.grep()用于遍历数组元素，并根据函数的返回值(true/false)来过滤数组元素
var array2 = [ "Hello", 12, "jQuery", true ];
var resultArray2 = $.grep( array2, function(value, i){ // 注意参数顺序与each()不同
// value 表示当前迭代的数组元素
// i 表示当前迭代元素的索引
// this 指向全局对象(window)
return i % 2 == 0; // 保留返回值不为false的元素
} );
// resultArray2 为 [ "Hello", "jQuery" ];
</script>
6. jQuery工具
-
$.trim(str);去掉字符串起始和结尾的空格 -
$.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作用及区别
一个插件
$.fn.插件名 = fn;
<script>
$.fn.插件名 = function() {
this.css('name', 'value'); // 插件中的this不用加$
}
$('div').插件名();
</script>
一组插件
$.fn.extend(...);
插件调用不能用链式
<script>
$.fn.extend({
插件名1: function() {
this.css('name', 'value');
},
插件名2: function() {
this.css('name', 'value');
}
})
// 插件调用不能用链式
$('div').插件名1();
$('div').插件名2();
</script>
更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！
公众号是坚持日更的，不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。
微信公众号：无媛无故
网友评论
可以看到我的基本思路是把原生js方方面面先整完，然后上jQuery，后面会回到js的原型思想。等这些零零总总的过了应该会差不多开始写一些Git、构建、js框架的使用。