03jquery学习笔记--------------------Dom对象和jquery对象之间的互转。链式编程

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
        //页面加载
        $(function () {
            document.getElementById('btn').onclick = function () {
                var dvObj = document.getElementById('dv');
                //dom对象和jquery对象之间的互转
                var jq = jQuery(dvObj);
                var jq2 = $(dvObj);

                var dvObj1 = jq.get(jq);
                var dvObj2 = jq[0];

                ////使用jquery的方法来设置
                //$(dvObj).css('height', '200px');
                //$(dvObj).css('width', '300px');
                //$(dvObj).css('backgroundColor', 'yellow');
                ////当text、html的括号后面有内容表示设置，当为空的时候表示获取
                //$(dvObj).html('<font size="20px" color="red">会当凌绝顶，一览众山小</font>');
                //$(dvObj).text('<font size="20px" color="red">会当凌绝顶，一览众山小</font>');


                //链式编程的写法：
                $(dvObj).css('height', '200px').css('width', '300px').css('backgroundColor', 'yellow').text('<font size="20px" color="red">会当凌绝顶，一览众山小</font>');



                ////使用dom方法来设置
                //dvObj.style.height = '200px';
                //dvObj.style.width = '300px';
                //dvObj.style.backgroundColor = 'yellow';
                //dvObj.innerHTML = '<font size="20px" color="red">会当凌绝顶，一览众山小</font>';
            };
        });

    </script>
</head>
<body>
    <!--通过点击来设置样式-->
    <input id="btn" type="button" name="name" value="爆发吧小宇宙" />
    <div id="dv">

    </div>
</body>
</html>
03jquery学习笔记--------------------Dom对象和jquery对象之间的互转。链式编程

推荐阅读
