锋利的jQuery

今天总要找点东西学习，其实有很多东西要记录，慢慢写，今天看书吧，这几天把这本书看完，这里记一些要点

从头开始记吧

第一章认识jQuery

$就是jQuery的简写

$(function(){}) 就是 $(document).ready(function(){})的简写

与window.onload相比有三点（执行时机、编写个数、有无简写）

DOM---文档对象模型，BOM---浏览器对象模型

第二章 jQuery选择器

和css选择器相同

基本选择器：

<1> $("#test") id选择器

<2> $(".test") 类选择器

<3> $("p") 标签选择器

<4>$("*") 选择所有元素

<5>$("div,span,.myclass") 组合------可组合，这个很实用

层次选择器：

<1>$("div span") 选择div中 span后代元素

<2>$(“div >span”) 选择div中span的子元素

<3>$(“.one + div”)选one的下一个div元素————相当于$(“.one”).next("div") //同辈的下一个元素

<4>$("#two ~ div") 选id为two的后面所有<div>兄弟元素————相当于$(“#two”).nextAll("div"); //不包含#two

过滤选择器：

<1>$(" div:first") 所有div元素中第一个div
<2>$(" div:last") 所有div元素中最后一个div
<3>$(" input:not(.myclass)") 不是 class为myclass 的<input>元素
<4>$(" input:even") 索引为偶数的input //可以做隔行变色
<5>$(" input:odd")索引为奇数的input
<6>$("input:eq(1)") 索引为1的input——————index从0开始 //$('div:eq(1)').css('backgroundColor','red'); 单一选择
<7>$("input:gt(1)") 索引大于1的input 从0开始,不包含1 //$('#one a:gt(0)').css('color','red'); 向下数
<8>$("input :lt(1)") 索引小于1的input 从0开始 //向上数
<9>$(":header") 所有的<h1> <h2> <h3>......
<10>$("div:animated") 正在执行动画的<div>
<11>$("div:contains('我')") 含有文本‘我’的div
<12>$("div:empty") 空的div
<13>$(" div :has(p)") 含有<p>的<div> //$('#one a:has(span)').css('color','red'); 包含span的a
<14>$("div:parent") 含有子元素的<div>
<15> $(":hidden") 所有不可见元素
<16>$("div:visible") 所有的可见的<div>
<17>$(" div[id]") 拥有id属性的<div>
<18>$(" div[title=test]") title为test的<div>
<19> $ ("div [title!=test]") title不为test的<div>
<20> $(" div[title^=test]") title以“test”开头的div
<21>$ ("div [title$=test]") title以“test”结束的div
<22>$(" div[title*=test]") title含有test的div
<23>$("div[id][title$=test]") 组合多条件选择
<24>:nth-child(index/even/odd/equation) ————————index从1开始
<25>:first-child
<26>:last-child
<27> :only-child
<28> $("#form1 :enabled") id为“form1”的表单内所有可用的元素
<29>$("#form2:disable")
<30>$("input:checked") 所有被选中的<input>元素
<31>$("select:selected") 所有被选中的<select>元素
<32>$(":input") 所有<input> <textarea><select><button> 元素
<33>$(":text") 所有单行文本框
<34>$(":password") 所有密码框
<35>$(":radio") 所有单选框
<36>$(":checkbox") 所有复选框
<37>$(":submit") 所有的提交按钮
<38>$(":image") 所有图像按钮
<39>$(":reset") 所有重置按钮
<40>$(":button") 所有按钮
<41>$(":file") 所有上传域
<42>$(":hidden") 所有不可见元素

有些常用，有些不常用，这里做个记录

为了练习写了个小例子，全选，全不选

<input type="button" value='quanxuan'/>

<input type="button" value='quanbuxuan'/>

<input type="checkbox" />

<input type="checkbox" checked='checked'/>

<input type="checkbox" />

<script>

$('input[value=quanxuan]').click(function(){

    $('input:gt(1)').prop('checked',true)

})

$('input[value=quanbuxuan]').click(function(){

    $('input:gt(1)').prop('checked',false)

})

</script>

当然这本书开篇就讲了，jQuery很大的优势是可以链式，所以可以写成这样

$('input[value=quanxuan]').click(function(){

    $('input:gt(1)').prop('checked',true)

}).next().click(function(){

    $('input:gt(1)').prop('checked',false)

})

第三章jQuery中的DOM操作

0、插入节点

<1>append() 内部追加内容

<2>appendTo() append（）的反操作

<3>prepend() 内部前置内容

<4>prependTo() prepend()的反操作

<5>after() 外部追加内容

<6>insertAfter() after的反操作

<7>before() 外部前置内容

<8>insertBefore() before的反操作

1、删除节点

$('ul li:eq(1)').remove(); //获取第二个<li>元素节点后，将他从网页中删除

$('ul li').remove('li[title!=菠萝]'); //可以做选择性的删除

empty() 清空节点内容

2、复制节点

clone() //$('ul li').clone().appendTo('ul'); //复制li，并追加到ul中复制的同时，如果clone(true)，传递了true，就复制了他绑定的事件（默认是不复制事件的）

3、替换节点

replaceWith()和replaceAll() //$('p').replaceWith("<a href='#'>我是忍者</a>") 功能一样，replaceWith()相当于append()，replaceAll()相当于appendTo();

4、包裹节点

wrap() //$('.one').wrap("<b></b>") 被<b></b>包裹起来分别包裹

wrapAll() //$('.one').wrap("<b></b>") 被<b></b>包裹起来一起包裹

wrapInner() //$('.one').wrap("<b></b>") 被<b></b>包裹起来包裹文字

属性操作

获取属性、设置属性、删除属性 attr()和removeAttr

追加移除class----addClass()和removeClass()

切换class----toggleClass() // $('p').toggleClass('another')

判断元素中是否还有某class---$('span').hasClass('bca'); 返回布尔值等价于$('span').is('bca'); 他内部本身就是调用is执行的

遍历节点

【1】children() 取子元素（不包括后代元素）

【2】next() 取后面紧邻的同辈元素

【3】prev() 取前面紧邻的同辈元素

【4】siblings() 取前后所有同辈元素

【5】closet() 取最近的匹配元素

css-DOM操作

css()、height()、width() 单位默认px

offset() //获取元素在当前视窗的相对偏移有两个属性 left、top $('p').offset().top 真的是视窗

position() //$('.bca').position().top //获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，也有top和left两个值

scrollTop()和scrollLeft()方法 //获取元素的滚动条距顶端的距离和距左侧的距离 //可以指定一个参数，控制元素的滚动条滚动到指定位置例： $('p').scrolTop(300); 元素的滚动条，和offset()有区别

例子：

//超链接提示
1、移入超链接创建一个元素，他的内容为title属性的值
2、将创建的元素追加到文档中
3、为他设置x坐标和y坐标，使它显示在鼠标位置的旁边
4、当鼠标划出链接，移除div

$("a[title='我是title']").mouseover(function(e){

    var div="<div id='sd'>"+this.title+"</div>";

    $('body').append(div);

    $("#sd").css({

        "position":"absolute",

        "top":e.pageY+'px',

        "left":e.pageX+'px'

    }).show("fast")

    }).mouseout(function(){

        $("#sd").remove();   // 移除

    })

    此处有两个问题，一个问题是1、当鼠标滑过时title也会显示出来。2、提示例鼠标太近。解决后代码如下

var x=10;

var y=20;

$("a[title='我是title']").mouseover(function(e){

    this.myTitle=this.title;

    this.title='';

    var div="<div id='sd'>"+this.myTitle+"</div>";

    $('body').append(div);

    $("#sd").css({

        "position":"absolute",

        "top":(e.pageY+y)+'px',

        "left":(e.pageX+x)+'px'

    }).show("fast");

    }).mouseout(function(){

        this.title=this.myTitle;

        $("#sd").remove();   // 移除

    })

先把this.title给 this.myTitle 后，把this.title=""; 然后鼠标移除再把this.myTitle的值给this.title

第四章jQuery中的事件和动画

hover() 鼠标移入移出

toggle() 在元素的click事件中绑定两个或两个以上的函数，它可以实现元素的隐藏与显示的切换

事件冒泡

停止事件冒泡

$("p").click(function(event){

    event.stopPropagation();    // do something

  });

阻止事件默认行为

$("p").click(function(event){

    event.preventDefault();    // 可阻止表单提交

  });

如果行同时阻止默认行为以及事件冒泡，可直接返回false，这是一种简写

return false;

另外jQuery不支持事件捕获

事件对象属性

1、event.type

$("a").click(function(event){

    alert(event.type);

    return false;     //阻止链接跳转   click

})

2、event.stopPropagation(); 阻止冒泡

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

4、event.target(); 返回触发元素

5、event.pageX 和 event.pageY 获取光标相对于页面的x坐标和y坐标

6、event.which 鼠标事件中获取的左中右键，在键盘事件中获取键盘键值

$(document).mousedown(function(e){

    alert(e.which);                        //鼠标事件分别返回1,2,3

})

　　$(document).keyup(function(e){
　　　　alert(e.which);　　　　　　　　　　　　　//键盘事件，返回键值
　　})

7、event.metaKey 针对不同浏览器对ctrl按键解释不同，jQuery也进行了封装，并规定了event.metaKey为键盘事件获取ctrl按键

动画

show()和hide()里面的数字单位是毫秒fast、normal、slow 分别是0.6s、0.4s、0.2s //执行时会同时增加/减少“内容”的高度、宽度和不透明度

fadeIn()和fadeOut 和show()、hide()不同的是他们只是改变元素的不透明度

sildeUp()和slideDown() 只会改变元素的高度，如果设置了display:none;当调用slideDown的时候，元素将由上至下延伸显示

自定义动画animate

如果让动画动起来在前面加上 +=或者-=

$(function(){

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

　　　　$(this).animate({left:"+=500px"},300)     //在当前位置累加500px

　　　　})

})

动画回调函数

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

    $(this).animate({left:"400px",height:"200px",opacity:"1"},300)

           .animate({top:"200px",width:"200px"},300,function(){

               $(this).css("border","5px solid blue")

           })

})

停止动画 stop() 方法

判断是否处于动画状态

if(!$(element).is(":animate")){   //判断元素是否处于动画状态

    .....

}

延迟动画 delay()

$(this).animate({left:"400px",height:"200px"},3000)

       .delay(1000)

       .animate({top:"200px",width:"200px"},3000)

       .delay(2000)

       .fadeOut("slow");

其他动画

toggle(speed,[callback])

slideToggle(speed,[easing],[callback])

fadeTo(speed,opacity,[callback])

fadeToggle(speed,[easing],[callback])

第五章 jQuery对表单、表格的操作及更多应用

focus()和blur() 获取焦点失去焦点

第六章 jQuery与Ajax的应用

load() 方法能远程载入HTML代码并插入DOM中

$(function(){

    $("#send").click(function(){

        $("#resText").load("test.html")

    })

})                                 //当点击后，test.html 页面的HTML内容会被加载并插入主页面<div id="resText"></div>的元素中

如果只需要加载test.html页面中class 为 "para" 的内容

$("#resText").load("test.html .para");         //URL和选择器之间有一个空格

load()的传输方式根据参数data指定

$("#resText").load("test.php",function(){

    });

　　　　//没有参数，是GET方式

$("#resText").load("test.php",{name:"rain",age:"22"},function(){

    });
　　　　//有参数，是POST方式

$.get()方法和$.post()方法

$("#send").click(function(){

       $.get("get1.php",{

            username : $("#username").val(),

            content : $("#content").val()

        },  回调函数)

})

回调函数有两个参数 function( data,textStatus){} data:返回内容。 textStatus:请求状态 cuccess\error\notmodified\timeout 4种

$.post() 方法和get方法相同，他们的区别就是get和post的区别........安全性、传输大小、缓存、服务器端获取方式等

另外当load()方法带有参数传递时，会使用post方式发送请求，因此也可以使用load()方法来完成同样的功能

$.ajax()方法，是jQuery最底层的Ajax实现

可代替之前的所有方法

如代替 $.getScript()方法

$(function(){

    $("div").click(function(){

        $.ajax({

        type:"GET",

        url:"test.js",

        dataType:"script"

        })

    })

})

Ajax请求开始时，会触发ajaxStart()方法的回调函数，当Ajax结束时，会触发ajaxStop()方法的回调函数，这些方法都是全局的，因为不论他们创建的代码哪里，只要请求发生时，都会触发他们

例在用户请求过程中，如果较慢，会显示加载中

<div id="loading">加载中...</div>

<script type="text/javascript">

$("#loading").ajaxStart(function(){

    $(this).show();

});

$("#loading").ajaxStop(function(){

    $(this).hide();

});                                   //也可以使用链式写法

</script>

如果在页面中其他地方也使用Ajax，该提示仍然有效，因为他是全局的。

另外几个Ajax全局事件中的方法

ajaxComplete(callback)　　 Ajax请求完成时执行的函数
ajaxError(callback) Ajax请求发生错误时执行的函数
ajaxSend(callback)
ajaxStart(callback)
ajaxStop(callback) Ajax请求发送前执行的函数
ajaxSuccess(callback) Ajax请求成功时执行的函数

如果想使Ajax请求不受全局方法的影响，可以在$.ajax()方法时，将参数中的global设置为false

    $.ajax({

        url:"test.html",

        global:false                //不出发全局Ajax事件

    })

    //在jQuery1.5版本后，如果Ajax请求不出发全局方法，那么可以这么设置

    $.ajaxPrefilter(function(options){

        options.global = true;

    })

第七章 jQuery插件的使用和写法

jQuery主要分为3种类型

1、封装对象方法的插件

2、封装全局函数的插件

3、选择器插件

常见的插件结构

;(function($){                      //这里将$作为匿名函数的形参

    //这里放代码，可以使用$作为jQuery的缩写别名

    }) (jQuery)                      //这里将jQuery作为实参传递给了匿名函数

封装jQuery对象方法的插件

例：边写一个color()插件，实现以下两个功能

1、设置匹配元素的背景颜色

2、获取匹配的元素的背景颜色

;(function($){

    $.fn.extend({

        "color":function(value){

        if(value==undefined){

            return this.css("backgroundColor")

        }else{

            return this.css("backgroundColor",value);

        }

        }

    })

})(jQuery)

第11章 jQuery性能优化和技巧

1、使用新版jQuery类库

2、使用合适的选择器

使用ID定位是最佳的方式，其他可考虑用find()

其次是$("p")、$("div")、$("input")

$("class")较复杂，有选择性的使用

尽量避免$("[attribute=value]") 这种有害的方式

伪类选择器尽量避免 $(":hidden")

3、缓存对象

避免重复创建选择器，尽量缓存变量，永远不要让相同的选择器在代码里出现多次

4、循环中的DOM操作

循环中不要重复创建和查找

5、数组方式使用jQuery对象

建议使用简单的for或者while来处理循环，而不是$.each()

另外注意，检查长度也是检查jQuery对象是否存在的方式

6、事件代理

例如on()

7、将代码转化成jQuery插件

8、使用json拼接字符串

尤其是长字符串的处理

var array=[];

for(var i=0;i<=10000;i++){

  array[i]='<li>'+i+'</lli>';

}

$("#list").html(array.join(''));

9、合理利用html5的Data属性

10、尽量使用原声的Javascript方法

如下代码，它用来判断多选框是否被选中

var $cr=$("#cr");

#cr.click(function(){

   if($cr.is(":checked")){

       alert();

   }

})

//它使用是jQuery提供的is() 方法来判断是否被选中，但这里可以使用原生的javascript方法

var $cr=$("#cr");      //jQuery对象

var cr=$cr.get(0);      //DOM对象，获取$cr[0]

#cr.click(function(){

   if(cr.checked){

       alert();

   }

})

还有很多，例如

$(this).css("color","red");

//优化成

this.style.color="red";

$("<p></p>");

//优化成

$(document.createElement("p"));

11、压缩javascript

jQuery技巧

1、//禁用页面右键菜单

$(function(){

    $(document).bind('contextmenu',function(event){

        return false;

    })

})

2、//在新窗口打开页面

$(function(){

    //例子1：href="http://" 的超链接将会在新窗口打开连接

    $('a[href^="http://"]').attr("target","_blank");

    //例子2：rel="external"的超链接将会在新窗口打开连接

    $("a[rel$='external']").click(function{

        this.target = "_blank"

    })

})

//use

<a href="http://www...." rel="external">open link</a>

3、//判断浏览器类型测试了一下1.9版本不行，1.3版本的可以，其他版本没试，而且判断不准

        $(document).ready(function () {

            if ($.browser.mozilla && $.browser.version >= "1.8") {

                alert("火狐");

            }

            if ($.browser.safari) {

                alert("safari");

            }

            if ($.browser.chrome) {

                alert("chrome");

            }

            if ($.browser.opera) {

                alert("Opera");

            }

            if ($.browser.msie && $.browser.version <= 6) {

                alert("IE6-");

            }

            if ($.browser.msie && $.browser.version > 6) {

                alert("IE6+");

            }

        });

4、//输入框文字获取和失去焦点

$(document).ready(function(){

    $('input.text1').val("Enter your search text here");

    textFill($('input.text1'));

})

function textFill(input){

    var originalvalue=input.val();

    input.focus(function(){

        if($.trim(input.val())==originalvalue){

            input.val('');

        }

    }).blur(function(){

        if($.trim(input.val())==''){

            input.val(originalvalue);

        }

    })

}

5、//返回头部滑动动画

jQuery.fn.scrollTo = function(speed){

    var targetOffset = $(this).offset().top;

    $('html,body').stop().animate({scrollTop:targetOffset},speed);

    return this;

}

//use

$('#goheader').click(function(){

    $('body').scrollTo(500);

    return false;

})

6、//获取鼠标位置

$(document).ready(function(){

    $(document).mousemove(function(e){

        $('#xy').html("x:"+e.pageX+"|y:"+e.pageY);

    })

})

7、//判断元素是否存在

$(document).ready(function(){

    if($("#id").length){

        alert()

    }

})

8、//点击div也可以跳转

$(document).ready(function(){

    $("div").click(function(){

        window.location=$(this).find("a").attr("href");

        return false;

    })

})

//use

<div><a href="http://www.baidu.com">home</a></div>

9、//根据浏览器大小添加不同的样式

$(document).ready(function(){

    function checkWindowSize(){

        if($(window).width()>1200){

            $('body').addClass('large');

        }else{

            $('body').removeClass('large');

        }

    }

  $(window).resize(checkWindowSize)

})

10、//设置div在屏幕*

$(document).ready(function(){

    jQuery.fn.center=function(){

        this.css("position","absolute");

        this.css("top",($(window).height()-this.height())/2+$(window).scrollTop()+'px');

        this.css("left",($(window).width()-this.width())/2+$(window).scrollLeft()+'px');

    }

})

//use

    $(".goheader").center();

11、//创建自己的选择器

$(document).ready(function(){

    $.extend($.expr[':'],{

        moreThen500px:function(a){

            return $(a).width()>500;

        }

    });

        $('.box:moreThen500px').click(function(){

            alert();

        })

})

12、//关闭所有动画效果

$(document).ready(function(){

    jQuery.fx.off=true;

})

13、//检测鼠标的右键和左键

$(document).ready(function(){

    $(document).mousedown(function(e){

        alert(e.which);       //1-左键;2-中键;3-右键

    })

})

14、//回车提交表单

$(document).ready(function(){

    $('input').keyup(function(e){

        if(e.which=='13'){

            alert('回车提交')

        }

    })

})

15、//设置全局Ajax参数

$('#load').ajaxStart(function(){

    showLoading();     //显示loading

    disableButtons();   //禁用按钮

});

$('#load').ajaxComplete(function(){

    hideLoading();     //隐藏loading

    enableButtons();   //启用按钮

})

16、//获取选中的下拉框

$('#someElemnet').find('option:selected');

$('#someElemnet option:selected');

17、//切换复选框

var tog = false;

$('button').click(function(){

    $('input[type=checkbox]').prop('checked',!tog);

    tog = !tog;

})

18、//使用siblings()来选择同辈元素

//不这样做

$('#nav li').click(function(){

    $('#nav li').removeClass('active');

    $(this).addClass('active');

})

//替代做法

$('#nav li').click(function(){

    $(this).addClass('active')

           .siblings().removeClass('active');

});

19、//个性化链接

$(function(){

    $('a[href$="pdf"]').addClass("pdf");

    $('a[href$="zip"]').addClass("zip");

    $('a[href$="psd"]').addClass("psd");

})

20、//在一段时间后，自动隐藏或关闭元素

//setTimeout

setTimeout(function(){

    $('div').fadeIn(400)

    },3000);

})

//1.4之后的版本用delay()

$('div').slideUp(300).delay(3000).fadeIn(400);

24、//$.proxy()的使用

使用回调方法的缺点之一是当执行类库中的方法后，上下文对象被设置到另一个元素，如

<div id='panel' style='display:none'>

    <button>Close</button>

</div>

执行下面代码：

$('#panel').fadeIn(function(){

    //var that=$(this);

    $('#panel button').click(function(){

        $(this).fadeOut();

    })

})

button元素会消失，而不是panel元素，可以使用$.proxy方法解决这个问题

$('#panel').fadeIn(function(){

    $('#panel button').click($.proxy(function(){

        $(this).fadeOut();

        },this

    ))

})

可以可以用bind解决

$('#panel').fadeIn(function(){

    $('#panel button').click(function(){

        $(this).fadeOut();

    }.bind(this))

})

当然还有另一种方法

$('#panel').fadeIn(function(){

    var that=$(this);

    $('#panel button').click(function(){

        that.fadeOut();

    })

})

相关文章