jQuery第二篇 （帅哥）

 

1.1 jQuery操做DOM

jQuery课程的目标：学会使用jQuery设计常见效果

选择器

基本选择器：#id 、.class 、element、* 、

层级选择器： 空格、>、+、~

 基本过滤选择器：:first、:last、:eq(index)、:lt(index)、:gt(index)、:odd、:even

 筛选选择器：.eq(index)、.children()、.parent()、.siblings()、.find()

 动画：show、hide、fadeIn、fadeOut、fadeTo、slideDown、slideUp、slideToggle

animate

 DOM操做：.css()、addClass(“className”)、removeClass()、toggleClass

 .attr()、removeAttr()、.val()、.html(“<p></p>”)、text()

 node.append(“<p>我是追加的内容</p>”)、prePend()

1.2 元素操做

1.2.1 高度和宽度

$(“div”).height(); // 高度

$(“div”).width(); // 宽度

.height()方法和.css(“height”)的区别：

1. 返回值不一样，.height()方法返回的是 数字类型(20)，.css(“height”)返回的是字符串类型(20px)，所以.height()方法经常使用在参与数学计算的时候

1.2.2 坐标值

$(“div”).offset(); // 获取或设置坐标值 设置值后变成相对定位

$(“div”).position(); // 获取坐标值 子绝父相 只能读取不能设置

1.2.3 滚动条（滚动事件）

 

$(“div”).scrollTop(); // 相对于滚动条顶部的偏移

$(“div”).scrolllLeft(); // 相对于滚动条左部的偏移

案例：两次跟随的广告

案例：防腾讯固定导航栏

 

1.3 jQuery事件

1.3.1 绑定

click/mouseenter/blur/keyup

// 绑定事件

bind：$node.bind(“click”,function(){});

// 触发一次

one : $node.one(“click”,function(){});

delegate : $node.delegate(“p”,”click”,function(){});

on： $node.on(“click”,”p”,function(){});

1.3.2 解绑

unbind、undelegate

off

1.3.3 触发

click : $(“div”).click();

trigger：触发事件，而且触发浏览器默认行为

triggerHandler：不触发浏览器默认行为

 

1.4 jQuery事件对象介绍

event.stopPropagation() //阻止事件冒泡

event.preventDefault();  //阻止默认行为

1.5 jQuery补充

须要注意的地方：

animate动画：不支持背景的动画效果

animate动画支持的属性列表

参考手册（不全）、

在线文档：

w3school：http://www.w3school.com.cn/jquery/index.asp

jQuery官网：http://jquery.com/

$()的几种经常使用用法：

1.$(“#id”) 选择某个元素，返回值为jQuery对象

2.$(this) 将DOM对象转换成jQuery对象

3.$(“<div></div>”) 建立元素，返回值为jQuery对象

4.$(function(){}); 入口函数的简写方式

$("div").html() 获取内容的时候，只返回匹配到的第一个元素的数据

链式编程问题：

$("div").html() 后面就不能继续链式了？

为何？函数返回值问题！

$node.each(function(index,element){});

$.each([1,2,3,5,6,7], function (i,v) {

   console.log(i + " : " + v);

});

map返回数组(了解)

$(“li”).map(function(){

return $(this).text();

});

1.5.1 数据缓存

$(“div”).data(“index”); // 获取数据index的值

注意：

html里面的data 属性，例如：data-ROLE，jQuery获取的时候用：$(“div”).data(“role”);

当使用jQuery设置data属性的时候，例如：$(“div”).data(“UPCASE”,123); ，那么获取的时候，要使用：$(“div”).data(“UPCASE”);

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>注意HTML属性不区分大小写</div>

$( "div" ).data( "lastValue" ) === 43;

lastValue -> data-last-value

1.5.2 .data()跟.attr() 方法的区别：

1.获取数据的时候，attr方法须要传入参数，data方法能够不传入参数，这时候获取到的是一个js对象，即便没有任何data属性。

2. 获取到的数据类型不一样，attr方法获取到的数据类型是字符串(String)，data方法获取到的是相应的类型。

3. data方法获取到数据以后，咱们使用一个对象来接收它，那么就能够直接操做(设置值或获取值)这个对象，而attr方法不能够。

而且经过这种方式，要比.data(key,value)的方式更高效！

4. data-attribute属性会在页面初始化的时候放到jQuery对象，被缓存起来，而attr方法不会。

1.5.3 多库共存

同一个页面，引入包含$变量的其余js库，保证它们不发生命名冲突。

// other_lib.js 包含$

<script src="other_lib.js"></script>

<script src="jquery-1.11.1.js"></script>

<script>

$.noConflict();

// 可使用其余库的$符号了

// 使用jQuery

jQuery(document).ready(function(){});

</script>

 

1.5.4 jQuery优点：

1. 书写简洁、代码优雅
2. Write Less，Do More
3. 强大的选择器，支持CSS1-3全部的选择器
4. 浏览器兼容性好，兼容IE6、7、8
5. 统一的入口，下降了学习、记忆成本
6. 强大的动画效果、事件支持
7. 开源、免费
8. 插件丰富，可扩展性强

 

1.6 jQuery插件机制

jQuery.color.js

jQuery官网插接教程：http://learn.jquery.com/plugins/basic-plugin-creation/

联系咱们的手机

两种方式：

$.log = function(){};

$.fn.log = function(){};

自定义选择器：

jQuery.extend(jQuery.expr[':'], {
     "class-itcast": function(ele) {
        return jQuery(ele).hasClass("itcast");
     }

});
$(":class-itcast").css("background","pink");

 

1.6.1 经常使用插件介绍

jQuery.lazyload.js

1.6.2 插件使用：

查看API文档，了解插件的功能，提供的方法和参数。

插件依赖版本

1. 引用jQuery
2. 引用插件
3. 使用插件

1.6.3 怎么写插件

演示jQuery.lxCfbg.js （本身的插件）

(function ($) {

    $.fn.lxCfbg = function (options) {

        // 合并参数

        var opts = $.extend({

            "color": "#000",

            "font-size": "16px",

            "background-color": "#fff"

        }, options);

        $this.css({

            "color": opts.color,

            "font-size": opts["font-size"],

            "background-color": opts["background-color"]

        });

        return $this;

    };

})(jQuery);

1.7 jQueryUI

jQueryUI教程