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 相关文章推荐
javascript中的对象创建 实例附注释
Feb 08 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
js实现轮播图特效
May 28 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 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类
2006/07/15 PHP
php导入导出excel实例
2013/10/25 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
php获取系统变量方法小结
2015/05/29 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
jQuery事件用法详解
2016/10/06 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
loading动画特效小结
2017/01/22 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
Python shelve模块实现解析
2019/08/28 Python
java关于string最常出现的面试题整理
2021/01/18 Python
python 实现IP子网计算
2021/02/18 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
建筑项目策划书
2014/01/13 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
山楂树之恋观后感
2015/06/11 职场文书
大学生社会实践感想
2015/08/11 职场文书