JS学习十七：jQuery对元素内容的操作

在上节，学习了jq选择器的几个方法：  html()，val()，addClass()，removeClass()

        <div>
            <p>today is nice day!</p>
        </div>

元素的内容：是指定义元素的起始标记、到结束标记之间的内容。可以分为文本内容和HTML内容。

文本内容：只包含元素内的文本内容，不包含元素的子元素标签。如以上示例中，div元素的文本内容为  today is nice day!

HTML内容：不仅包含元素的文本内容，还包括元素的子标签。如以上示例中，div元素的HTML内容为   <p>today is nice day!</p>

一、文本内容

    <body>
        <div>
            <p>today is nice day!</p>
        </div>
        <div></div>
        a:<input type="radio" name="a" id="" value="1"/>
        b:<input type="radio" name="a" id="" value="1"/>
        c:<input type="radio" name="a" id="" value="1"/>
        <select multiple="multiple">
            <option>列表1</option>
            <option selected="selected">列表2</option>
            <option selected="selected">列表3</option>
        </select>
        <script type="text/javascript">
            $div = $("div")
            // 操作文本内容两个方法:text()获取文本内容,text(val)设置文本内容
            //如果有多个div,默认text()获取第一个div的内容.如同上节的val(), html()
            // console.log($div.text())
            //text(val)设置文本内容:不仅会替换掉原来的文本内容,也会替换掉HTML标签.
            //text(val)设置所有匹配的元素.如同上节的val(),html()
            // console.log($div.text('abc'))
            // 且不会解析内容中的html标签，会当作文本内容设置.
            // console.log($div.text('<h1>abc</a1>'))
            
            // html()方法,会解析html标签
            console.log($div.html('<h1>abc</a1>'))
            
            // val()方法,会解析html标签
            // console.log($div.val('<h1>abc</a1>'))
            // console.log($div.val('abc'))
            // console.log($div.val())
            
            //val还可以为select radio checkbox赋值
            $("input").val([1,1,0])  //这里有点问题
            $("select").val(["列表1","列表3"])
        </script>
    </body>

 

posted on 2018-11-24 19:36  myworldworld  阅读(258)  评论(0)    收藏  举报

导航