每天10个前端知识点：jQuery(下)

2017-02-20 本文已影响175人 WangChloe

个人博客已上线，欢迎前去访问评论！
无媛无故 - 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(){...});

JS中的forEach、$.each、map方法推荐

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>

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

公众号是坚持日更的，不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。

微信公众号：无媛无故