深入学习jquery源码之html()与text()和val()
html([val|fn])
概述
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取。
返回值:String
参数
val String
用于设定HTML内容的值
function(index, html) Function
此函数返回一个HTML字符串。接受两个参数,index为元素在集合中的索引位置,html为原先的HTML值。
返回p元素的内容。
$('p').html();
设置所有 p 元素的内容
$("p").html("Hello <b>world</b>!");
使用函数来设置所有匹配元素的内容。
$("p").html(function(n){
return "这个 p 元素的 index 是:" + n;
});
text([val|fn])
概述
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
参数
val String
用于设置元素内容的文本
function(index, text) Function
此函数返回一个字符串。接受两个参数,index为元素在集合中的索引位置,text为原先的text值。
返回p元素的文本内容。
$('p').text();
设置所有 p 元素的文本内容
$("p").text("Hello world!");
使用函数来设置所有匹配元素的文本内容。
$("p").text(function(n){
return "这个 p 元素的 index 是:" + n;
});
val([val|fn|arr])
返回值:String,Array
概述
获得匹配元素的当前值。
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。
参数
val String
要设置的值。
function(index, value) Function
此函数返回一个要设置的值。接受两个参数,index为元素在集合中的索引位置,text为原先的text值。
array Array<String>
用于 check/select 的值
获取文本框中的值
$("input").val();
设定文本框的值
("input").val("hello world!");
设定文本框的值
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
参数array
设定一个select和一个多选的select的值
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
jquery源码
// Multifunctional method to get and set values of a collection
// The value/s can optionally be executed if it's a function
var access = jQuery.access = function (elems, fn, key, value, chainable, emptyGet, raw) {
var i = 0,
length = elems.length,
bulk = key == null;
// Sets many values
if (jQuery.type(key) === "object") {
chainable = true;
for (i in key) {
jQuery.access(elems, fn, i, key[i], true, emptyGet, raw);
}
// Sets one value
} else if (value !== undefined) {
chainable = true;
if (!jQuery.isFunction(value)) {
raw = true;
}
if (bulk) {
// Bulk operations run against the entire set
if (raw) {
fn.call(elems, value);
fn = null;
// ...except when executing function values
} else {
bulk = fn;
fn = function (elem, key, value) {
return bulk.call(jQuery(elem), value);
};
}
}
if (fn) {
for (; i < length; i++) {
fn(elems[i], key, raw ? value : value.call(elems[i], i, fn(elems[i], key)));
}
}
}
return chainable ?
elems :
// Gets
bulk ?
fn.call(elems) :
length ? fn(elems[0], key) : emptyGet;
};
var input = document.createElement("input"),
div = document.createElement("div"),
fragment = document.createDocumentFragment();
// Make sure that link elements get serialized correctly by innerHTML
// This requires a wrapper element in IE
support.htmlSerialize = !!div.getElementsByTagName("link").length;
// IE strips leading whitespace when .innerHTML is used
support.leadingWhitespace = div.firstChild.nodeType === 3;
var rnoInnerhtml = /<(?:script|style|link)/i,
rnoshimcache = new RegExp("<(?:" + nodeNames + ")[\\s/>]", "i"),
rleadingWhitespace = /^\s+/,
// We have to close these tags to support XHTML (#13200)
wrapMap = {
option: [1, "<select multiple='multiple'>", "</select>"],
legend: [1, "<fieldset>", "</fieldset>"],
area: [1, "<map>", "</map>"],
param: [1, "<object>", "</object>"],
thead: [1, "<table>", "</table>"],
tr: [2, "<table><tbody>", "</tbody></table>"],
col: [2, "<table><tbody></tbody><colgroup>", "</colgroup></table>"],
td: [3, "<table><tbody><tr>", "</tr></tbody></table>"],
// IE6-8 can't serialize link, script, style, or any html5 (NoScope) tags,
// unless wrapped in a div with non-breaking characters in front of it.
_default: support.htmlSerialize ? [0, "", ""] : [1, "X<div>", "</div>"]
}
jQuery.fn.extend({
text: function (value) {
return access(this, function (value) {
return value === undefined ?
jQuery.text(this) :
this.empty().append((this[0] && this[0].ownerDocument || document).createTextNode(value));
}, null, value, arguments.length);
},
html: function (value) {
return access(this, function (value) {
var elem = this[0] || {},
i = 0,
l = this.length;
if (value === undefined) {
return elem.nodeType === 1 ?
elem.innerHTML.replace(rinlinejQuery, "") :
undefined;
}
// See if we can take a shortcut and just use innerHTML
if (typeof value === "string" && !rnoInnerhtml.test(value) &&
(support.htmlSerialize || !rnoshimcache.test(value)) &&
(support.leadingWhitespace || !rleadingWhitespace.test(value)) &&
!wrapMap[(rtagName.exec(value) || ["", ""])[1].toLowerCase()]) {
value = value.replace(rxhtmlTag, "<$1></$2>");
try {
for (; i < l; i++) {
// Remove element nodes and prevent memory leaks
elem = this[i] || {};
if (elem.nodeType === 1) {
jQuery.cleanData(getAll(elem, false));
elem.innerHTML = value;
}
}
elem = 0;
// If using innerHTML throws an exception, use the fallback method
} catch (e) { }
}
if (elem) {
this.empty().append(value);
}
}, null, value, arguments.length);
}
});
jQuery.fn.extend({
val: function (value) {
var hooks, ret, isFunction,
elem = this[0];
if (!arguments.length) {
if (elem) {
hooks = jQuery.valHooks[elem.type] || jQuery.valHooks[elem.nodeName.toLowerCase()];
if (hooks && "get" in hooks && (ret = hooks.get(elem, "value")) !== undefined) {
return ret;
}
ret = elem.value;
return typeof ret === "string" ?
// handle most common string cases
ret.replace(rreturn, "") :
// handle cases where value is null/undef or number
ret == null ? "" : ret;
}
return;
}
isFunction = jQuery.isFunction(value);
return this.each(function (i) {
var val;
if (this.nodeType !== 1) {
return;
}
if (isFunction) {
val = value.call(this, i, jQuery(this).val());
} else {
val = value;
}
// Treat null/undefined as ""; convert numbers to string
if (val == null) {
val = "";
} else if (typeof val === "number") {
val += "";
} else if (jQuery.isArray(val)) {
val = jQuery.map(val, function (value) {
return value == null ? "" : value + "";
});
}
hooks = jQuery.valHooks[this.type] || jQuery.valHooks[this.nodeName.toLowerCase()];
// If set returns undefined, fall back to normal setting
if (!hooks || !("set" in hooks) || hooks.set(this, val, "value") === undefined) {
this.value = val;
}
});
}
});
jQuery.extend({
valHooks: {
option: {
get: function (elem) {
var val = jQuery.find.attr(elem, "value");
return val != null ?
val :
// Support: IE10-11+
// option.text throws exceptions (#14686, #14858)
jQuery.trim(jQuery.text(elem));
}
},
select: {
get: function (elem) {
var value, option,
options = elem.options,
index = elem.selectedIndex,
one = elem.type === "select-one" || index < 0,
values = one ? null : [],
max = one ? index + 1 : options.length,
i = index < 0 ?
max :
one ? index : 0;
// Loop through all the selected options
for (; i < max; i++) {
option = options[i];
// oldIE doesn't update selected after form reset (#2551)
if ((option.selected || i === index) &&
// Don't return options that are disabled or in a disabled optgroup
(support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null) &&
(!option.parentNode.disabled || !jQuery.nodeName(option.parentNode, "optgroup"))) {
// Get the specific value for the option
value = jQuery(option).val();
// We don't need an array for one selects
if (one) {
return value;
}
// Multi-Selects return an array
values.push(value);
}
}
return values;
},
set: function (elem, value) {
var optionSet, option,
options = elem.options,
values = jQuery.makeArray(value),
i = options.length;
while (i--) {
option = options[i];
if (jQuery.inArray(jQuery.valHooks.option.get(option), values) >= 0) {
// Support: IE6
// When new option element is added to select box we need to
// force reflow of newly added node in order to workaround delay
// of initialization properties
try {
option.selected = optionSet = true;
} catch (_) {
// Will be executed only in IE6
option.scrollHeight;
}
} else {
option.selected = false;
}
}
// Force browsers to behave consistently when non-matching value is set
if (!optionSet) {
elem.selectedIndex = -1;
}
return options;
}
}
}
});
// Radios and checkboxes getter/setter
jQuery.each(["radio", "checkbox"], function () {
jQuery.valHooks[this] = {
set: function (elem, value) {
if (jQuery.isArray(value)) {
return (elem.checked = jQuery.inArray(jQuery(elem).val(), value) >= 0);
}
}
};
if (!support.checkOn) {
jQuery.valHooks[this].get = function (elem) {
// Support: Webkit
// "" is returned instead of "on" if a value isn't specified
return elem.getAttribute("value") === null ? "on" : elem.value;
};
}
});