初识jQuery 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            // dom中使用innerHTML,innerText,value获取内容
            var dom=document.getElementById("box");
            //alert(dom);  // 显示 [object HTMLDivElement]
            var result=dom.innerHTML;
            //alert(result); // 显示 <p>今天是2017年7月1日，<span>香港回归20周年！</span></p>
            var result1=dom.innerText;
            alert(result1);  // 显示  今天是2017年7月1日，香港回归20周年！
            // var result2 = dom.value;  此处不用这句是因为只有表单元素才有value
            // 表单元素有： ①input开头的  ②select-option ③ 多行文本域 <textarea>
            //jquery中用text(),html(),val()获取内容、
            var result3=$("div").text();
            //alert(result3);   // 显示  今天是2017年7月1日，香港回归20周年！
            var result4=$("div").html();
            //alert(result4) // 显示 <p>今天是2017年7月1日，<span>香港回归20周年！</span></p>
            //dom与jquery的转换
            //dom转换成jquery
            var result5=$(dom).text();
            //jquery转换为dom
            var jq=$("div");
            var result =jq[0].innerHTML; // 或者var result = jq.get(0).innerHTML;
        });

    </script>
</head>
<body>
<div id="box">
    <p>今天是2017年7月1日，<span>香港回归20周年！</span></p>
</div>
</body>
</html>

 

posted @ 2017-07-01 15:32  AlexanderTheGreat  阅读(117)  评论(0)    收藏  举报