您的位置：首页 > Web前端 > JavaScript

Javascript Step by Step - 04

2013-07-28 10:59 141 查看

前言

本篇主要讨论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构造函数：$('This is a new paragraph!')

也可以分为两部分，一个是标签，一个是JSON字符串：$("", { "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("A new paragraph.");

相当于将一个段落插入到某一个元素后面：

$("<p>", {
"text":"A new paragraph."
})
.insertAfter("p.foo");

在某一个元素外面进行包裹另一个元素：$("span").wrap("");

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内部就好了。

这时就需要wrapInner()方法了。$("p").wrapInner("");

将某一个元素从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 HTML 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);
}
}
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航