jquery学习笔记

说明：

        该文章只是自己学习jquery时做到笔记，很多没有顺序。如果想系统的学习jquery，请找其他资料。

1.      document.ready()：将jquery代码放到这个事件处理函数中，能保证DOM准备好之后jquery代码才开始执行。

使用方法：

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

说明：.ready()方法要求其参数为一个函数。

            简写形式为：

$(function(){});

2.      window.load()方法与其类似。它要等待所有图片加载完成之后执行传给它的函数。

Eg：

$(window).load(function(){});

3.      使用多个类获取一个或多个元素。

Eg:   

<pre name="code" class="javascript">$(function(){           $('.book.one').css('background','#000');        });<div class="book one"></div>

4.      基本过滤器：

:even()     匹配结果集中顺序为偶数的元素。（从0开始）

:odd()               匹配奇数

:first()              匹配第一个

:last()               匹配最后一个

:header()            匹配标题元素h1…….

:not()               不匹配后面选择器元素

:eq()                匹配等于

:gt()                匹配顺序号大于index的元素

:lt(index)            匹配顺序号小于index的元素

:first-child() :last-child()  :only-child()   nth-child()

:has(p)           匹配拥有子元素为P的元素（不要求直接子元素只要是后代元素就可）

:contains(‘hello’)   匹配包含这个文本的元素

:empty()          匹配无内容元素

:parent()          匹配拥有子元素的元素

:hidden()          匹配不可见的元素

:visible()           匹配可见的元素

:animated()        匹配处于动画过程中的元素

 

Eg：

<pre name="code" class="javascript"> $('.book:first()')

5.      选择包含某个网站的链接

通配符*，用来在整个DOM中搜索包含特定属性值的元素

Eg:  

<pre name="code" class="javascript"> $('ul li a[href*="google.com"]').addClass('google-icon');

6.      添加删除克隆替换DOM元素或内容

.html()    没有参数时他能获取被选元素内的HTML，有参数时可设定其内部HTML（但原本的HTML会被取代）

Eg: 

<pre name="code" class="javascript"> $('.book.one').html('<p>p1</p>'); 

.text()和上面类似。它获取写入的是文本

.append()  在被选元素内 内容之后插入HTML

.prepend()  在被选元素内  内容之前插入HTML

.before()    在被选元素之前插入HTML

.after()      在被选元素之后插入HTML

.remove()   删除目标元素

.clone()      复制被选择的元素

 

说明：.append()和.appentTo()区别：

        Eg：

<pre name="code" class="javascript">$('.book.one').append('<p>p1</p>');$('<p>p1</p>').appendTo('.book.one');

                   这两句效果相同。在class为book one的容器加p              

7.$(this)用法

This     表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性，方法

$(this)  代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性值。

Eg：

<pre name="code" class="javascript"><pre name="code" class="javascript"> for(i=0;i<=imgArrLength;i++){       $('<img/>').attr({'src':'images/'+imgArray[i]},'id':'img'+[i]).load(function(){                  $('.div1').append($(this));               });           }

当这张图片加载完成之后，就将这张图片添加在DOM元素中（div）

 

7.    文档窗口事件（参数都是一个函数）

.ready()  

 .load()   

.unload() 当浏览器窗口关闭或者 用户单击一个新的链接时

.resize()

.scroll()

.error()

 

8．绑定事件

       .bind() 接受两个参数，第一个是事件类型，第二个是事件处理函数。事件处理函数可以是匿名函数，也可以是有名函数。

Eg:     

<pre name="code" class="javascript"> $('.book').first().bind('click',function(){         //匿名              alert('hello');          });

       

<pre name="code" class="javascript">$(function(){                                //有名         $('.book').first().bind('click',alertMe);        });        function alertMe(){            alert('hello');        }

$(function(){ //有名 $('.book').first().bind('click',alertMe); }); function alertMe(){ alert('hello'); }

说明：(1).只有绑定事件那一刻DOM中存在该元素，才会成功绑定该事件，新增的DOM不会绑定事件。

         (2).bind可以绑定多个事件，如click和submit,mouseover,mouseleave等等

eg:  

$('').bind('click mouseover',function(){});<pre name="code" class="javascript">

可以简写： 

<pre name="code" class="javascript">$('button').click(function(){          });

但是简写则不支持上面的绑定多个事件。

(3).使用键值对映射绑定多个事件。（由括号括起来。）

Eg：    

<pre name="code" class="javascript">$(function(){           $('.book:first()').bind({               'mouseenter':function(){                   $(this).addClass('one');               },               'mouseleave':function(){                   $(this).removeClass('one');               }           })        });

       .live()与上面类似。区别是绑定事件不仅作用于DOM当前存在的元素，还作用于将来可能存在（动态生成）的元素。缺点：不支持如下链式调用方式：

Eg：

$('.book').first().live('click',function(){              alert('hello');          });

.delegate()可像.live()那样绑定事件，又支持链式调用。它有三个参数，第一个是选择器，第二个是事件类型，第三个是事件处理。

 

8.    鼠标事件

click  

dbclick

mousedown

mouseup

mouseenter

mouseleave

mousemove

mouseout

mouseover

hover()   jquery中的鼠标悬停事件。相当于mouseenter()和mouseleave()

 

说明：当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。

Eg:    

<pre name="code" class="javascript">$("td").hover(  function () {    $(this).addClass("hover");  },  function () {    $(this).removeClass("hover");  });

9.      表单事件

change()               表单项的值改变时触发

focus()

blur()

focusin()

focusout()

 

10.  捕获键盘事件

 

Keydown()

Keypress()               当一个键被按下一次或多次时触发此事件

Keyup()

 

Eg:  留言限制字数：（有一点bug）

<pre name="code" class="javascript">var maxNum = 100;        $(function(){          $('#status').bind({              'keypress':function(){                  var intputText =$(this).val();                  var numChar =intputText.length;                  var charLess =maxNum-numChar;                  if(charLess>0){                     $('.counter').text(charLess);                  }                  else{                      event.preventDefault();                  }              }          });        });

<textareacols="50" rows="3"id="status"></textarea><div class="counter"></div>

11.  Jquery动画效果函数

show()

hide()

toggle()

slideDown()

slideUp()

slideToggle()

fadeIn()

fadeout()

fadeTo()

说明：他们有两个参数。第一个：动画效果速度  第二个：执行完后回调函数。

Eg： 

$(function(){         $('.book').hide(hideMessage);        });        function hideMessage(){              } 

12． 加入一个cookie（设置cookie有专门的jquery插件  转载的一篇日记有详细介绍）

<function hideMessage(){            var expirDate = new Date();        //javascrip的对象           expirDate.setDate(expirDate.getDate()+30);            document.cookie = "name =hideCookie;expires = "+expirDate.toUTCString();        }

使用document.cookie可获得一个cookie

        var messageCookie =document.cookie;