jQuery元素操作1 

 1 元素操作
 2 1.2.1    高度和宽度 
 3 $(“div”).height();        // 高度
 4 $(“div”).width();            // 宽度
 5 .height()方法和.css(“height”)的区别：
 6 1.    返回值不同，.height()方法返回的是 数字类型(20)，.css(“height”)返回的是字符串类型(20px)，因此.height()方法常用在参与数学计算的时候
 7 2.    window、document的高度可以通过.height()方法获取到，而.css(“height”)获取不到（会直接报错！）
 8 1.2.2    坐标值
 9 $(“div”).offset();            // 获取或设置坐标值
10 $(“div”).position();        // 获取坐标值
11 1.2.3    滚动条（滚动事件）
12 $(“div”).scrollTop();        // 相对于滚动条顶部的偏移
13 $(“div”).scrolllLeft();    // 相对于滚动条左部的偏移
14 案例：两次跟随的广告
15 案例：防腾讯固定导航栏
16 
17 1.3    数据缓存
18 $(“div”).data(“index”);        // 获取数据index的值
19 <div data-index=”1”></div>
20 1.3.1    .data()跟.attr() 方法的区别：
21     1.获取数据的时候，attr方法需要传入参数，data方法可以不传入参数，这时候获取到的是一个js对象，即使没有任何data属性。
22 2. 获取到的数据类型不同，attr方法获取到的数据类型是字符串(String)，data方法获取到的是相应的类型。
23 3. data方法获取到数据之后，我们使用一个对象来接收它，那么就可以直接操作(设置值或获取值)这个对象，而attr方法不可以。
24     并且通过这种方式，要比.data(key,value)的方式更高效！
25 4. data-attribute属性会在页面初始化的时候放到jQuery对象，被缓存起来，而attr方法不会。
26 1.4    jQuery插件机制
27 jQuery官网插接教程：http://learn.jquery.com/plugins/basic-plugin-creation/
28 联系我们的手机
29 两种方式：
30     $.extend({ pluginName : function(){} });
31     $.fn.extend({ pluginName : function(){} });
32 自定义选择器：
33 jQuery.extend(jQuery.expr[':'], {
34         "class-itcast": function(ele) {
35         return jQuery(ele).hasClass("itcast");
36         }
37 });
38 $(":class-itcast").css("background","pink");
39 
40 1.4.1    常用插件介绍
41 jQuery.lazyload.js
42 jQuery.validate.js
43 1.4.2    插件使用：
44 查看API文档，了解插件的功能，提供的方法和参数。
45 
46 1.    引用jQuery
47 2.    引用插件
48 3.    使用插件
49 1.4.3    怎么写插件
50 演示jQuery.lxCfbg.js （自己的插件）
51 1.5    jQueryUI
52 1.5.1    使用
53 1.6    jQuery事件
54 1.6.1    绑定
55 click/mouseenter/blur/keyup
56 bind：$node.bind(“click”,function(){});
57 one : $node.one(“click”,function(){});
58 delegate : $node.delegate(“p”,”click”,function(){});
59 on： $node.on(“click”,”p”,function(){});
60 1.6.2    解绑
61 unbind、undelegate    
62 off
63 1.6.3    触发
64 click    : $(“div”).click();
65 trigger：触发事件，并且触发浏览器默认行为
66 triggerHandler：不触发浏览器默认行为
67 
68 1.7    多库共存
69 同一个页面，引入多个js库，保证它们不发生命名冲突。
70 noConflict()

 

posted @ 2018-01-02 10:36  前端极客  阅读(153)  评论(0)  编辑  收藏  举报