jQuery内容文本值及元素操作

- 日理万妓 2023-07-04 11:23 25阅读 0赞

## 一、jQuery内容文本值 ##

主要针对元素的内容还有表单的值操作

**1. 普通元素的内容html()**

> 相当于原生innerHTML

语法：

html() //获取元素的内容
    html("内容") //设置元素的内容

**2. 普通元素文本内容text()**

> 相当于原生innerText

语法：

text()  //获取元素的文本内容
    text("文本内容")  //设置元素的文本内容

**3. 表单的值 val()**

> 相当于原生value

语法：

val() //获取表单值
    val("内容") //设置表单内容

## 二、jQuery元素操作 ##

**遍历元素**

> 之前的隐式迭代也可以遍历元素，但是隐式迭代指的是对所有元素做相同的操作，这次我们要学的遍历是可以对每个元素做不同的操作。有两个语法：

语法1：

$("div").each(function(index,domEle){  xxx; })

> each()方法遍历匹配的每一个元素。主要用DOM处理。  
> each每一个里面的回调函数有2个参数:index是每个元素的索引号；domEle是每个DOM元素对象，不是jQuery对象  
> 所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象$(domEle)

语法2：

$.each(object,function(index,element){  xxx; })

> $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象  
> 里面的函数有2个参数：index是每个元素的索引号；element遍历内容

**创建元素**

语法：

$("<li></li>");
     //动态的创建了一个<li>

**添加元素**

1.  内部添加  
    语法：

element.append("内容")
    // 把内容放入匹配元素内部最后面，类似原生appendChild.
    element.prepend("内容") 
    //把内容放入匹配元素内部最前面

1.  外部添加  
    语法：

element.after("内容")
    //把内容放入目标元素后面
    element.before("内容")
    //把内容放入目标元素前面

**删除元素**

语法：

element.remove()
    //删除匹配的元素(本身)
     element.empty()
    // 删除匹配的元素集合中所有的子节点
    element.html("")
    //清空匹配的元素内容
    
    //empty和html作用是一样的

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery内容文本值及元素操作

一、jQuery内容文本值主要针对元素的内容还有表单的值操作 1. 普通元素的内容html() > 相当于原生innerHTML 语法： html()

- 日理万妓/ 2023年07月04日 11:23/ 0 赞/ 26 阅读

相关 jQuery基础02：属性操作 + 文本操作 + 元素操作 + 尺寸、位置操作

1.1. jQuery 属性操作 jQuery 常用属性操作有三种：prop() / attr() / data() ; 1.1.1 元素固有属性值 prop()

柔光的暖阳◎/ 2022年12月18日 05:53/ 0 赞/ 220 阅读

相关 jQuery：按文本查找元素

本文翻译自：[jQuery: find element by text][jQuery_ find element by text] Can anyone tell me i

短命女/ 2022年11月29日 05:35/ 0 赞/ 198 阅读

相关 jQuery操作属性，CSS类,HTML代码，文本，值

属性 attr 取/设值 removeAttr 移除属性 prop 类似attr removeProp prop与attr的区别：attr用于取自己定义属性

ゝ一纸荒年。/ 2022年05月29日 14:15/ 0 赞/ 236 阅读

相关 jQuery_元素操作

一.高度和宽度获取高度： $("div").height(); // 高度 $("div").width(); //宽度

我就是我/ 2022年05月22日 12:39/ 0 赞/ 257 阅读

相关 jQuery对元素值操作

一 jQuery提供了3种对元素值操作的方法 <table style="border-collapse:collapse;border:1px solid bbbbbb;"

你的名字/ 2022年05月12日 00:38/ 0 赞/ 244 阅读

相关 jquery的元素的文本内容与HTML内容操作的区别

一应用获取和设置元素的文本内容与HTML内容二代码 <script language="javascript" src="JS/jquery-3.1.1.

布满荆棘的人生/ 2022年05月12日 00:38/ 0 赞/ 224 阅读

相关 jQuery对元素内容操作

jQuery提供了对元素的内容和值进行操作的方法，其中，元素的值是元素的一种属性，大部分元素的值都对应value属性。下面我们再来对元素的内容进行介绍。元素的内容是指定义元

墨蓝/ 2022年05月12日 00:38/ 0 赞/ 343 阅读

相关 jQuery更改元素内容

html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゞ浴缸里的玫瑰/ 2022年01月20日 10:53/ 0 赞/ 302 阅读

相关 jQuery添加标签元素/内容

通过 `jQuery`，可以很容易地添加新元素/内容。我们将学习用于添加新内容的四个 jQuery 方法： `append()` \- 在被选元素的结尾插入内容

r囧r小猫/ 2021年06月26日 16:06/ 0 赞/ 560 阅读