jQuery中before()方法用法实例

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

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

特别说明:

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

语法结构:


代码如下:

$(selector).before(content)

实例代码:

实例一:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<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="http://www.jb51.net/" />
<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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery使用after()方法在元素后面添加多项内容的方法

    本文实例讲述了jQuery使用after()方法在元素后面添加多项内容的方法.分享给大家供大家参考.具体分析如下: jQuery可通过after()方法在元素后面添加多项内容,after()可以带多个参数,在指定元素后面添加多项内容 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> function af

  • jQuery 追加元素的方法如append、prepend、before

    jQuery 追加元素的方法如append、prepend、before

    1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 $("p").append("Some appended text."); 2.jQuery prepend() 方法 jQuery prepend() 方法在被选元素的开头插入内容. 实例 $("p").prepend("Some prepended text."); 3.after() 和 before() 方法

  • jQuery使用before()和after()在元素前后添加内容的方法

    本文实例讲述了jQuery使用before()和after()在元素前后添加内容的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function()

  • jQuery中append、insertBefore、after与insertAfter方法注意事项

    这里列的是针对初学jQuery者来说容易搞不懂的部分,我在这里把这些方法列了个清单,希望大家能看的懂.如下: 方法 源包装集/字串 目标包装集体 特性描述 A.append(B) B A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置:若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置. 由此,若目标只匹配一个元素时,使用前述方法后源将被删除. B.appendTo(A) A.prepend(B) B.prependTo(A

  • jQuery中after()方法用法实例

    本文实例讲述了jQuery中after()方法用法.分享给大家供大家参考.具体分析如下: 此方法可向每个匹配元素的外部的尾部追加HTML内容. 特别说明: 此方法是追加内容,也就是原来的内容还在. HTML内容就是内容中可以包含HTML标签,并且能够被浏览器渲染. 文本内容是先将内容中的HTML预定义字符转换成html字符实体,这样HTML标签就不会被渲染. 语法结构: 复制代码 代码如下: $(selector).after(content) 实例代码: 实例一: 复制代码 代码如下: <!D

  • jQuery中after的两种用法实例

    法一:在每个p元素后插入内容: 复制代码 代码如下: $("button").click(function(){      $("p").after("<p>Hello world!</p>");}); 法二: 复制代码 代码如下: $("button").click(function(){    $("p").after(function(n){            return

  • jQuery中prevAll()方法用法实例

    本文实例讲述了jQuery中prevAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法查找匹配元素集合之前所有的同辈元素. 同辈元素集合可以通过选择器进行筛选. 语法结构: 复制代码 代码如下: $("selector").prevAll(expr) 参数列表: 参数 描述 expr 可选.用于过滤的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta cha

  • jQuery中innerHeight()方法用法实例

    本文实例讲述了jQuery中innerHeight()方法用法.分享给大家供大家参考.具体分析如下: 获取第一个匹配元素内部区域高度. 包括内补白(padding).不包括边框border). 也就是说内部区域的宽度等于width和padding之和. 此方法对可见和隐藏元素均有效. 可以结合innerWidth()方法学习. 语法结构: 复制代码 代码如下: $(selector).innerHeight() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html

  • jQuery中die()方法用法实例

    本文实例讲述了jQuery中die()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除所有通过live()方法向指定元素添加的一个或多个事件处理程序. 语法结构: 复制代码 代码如下: $(selector).die(type,function) 参数列表: 参数 描述 type 可选.定义附加到元素的一个或多个事件类型.由空格分隔多个事件值. function 定义当事件发生时运行的函数. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html>

  • jQuery中data()方法用法实例

    本文实例讲述了jQuery中data()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以向匹配元素附加数据,或者从匹配元素获取数据. 语法结构一: 复制代码 代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-

  • jQuery中scrollLeft()方法用法实例

    本文实例讲述了jQuery中scrollLeft()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取或设置匹配元素相对滚动条左侧的偏移(offset)量. 语法结构一: 当scrollLeft()方法没有参数的时候就是获取匹配元素相对滚动条左侧的偏移量. 复制代码 代码如下: $(selector).scrollLeft() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&quo

  • jQuery中each()方法用法实例

    本文实例讲述了jQuery中each()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以以匹配元素集合中每一个元素作为上下文去执行一个函数. 当每次执行函数时,函数的执行环境都是一个匹配元素集合中不同的DOM元素,并且会将此元素在集合中索引传递给此函数,索引值是从0开始的.通过返回false可用于提早停止循环运行,返回true将继续执行函数,直到匹配元素中每一个元素都遍历完成. each()方法不同于jQuery.each()方法 .each()方法只能够遍历JQuery对象,而jQu

  • jQuery中offset()方法用法实例

    本文实例讲述了jQuery中offset()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置所匹配元素相对于document对象的偏移量. 语法结构一: 复制代码 代码如下: $(selector).offset() 获取匹配元素在当前document的相对偏移. 返回的对象包含两个整型属:top和left. 此方法只对可见元素有效. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta char

  • jQuery中unbind()方法用法实例

    本文实例讲述了jQuery中unbind()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除被选元素的事件处理程序,包括通过bind()方法注册的自定义事件. unbind()方法如果不带参数,则删除所有绑定的事件. 此方法如果提供了事件类型作为参数,则只删除该类型的绑定事件. 如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除. 语法结构: 复制代码 代码如下: $(selector).unbind(type,function) 参数列表: 参数 描述

  • jQuery中first()方法用法实例

    本文实例讲述了jQuery中first()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取匹配元素集合中的第一个元素. 语法结构: 复制代码 代码如下: $(selector).first() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="h

  • jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代码如下: $(selector).eq(index) 参数列表: 参数 描述 index 定义元素在元素集中的索引,从零开始的. 如果是负数则从最后一个元素往回计数. 越界无效. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head

随机推荐