jQuery的DOM操作之取值/赋值（1）

.html()方法

作用：获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容

【例】取值

<body>
<ul><li>1</li><li>2</li><li>3</li>
</ul><script src="./jquery.js"></script><script>//.html()//取值console.log($('ul').html());console.log($('ul li').html());</script>
</body>

结果：console打印结果

【例】常数赋值

html代码不变，js代码如下

$('ul').html('9');

结果：ul内的内容变为9

【例】循环常数赋值

js代码

$('ul li').html('9');

结果：循环赋值使所有li元素的内容被赋值为9

【例】函数赋值

var arr = ['第一名：小窦','第二名：小景','第三名：小明']
$('ul li').html(function (index,ele) {return arr[index];
}).css({color: 'red'})

结果，页面内容123改变如下

【例】元素赋值

$('ul li').html("<p style='color:steelblue'>山水万程，皆要好运</p>");

结果：HTML中加入了p标签

【例】字符串的拼接

var arr = ['第一名：小窦','第二名：小景','第三名：小明']
$('ul li').html(function (index,ele) {return '<p style="color:steelblue">' + arr[index] + '</p>';
})

结果

.text()

作用：得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。

【例】匹配后代的文本

console.log($('ul').text());

结果：打印如下

【例】匹配自己的文本

console.log($('ul li').text());

结果：打印123

【例】赋值

var arr = ['第一名：小窦','第二名：小景','第三名：小明'];
$('ul li').text(function (index,ele) {return arr[index];
}).css({color: 'steelblue'})

结果：li中的文本内容改变

.size()

作用：相当于length

【例】

console.log($('ul li').size());

结果打印3

jQuery的DOM操作之取值/赋值（1）相关推荐

ajax 给select赋值,jquery操作select取值赋值与设置选中
摘要腾兴网为您分享:jquery操作select取值赋值与设置选中,掌上优云,杂志迷,悦作业,小米云盘等软件知识,以及屏幕,赢在街拍客,动图,天下任我行,网易充值中心,马上用车,cf不掉血,回收ap ...
Jquery 关于span标签的取值赋值用法
span是最简单的容器,可以当作一个形式标签,其取值赋值方法有别于一般的页面元素. //赋值 $("#spanid").html(value) //取值 $("#span ...
jquery操作select取值赋值与设置选中[转]
本节内容: jquery实现select下拉框的取值与赋值,设置选中的方法大全. 比如<select class="selector"></select> ...
day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
jquery的Dom操作查找节点
1.查找元素节点使用之前的jquery的各种选择器按照语法:"$(选择器)"来定位到文档中的元素,我们定位后得到的是一个jquery对象.我们可以使用juery提供的方法来操作我 ...
03-老马jQuery教程-DOM操作(上）
jQuery DOM操作在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
CYQ.Data 轻量数据层之路使用篇-MAction 取值赋值视频[带音乐] F (二十四)
CYQ.Data 轻量数据层之路使用篇-MAction 取值赋值视频[带音乐] F (二十四) 说明: 本次录制主要为使用篇:CYQ.Data 轻量数据层之路使用篇三曲 MAction 取值赋值 ...
jQuery的DOM操作
jQuery的DOM操作前期:http://blog.csdn.net/goodshot/article/details/20202019 1 , 创建元素节点传统的javascript方法,创建 ...
jQuery 之 [ DOM操作 ]
jQuery的DOM操作查找节点元素节点可以通过jQuery选择器来查找元素节点属性节点通过attr()方法来获取指定元素节点的属性节点文本节点通过text()方法来获取指定元素节点的文 ...

jQuery的DOM操作之取值/赋值（1）

.html()方法

.text()

.size()

jQuery的DOM操作之取值/赋值（1）相关推荐

最新文章

热门文章