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);
}
}
});
Javascript Step by Step - 04的更多相关文章
- WPF Step By Step 自定义模板
WPF Step By Step 自定义模板 回顾 上一篇,我们简单介绍了几个基本的控件,本节我们将讲解每个控件的样式的自定义和数据模板的自定义,我们会结合项目中的具体的要求和场景来分析,给出我们实现 ...
- WinForm RDLC SubReport Step by step
最近在做的一个PO管理系统,因为要用到订单打印,没有用水晶报表,直接使用VS2010的Reporting.参考了网上的一些文章,但因为找到的数据是用于WebForm的,适配到WinForm有点区别,竟 ...
- Step by Step use OBD2 Scanner Guide
Learning to use a good automotive OBD2 code reader is one of the best ways you can continually inves ...
- 【转载】MDX Step by Step 读书笔记(四) - Working with Sets (使用集合)
1. Set - 元组的集合,在 Set 中的元组用逗号分开,Set 以花括号括起来,例如: { ([Product].[Category].[Accessories]), ([Product].[ ...
- Step by Step: 基于MFC下的COM组件开发-Helloworld
http://blog.csdn.net/sybifei/article/details/45008745 [这篇文章有问题, 仅供参考] http://blog.csdn.net/define_us ...
- Step by Step Process of Migrating non-CDBs and PDBs Using ASM for File Storage (Doc ID 1576755.1)
Step by Step Process of Migrating non-CDBs and PDBs Using ASM for File Storage (Doc ID 1576755.1) AP ...
- 稀疏表示step by step(转)
原文地址:稀疏表示step by step(转)作者:野火春风 稀疏表示step by step(1) 声明:本人属于绝对的新手,刚刚接触“稀疏表示”这个领域.之所以写下以下的若干个连载,是鼓 ...
- Step by step Dynamics CRM 2011升级到Dynamics CRM 2013
原创地址:http://www.cnblogs.com/jfzhu/p/4018153.html 转载请注明出处 (一)检查Customizations 从2011升级到2013有一些legacy f ...
- Step by Step 创建一个新的Dynamics CRM Organization
原创地址:http://www.cnblogs.com/jfzhu/p/4012833.html 转载请注明出处 前面演示过如何安装Dynamics CRM 2013,参见<Step by st ...
- Step by step Install a Local Report Server and Remote Report Server Database
原创地址:http://www.cnblogs.com/jfzhu/p/4012097.html 转载请注明出处 前面的文章<Step by step SQL Server 2012的安装 &g ...
随机推荐
- ASP.NET 页面之间传递参数方法
1.通过URL链接地址传递 (1) send.aspx代码 protected void Button1_Click(object sender, EventArgs e) { Request.Red ...
- android三大组件之Intent
Android 应用程序中有三大核心组件: Activity, Service, Broadcast Receiver 都是通过被称之为意图的消息运行. Intent messaging is a f ...
- 关于Linux主流框架运维工作剖析
LINUX是开源的,这也是最主要的原因,想学Windows,Unix对不起,没有源代码.也正是因为这样,LINUX才能够像雪球一样越滚越大,发展到现在这种规模.今天将为大家带来关于Linux主流框架运 ...
- 笨办法学Python（二十四）
习题 24: 更多练习 你离这本书第一部分的结尾已经不远了,你应该已经具备了足够的 Python 基础知识,可以继续学习一些编程的原理了,但你应该做更多的练习.这个练习的内容比较长,它的目的是锻炼你的 ...
- 两台windows内网之间快速复制大量（上百万个）小文件（可用于两台服务器之间）
用各种FTP工具(各种主动被动)都不好使.经测试,用以下的(协议.工具等),在双千兆网卡下,传输大量1M的文件可以达到每秒60多M: windows文件共享(SMB协议)(若是08 r2 数据中心版, ...
- IOS ScrollView的使用 and delegate
ScrollView常用的属性设置 //设置内容尺寸 // CGFloat contentH=self.lastBtn.frame // .origin.y+self.lastBtn.frame.si ...
- VUE的组件DEMO
组件的基本写法可以如下: HTML: <div id="components-demo"> <button-counter self-data="thi ...
- AJAX(四)：XHR2支持的方法
XMLHttpRequest 1级只是把已有的XHR对象的实现细节描述了出来.而XMLHttpRequest 2级则进一步发展了XHR FormDataFormData为序列化表单以及创建与表单格式相 ...
- object dection资源
https://handong1587.github.io/deep_learning/2015/10/09/object-detection.html
- Win10远程桌面连接树莓派3时出现错误：由于安全设置
http://blog.csdn.net/qq_33259138/article/details/52143407 在远程其树莓派时的电脑时提示错误“客户端无法建立与远程计算机的连接,远程计算机可能不 ...