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()