jQuery中before()方法用法实例


Posted in Javascript onDecember 25, 2014

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

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

特别说明:

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

语法结构:

$(selector).before(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").before("<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").before("<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实现滚动新闻
Feb 12 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
JS敏感词过滤代码
Dec 23 Javascript
layui文件上传实现代码
May 20 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
vue iview实现动态新增和删除
Jun 17 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 #Javascript
jQuery中after()方法用法实例
Dec 25 #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
You might like
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
关于Javascript作用域链的八点总结
2013/12/06 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
js实现适配移动端的拖动效果
2020/01/13 Javascript
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
python数据结构之列表和元组的详解
2017/09/23 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
python批量创建指定名称的文件夹
2019/03/21 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
车间机修工岗位职责
2014/02/28 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
2014年行政工作总结
2014/11/19 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
西安事变观后感
2015/06/12 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
门面租赁合同范文
2019/08/06 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang