jQuery简介、引入、文档就绪事件。

最新推荐文章于 2022-03-31 21:49:11 发布

uzi2200

最新推荐文章于 2022-03-31 21:49:11 发布

阅读量244

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/uzi2200/article/details/108208431

版权

jQuery简介
什么是jQuery(了解)
jQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码
轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架
jQuery的核心思想：“写的更少，但做的更多”
5.1.2 jQuery的优势(了解)
(1)可以极大的简化JS代码，例如：

JS获取元素：var d = document.getElementById("demo1");

jQuery获取元素：$("#demo1")

JS删除所有div元素：

var arrDivs = document.getElementsByTagName("div"); //返回有div元素组成的JS对象数组

var len = arrDivs.length;

for(var i=0;i<len;i++){

    arrDivs[0].parentNode.removeChild(arrDivs[0]);

}

jQuery删除所有div元素：$("div").remove();

(2)可以像CSS选择器一样非常方便的获取元素

$("div") -- 获取所有的div元素

$(".s1") -- 获取所有class值为s1的元素

$("#div1") -- 获取id值为div1的元素

$("div span") -- 获取div内部的所有span元素

(3)可以通过修改css样式控制页面的效果

$("div").css("background", "red");

$("div").css({

    "background" : "blue",

    "border" : "2px solid red",

    "font-size" : "30px"

});

jQuery引入
jQuery函数库其实就是一个JS文件(这个文件中封装了很多的JS函数和少量的JS属性)

如果要实用这个文件中的函数或属性，需要在网页中通过script标签引入jQuery的函数库文件

<!-- 引入jQuery的函数库文件 -->

<script src="js/jquery-1.8.3.js"></script>

文档就绪事件函数
将获取元素的代码放在一个文档就绪事件函数中，因为文档就绪事件函数，会在浏览器加载完所有的html元素后立即执行。

此时整个html网页都被加载了，h1元素肯定也被加载了，此时再执行函数，执行获取h1元素的代码，一定能获取到！

<script>

    //JS提供的文档就绪事件函数: 在浏览器加载完整个html后立即执行!

    window.onload = function(){

        //1.获取id为demo的h1元素

        var oH1 = document.getElementById("demo");

        //2.获取h1元素的内容

        alert( oH1.innerHTML );

    }

</script>

<body>

    <h1 id="demo">演示文档就绪事件函数....</h1>

</body>

或者通过jQuery提供的文档就绪事件函数:

<!-- 引入jQuery的函数库文件 -->

<script src="js/jquery-1.8.3.js"></script>

<script>

    //jQuery提供的文档就绪事件函数：在浏览器加载完整个html后立即执行

    $(function(){

        //1.获取id为demo的h1元素

        var oH1 = document.getElementById("demo");

        //2.获取h1元素的内容

        alert( oH1.innerHTML );

    });

</script>

<body>

    <h1 id="demo">演示文档就绪事件函数....</h1>

</body>

jQuery提供的文档就绪事件函数（简写形式）：

<script>

    //jQuery提供的文档就绪事件函数：

    $(function(){

        //在浏览器加载完整个html后立即执行

    });

</script>

JS也为我们提供了文档就绪事件函数，其写法为：

<script>

    //JS提供的文档就绪事件函数:

    window.onload = function(){

        //在浏览器加载完整个html后立即执行!

    }

</script>

uzi2200

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery简介、引入、文档就绪事件。

jQuery简介什么是jQuery(了解)jQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架jQuery的核心思想：“写的更少，但做的更多”5.1.2 jQuery的优势(了解)(1)可以极大的简化JS代码，例如：JS获取元素：var d = document.getElementById("demo1");jQuery获取元素：$("#
复制链接

扫一扫