JQuery概念、jquery-xxx.js 与jquery- xxx.min. js区别、JS自定义框架、JQuery快速入门、 Jquery对象和JS对象的相互转换

最新推荐文章于 2022-09-27 19:54:23 发布

_七七

最新推荐文章于 2022-09-27 19:54:23 发布

阅读量522

点赞数

分类专栏： JQuery 文章标签： js java javascript jquery

本文链接：https://blog.csdn.net/qq_43472877/article/details/106742871

版权

JQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

JQuery概念

JS的一个框架，简化代码；

目前jQuery有三个大版本:

1.x:兼容ie678,使用最为广泛的，官方只做BUG维护，
功能不再新增。因此-般项目来说，使用1. x版本就可以了,最终版本: 1.12.4 (2016年5月20日)
2.x:不兼容ie678,很少有人使用，官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2. x,最终版本: 2.2.4 (2016年5月20日)
3.x :不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3. x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本: 3.2.1 (2017年3月20日) .

jquery-xxx.js 与jquery- xxx.min. js区别

jquery- xxx.js :开发版本。给程序员看的，有良好的缩进和注释。体积大一些。
jquery- xxx.min.js :生产版本。程序中使用，没有缩进。体积小一些。程序加载更快。

JS自定义框架

自定义框架.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义js框架</title>
    <script src="js/get.js"></script>
</head>
<body>

    <div id="div1">div1...</div>
    <div id="div2">div2...</div>

<script>
    //1.根据id获取元素对象
    //var div1 = document.getElementById("div1");
    //var div2 = document.getElementById("div2");
    var div1 = $("div1");
    var div2 = $("div2");

    //2.获取标签体内容
    alert(div1.innerHTML);
    alert(div2.innerHTML);
    
</script>
</body>
</html>

get.js

//封装方法，根据id来获取元素对象
function $(id) {
    var obj = document.getElementById(id);
    return obj;
}

JQuery快速入门

引入JQuery文件
使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>

    <div id="div1">div1...</div>
    <div id="div2">div2...</div>

<script>
    //使用JQuery获取元素对象
    var div1 = $("#div1");
    alert(div1.html());

    var div2 = $("#div2");
    alert(div2.html());

</script>
</body>
</html>

Jquery对象和JS对象的相互转换

JQuery对象在操作时，更加方便。
JQuery对象和js对象方法不通用的。
两者相互转换

jq转js：
	jq对象[索引]  或者  jq对象.get(索引)
	
js转jq：
	$(js对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery对象和js对象的转换</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>

    <div id="div1">div1...</div>
    <div id="div2">div2...</div>

<script>
    //1.通过js方式来获取名称叫div的所有html元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs.length);//object HTMLCollection 可以将其当做数组来使用

    //对divs中所有div让其标签体内容变为“aaa”,使用js方式
    for (var i = 0 ;i<divs.length;i++){
        divs[i].innerHTML = "aaa";
        // $(divs[i].html("ccc"));  js转jq
    }

    //2.通过jq方式来获取名称叫div的所有html元素对象
    var $divs = $("div");
    alert($divs.length);//object Object 也可当做数组来使用

    //对divs中所有div让其标签体内容变为“bbb”，使用jq方式
    $divs.html("bbb");
    
    // jq转js
    // $divs[0].innerHTML = "ddd";
    // $divs.get(1).innerHTML = "eee";
    
</script>
</body>
</html>

_七七

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery概念、jquery-xxx.js 与jquery- xxx.min. js区别、JS自定义框架、JQuery快速入门、 Jquery对象和JS对象的相互转换

JQuery概念JS的一个框架，简化代码；目前jQuery有三个大版本:1.x:兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此-般项目来说，使用1. x版本就可以了,最终版本: 1.12.4 (2016年5月20日)2.x:不兼容ie678,很少有人使用，官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2. x,最终版本: 2.2.4 (2016年5月20日)3.x :不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3. x版本的
复制链接

扫一扫