《锋利的Jquery》笔记(一)

选择器

基本选择器

//五种基本选择器
$("#id")，$(".class")，$("element")，$("*")，$("#id,.class,span")

层次选择器

$("div span")  //所有后代元素,子加孙
$("div >span")  //所有子元素
$("div").next("div") //或$("div + div")，后面第一个兄弟元素
$("div").nextAll("div") //或$("div ~ div")，后面所有兄弟元素
$("div").siblings("div") //所有兄弟元素，无论前后位置

过滤选择器

基本过滤选择器

$("div> span:first") //选取所有div元素中的第一个子元素是span的元素
$("div>span:last") //选取所有div元素中的最后一个子元素是span的元素
$("div> span:not(.myClass)") //选取class不是myClass的span元素
$("div> span:event") //选取索引是偶数的span元素(索引从0开始)
$("div> span:odd") //选取索引是奇数的span元素
$("div> span:eq(1)") //选取索引是1的span元素（索引从0开始），与$("div> span:first")相同
$("div> span:gt(1)") //选取索引大于且不等于1的span元素
$("div> span:lt(1)") //选取索引小于且不等于1的span元素
$("div> span:head") //选取所有标题元素，如h1,h2.h3.....
$("div> span:animated") //选取正在执行动画的span元素

内容过滤选择器

$("div:contains('我')") //选取含有文本“我”的div元素
$("div:has(p)") //选取含有<p>元素的div元素
$("div:empty") //选取无子元素（包括文本元素）的div元素
$("div:parent") //选取拥有子元素（包括文本元素）的div元素

可见性过滤选择器

$(":hidde") /*选取所有不可见元素，如<input type="hidden">,<div style="display:none">,<div style="visibility:hidden">*/
$(":visible") //选取所有可见元素

属性过滤选择器

$("div[title]") //选取拥有title属性的div元素
$("div[title=test]") //选取title属性等于"test"的div元素
$("div[title!=test]") //选取title属性不等于"test"的div元素
$("div[title^=test]") //选取title属性以"test"开头的div元素
$("div[title$=test]") //选取title属性以"test"结束的div元素
$("div[title*=test]") //选取title属性包含"test"的div元素
$("div[title][title^=test][title$=test]") //多个限制条件

子元素过滤选择器

$("div > span:nth-child(index/even/odd/equation)"); //选取每个div下的第index个子元素或奇偶元素是span的元素（索引从1开始）;
$("div >span:first-child"); //选取每个div下的第1个子元素是span的元素（索引从1开始）;
$("div >span:last-child"); //选取每个div下的最后1个子元素是span的元素（索引从1开始）;
$("div >span:only-child"); //如果某个元素是其父元素的唯一子元素，那么它将会被匹配，如果该元素的父元素含有多个子元素，则不会被匹配;
$("div:first-child"); //选取div元素,该div元素的特点为它是其父元素的第一个子元素;

表单对象属性过滤选择器

$("#form1 :enabled")//选取所有可用元素
$("#form1 :disabled")//选取所有不可用元素
$("input :checked")//选取所有被选中的元素（针对单选框和复选框）
$("select:selected")//选取所有被选中的选项元素（针对下拉列表）

表单选择器

//截取几个例子
$(":input")//选取所有input元素
$(":password")//选取所有密码框
$(":submit")//选取所有提交按钮

DOM的操作

Jquery中的this对象：该位置的DOM节点元素（不是Jquery对象）

查找节点

var $para=$("p"); //查找p元素节点
var p_txt=$para.attr("title"); //查找p元素节点的"title"属性

创建节点

var $li=$("<li title="香蕉">苹果</li>"); //创建一个<li>元素，包含元素节点、文本节点和属性节点
//<li>元素节点,苹果文本节点，title="香蕉"属性节点

插入节点

$(A).append(B) //将B追加到A的内部
$(A).appendTo(B) //将A追加到B的内部
$(A).prepend(B) //将B前置到A的内部
$(A).prependTo(B) //将A前置到B的内部

//下面四个方法可以移动元素
$(A).after(B) //将B元素插到A元素后面(不是内部)
$(A).insertAfter(B) //将A元素插到B元素后面，与$(A).before(B)不一样
$(A).before(B) //将B元素插入A的前面
$(A).insertBefore(B) //将A元素插到B元素前面，与$(A).after(B)不一样

//例子
var A ="<p>我想说</p>";
var B ="<b>你好</b>";
var C=$(A).append(B);//C="<p>我想说<b>你好</b></p>";
var D=$(A).prepend(B);//D="<p><b>你好</b>我想说</p>";

//对DOM元素进行移动:移动元素时首先从文档上删除此元素，然后将改元素插入得到文档中的指定节点
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

var a=$("ul >li:eq(1)");
var b=$("ul >li:eq(2)");
a.before(b);

//结果
<ul>
<li>1</li>
<li>3</li>
<li>2</li>
</ul>

删除节点

var $self = $("ul >li:eq(1)").remove(); //删除包括自身及所有后代元素，并返回指向已被删除节点的引用；
$("ul >li:eq(1)").empty();  //删除所有子孙元素，不包括自身；

复制节点

$("ul >li:eq(1)").clone(true).appendTo("ul");//将节点复制到另一个节点中（深拷贝）。如果需要将节点的事件也一起复制，则需要加上参数 true

替换节点

$("<p>123</p>").replaceWidth("<p>456</p>");//将"<p>123</p>"替换成"<p>456</p>"；
$("<p>456</p>").replaceAll("<p>123</p>");//结果与上面相同；

包裹节点

$("<p>123</p>").wrapInner("<b></b>");//将每一个匹配元素的子内容包裹，"<p><b>123</b></p>";
$("<p>123</p><p>456</p>").wrapInner("<div></div>");//整体包裹，"<div><p>123</p><p>456</p></div>";
$("<p>123</p><p>456</p>").wrapInner("<div></div>");//分个包裹，"<div><p>123</p></div><div><p>456</p></div>";

属性操作

$("p").attr("title","123");//获取或设置属性；
$("p").removeAttr("title");//删除属性

样式操作

var a="<p class='initClass'></p>";
$(a).attr("class","myClass");//获取或设置样式,"<p class='myClass'></p>"
$(a).addClass("myClass");//添加样式,"<p class='initClass myClass'></p>"
$(a).removeClass("myClass");//删除样式,"<p></p>"
$(a).removeClass();//删除全部样式,"<p></p>"
$(a).toggleClass("myClass");//切换样式,如果类名存在则删除它，如果不存在则添加他,"<p class='initClass'></p>"
$(a).hasClass("myClass");//判断是否含有该样式，返回false

设置和获取HTML、文本和值

$("p").html()//类似innerHTML属性；
$("p").text()//类似innerText属性；
$("p").val()//类似value属性。如果元素为多选，则返回一个包含所有选择值的数组；

遍历节点

<p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</p>

children()

$("p").children();//获取所有子元素集（不包括孙元素）集合

next()，nextAll()

$("p").next();//获取后面紧邻的同辈元素；
$("p").nextAll();//获取后面所有的同辈元素；

prev()，prevAll()

$("p").prev();//获取前面紧邻的同辈元素；
$("p").prevAll();//获取前面所有的同辈元素；

siblings()

$("p").siblings();//获取前后所有同辈元素；

closest()

$(document).click(function(e){
    $(e.target).closest('p').attr("title","456");//先检查当前元素是否匹配，不匹配的话再逐级网上匹配，直到找到匹配的元素
});

find()

$("p").find("span").css('color','red');//遍历后代（子加孙）元素

filter()

$("p").filter();//同辈遍历，相当于数组遍历

parent()，parents()

$("p").parent();//获取父级元素；
$("p").parents();//获取所有祖先元素，直到html，可以用选择器筛选；

事件

加载事件

$(document).ready(function(){});//简写$(function(){}),DOM树加载完成后即可执行，可叠加；
window.onload=function(){};//所有元素（包括图片，样式等）全部加载完成后才可执行，唯一性；

绑定事件

bind(type,function(){});//type：blur,focus,mousemove,mouseup等等

合成事件

hover(enter,leave);//用于模拟光标悬停事件，当光标移动到元素上时，触发enter元素；当光标移出元素时，触发leave事件
toggle(fn1,fn2......fnN);//用于模拟鼠标连续单击事件，当鼠标第一次单击时，执行fn1，第二次单击执行fn2，直到最后一个函数。然后依次循环。（双击相当于单击了两次，分别执行两次函数）;还有一个作用是切换元素的隐藏和显示状态

事件冒泡

e.stopPropagation();//阻止事件冒泡
e.preventDefault();//阻止事件默认行为（如<a>标签中的跳转行为）
//在事件处理函数中返回false，可同时阻止事件冒泡和事件默认行为

事件对象event

event.target//获取携带相应行为的DOM元素。与在事件处理函数中的this对象一样;
event.type//事件类型，如mouseup，mousemove等;
event.which//鼠标左中右键

移除事件

$("#btn").unbind("click",fn);//如果该事件绑定了多个函数，且指定了第二个参数，则只移除事件函数fn；
$("#btn").one('click',function(){});//当事件处理函数触发一次后，立即解除绑定并删除

模拟操作

$("#btn").trigger("myClick");//触发绑定的myClick事件，并且执行默认操作（如果有）
$("#btn").triggerHandle("myClick");//只执行绑定的myClick事件

动画

show,hide,toggle

//同时修改多个样式属性，高度宽度和透明度
$('div').show(1000);//1000单位是毫秒
$(selector).toggle(speed,callback);//如果元素可见，则切换为隐藏，如果元素隐藏，则切换为可见

fadeIn,fadeOut,fadeTo,fadeToggle

//只改变透明度

//speed：可选，可以取以下值："slow"、"fast" 或毫秒;callback：可选，淡出完成后所执行的函数名称。
$(selector).fadeOut(speed,callback);//隐藏

/*和其他两个效果函数略有不同。它把图像淡化到一定的透明度。例如，可以让图像淡化到半透明。和其他效果不同，必须提供一个速度值。此外，还提供0～1之间的一个值来表示元素的透明度;
speed：必需的，规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒;
opacity：必需的，将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）;
callback：可选的，该函数完成后所执行的函数名称。
*/
$(selector).fadeTo(speed,opacity,callback);

$(selector).fadeToggle(speed,callback);

slideUp,slideDown,slideToggle

//同时修改多个样式属性，高度宽度和透明度
$('div').slideUp();//由下到上缩短隐藏
$(selector).slideToggle(speed,callback);

自定义动画animate

• 简单动画

/*
para:包含样式属性及值的映射；
speed:可选，播放速度；
callback:可选，动画完成后执行的函数；
*/
animate(para,speed,callback)

• 累加累减动画

$("#panel").click(function(){
       $(this).animate({left: "+=500px"},3000);
    }

• 多重动画

//同时执行多个动画
$("#panel").click(function(){
       $(this).animate({left: "500px",height:"500px"},3000);
    }
//顺序执行多个动画（动画队列）
$("#panel").click(function(){
       $(this).animate({left: "500px"},3000)
           .animate({height:"500px"},3000);
    }

• 综合动画

//同时执行多个动画
$("#panel").click(function(){
       $(this).animate({left: "500px",height:"500px"},3000);
    }
//顺序执行多个动画（动画队列）.css等非动画方法不适用于动画队列，它会一开始就执行
$("#panel").click(function(){
       $(this).animate({left: "500px"},3000)
           .animate({height:"500px"},3000)
           .fadeOut(3000);
    }

• 停止动画

/*clearQueue：Boolean值，表示是否清空剩余动画队列；
  gotoEnd：Boolean值，表示是否直接跳到动画末状态；*/
$(selector).stop([clearQueue],[gotoEnd]);

$(selector).is(":animated");//判断元素是否正处于动画状态

表单、表格

文本框

• 获取以及失去焦点

$(':input').focus(function(){})
            .blur(function(){})
            .keyup(function(){});//键盘按钮弹起事件

• 高度变化

$("#id").height($("#id").height()+50);

//或者用动画效果
$("#id").animate({height:"+=50"},300);

• 滚动条高度变化

$("#id").scrollTop($("#id").scrollTop()+50);

//或者用动画效果
$("#id").animate({scrollTop:"+=50"},300);

复选框

$("#checkAll").click(function(){
    $(this).attr('checked',true); //选中某个复选框
    $(this).attr('checked',this.checked);//原生JS语法
});

下拉框

$('#selected1 option'); //获取全部选项
$('#selected1 option：selected'); //获取选中的选项

表格筛选

$("table tbody tr").hide()					.filter(":contains(""+$(this).val())").show();

其他方法：

$.each

//遍历对象和数组，将a中的每个属性遍历一遍
var a={"b":"bbb","c":"ccc"};
$.each(a,function(e){   //执行两次，e分别为"b"和"c"
    console.log(this);
});

$.extend()

jQuery.extend(object);//扩展jQuery类本身,为类添加新的方法。 
jQuery.fn.extend(object);//给jQuery对象添加方法

1.对象深度拷贝
缺点：效率低

var a={name:"gx"};
var b=$.extend({},a);
b.name="xm";
alert(a.name);//gx
alert(b.name);//xm

var c=a;
c.name="gm";
alert(a.name);//gm
alert(c.name);//gm

2.合并多个对象

// 浅层复制（只复制顶层的非 object 元素）  
var newObject = jQuery.extend({}, oldObject);
// 深层复制（一层一层往下复制直到最底层）  
var newObject = jQuery.extend(true, {}, oldObject); 

/*当参数为ture时，即为深拷贝，当子项item1中的子项有与item中的子项相同属性的值不一样时，item1中子项的值会将item子项中的值给覆盖，当子项item1的属性跟item中的属性不同时，会与item进行合并;
当参数为false时，子项item1中的子项中与item中的子项属性相同时，item1中子项的属性值会将item中的值给完全覆盖
*/
var item={age:23,address:{provice:”河南”,city:”郑州”}};
var item1={sex:”girl”,address:{city:”北京”}};
var result=$.extend(true,item,item1);//{age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};
var result1=$.extend(false,item,item1);//{age:23,sex:”gril”,address:{ city:”北京”}};

3.给jQuery添加静态方法

$.extend({ 
       add:function(a,b){return a+b;} ,
       minus:function(a,b){return a-b;} 
}); 
//页面中调用：
var i = $.add(3,2);//5，调用对象为jquery类本身
var j = $.minus(3,2);//1

$.fn.extend({ 
       add:function(a,b){return a+b;} ,
       minus:function(a,b){return a-b;} 
});
var m=$("div").add(3,2); //调用对象为jquery实例对象
var n=$("div").minus(3,2);