Javascript Step by Step - 04
前言
本篇主要讨论jQuery的常用的若干操作。为了能直观的显示操作的结果，首先建立一个html文件，内容如下：
<!DOCTYPE html> <html> <head> <title>Testing jQuery</title> </head> <body> <p>Hello World!</p> <p class="foo">Another paragraph, but this one has a class.</p> <p><span>This is a span inside a paragraph.</span></p> <p id="bar">Paragraph with an id. <span class="foo">And this sentence is in a span.</span> </p> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> </body> </html>
使用CSS语法进行DOM元素的选择
基本选择器
选择p标签：$("p")
选择class是foo的元素：$(".foo")
选择id是bar的元素：$("#bar")
选择class是foo的p标签：$("p.foo")
选择class是foo的p标签和id是bar的元素：$("p.foo,#bar")
层叠选择器
选择body元素下面的所有span后裔，可以不是直接的孩子：$("body span")
选择body元素下的直接的span孩子：$("body>span")
选择class为foo的元素的下一个p元素：$(".foo+p")
选择和class为foo的元素是兄弟姐妹关系的p元素：$(".foo~p")
基本过滤器
选取p元素的最后一个：$("p:last")
选取class不为foo的p元素：$("p:not(.foo)")
选取处在奇数位置上的p元素：$("p:odd")
选取索引为3的p元素：$("p:eq(3)")
注：以上都是以从0开始的
内容过滤器
选取内容中包含"Another"字符的p元素：$("p:contains(Another)")
选取包含span元素的p元素：$("p:has(span)")
选取既不包含文本又不包含其他元素的空元素；$(":empty")
选取有子元素的p元素:$("p:parent")
属性、可见性过滤器
选取所有可见的p元素：$("p:visible")
选取class属性为foo的所有元素：$("[class=foo]")
选取class属性不为foo的p元素：$("p[class!=foo]")
孩子过滤器
注：孩子过滤器的索引是以1开始的。
选取属于其父元素的奇数位上的子元素的p元素：$("p:nth-child(odd)")
选取是p元素的最后一个span子元素：$("p span:last")
选取所有的是p元素的最后一个子元素的span元素：$("p span:last-child")
表单过滤器
首先在源代码中增加一个表单：
<form action="#" method="post"> <fieldset> <legend>Sign Up Form</legend> <label for="name">Name</label><br /> <input name="name" id="name" type="text" /><br /> <label for="password">Password</label><br /> <input name="password" id="password" type="password" /><br /><br /> <label> <input type="radio" name="loc" /> I'm on my computer </label><br /> <label> <input type="radio" name="loc" checked="checked" /> I'm on a shared computer </label><br /><br /> <input type="submit" value="Log In" /><br /> <label> <input type="checkbox" name="notify" disabled="true" /> Keep me signed in on this computer </label><br /> </fieldset> </form>
选取所有类型为radio的input元素：$("input:radio")
选取所有被禁止的元素：$(":disabled")
选取勾选的元素：$(":checked")
JQuery的常用方法
遍历DOM元素
索引是1的p元素：$("p").eq(1)
选取倒数第三个元素：$("p").eq(-3)
从所有p元素中筛选出class为foo的:$("p").filter(".foo")
从所有p元素中筛选出class不为foo的:$("p").not(".foo")
最后一个p元素:$("p").last()
包含span元素的所有p元素:$("p").has("span")
判断p元素中有没有一个class为foo的，这个返回boolean：$("p").is(".foo")
从第一个p到第三个p，但不包括第三个p：$("p").slice(1,3)
最后两个p元素:$("p").slice(-2)
找到所有p元素的所有孩子节点中class为foo的元素：$("p").children(".foo")
找到class为foo的span元素，然后在dom树中向上寻找最近的p元素:$("span.foo").closest("p")
在body元素的所有子孙元素中寻找span元素，不限制深度：$("body").find("span")
下一个兄弟节点：$("p.foo").next()
下一个id是bar的兄弟节点：$("p.foo").next("#bar")
接下来的所有p兄弟节点：$(".foo").nextAll("p")
接下来的所有兄弟节点，直到遇到id为bar的元素为止，且不包含：$(".foo").nextUntil("#bar")
同理，向前寻找对应有prev(),prevAll()和prevUntil()
合起来就是所有兄弟节点.siblings(): $("#bar").siblings("p");
某个集合中所有元素的直接父节点：$(".foo").parent()
所有父节点和祖先节点：$(":checkbox").parents()
在获取的集合基础上增加某一个元素，但不改变原有dom结构：$("p").add("span.foo")
在选择到的元素集的基础上加上最初的集合：$("p").find("span").andSelf();
获取所有子节点，包含文字节点：$("span.foo").contents()
返回到上一个集合：$("p").find("span").end()
创建和插入新的DOM元素
最初的页面是：
创建新的元素时可以直接以html的形式传递给jQuery构造函数：$('<p class="bat">This is a new paragraph!</p>')
也可以分为两部分，一个是标签，一个是JSON字符串：$("<p>", { "class":"bat", "text":"This is a new paragraph!" })
在所有p标签的内部的结尾插入一句话：$("p").append(" This was added by jQuery.")
在body内部的开头插入一句话：
var para = $("<p>", { "text":"I'm a new paragraph!", "css":{"background":"yellow"} }); $("body").prepend(para);
与append和prepend方法对应的是appendTo和prependTo方法。
将元素b插入到元素a的内部，可以写为a.append(b)，也可以写为b.appendTo(a)
$("<p>", {
"text":"I'm a new paragraph!",
"css":{"background":"yellow"}
})
.prependTo("body");
以上的方法都是在内部插入的，在外部插入也有对应的方法，那就是after(),before(),insertAfter(),insertBefore()
在某一个元素后面插入一个段落：$("p.foo").after("<p>A new paragraph.</p>");
相当于将一个段落插入到某一个元素后面：
$("<p>", {
"text":"A new paragraph."
})
.insertAfter("p.foo");
在某一个元素外面进行包裹另一个元素：$("span").wrap("<strong><em></em></strong>");
wrap()方法也可以使用回调函数:
$("span").wrap(function(){
return $(this).is(".foo") ? "<strong>" : "<em>";
});
与wrap方法对应的是unwrap方法，它将围绕某个元素周围的标签去掉。$("span").unwrap();
wrapAll()适用于对一个集合中的所有元素进行操作：
var div = $("<div>", { "css":{"background-color":"yellow"} }); $("p").wrapAll(div);
在p元素外包裹strong，就变成了<strong><p>...</p></strong>，这并不很合理。如果将strong放在p内部就好了。
这时就需要wrapInner()方法了。$("p").wrapInner("<em />");
将某一个元素从DOM中删除可以用remove()和detach()方法。
区别在于detach方法可以保存元素的属性。这样可以在以后可以reattach。
$("p:first").data("test","This is some data.");
var p = $("p:first").detach();
//Data stored: This is some data.
console.log("Data stored: "+p.data("test"));
$("p:first").data("test","This is some data.");
var p = $("p:first").remove();
//Data stored: undefined
console.log("Data stored: "+p.data("test"));
获取和修改属性及css
attr()方法可以获取某一个属性(一个参数)，也可以为某一个属性赋值(两个参数)
$("p:eq(3)").attr("id");
$("#bar").attr("id", "bat");
设置多个属性的时候可以传递JSON：
$("p:eq(3)").attr({
"id":"baz",
"title":"A captivating paragraph, isn't it?"
});
与之对应的删除属性的方法是.removeAttr()
css()方法和attr()方法类似，只是将结果作用于样式:
$(".foo").css({
"color":"red",
"background":"yellow"
});
也可以用来获取样式的值：$(".foo").css("background");
如果要获取某一个元素的内容，可以使用text()和html()方法。
区别在于text()方法只获取文本，而html()方法同时返回里面的html标签。
当向text()和html()方法传值的时候，就可以更改这些元素的值了。
$("#bat").text("This is new text.");
$("#bat").html("This is some <strong>HTML</strong> text.");
获取某一个表单元素的值可以使用val()方法： $(":submit").val();
同理，传值以后可以进行更改。
有时需要为某一个元素存储附加的信息，这是就需要用data()方法了。
$("p:first")
.data("nickname", "Pookie")
.next("p")
.data("nickname", "Shnookums");
console.log("My nickname: "+$("p:first").data("nickname"));
console.log("My nickname: "+$("p:eq(1)").data("nickname"));
data的参数可以是键和值，也可以是一个JSON字符串。
$("p.foo").data({
"nickname":"Wubby",
"favorite":{
"movie":"Pretty Woman",
"music":"Sade",
"color":"pink"
}
});
console.log("Nickname: "+$("p.foo").data("nickname"));
console.log("Favorite Movie: "+$("p.foo").data("favorite").movie);
对某一个元素增加、删除、toggle、判断一个Class的方法分别是：
addClass(),removeClass(),toggleClass()和hasClass()
$("p:first").addClass("bat");
//Text: Hello World!
console.log("Text: "+$(".bat").text());
$("p:first").removeClass("bat");
//Text:
console.log("Text: "+$(".bat").text());
$("p.foo").toggleClass("foo baz");
var msg = $("p:eq(1)").hasClass("foo") ? "Found!" : "Nope!";
console.log("Class? "+msg);
获取某一个元素的宽/高，内部/外部的宽/高的方法分别是：
width(),height(),innerWidth(),innerHeight(),outterWidth(),outerHeight()
对一个集合进行操作
主要有两个方法map()和each().
不同之处是它们的返回值，map返回包含了callback的新的对象，而each返回原来的对象。
一般情况下，都是对原有对象的操作居多。因此可以进行链式操作。
这里的方法是.map()和.each(),还有两个方法$.map()和$.each()。可不一样哦。
$("p,.foo").each(function(index, ele){
$(this).append(" "+ele.tagName+" #"+index);
})
.find("span.foo")
.css({
"color":"red",
"background":"yellow"
});
贴出API地址以供查阅 .map() $.map() .each() $.each()
动画和效果
如果单独为了隐藏和显示，调用hide()和show()方法就行了：$("#bar").hide(); $("#bar").show();
除此之外，还可以传入持续时间和完成时的回调:
$("#bar")
.hide(2000,function(){
console.log("Animation complete!");
});
另一个动画是淡入和淡出，对应的方法是fadeIn()和fadeOut()，其实就是修改透明度，同样可以传duration和callback。
如果需要淡入淡出到某一个透明度，可以用fadeTo(duration，opacity，callback)
第三个动画是向上向下滑动，对应的方法是slideUp()和slideDown()。如果根据实际情况进行滑动，就调用slideToggle().
真正遇到的所有动画其实都是调用.animate()方法。它的参数是：变化的css，持续时间，速度，callback
$("#bar")
.css({
"background":"yellow",
"border":"1px solid black"
})
.animate({
"width":"500px",
"height":"100px"
},
5000,
"swing",
function(){
console.log("Animation complete!");
});
也可以传入两个参数，第二个参数是一个JSON字符串：
$("#bar")
.css({
"background":"yellow",
"border":"1px solid black"
})
.animate({
"width":"500px",
"height":"100px"
},
{
"duration":5000,
"easing":"swing",
"complete":function(){
console.log("Animation complete!");
},
"step":function(){
console.log("Step completed!");
},
"queue":true,
"specialEasing":{
"width":"linear"
}
});
具体的用法参见API：http://api.jquery.com/animate/
在两个动画直接需要一段延时，可以调用delay()方法。
而想要终止一个动画，可以调用stop()方法，他有两个参数：是否清除动画队列和是否直接将动画跳到最后。
var count = 0; // Keep track of the current step count $("#bar") .css({ "background":"yellow", "border":"1px solid black" }) .animate({ "width":"500px" }, { "duration":6000, "step":function(){ if(count++==200) { $(this).stop(true, true); } } });
