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 相关文章推荐
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
如何更好的编写js async函数
May 13 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 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
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
angularJS 入门基础
2015/02/09 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
Python构建网页爬虫原理分析
2017/12/19 Python
tornado 多进程模式解析
2018/01/15 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
python验证身份证信息实例代码
2019/05/06 Python
Python的Lambda函数用法详解
2019/09/03 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
自荐信包含哪些内容
2013/10/30 职场文书
办公室内勤工作职责
2013/12/11 职场文书
中英文自我评价常用句型
2013/12/19 职场文书
班长演讲稿范文
2014/04/24 职场文书
办理护照工作证明
2014/10/10 职场文书
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL