jQuery入门

若离风Adrian

已于 2022-04-02 18:08:05 修改

阅读量1k

点赞数

分类专栏： java 文章标签： java java-ee 后端开发语言

于 2022-04-02 18:07:32 首次发布

本文链接：https://blog.youkuaiyun.com/qq_49453641/article/details/123926271

版权

java 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了jQuery的基本概念，强调其在简化前端JavaScript开发中的作用。内容包括jQuery的下载、在HTML中的引入，以及如何进行简单的测试。此外，还详细阐述了jQuery对象与JavaScript对象的区别，并提供了转换方法。

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

1. jQuery概念

在程序开发过程中，免不了大量的复杂，重复的代码编写工作，为了提高开发的效率这时就需要提供一种工具来完成哪些重复，又复杂的代码，随之编程的发展，大量框架的出现，极大的满足了我们的需求，常见知名的框架比如spring…，他们的出现极大的提高了开发的效率。在开发前端的时候也出现了一个比较知名的框架，jQuery，他的出现，极大的降低了我们编写js代码的工作量，同时jQuery也将js本身的一些代码逻辑进行了优化，使我们开发变的更容易

2. jQuery快速入门

2.1 下载jQuery

自行百度就可以下载，这里也提供了连接，不过需要自己在本地创建js文件，将这两个文件的内容复制进去jquery所有版本下载

2.2 jQuery的引入

在html文件当中引入文件，这里推荐使用min（压缩版本），这个版本没有首行缩进，占用的内存比普通版本的小，加载的时候使用的时间将会更小

<script type="text/javascript" src="jquery.js"></script>

2.3 jQuery测试

在引入了jQuery文件之后，我们就可以使用框架提供的方法了。在js常规的操作中，我们要操作元素对象，首先我们要进行获取元素对象，这里的获取方式有很多种，id，name，attribute…都需要我们调用不同的方法来获取：

<script>
    let by = document.getElementById("button");
    by.onclick = function(){
        alert("s")
    }
</script>

这样就显得不方便了，那么jQuery就给我们提供了一种比较简单的获取元素对象的方法$()里面填写属性，id…就可以直接获取到了：

<script>
    let $button = $("#button");
    alert($button);
</script>

2.4 jQuery对象和js对象的区别和转换

jQuery对象和js对象的区别：

JS对象，是一个名值对的无序集合。 jquery对象，是jquery特有的对象，只有调用jquery框架才存在。其实jquery对象，也是一种js对象。 jquery对象和js对象可以相互转换，例如 $(“#div”).get(),即可以把一个jquery对象转换为js对象。最主要的区别，js对象上的方法，不能直接用在jquery对象上，如果一定要给jquery对象使用js对象的方法，必须把jquery对象转换为js对象。jquery对象，则可以随意使用jquery定义的方法。

jQuery和js对象之间的相互转换，jQuery转js的方法有两种：
1. 因为jQuery获取的是一个对象数组，所以可以使用[index]，的方式来获取单个的js对象
```
var $v =$("#v") ; //jQuery对象 
var v=$v[0]; //js对象
```
2. 当然jQuery本身也自带了一个方法来获取js对象.get()
```
var $v=$("#v"); //jQuery对象 
var v=$v.get(0); //获取js对象
```
js转jQuery的方法就简单了，只需要使用$(js对象)就可以直接将js对象转换为jQuery对象了