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 相关文章推荐
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 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执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
JavaScript高级程序设计
2006/12/29 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
python 模拟登陆github的示例
2020/12/04 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
毕业评语大全
2014/05/04 职场文书
海洋科学专业求职信
2014/08/10 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
教师节寄语2015
2015/03/23 职场文书
七年级上册生物的课件
2019/08/07 职场文书
用Python将库打包发布到pypi
2021/04/13 Python
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
Java 多线程协作作业之信号同步
2022/05/11 Java/Android