[转]JQuery总结

转 : http://lingyibin.iteye.com/

 

附上Jquery练习选择器的一个网址：http://codylindley.com/jqueryselectors/

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
$("ul li:even") //选中ul里面的偶数li，index以0开始
$("ul li:odd") //选中ul里面的奇数li，index以1开始
$("ul:nth-child(even)") //ul下是偶数的子元素，index以1开始
$("ul:nth-child(odd)") //ul下是奇数的子元素，index以1开始
$("ul:nth-child(2)") //如果ul下有子元素或嵌套子元素，取出第二个，index以1开始
$("ul:nth-child(2n)") //如果ul下有子元素或嵌套子元素，取出第2n个，index以1开始
$(":empty") //选中所有的独一的，没有children的元素
$("p:parent") //选中所有含有<p>的父级元素
$("#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")
empty()是只移除了 指定元素中的所有子节点，拿$("p").empty()来说，他只是把<p>dsfsd</p>中的文本给移除了，而留下 了<p></p>,仍保留其在dom中所占的位置。
remove([expr])则是把其从dom中删除，而不会保留其所占的位置。
例:
<p>Hello</p>
World
<p>welcome</p>
执行$("p").empty()其结果是
<p></p>
World
<p></p>

执行$("p").remove()其结果是
World
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})