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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
js控制div及网页相关属性的代码
Dec 19 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
js实现无缝轮播图特效
May 09 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
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
python实现红包裂变算法
2016/02/16 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python操作oracle的完整教程分享
2018/01/30 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
python统计中文字符数量的两种方法
2019/01/31 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
django中的图片验证码功能
2019/09/18 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
Go并发4种方法简明讲解
2022/04/06 Golang