jQuery中add()方法用法实例


Posted in Javascript onJanuary 08, 2015

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

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

语法:

语法一:

$(selector).add(expr,context)

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

实例:

实例一:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="https://3water.com/" />

<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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="https://3water.com/" />

<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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="https://3water.com/" />

<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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="https://3water.com/" />

<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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="https://3water.com/" />

<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程序设计有所帮助。

Javascript 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
使用Modello编写JavaScript类
Dec 22 Javascript
js 数组操作代码集锦
Apr 28 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
理解JavaScript事件对象
Jan 25 Javascript
Angular排序实例详解
Jun 28 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 Javascript
javascript使用canvas实现饼状图效果
Sep 08 Javascript
JavaScript执行机制详细介绍
Dec 06 Javascript
javascript 动态创建表格
Jan 08 #Javascript
javascript实现避免页面按钮重复提交
Jan 08 #Javascript
Node.js 制作实时多人游戏框架
Jan 08 #Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 #Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 #Javascript
jQuery中siblings()方法用法实例
Jan 08 #Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 #Javascript
You might like
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
python字典get()方法用法分析
2015/04/17 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python元组常见操作示例
2019/02/19 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
餐饮业会计岗位职责
2013/12/19 职场文书
运动会领导邀请函
2014/01/10 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
Python 数据可视化之Bokeh详解
2021/11/02 Python