jQuery文本\值\属性操作

最新推荐文章于 2022-03-17 16:41:49 发布

是小木啊

最新推荐文章于 2022-03-17 16:41:49 发布

阅读量108

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_45743513/article/details/117234640

版权

本文详细讲解了如何使用jQuery进行文本内容的替换、HTML属性设置与获取，以及标签对象的操作，包括`text()`、`html()`方法的应用实例和属性如`attr()`、`prop()`的实战演示。

摘要由CSDN通过智能技术生成

1.文本操作

操作标签内部文本
js jQuery
innerText text() 括号内不加参数就是获取加了就是设置
innerHTML html()

在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wot</title>
</head>
<body>
<div>
    <p>
        势如鲲鹏，怒啸长空
    </p>
</div>
</body>
</html>

$('div').text();
"  势如鲲鹏，怒啸长空 "
$('div').html();
"    <p>       势如鲲鹏，怒啸长空    </p>"
$('div').text('乱舞狂沙，行踪诡魅');
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').text('<h1>乱舞狂沙，行踪诡魅</h1>');
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').html('<h1>乱舞狂沙，行踪诡魅</h1>');
k.fn.init [div, prevObject: k.fn.init(1)]

获取值操作
js jQuery
.value .val()
$(’#d1’).val(‘520快乐’) # 括号内不加参数就是获取加了就是设置

在这里插入代码片
<input type="text" id="d1">
<input type="file" id="d2">

$('#d1');  // 获取标签对象
k.fn.init [input#d1]
$('#d1').val();  // 获取标签文本
"一怒而诸侯惧，安居则天下息"
$('#d1').val('一怒而诸侯惧，安居则天下息');  // 设置标签文本
k.fn.init [input#d1]
$('#d2').val();  // val获取文件只是文件的名称
"C:\fakepath\31b01.jpg"
$('#d2')[0].files[0];  // 实际文件数据,   # 牢记两个对象之间的转换
File {name: "31b01.jpg", lastModified: 1601381931612, lastModifiedDate: Tue Sep 29 2020 20:18:51 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 105834, …}

属性操作

js中 jQuery
setAttribute() attr(name,value)
getAttribute() attr(name)
removeAttribute() removeAttr(name)
在用变量存储对象的时候 js中推荐使用 XXXEle 标签对象
jQuery中推荐使用 $XXXEle jQuery对象

<p id="d1" username="wot" >我是p标签</p>

let $idEle = $('p');
undefined
$idEle.attr('id');
"d1"
$idEle.attr('class');
"c1"
$idEle.attr('class','c2');
k.fn.init [p#d1.c2, prevObject: k.fn.init(1)]
$idEle.attr('class');
"c2"
$idEle.attr('password');
"1234"
$idEle.attr('password','hhhhh');
k.fn.init [p#d1.c2, prevObject: k.fn.init(1)]
$idEle.attr('password');
"hhhhh"

对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox radio option是否被选中用prop

`<p id="d1" username="wot" >我是p标签</p>
<input type="checkbox" value="111" name="lt" id="d2">
<input type="checkbox" value="222" name="mt" id="d3" checked>
<input type="checkbox" value="333" name="ht" id="d4">

$('#d3').attr('checked');
"checked"
$('#d3').attr('checked','checked');
k.fn.init [input#d3]
$('#d2').prop('checked');
false
$('#d2').prop('checked');
true
$('#d2').prop('checked',false);
k.fn.init [input#d2]``

是小木啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery文本\值\属性操作

1.文本操作操作标签内部文本js jQueryinnerText text() 括号内不加参数就是获取加了就是设置innerHTML html()在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>wot</title></head><body><div>
复制链接

扫一扫