JavaScript-DOM和jQuery(初级入门)

最新推荐文章于 2021-09-28 18:37:39 发布

梧桐下的四叶草

最新推荐文章于 2021-09-28 18:37:39 发布

阅读量493

点赞数 1

分类专栏： JavaScript 文章标签： javascript jquery dom

本文链接：https://blog.csdn.net/zsc2014030403015/article/details/51620394

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

(一)选择DOM元素

<html>
    <head>
    <title>Cars</title>
    </head>
    <body>
    <h1 id="main-heading">Hello world!</h1>
    <script src = "https://code.jquery.com/jquery-2.1.0.js"></script>
        <script>
        //id可以唯一标识一个元素，可以使用DOM的方法document。getElementById来返回‘main-heading’元素
            var headingElement = document.getElementById("main-heading");
            //innerHTML属性能够实现获取并替换选中的文本
            console.log(headingElement.innerHTML);
            //prompt是一个要求用户输入一个新标题的对话框
            var newHeadingText = prompt("Please provide a new heading:");
            headingElement.innerHTML = newHeadingText;
        </script>
    </body>
</html>

（二）用jQuery操作DOM

<html>
    <head>
    <title>Cars</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <body>
    <h1 id="main-heading">Hello world!</h1>
    <script src = "https://code.jquery.com/jquery-2.1.0.js"></script>
        <script>
            var headingElement = document.getElementById("main-heading");
            console.log(headingElement.innerHTML);
            var newHeadingText = prompt("Please provide a new heading:");
            //$元素接受一个叫做选择器字符串的参数，该参数告诉jQuery要从DOM树中选择哪一个或哪一些元素
           $("#main-heading").text(newHeadingText);
        </script>
    </body>
</html>

（三）用jQuery创建一个新的元素

<html>
    <head>
    <title>Cars</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <body>
    <h1 id="main-heading">Hello world!</h1>
    <script src = "https://code.jquery.com/jquery-2.1.0.js"></script>
        <script>
        //append方法把这个字符串转换为一个DOM元素，并且·把这个新元素添加到最初的元素末尾
         for(var i=0;i<3;++i){
            var hobby = prompt("Tell me one of your hobbies!");
            $("body").append("<p>"+hobby+" "+i+"</p>");
         }
        </script>
    </body>
</html>

（四）使用jQuery让元素产生动画效果

<html>
    <head>
    <title>Cars</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <body>
    <h1 id="main-heading">Hello world!</h1>
    <script src = "https://code.jquery.com/jquery-2.1.0.js"></script>
        <script>
        //调用jQuery使h1标签慢慢淡出屏幕
         $("h1").fadeOut(3000);
         //链化jQuery的动画方法
         $("h1").fadeIn(2000).fadeOut(3000);
        </script>
    </body>
</html>

梧桐下的四叶草

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-DOM和jQuery(初级入门)

(一)选择DOM元素 Cars Hello world! //id可以唯一标识一个元素，可以使用DOM的方法document。getElementById来返回‘main-heading’元素 var headingElement = document.getElement
复制链接

扫一扫