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

个人博客已上线,欢迎前去访问评论!
无媛无故 - 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()

  1. $('div')[0].innerHTML = 'xxx';
  2. $('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>

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

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

微信公众号:无媛无故

推荐阅读更多精彩内容

  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 77,501评论 20 422
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 2,490评论 1 18
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 5,185评论 2 19
  • 眼形:孩子的眼形、大小遗传自父母,大眼睛相对小眼睛是显性遗传。父母有一人是大眼睛,生大眼睛孩子的可能就会大一些。...
    放下去穿越阅读 276评论 0 0
  • 阳光明晃晃的,闪得树叶耀眼,上上下下层层叠叠的舞动,小草调皮的跳跃,或许是风儿调皮! 每到这种天气都会迫不及待地晒...
    下吧毛毛雨阅读 121评论 0 0