jQuery中after()方法用法实例


Posted in Javascript onDecember 25, 2014

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

此方法可向每个匹配元素的外部的尾部追加HTML内容。

特别说明:

此方法是追加内容,也就是原来的内容还在。
HTML内容就是内容中可以包含HTML标签,并且能够被浏览器渲染。
文本内容是先将内容中的HTML预定义字符转换成html字符实体,这样HTML标签就不会被渲染。

语法结构:

$(selector).after(content)

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

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

<title>三水点靠木</title>

<style type="text/css">

div 

{

  height:150px;

  width:150px;

  background-color:green;

  margin-top:10px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("div").after("<b>  好好学习</b>"); 

}) 

</script>

</head>

<body>

<div></div>

</body>

</html>

在原来div内容的后面追加内容。
实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

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

<title>三水点靠木</title>

<style type="text/css">

div 

{

  height:150px;

  width:150px;

  background-color:green;

  margin-top:10px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){  

  $("button").click(function(){ 

    $(".html").after("<b>好好学习</b>"); 

    $(".text").text("<b>好好学习</b>");     

  }) 

}) 

</script>

</head>

<body>

<div class="html"></div>

<div class="text"></div>

<button>点击查看效果</button>

</body>

</html>

通过此实例大家可以观察一下html内容和文本内容的区别。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
webpack external模块的具体使用
Mar 10 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
Vue实现简单的留言板
Oct 23 Javascript
jQuery中prepend()方法用法实例
Dec 25 #Javascript
jQuery中append()方法用法实例
Dec 25 #Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 #Javascript
jQuery中html()方法用法实例
Dec 25 #Javascript
jQuery中val()方法用法实例
Dec 25 #Javascript
24款热门实用的jQuery插件推荐
Dec 24 #Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 #Javascript
You might like
php 移除数组重复元素的一点说明
2008/11/27 PHP
PHP可变函数的使用详解
2013/06/14 PHP
php获取apk包信息的方法
2014/08/15 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
JavaScript知识点整理
2015/12/09 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
python中常用检测字符串相关函数汇总
2015/04/15 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python3 max()函数基础用法
2019/02/19 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
Python logging设置和logger解析
2019/08/28 Python
Django在Model保存前记录日志实例
2020/05/14 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
大学本科毕业生求职信范文
2013/12/18 职场文书
军训学生自我鉴定
2014/02/12 职场文书
网络技术专业推荐信
2014/02/20 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python
Mybatis是这样防止sql注入的
2021/12/06 Java/Android