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 相关文章推荐
JS自调用匿名函数具体实现
Feb 11 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
原生JS实现不断变化的标签
May 22 Javascript
vue.js语法及常用指令
Oct 29 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
微信小程序实现留言功能
Oct 31 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 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
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
javascript实现tab切换的四种方法
2015/11/05 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
vue-loader教程介绍
2017/06/14 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
在Python中使用元类的教程
2015/04/28 Python
Python fileinput模块使用实例
2015/05/28 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
python flask实现分页的示例代码
2018/08/02 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
茶叶店创业计划书范文
2014/01/19 职场文书
安卓程序员求职信
2014/02/28 职场文书
绿色学校实施方案
2014/03/31 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书