一、val()
1、作用
设置或者返回JQuery对象所匹配的DOM对象value的值
2、语法格式:
$("selector").val( [ values ] )
3、参数
| 参数 | 说明 |
|---|---|
| values | 可选/String/Array/Function类型用于设置的value值 |
4、返回值
- val()函数的返回值是String/Array/jQuery类型，返回值的实际类型取决于val()函数所执行的操作。
- 如果val()函数执行的是设置操作，将返回当前jQuery对象本身。
- 如果执行的是获取操作，将返回第一个匹配元素的value属性值，该值一般为字符串类型；
- 如果该元素是多选的<select>元素，则返回包含所有选中值的数组。
5、举个栗子
HTML代码
<form id="form_id" name="answer_form" method="post">
<label for="username_id">用户名</label>
<input id="username_id" class="normal" name="username" type="text"><br>
<label for="password_id">密 码</label>
<input id="password_id" class="normal" name="password" type="password" value="123456"><br>
<input id="user_normal_id" class="normal" name="username_id" type="hidden" disabled="disabled" value="1"><br>
<input id="men_id" name="gender" type="radio" checked="checked" value="men">
<label for="men_id">男</label>
<input id="women_id" name="gender" type="radio" value="women"><
label for="women_id">女</label>
<br>
<label for="text_id">自我介绍</label> <br>
<textarea id="text_id" name="content" rows="3" cols="80">这个是文本区域的内容</textarea><br>
<label for="answer_id">您喜欢的明星</label><br>
<select id="answer_id" name="answer">
<option value="A">上原亚衣</option>
<option value="B">天海翼</option>
<option value="C">美祢藤</option>
<option value="D">长泽梓</option>
<option value="E" selected="selected">呵呵</option>
</select>
</form>
JS代码
$(function () {
//获取元素值
var $user_value = $("#username_id").val();
//设置元素值 返回对象
var $user_input = $("#username_id").val("abcd");
var select_val = $("#answer_select_id:selected").val();
$("#submit_id").click(function () {
var $checks = $("input:checkbox:checked");
$checks.each(function () {
var val = $(this).val();
})
})
});
二、html()
1、作用
函数用于设置或返回当前jQuery对象所匹配的DOM元素内的html内容。该函数的用途相当于设置或获取DOM元素的innerHTML属性值。
2、语法格式
$("selector").html( [ htmlString ] )
3、参数
| 参数 | 描述 |
|---|---|
| htmlString | 可选/String/Function类型用于设置的html字符串。 |
- 如果没有指定htmlString参数，则表示获取第一个匹配元素的html内容；
- 如果指定了htmlString参数，则表示设置所有匹配元素的html内容。
备注
jQuery 1.4 新增支持：参数htmlString可以为函数。html()将根据匹配的所有元素遍历执行该函数，函数中的this将指向对应的DOM元素。
html()还会为函数传入两个参数：
- 第一个参数就是该元素在匹配元素中的索引，
- 第二个参数就是该元素当前的html内容。函数的返回值就是需要为该元素设置的html内容。
如果参数htmlString不是字符串或函数类型，则会被转换为字符串类型( toString() )。
如果参数为null或undefined，则将其视作空字符串("")。
4、返回值
html()函数的返回值是String/jQuery类型，返回值的实际类型取决于html()函数所执行的操作。
- 如果html()函数执行的是设置操作，将返回当前jQuery对象本身。
- 如果执行的是获取操作，将返回第一个匹配元素的html内容，该值为字符串类型。
5、举个栗子
HTML代码
<div id="div1">
<p id="p1">呵呵</p>
<p id="p2">
<span id="p3">为全栈工程狮而奋斗</span>
<span id="p4"></span>
</p>
</div>
js代码
$(function () {
var $html = $("#p1").html();
console.log($html);
var $html2 = $("#p2").html();
console.log($html2);
//设置内容
$("#p4").html("哈哈");
$("p").html(function (index, currentHtml) {
// 函数内的this指向当前迭代的p元素
return "第" + (index + 1) + "个p元素，id为" + this.id;
});
});
三、text()
1、作用
函数用于设置或返回当前jQuery对象所匹配的DOM元素内的text内容。所谓text内容，就是在该元素的html内容(即innerHTML属性值)的基础上过滤掉所有HTML标记后的文本内容(即IE浏览器的DOM元素特有的innerText属性值)。
如果jQuery对象匹配的元素不止一个，则text()返回合并了每个匹配元素(包含其后代元素)中的文本内容后的字符串。该函数属于jQuery对象(实例)。
2、语法
$("selector").text( [ textString ] )
3、参数
| 参数 | 描述 |
|---|---|
| textString | 可选/String/Function类型用于设置的text字符串。 |
- 如果没有指定textString参数，则表示获取合并了每一个匹配元素中的内容后的text内容；
- 如果指定了textString参数，则表示设置所有匹配元素的text内容。
备注- jQuery 1.4 新增支持：参数textString可以为函数。text()将根据匹配的所有元素遍历执行该函数，函数中的this将指向对应的DOM元素。
- 如果参数textString不是字符串或函数类型，则会被转换为字符串类型( toString() )。如果参数为null或undefined，则将其视作空字符串("")。
4、返回值
- text()函数的返回值是String/jQuery类型，返回值的实际类型取决于text()函数所执行的操作。
- 如果text()函数执行的是设置操作，将返回当前jQuery对象本身。如果执行的是获取操作，将返回合并了每一个匹配元素中的内容后的text内容，该值为字符串类型。
5、举个栗子
HTML代码
<div id="d1">
<p id="p2">
<span id="p2">青春就像一张破裂的网,遗落了我太多年轻的时候梦想,</span>
<span id="p3"></span>
</p>
<ul>
<li>JAVA</li>
<li>H5</li>
<li>Android</li>
</ul>
</div>
js代码
$(function () {
/* 实例化p标签 */
var $p1 = $("#p1");
/* 设置文本内容*/
$p1.text("跟哥玩感情我会让你哭的很有节奏!!!");
var text = $("p").text();
console.log(text);
var $p2 = $("#p2");
/*返回的是过滤掉HTML标记的文本内容*/
console.log($p2.text());
var $s2 = $("#s2");
$s2.text('<h1>Hello World</h1>');
console.log($s2.text());
//清空所有匹配的元素的文本内容
$("span").text("");
/*
* index 将所有li元素的text内容修改成索引
* text 每个li的文本内容
*/
$("li").text(function (index, text) {
console.log(text);
return index;
});
});
网友评论