深入学习jquery源码之html()与text()和val()

深入学习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 world!");

使用函数来设置所有匹配元素的内容。

$("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 

用于 check/select 的值

获取文本框中的值

$("input").val();

设定文本框的值

("input").val("hello world!");

设定文本框的值

$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
});

参数array

设定一个select和一个多选的select的值

  Single
  Single2


  Multiple
  Multiple2
  Multiple3

 check1
 check2
 radio1
 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 = /= 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;
            };
        }
    });