jquery怎么在元素前面插入东西

jquery怎么在元素前面插入东西,第1张

jquery在元素前面插入东西可以使用before()函数。语法:$(selector).before(content),content 必需。规定要插入的内容(可包含 HTML 标签)

延展阅读:

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档 *** 作、事件处理、动画设计和Ajax交互。

jQuery的模块可以分为:入口模块、底层支持模块和功能模块。其核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1、创建html页面,打开记事本,输入如下截图所示的html代码,将文件保存为html结尾的文件,例如JsTest.html。

2、上一步保存完成后,双击文件即可使用默认浏览器运行页面,如果想使用指定浏览器运行,右键文件,选择【打开方式】->挑选任一已经安装的浏览器即可。

3、原生JS方式,详细代码与注释见截图。

4、原生JS方式,运行效果如下。

5、Jquery方式,必须要引入jquery文件才能使用,此处将jquery下载下来放到Content文件夹中,新的目录结构如下

-- Content

-- jquery-1.11.3.min.js

-- JsTest.html

6、Jquery方式,详细代码与相关注释见截图。

7、Jquery方式,运行效果如下。

该博客基于阮一峰前辈在2011年所做的分享(原链接: http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html )

jQuery的核心就是:可以选择某个网页元素,然后对其进行某种 *** 作

我们可知jQuery是一个构造函数,那么我们就可以通过选择表达式,把选中的元素,放进jQuery构造函数($)当中,从而得到选中的元素。

而选择表达式可以是CSS选择器:

也可以是jQuery特有的表达式:

在jQuery当中最终选中网页元素以后,可以对它进行一系列 *** 作,并且所有 *** 作可以连接在一起,以链条的形式写出来,比如:

拆解开来,就是:

这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery *** 作所返回的都是一个jQuery对象,所以不同 *** 作可以连在一起。

jQuery还提供了.end()方法,使得结果集可以后退一步:

创建新元素的方法非常简单,只要把新元素直接传入jQuery的构造函数就行了:

*** 作元素在网页中的位置移动有两种方法:

(1)直接移动该元素;

(2)移动其他元素,使得目标元素达到我们想要的位置。

(1)方法是使用.insertAfter(),把div元素移动p元素后面:

(2)方法是使用.after(),把p元素加到div元素前面:

表面上看,这两种方法的效果是一样的,唯一的不同似乎只是 *** 作视角的不同。但是实际上,它们有一个重大差别,那就是返回的元素不一样。第一种方法返回div元素,第二种方法返回p元素。你可以根据需要,选择到底使用哪一种方法。

使用这种模式的 *** 作方法,一共有四对:

text(?) //读写文本内容

用于返回内容时,则返回所有匹配元素的文本内容(会删除 HTML 标记)。

用于设置内容时,则重写所有匹配元素的内容。

html(?) //读写HTML内容

设置或返回被选元素的 innerHTML(文本 + HTML 标记)

attr('title',?) // 读写属性

设置或返回被选元素的属性值。

css({color:'red'}) //读写style

设置或返回被选元素的一个或多个样式属性。

addClass('blue')

向被选元素添加一个或多个类。

该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。

on('click',fn)

支持动态绑定元素,即页面上元素有添加或变化后仍可绑定,前提是selector须是目标绑定元素的父元素

off('click',fn)

用于移除通过 on()方法添加的事件处理程序


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11727247.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存