jq基础笔记02

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”)的区别：

$(window).width()表示窗口的可视区的宽度

1.                  返回值不同，.height()方法返回的是数字类型(20)，.css(“height”)返回的是字符串类型(20px)，因此.height()方法常用在参与数学计算的时候  可用parseInt（）

1.2.2   坐标值

注意

$(“div”).offset(); 特殊 只相对于文档（不管是不是子绝父相，设置值要写json格式）    // 获取或设置坐标值  设置值后变成相对定位 position:relative;

$('#div2').offset().left;   获取值

$('#div2').offset().top;   获取值

 

$("p:last").offset({ top: 10, left: 30});  设置值

 

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

$('#div2').position().left;

$('#div2').position().top;

 

1.2.3   滚动条（滚动事件）

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

$(“div”).scrolllLeft();     // 相对于滚动条左部的偏移（获取和设置的方法）

用法：var l=$("div").scrollLeft();

     var r=$("div").scrollTop();

   $("div").scrollLeft(l+10).scrollTop(r+10);

 

案例：两次跟随的广告 $(".left,.right").stop().animate({"top" : $(document).scrollTop()+50},600);  滚动的高度+top值

案例：防腾讯固定导航栏   var H = $(".top").height();

            $(window).scroll(function() {

                var docSccrollTop= $(document).scrollTop();

                if(docSccrollTop> H){

                    $(".nav").css({"position":"fixed","top":0});

                    // 此时 nav的位置固定，如果不设置 main部分的margin-top的话，将有一部分内容被挡住 nav的高度+开始设置的20

                    $(".main").css("margin-top",106);

                }else{

                    $(".nav").css({"position":"static"});  /*静态定位*/

                    $(".main").css("margin-top",20);

                }

            });

 

1.3  jQuery事件（强烈推荐使用on）

1.3.1   绑定

click/mouseenter/blur/keyup

// 绑定事件

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

// 只触发一次

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

 

注意：delegate和on绑定三个参数时是顺序是不一样的

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

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

1.3.2   解绑

unbind、undelegate

off

1.3.3   触发

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

trigger：触发事件，并且触发浏览器默认行为   自动触发

triggerHandler：不触发浏览器默认行为   默认行为有a链接，submit有提交刷新

注意：参数顺序不能变，但可省略

### 3.2 绑定事件的方式 bind方式（不推荐，1.7以后的jQuery版本被on取代，所以强烈推荐使用on方法）

+ 语法格式：.bind( eventType [, eventData ],handler )  

+ 参数说明

    - 第一个参数：事件类型    'click'   'mouseleave'

    - 第二个参数：传递给事件响应方法的数据对象，可以省略。  一般省略

    - 事件响应方法中获取数据方式： e.data

    - 第三个参数：事件响应方法

+  **第二个参数可以省略。**

 

```

    例如：   

   $("p").bind("click", function(e){

        //事件响应方法

    });

```

 

 

### 3.3 delegate方式（推荐，性能高，支持动态创建的元素）

+ 语法格式：$(selector).delegate( selector, eventType,handler )

+ 语法说明：

    * 第一个参数:selector，子选择器

    * 第二个参数：事件类型

    * 第三个参数：事件响应方法

 

```

    例如：  

   $(".parentBox").delegate("p", "click",function(){

        //为 .parentBox下面的所有的p标签绑定事件

    });

```

*优势：效率较高*

 

### 3.4 on方式（最现代的方式，兼容zepto，强烈建议使用的方式）

+ jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法

+ 语法格式：$(selector).on( events [,selector ] [, data ], handler )

+ 参数介绍：

    * 第一个参数：events，事件名

    * 第二个参数：selector,类似delegate

    * 第三个参数: 传递给事件响应方法的参数

    * 第四个参数：handler，事件处理方法

```

    例如：

    //绑定一个方法

    $( "#dataTabletbody tr" ).on( "click", function() {

      console.log( $( this).text() );

    });

 

    //给子元素绑定事件

    $( "#dataTabletbody" ).on( "click", "tr", function() {

      console.log( $( this ).text() );

    });

 

    //绑定多个事件的方式要记一下  （用json 的方法就行）

    $("div.test" ).on({

      click: function() {

        $( this).toggleClass( "active" );

      }, mouseenter:function() {

        $( this).addClass( "inside" );

      }, mouseleave:function() {

        $( this).removeClass( "inside" );

      }

    });

```

 

### 3.5 one只绑定一次事件的方式

+ .one( events [, data ], handler )

```

    例如：

    $( "p").one( "click", function() {

      alert( $( this).text() );

    });

```

 

### 3.6 解绑事件

+ unbind解绑 bind方式绑定的事件( 在jQuery1.7以上被 on和off代替)

    *$(selector).unbind();         //解绑所有的事件

    *$(selector).unbind("click"); //解绑指定的事件

 

+ undelegate解绑delegate事件

    * $("p" ).undelegate();           //解绑所有的delegate事件

    * $("p" ).undelegate( "click" );   //解绑所有的click事件

   

```

    例如：

    var foo = function (){

      // Code to handlesome kind of event

    };

    

    // ... Now foo will becalled when paragraphs are clicked ...

    $( "body").delegate( "p", "click", foo );

    

    // ... foo will nolonger be called.

    $( "body").undelegate( "p", "click", foo );

```

 

+ off解绑on方式绑定的事件

    * $("p" ).off();

    * $("p" ).off( "click", "**" );    // 解绑所有的click事件，两个\*表示所有

    * $("body" ).off( "click", "p", foo );

   

```

    案例1：

    var foo = function() {

      // Code to handlesome kind of event

    };

    

    // ... Now foo will becalled when paragraphs are clicked ...

    $( "body").on( "click", "p", foo );

    

    // ... Foo will nolonger be called.

    $( "body").off( "click", "p", foo );

 

    案例2：（了解）解绑命名空间的方式：

    var validate =function() {

      // Code to validateform entries

    };

    

    // Delegate eventsunder the ".validator" namespace

    $( "form").on( "click.validator", "button", validate );

    

    $( "form").on( "keypress.validator", "input[type='text']", validate);

    

    // Remove eventhandlers in the ".validator" namespace

    $( "form").off( ".validator" );

```

 

### 3.7 触发事件

+ 简单事件触发

    *$(selector).click(); //触发 click事件

+ trigger方法触发事件

    * $("#foo" ).trigger( "click" );

+ triggerHandler触发事件响应方法，不触发浏览器行为

    * $("input" ).triggerHandler( "fo

1.4  jQuery事件对象介绍（不理解？？？==已理解）

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

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

1.5 jQuery补充

需要注意的地方：

    animate动画：不支持背景的动画效果（后面引入api就可以实现了）

    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() 获取内容的时候，只返回匹配到的第一个元素的数据

.html()和.text()的区别

document.write($("div").html());    // 结果 111111 只返回第一个元素的值

document.write($("div").text());    // 结果  只返回所有元素的值1111112222222223333334444

链式编程问题：

$("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) {

        // 合并参数

        varopts = $.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教程