JQuery 基础（一）

最新推荐文章于 2025-04-20 17:56:16 发布

pziwang

最新推荐文章于 2025-04-20 17:56:16 发布

阅读量113

点赞数

CC 4.0 BY-SA版权

分类专栏： # 1.jquery

本文链接：https://blog.youkuaiyun.com/u014736082/article/details/90708086

1.jquery 专栏收录该内容

9 篇文章

订阅专栏

本文介绍JQuery基础。JQuery是JavaScript框架，可简化js开发。快速入门步骤包括下载、导入JQuery文件，还说明了不同版本特点及引入文件区别。同时阐述了JQuery对象和JS对象的区别，JQuery对象操作更方便，且介绍了两者的转换方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery 基础（一）

一、概念

javaScript框架，用来简化js开发，优化HTML文档操作、时间处理、动画设计和Ajax交互。

实例：如下的代码中要获取多个div元素

<body>
     <div id="div1">
        div1
    </div>
    <div id="div2">
        div2
    </div> 
	<script>
	var div1= document.getElementById("div1");
    var div2= document.getElementById("div2");
    ...n
    
</script>
</body>

可以设计一个方法，用来获取元素，直接调用方法即可。

<body>
     <div id="div1">
        div1
    </div>
    <div id="div2">
        div2
    </div> 
    <script>
	var div1= document.getElementById("div1");
    var div2= document.getElementById("div2");
    ...n
    function get(id){
        var obj = cocument.getEmenetByid(id);
        return obj;
    }
    
</script>
</body>

将方法单独携程一个js文件，通过在页面中引入即可。

 function $(id){
        var obj = cocument.getEmenetByid(id);
        return obj;
    }

<body>
     <div id="div1">
        div1
    </div>
    <div id="div2">
        div2
    </div> 
    <sript src="js/getId.js"></sript>
    var div1 = $("div1");
</body>

二、快速入门

1.步骤

下载JQuery

导入JQuery文件

版本说明：

1.x：兼容ie678，使用比较广泛，官方制作BUG维护，功能不再新增，因此一般项目来说，使用1.x即可。最终版本1.12.4（2016年5月20日）。

2.x：很少使用，官方制作BUG维护，功能不再新增，如果不考虑兼容低版本浏览器可以使用，最终版本2.2.4（2016年5月20日）。

3.x:最新版本，支持最新浏览器，是官方维护的最新版本，3.3.1（2017年3月20日）

引入文件说明：

jquery-3.3.1.js 给程序员读的，有良好格式

jquery-3.3.1.min.js 提交较小，生产用

<head>
    <script src = "js/jsqeuy-3.3.1.min.js">       </script>    
</head>

<body>
    <div id="div1">
        div1
    </div>
    <div id="div2">
        div2
    </div> 
    <script>
		var div1 = $("#idv1");
	</script>
</body>

三、JQuery对象和JS对象的区别和转换

<head>
    <script src = "js/jsqeuy-3.3.1.min.js">       </script>    
</head>

<body>
    <div id="div1">        div1    </div>
    <div id="div2">        div2    </div> 
    <script>
        //1通过js方式获取名称为div的所有元素
        var divs = document.getElementsByTagName("div");
        //跟换div的内容为“new context”
        for(var i = 0;i<divs.lenth;i++){
            divs[i].innerHtml("new COntext");
            $(divs[i]).html("js-->jq");
        }
        //2通过jq方式获取名称为div的所有元素
   		var $divs=$("div");
         //跟换div的内容为“new context”
        $divs.html("new context");
        $divs[0].innerHtml("jq-->js");
	</script>
</body>