jQuery操作dom

来源：互联网发布：霸气知乎编辑：程序博客网时间：2024/06/13 18:41
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.4.3.js"></script><script type="text/javascript">    /*        html()   innerHTML        text()   innerText    */    function f1(){        <!--读取或修改节点的HTML内容的操作方式。与DOM对象的innerHTML的作用一致-->        alert($('#d1').html());        <!--读取或修改节点中的文本内容，会过滤掉标记内容，与innerText的作用基本一致，但innerText在不同浏览器中写法不同，在jQuery中则使用text（）方法即可-->        alert($('#d1').text());    }    function f2(){        $('#d1').html('<p>hello dojo</p>');    }    /*        val()   value    */    function f3(){        <!--读取或修改节点的value属性值，也就是针对表单元素中有value属性的哪些元素的操作-->        alert($(':text').val());        $(':text').val('kitty');    }    function f4(){        <!--读取或设置修改节点的属性。这个方法会更宽泛一些，可以修改元素的任何属性-->        alert($('#d1').attr('id'));        $('#d1').attr('style','color:red;font-style:italic;');    }</script></head><body style="font-size:30px;">        <div id="d1"><span>hello jQuery</span></div>        username:<input name="username"/><br/>        <a href="javascript:;" onclick="f4();">ClickMe</a></body></html>
0 0