有力的伪选拔器,怎样更深远的知晓各样选取器

CSS之旅(2):怎么着更深远的通晓各样选用器

2015/05/08 · CSS ·
CSS

原稿出处:
一线码农   

上篇我们说了为啥要使用css,这篇大家就从选取器说起,我们都领会浏览器会把远端过来的html解析成dom模型,有了dom模型,html就改为了xml格式,否则的话就是一堆“乌烟瘴气”的string,那样的话没人知道是什么鸟东西,js也不可以什么各个getElementById,所以当浏览器解析成dom结构后,浏览器才会很有益的基于css各样条条框框的选取器在dom结构中找到相应的地方,那下一个题材自然就严重了,那就是必须深远的知晓dom模型。

一:理解Dom模型

先是我们看上边的代码。

XHTML

<!DOCTYPE html> <html xmlns=”;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> </head>
<body> <p>有名的店铺一栏</p> <hr /> <ul>
<li>百度</li> <li>今日头条</li>
<li>阿里</li> </ul> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <p>有名的公司一栏</p>
    <hr />
    <ul>
        <li>百度</li>
        <li>新浪</li>
        <li>阿里</li>
    </ul>
</body>
</html>

用那些代码大家很不难的画出dom树。

 

亚洲必赢官网 1

当你看来那一个dom树的时候,是否马上感到新闻量越发大,很粗略,因为是树,所以就持有了有些树的风味,比如
“孩子节点”,“大爷节点”,

“兄弟节点”,“第四个左孩子”,“最后一个左孩子”等等,对应着继续我要说的各样意况,一起来探望html被脱了个精光的感觉到是否很爽~~~~

1:孩子节点

找孩子节点,本质上来说分二种,真的只找“孩子节点”,“找到所有孩子(包含子孙)“

<1> 后代选拔器

首先看上边的html,我想你可以易如反掌的绘图出dom树了,那上面的标题就是怎么将body中负有的后裔span都绘上red。

XHTML

<!DOCTYPE html> <html xmlns=”;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> <style
type=”text/css”> body span { color: red; } </style>
</head> <body> <span>我是span1</span> <ul>
<li> <ul><span>我是span2</span></ul>
</li> </ul> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body span {
            color: red;
        }
    </style>
</head>
<body>
    <span>我是span1</span>
    <ul>
        <li>
            <ul><span>我是span2</span></ul>
        </li>
    </ul>
</body>
</html>

亚洲必赢官网 2

  1. 儿女选取器

<1>  “>”玩法

那个也是自己说的第两种意况,真的只找孩子节点,在css中也很简单,用 >
号就足以了,是还是不是很风趣,跟jquery一样的玩法,对不对。

XHTML

<html xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title> <style type=”text/css”> body > span
{ color: red; } </style> </head> <body>
<span>我是span1</span> <ul> <li>
<ul><span>我是span2</span></ul> </li>
</ul> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body > span {
            color: red;
        }
    </style>
</head>
<body>
    <span>我是span1</span>
    <ul>
        <li>
            <ul><span>我是span2</span></ul>
        </li>
    </ul>
</body>
</html>

亚洲必赢官网 3

<2> ”伪拔取器”玩法

而外上边这种玩法,在css3中仍可以利用”伪选用器”玩法,真tmd的精锐,下一篇会特意来上课,那里只介绍一个:nth-child用法,即使

你玩过jquery,一切都小意思。

XHTML

<!DOCTYPE html> <html xmlns=”;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> <style
type=”text/css”> body > span:nth-child(1) { color: red; }
</style> </head> <body>
<span>我是span1</span> <span>我是span2</span>
<ul> <li>
<ul><span>我是span3</span></ul> </li>
</ul> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body > span:nth-child(1) {
            color: red;
        }
    </style>
</head>
<body>
    <span>我是span1</span>
    <span>我是span2</span>
    <ul>
        <li>
            <ul><span>我是span3</span></ul>
        </li>
    </ul>
</body>
</html>

亚洲必赢官网 4

  1. 弟兄节点

哥们节点也是很好了然的,在css中用
“+”就能够解决了,能够看到下面我成功将首个p绘制成了新民主主义革命。

XHTML

<!DOCTYPE html> <html xmlns=”;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> <style
type=”text/css”> .test + p { color:red; } </style>
</head> <body> <p
class=”test”>我是率先个段落</p>
<p>我是首个段落</p> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .test + p {
            color:red;
        }
    </style>
</head>
<body>
    <p class="test">我是第一个段落</p>
    <p>我是第二个段落</p>
 
</body>
</html>

亚洲必赢官网 5

  1. 特性选用器

即使玩过jquery,那个特性接纳器我想尤其领悟,首先看个例子,我想找到name=test的p元素,将其标红。

XHTML

<html xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title> <style type=”text/css”>
p[name=’test’] { color: red; } </style> <script
src=”Scripts/jquery-1.10.2.js”></script> </head>
<body> <p name=”test”>我是首先个段落</p>
<p>我是首个段落</p> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        p[name=’test’] {
            color: red;
        }
    </style>
    <script src="Scripts/jquery-1.10.2.js"></script>
</head>
<body>
    <p name="test">我是第一个段落</p>
    <p>我是第二个段落</p>
</body>
</html>

亚洲必赢官网 6

到后天得了,有没有痛感到和jquery的玩法一模一样,而且感觉越发分明,已经到了
”你懂的“ 的境地。

二:css内部机制的算计

小说起头也说了,浏览器会依照css中定义的”标签”,然后将这么些标签的体制应用到dom中指定的”标签“上,就比如,我在css中定义了一个

p样式,但浏览器怎么就能找到dom中的所有的p元素呢???
因为闭源的因由,大家不可以获悉其里面机制,可是在jquery下边,或者大家得以窥知一

二,因为css能突显的挑三拣四器用法,在jquery中都能做赢得,然后自己就很心急的去探视jquery怎么着提取本人的各样选用器写法,上边大家看看源码。

XHTML

<!DOCTYPE html> <html xmlns=”;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> <style
type=”text/css”> p[name=’test’] { color: red; } </style>
<script src=”Scripts/jquery-1.10.2.js”></script> <script
type=”text/javascript”> $(document).ready(function () {
$(“p[name=’test’]”).hide(); }); </script> </head>
<body> <p name=”test”>我是首先个段落</p>
<p>我是第一个段落</p> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        p[name=’test’] {
            color: red;
        }
    </style>
 
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
 
        $(document).ready(function () {
 
            $("p[name=’test’]").hide();
        });
    </script>
</head>
<body>
    <p name="test">我是第一个段落</p>
    <p>我是第二个段落</p>
</body>
</html>

亚洲必赢官网 7

在jquery里面经过一番追寻,最终可以看来唯有是调用了queryselectorAll那几个dom的原生方法,你也得以在console中知情的看出,最终的

results就是找到的p元素,为了求证,我在taobao
page下开一个console。亚洲必赢官网 8

到现在,我大概粗略的狐疑,也许至少在chrome浏览器下,浏览器为了找到dom中指定的元素,或许也是调用了queryselectAll方法。。。

好了,大约也就说这么多了,精通dom模型是重大,那样的话才能精通后续浏览器的渲染行为。

赞 1 收藏
评论

亚洲必赢官网 9

CSS之旅(3):强大的伪选用器

2015/05/08 · CSS ·
CSS,
伪选取器

初稿出处:
一线码农   

说到伪接纳器,真的让自身体会到了CSS的万分强大,强大到自己一般都不认得CSS了,有点C#
6.0中有的语法糖带给大家的感动。。。首先大家得以在VS里面提前预览一下。

亚洲必赢官网 10

可以看来,下边的伪类有许多浩大,多的让自己眼都快瞎了。。。上边就挑一些实用性相比强的说一说。

一  :nth-child 伪接纳器

俺们通晓在jquery中有一种选拔器叫做“子类选取器”,对应的有:nth-child,:first-child,:last-child,:only-child,那回在CSS中千篇一律

可以办到,可以说一定程度上解决了jquery的下压力,上面简单举个例证。

XHTML

<html xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title> <style type=”text/css”> ul
li:nth-child(1) { color: red; } </style> </head>
<body> <ul> <li>1</li> <li>2</li>
<li>3</li> <li>4</li> <li>5</li>
<li>6</li> </ul> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        ul li:nth-child(1) {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>

亚洲必赢官网 11

可以寓目,当我灌的是:nth-child(1)的时候,ul的首个li的color已经改为red了,若是复杂一点的话,可以将1改成n,浏览器在解析css的伪类

选拔器的时候,内部应该会调用相应的不二法门来分析到对应dom的节点,首先要通晓n是从0,步长为1的一日千里,那么些和jquery的nth-child类似,没

什么好说的,然后大家品尝下:first-child 和 last-child。

XHTML

<html xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title> <style type=”text/css”> ul
li:first-child { color: red; font-weight:800; } ul li:last-child {
color: blue; font-weight: 800; } </style> </head>
<body> <ul> <li>1</li> <li>2</li>
<li>3</li> <li>4</li> <li>5</li>
<li>6</li> </ul> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        ul li:first-child {
            color: red;
            font-weight:800;
        }
 
        ul li:last-child {
            color: blue;
            font-weight: 800;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

亚洲必赢官网 12

二 :checked,:unchecked,:disabled,:enabled

一致在jquery中,有一组拔取器叫做“表单对象属性“,大家可以看看jquery的在线文档。

亚洲必赢官网 13

无异于大家很和颜悦色的意识,在css中也存在这一个属性。。。是否先导有些醉了。。。如故先睹为快。

  1. disabled,enabled

XHTML

<!DOCTYPE html> <html xmlns=”;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> <style
type=”text/css”> input[type=’text’]:enabled { border: 1px solid
red; } input[type=’text’]:disabled { border: 1px solid blue; }
</style> </head> <body> <form> <input
type=”text” disabled=”disabled” /> <input type=”text”/>
</form> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        input[type=’text’]:enabled {
            border: 1px solid red;
        }
 
            input[type=’text’]:disabled {
                border: 1px solid blue;
            }
    </style>
 
</head>
<body>
    <form>
        <input type="text" disabled="disabled" />
        <input type="text"/>
    </form>
</body>
</html>

亚洲必赢官网 14

  1.  checked,unchecked

XHTML

<!DOCTYPE html> <html xmlns=”;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> <style
type=”text/css”> form input[type=”radio”]:first-child:checked {
margin-left: 205px; } </style> </head> <body>
<form> <input class=”test” type=”radio” value=”女”
/><span>女</span><br/> <input class=”test”
type=”radio” value=”男” /><span>男</span> </form>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        form input[type="radio"]:first-child:checked {
            margin-left: 205px;
        }
    </style>
 
</head>
<body>
    <form>
        <input class="test" type="radio" value="女" /><span>女</span><br/>
        <input class="test" type="radio" value="男" /><span>男</span>
 
    </form>
</body>
</html>

亚洲必赢官网 15

  1. selected

本条在css中就算尚未原装的,不过可以用option:checked来顶替,比如下边那样。

XHTML

<!DOCTYPE html> <html xmlns=”;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> <style
type=”text/css”> option:checked { color: red; } </style>
</head> <body> <form> <select>
<option>1</option> <option>2</option>
<option>3</option> </select> </form>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        option:checked {
            color: red;
        }
    </style>
 
</head>
<body>
    <form>
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
    </form>
</body>
</html>

亚洲必赢官网 16

三  empty伪选拔器

其一选用器有点意思,在jquery中称之为”内容选用器“,就是用来探寻空元素的,若是玩转jquery的empty,这些也从没怎么难点,

上面举个例证,让第三个空p的背景变色。

XHTML

<!DOCTYPE html> <html xmlns=”;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> <style
type=”text/css”> p:first-child{ width:500px; height:20px; } p:empty {
background:red; } </style> </head> <body>
<p></p> <p>他好</p> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
 
        p:first-child{
            width:500px;
            height:20px;
        }
 
        p:empty {
            background:red;
        }
    </style>
 
</head>
<body>
    <p></p>
    <p>他好</p>
</body>
</html>

亚洲必赢官网 17

四:not(xxx) 伪选择器

如出一辙这么些也是不行经典的not拔取器,在jquery中称之为”基本选用器“,想起来了并未???

亚洲必赢官网 18

总的看,当您看完上面那个,是否认为css3中一度融入了一些”脚本处理作为”,那种感觉就是丰裕css再也不是你曾今认识的百般css了。

赞 1 收藏
评论

亚洲必赢官网 19

正文实例讲述了jQuery中add()方法用法。分享给我们供大家参考。具体分析如下:

jQuery中add()方法用法实例,jqueryadd

正文实例讲述了jQuery中add()方法用法。分享给我们供我们参考。具体分析如下:

此函数在匹配元素中丰裕与表达式匹配的因素。
add()函数再次回到的结果将始终以元素在HTML文档中冒出的次第来排序,而不再是大概的拉长。

语法:

语法一:

复制代码 代码如下:

$(selector).add(expr,context)

参数 描述
expr 可选。用于匹配元素的选择器字符串。
context 可选。作为待查找的 DOM 元素集、文档或 jQuery 对象。

实例:

有力的伪选拔器,怎样更深远的知晓各样选取器。实例一:

将span元素添加的匹配元素中去,并将它们的字体颜色设置为黑色。

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta name=”author” content=”” />
<title>帮客之家</title>
<style type=”text/css”>
   ul
   {
          width:200px;
          height:200px;
          border:1px solid blue;
   }
   div
   {
          height:300px;
   }
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
    $(document).ready(function(){
        $(“p”).add(“span”).css(“color”,”green”)
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span>我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

实例二:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta name=”author” content=”” />
<title>帮客之家</title>
<style type=”text/css”>
    ul
    {
        width:200px;
        height:200px;
        border:1px solid blue;
    }
    div
    {
        height:300px;
    }
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
    $(document).ready(function(){
        $(“p”).add(“span”,”ul”).css(“color”,”green”)
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span>我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

语法二:

复制代码 代码如下:

$(selector).add(element)

参数列表:

参数 描述
element 可选。被添加的DOM元素或者jQuery元素。

实例:

实例一:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta name=”author” content=”” />
<title>帮客之家</title>
<style type=”text/css”>
    ul
   {
           width:200px;
           height:200px;
           border:1px solid blue;
    }
    div
   {
           height:300px;
亚洲必赢官网,    }
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
    $(document).ready(function(){
       
$(“p”).add(document.getElementById(“myspan”)).css(“color”,”green”)
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span id=”myspan”>我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

实例二:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta name=”author” content=”” />
<title>帮客之家</title>
<style type=”text/css”>
    ul
   {
           width:200px;
           height:200px;
           border:1px solid blue;
    }
    div
   {
           height:300px;
    }
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
    $(document).ready(function(){
        $(“p”).add($(“#myspan”)).css(“color”,”green”)
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span id=”myspan”>我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

语法三:

复制代码 代码如下:

$(selector).add(html)

参数列表:

参数 描述
html 可选。被添加的html代码片段。

实例:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta name=”author” content=”” />
<title>帮客之家</title>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
    $(document).ready(function(){
        alert($(“p”).add(“<span>新加上的</span>”).length);
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
  </ul>
</body>
</html>

期望本文所述对大家的jQuery程序设计具有协助。

本文实例讲述了jQuery中add()方法用法。分享给大家供大家参考。具体分析如下:
此函数在匹配元素中添加…

此函数在匹配元素中添加与表达式匹配的元素。
add()函数再次回到的结果将始终以元素在HTML文档中冒出的逐一来排序,而不再是简单的丰盛。

语法:

语法一:

复制代码 代码如下:

$(selector).add(expr,context)

参数 描述
expr 可选。用于匹配元素的选择器字符串。
context 可选。作为待查找的 DOM 元素集、文档或 jQuery 对象。

实例:

实例一:

将span元素添加的匹配元素中去,并将它们的字体颜色设置为蓝色。

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta name=”author” content=”//www.jb51.net/” />
<title>脚本之家</title>
<style type=”text/css”>
   ul
   {
          width:200px;
          height:200px;
          border:1px solid blue;
   }
   div
   {
          height:300px;
   }
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
    $(document).ready(function(){
        $(“p”).add(“span”).css(“color”,”green”)
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span>我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

实例二:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta name=”author” content=”//www.jb51.net/” />
<title>脚本之家</title>
<style type=”text/css”>
    ul
    {
        width:200px;
        height:200px;
        border:1px solid blue;
    }
    div
    {
        height:300px;
    }
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
    $(document).ready(function(){
        $(“p”).add(“span”,”ul”).css(“color”,”green”)
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span>我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

语法二:

复制代码 代码如下:

$(selector).add(element)

参数列表:

参数 描述
element 可选。被添加的DOM元素或者jQuery元素。

实例:

实例一:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta name=”author” content=”//www.jb51.net/” />
<title>脚本之家</title>
<style type=”text/css”>
    ul
   {
           width:200px;
           height:200px;
           border:1px solid blue;
    }
    div
   {
           height:300px;
    }
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
    $(document).ready(function(){
       
$(“p”).add(document.getElementById(“myspan”)).css(“color”,”green”)
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span id=”myspan”>我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

实例二:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta name=”author” content=”//www.jb51.net/” />
<title>脚本之家</title>
<style type=”text/css”>
    ul
   {
           width:200px;
           height:200px;
           border:1px solid blue;
    }
    div
   {
           height:300px;
    }
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
    $(document).ready(function(){
        $(“p”).add($(“#myspan”)).css(“color”,”green”)
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span id=”myspan”>我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

语法三:

复制代码 代码如下:

$(selector).add(html)

参数列表:

参数 描述
html 可选。被添加的html代码片段。

实例:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta name=”author” content=”//www.jb51.net/” />
<title>脚本之家</title>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
    $(document).ready(function(){
        alert($(“p”).add(“<span>新拉长的</span>”).length);
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
  </ul>
</body>
</html>

目的在于本文所述对我们的jQuery程序设计具有援救。

您或许感兴趣的稿子:

  • 宪章SQLSERVER的八个函数:dateadd(),datediff()
  • JavaScript 模仿vbs中的 DateAdd()
    函数的代码
  • jquery中.add()的使用分析
  • js完结类似于add(1)(2)(3)调用方式的方法
网站地图xml地图