jqueryAPI学习之add(),addBack(),addClass(),after()学习
2014-08-10 17:49
459 查看
一、.add(）用于添加元素到匹配元素集合，可接受多重类型参数
【1】add(selector)一个字符串表示的选择器表达式，找到元素并添加到元素集合中
【2】add(elements);一个或多个元素添加到匹配的元素集合
【3】add(html) 将html代码片段添加到匹配的元素集合
【4】add(jQuery object)一个现有的jQuery对象添加到匹配的元素集合
【5】add(selector,context)；select:一个字符串表达式的选择器表达式;context:指定选择器查找与思念诉所在的上下文
在上述中我们可以看到，通过add接受的参数将选择的元素添加到add方法中构造 的一个jquery对象中
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
.widget{color:green;}
</style>
<script type="text/javascript" src="./jquery.js"></script>
</head>
<body>
<p>aaaaa</p>
<ul>
<li>item1</li>
<li>imte2</li>
<li>item3</li>
</ul>
<script type="text/javascript">
$(document).ready(function()
{
$('p').add('ul').addClass('widget');
})
</script>
</body>
</html>
这里的出现的效果如下图
而且我们可以通过使用一个选择器或者应用DOM元素本身作为.add（）方法的参数，将段落添加到列表中
代码如下 <script type="text/javascript">
$(document).ready(function()
{
$('li').add('p').addClass('widget');
})
</script>结果如上显示效果，如果为add添加p到元素集合中，则如下图
其他的如动态添加到页面之类的效果大家自己可以尝试则去实验下，在这里就不多说了
二、addBack();用于添加堆栈中元素到当前集合，类似于一个选择性的过滤器
接受的参数仅仅只是selector;一个字符串，其中包含选择器表达式，匹配当前元素集合不包括内在元素;
在这里，我们先看两段代码
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
.widget{color:green;}
.red{color: red;}
</style>
<script type="text/javascript" src="./jquery.js"></script>
</head>
<body>
<p>aaaaa</p>
<ul>
<li>item1</li>
<li>imte2</li>
<li class="widget">item3</li>
<li>imte4</li>
<li>item5</li>
</ul>
<script type="text/javascript">
$(document).ready(function()
{
$('li.widget').nextAll().addClass('red');
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
.widget{color:green;}
.red{color: red;}
</style>
<script type="text/javascript" src="./jquery.js"></script>
</head>
<body>
<p>aaaaa</p>
<ul>
<li>item1</li>
<li>imte2</li>
<li class="widget">item3</li>
<li>imte4</li>
<li>item5</li>
</ul>
<script type="text/javascript">
$(document).ready(function()
{
$('li.widget').nextAll().addBack().addClass('red');
});
</script>
</body>
</html>
在这里，我们就可以很明显的发现使用addvBack()以后的区别了。而其中我们需注意的是，addBack是1.8以上版本才有效
三、addClass()如上应用，这里就不多解释了，主要是用于为匹配的元素添加样式类
【1】add(selector)一个字符串表示的选择器表达式，找到元素并添加到元素集合中
【2】add(elements);一个或多个元素添加到匹配的元素集合
【3】add(html) 将html代码片段添加到匹配的元素集合
【4】add(jQuery object)一个现有的jQuery对象添加到匹配的元素集合
【5】add(selector,context)；select:一个字符串表达式的选择器表达式;context:指定选择器查找与思念诉所在的上下文
在上述中我们可以看到，通过add接受的参数将选择的元素添加到add方法中构造 的一个jquery对象中
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
.widget{color:green;}
</style>
<script type="text/javascript" src="./jquery.js"></script>
</head>
<body>
<p>aaaaa</p>
<ul>
<li>item1</li>
<li>imte2</li>
<li>item3</li>
</ul>
<script type="text/javascript">
$(document).ready(function()
{
$('p').add('ul').addClass('widget');
})
</script>
</body>
</html>
这里的出现的效果如下图
而且我们可以通过使用一个选择器或者应用DOM元素本身作为.add（）方法的参数，将段落添加到列表中
代码如下 <script type="text/javascript">
$(document).ready(function()
{
$('li').add('p').addClass('widget');
})
</script>结果如上显示效果，如果为add添加p到元素集合中，则如下图
其他的如动态添加到页面之类的效果大家自己可以尝试则去实验下，在这里就不多说了
二、addBack();用于添加堆栈中元素到当前集合，类似于一个选择性的过滤器
接受的参数仅仅只是selector;一个字符串，其中包含选择器表达式，匹配当前元素集合不包括内在元素;
在这里，我们先看两段代码
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
.widget{color:green;}
.red{color: red;}
</style>
<script type="text/javascript" src="./jquery.js"></script>
</head>
<body>
<p>aaaaa</p>
<ul>
<li>item1</li>
<li>imte2</li>
<li class="widget">item3</li>
<li>imte4</li>
<li>item5</li>
</ul>
<script type="text/javascript">
$(document).ready(function()
{
$('li.widget').nextAll().addClass('red');
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
.widget{color:green;}
.red{color: red;}
</style>
<script type="text/javascript" src="./jquery.js"></script>
</head>
<body>
<p>aaaaa</p>
<ul>
<li>item1</li>
<li>imte2</li>
<li class="widget">item3</li>
<li>imte4</li>
<li>item5</li>
</ul>
<script type="text/javascript">
$(document).ready(function()
{
$('li.widget').nextAll().addBack().addClass('red');
});
</script>
</body>
</html>
在这里，我们就可以很明显的发现使用addvBack()以后的区别了。而其中我们需注意的是，addBack是1.8以上版本才有效
三、addClass()如上应用，这里就不多解释了，主要是用于为匹配的元素添加样式类
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery源码学习（1）——addClass
- jQuery学习笔记--属性 addClass removeClass
- Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]
- jQuery学习09---样式操作，addClass,removeClass,toggleClass
- jQuery学习笔记 - addClass（）
- 使用jQuery操作DOM（attr/html/text/addClass/removeAttr/removeClass/append/before/after/clone/replacewith/)
- jQuery学习入门总结之css（）和addClass（）的不同
- jquery之修改元素样式(添加和删除类名称，使用addClass(),removeClass(),toggleClass()方法)
- jquery.Validation.js 学习笔记 [待更新]（API 和 DEMO等）
- Jquery选择器和.css,.addClass,.toggleClass
- learning jQuery 学习笔记十五（+jQuery 1.4.1 API）-- AJAX----load(url, [data], [callback])
- learning jQuery 学习笔记五（+jQuery 1.4.1 API）--复合事件
- learning jQuery 学习笔记六（+jQuery 1.4.1 API）-- 事件捕获+事件冒泡+模仿事件
- learning jQuery 学习笔记十七（+jQuery 1.4.1 API）-- 表格操作----三色交替
- learning jQuery 学习笔记十二（+jQuery 1.4.1 API）-- DOM操作-基于命令改变页面 ----包装元素
- learning jQuery 学习笔记十三（+jQuery 1.4.1 API）-- DOM操作-基于命令改变页面 ----复制元素及其它
- learning jQuery 学习笔记八（+jQuery 1.4.1 API）-- 效果-基本的隐藏、显示和效果
- Jquery: hasClass addClass removeClass toggleClass 用法
- learning jQuery 学习笔记七（+jQuery 1.4.1 API）-- 效果-修改内联CSS