每天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>

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

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

微信公众号:无媛无故
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容