原创

jQuery入门

温馨提示:
本文最后更新于 2022年06月17日,已超过 9 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我

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对象的区别和转换

  1. jQuery对象和js对象的区别:

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

  1. 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对象
      
  2. js转jQuery的方法就简单了,只需要使用$(js对象)就可以直接将js对象转换为jQuery对象了

正文到此结束