jquery之html、text

1.jquery 之 html

操作dom节点，使用html() 取值 或 赋值

• 取值： 原始值；类型是字符串

typeof $('ul').html() //类型是 string

html方法示例：

	<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

<script>
	 console.log( $('ul').html() )//后台打印结果如下图
</script>

html的特殊点:

	<script>
        console.log($('ul li').html())//打印结果是第一个的值 1 ；这点需要注意
    </script>

通常情况下 jquery 的 dom 操作会遍历选中的节点，执行的方法一般都会循环执行，但html方法的取值操作比较特殊；只能获取到的是第一个的值

• 赋值：识别html标签；把整个被选中的dom节点修改

$('ul').html('123') // 被当成文本节点解析赋值 HTML页面显示 123
$('ul').html('<p style="color:red">123</p>') //当成 p 标签解析赋值 HTML页面显示 红色文本123

选中每个 li 修改文本节点实例：

	ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

$(‘ul li’).html(‘666’) 所有 li 里面文本节点全部修改

	<script>
        var arrName = ['西游记','水浒传','三国志','红楼梦']
        $('ul li').html(function(index,item){
            return '<span style="color:red">'+ arrName[index] +'</span>'
        })
    </script>

2. jquery 之 text

• 取值：原始值；类型是字符串

	ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

<script>
console.log($('ul').text()) // 打印 1 2 3 4 5 不包含 li 标签
</script>

• 赋值：

原理同 html 赋值相似，区别是赋值时；不解析html标签

$('ul li').text('<p>123</p>')   //HTML页面显示 <p>123</p>