JQuery总结

（很久前图书馆借的一本jquery的书，过期了，今晚拿点时间总结一下，写了这篇博客，明天得还书了！）

jquery, 官网：http://jquery.com/。目前最新版本：jquery-1.4.4，可在官网上下载，有两种：jquery-1.4.4.js和jquery-1.4.4.min.js，前者比较全，后者只包含一些主要的功能。

一、DOM

document object model，即文档对象模型，可以看成是层次结构组织的节点或者信息的组合。该层次结构允许开发人员在树中导航寻找特定信息。网页中的各个元素可以看成是一个dom元素，从某种意义上看，DOM可以说是专门为了解决各种不同版本的javascript之间冲突百产生的。

 

二、jQuery选择器：

$("#theId")根据一个id得到一个dom对象

$(".theClass")根据一个class得到一个dom对象

$(document).ready(function(){ }); //在页面加载时运行的函数

$("#theId").click(function(){ }); //点击事件，不只是按钮，还有其它很多种dom都可以响应

$(".cls1,.cls2").addClass("green"); //其中green是css，完整：.green{background-color:green; }

$("form label") //得到form里面的所有label

$("form > label") //得到form里面的直接label子孩子

$("form + label") //得到form相邻的label元素

$("form ~ label") //得到form之后 所有平级的label元素

 

$("tr:first") //得到表格第一行，即第一个tr

同样还有$("tr:last") , $("tr:even")偶数行 , $("tr:odd")奇数行, $("tr:eq(1)")第二行,  $("tr:gt(2)")大于第二行,  $("tr:lt(1)")小于第二行,  $("tr:empty")空行，与之相反的 $("tr:parent")所有非空行，$("tr:hidden")隐藏行，$("tr:visible")可以行

 

内容过滤：

$("div .test:contains('mycontent')")//所有包含mycontent内容的都会被选中。

$("div .test:has(p)")//class="test"的div中内含<p>元素的都会被选中

$("div .test:not(.mycls)")

$("ul li:nth-child(2)") //选中ul里面的第二个li

$("ul li:nth-child(3n)") //选中ul里面的第三、六、九……个li

$("ul li:first-child") //选中ul里面的第一个li

$("ul li:last-child") //选中ul里面的最后一个li

$("#mydiv ul li:only-child") //选中mydiv里只有一个li的ul

 

$(":input") //选中所有的input元素

$("input：enabled")

$("input：disabled")

$("input：checked")

$("select option:selected")

$("input[class]") //有class属性的input

$("input[name=thename]") 

$("input[name!=thename]")

$("input[name^=first]") //以first开头

$("input[name$=name]") //以name结尾

$("input[name*=stna]") //模糊匹配

 

三、设置属性

$("input").attr("name")//得到name属性

$("#mydiv").css("margin") //得到css

$("input").attr("value","内容") //设置属性

$("#mydiv").css("margin-top","10px") //添加css

$("#mydiv").css({

"margin-top":"10px",

"color":"green"

}) 

$("input").attr("value",function(){return this.name})

 

移除属性

$("input").removeAttr("value")

 

操作css

$("input").addClass("myclass")

$("input").removeClass("myclass")

$("input").toggleClass("myclass") //添加或删除

$("#content p#second").offset().top //取得坐标的上位置

$("#content p#second").height() //获得

$("#content p#second").height(80) //设置

 

设置内容

$("#content").html()

$("#content").html("这是新加上的文字")

$("#content").text() //只得到文本内容

$("#userName").val("ling")

$("#multiple").val(["青岛","北京"])//设置列表中的选中项

 

加上filter

$("p").filter(".first").css("background-color","green")

$("p").not(".first").css("background-color","green")

$("input #firstname").next().addClass("green")

$("input #firstname").next("#city").addClass("green")

 

四、dom操作

插入

$("#testbtn").append("<b>测试</b>");

$("#testbtn").prepend("<b>测试</b>");

$("#testbtn").after("<b>测试</b>"); //插入到后面

$("#testbtn").before("<b>测试</b>"); //插入到前面

 

包裹

$("#testbtn").wrap("<div class='wrapped'></div>");

$("#testbtn").wrap("<b></b>"); 

 

替换

$("#mydiv .test").replaceAll($("p")); //用class="test"的dom替换<p>

$("#mydiv .second").replaceWith($("#mydiv .test"));

 

删除

$("#mydiv .second").empty(); 

$("p").remove("#second")

 

clone

$("#myBtn").clone().prependTo($("p #second")); //可以把按钮及其所有相关的属性等一起复制过去

$("#myBtn").clone().insertAfter(this);

 

五、事件

绑定事件

$("#myBtn").bind("click",function(){ $(this).val(""); }); //绑定事件，清空

$("#myBtn").unbind(）

 

触发

(1)$("form").bind("submit",function(){……});

(2)$("#test").click(function(){ $("form").trigger("submit");}) //当点击test内容时，会触发form的提交

或

(1)$("#test").click(function(event,par1,par2){……})

(2)$("#test").trigger("click",["Hello","World"]);

 

$("#test").show() //还有hide()

 

$("#test").toggle(

function(){alert("第一次点击")},

function(){alert("第二次点击")},

function(){alert("第三次点击")},

function(){alert("第四次点击")}

);

 

其它事件：

dblclick

mousedown

mousemove

mouseout

mouseover

mouseup

keydown

keypress

keyup

blur

focus

 

六、动画与效果

$("test").hide("slow") //"normal","fast"

$("test").hide(2000) //2s

还可以加函数：$("test").hide(2000,funtion(){ });

show也和上面一样

一样的还有：

slideUp() //向上卷起

slideDown()

slideToggle()

fadeIn()  //淡入

fadeOut() //淡出

 

自定义透明度：fadeTo(2000,0.2)或fadeTo(2000,0.2,function(){ })

 

$("test").animate({height:'toggle', opacity:'toggle'},"slow"); //toggle表示 在有和无之间切换

 

动画队列

会按顺序依次执行

$("test").animate({height:'70%'},{queue:false, duration:2000})  //queue:false表示不按队列的顺序来

.animate({font-size:'5em'},{queue:false, duration:2000})

.animate({paddingLeft:'20px'},{queue:false, duration:2000})