初识jQuery

Posted 2020-09-26 AlexanderTheGreat

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初识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>

以上是关于初识jQuery的主要内容，如果未能解决你的问题，请参考以下文章