前言

本篇主要讨论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);
                    }
                }
        });

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 ...

随机推荐

$("#Upfile").MultiFile();
Jquery的multifile 1.多文件上传: 2.如上几个验证不重复,和限制上传数量的验证显示的是英文,改成中文文本时,如果不用国标解码,到时候提示框会出现乱码现象.所以一般需要中文显示的时候, ...
HashMap扩容
前言:当您在读该文章的时候,我认为您已经知道HashMap的底层实现原理,如果您还不清楚HashMap是如何实现的,请先去了解,再回来看本文章. 1.HashMap什么时候扩容? HashMap的容量 ...
7 MSSQL数据库备份与恢复
0 MSSQL数据库备份 1 SQLAgent配置 2 设置连接属性 3 输入SA账号密码 4 SQL备份脚本配置 5 生成SQL全量备份脚本 6 生成SQL差异备份脚本 7 修改SQL差异备份脚本 ...
Performing User-Managed Database-18.5、Restoring Control Files
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/offbeatmine/article/details/28429339 18.5.Restoring ...
2017.9.24 基于HTML+JavaScript+CSS的开发案例&&JavaScript+CSS+DIV实现表格变色
1.JavaScript+CSS+DIV实现下拉菜单 1.1 层标签<div> 基本语法: <div id="层编号" style="position: ...
剑指offer40
class Solution { public: void FindNumsAppearOnce(vector<int> data,int* num1,int *num2) { ) ret ...
使用cmd命令创建maven(web)项目+项目转换成IDEA项目+项目打包+Jetty运行Web项目
3条件:配置好环境配置环境教程:https://www.cnblogs.com/weibanggang/p/9623705.html 第一步:查看版本信息,在cmd输入mvn –version,如果 ...
流形（Manifold）初步
原文链接欧几里得几何学(Euclidean Geometry) 两千三百年前,古希腊数学家欧几里得著成了<几何原本>,构建了被后世称为“欧几里得几何学”的研究图形的方法.欧几里得创立了当 ...
js中的变量提升（Hoisting）
<script> function test(){ console.log(a); console.log(foo()); var a=1; function foo(){ return ...
前端JavaScript之DOM节点操作
1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

Javascript Step by Step - 04

前言