【jQuery】入门学习篇

【jQuery】入门学习篇jQuery 入门学习篇 jquery

大家好,欢迎来到IT知识分享网。


一、前言🚀🚀🚀

在这里插入图片描述


本文简介:这个系列可以叫作《前端从零开始系列》,花一周时间,把JS个人觉得笔记重点且常见的知识点,并且总结了起来。


二、jQuery简介及使用详解:☀️☀️☀️

2.1 jQuery简介

  写更少的代码,做更多的事,jquery的logo意思。

在这里插入图片描述

在这里插入图片描述

2.2 引入jQuery

如何引入

① 第一种引入方式:直接路径引入

在这里插入图片描述

如何验证是否引入成功

在这里插入图片描述

在这里插入图片描述

② 第二种引入方式:使用第三方CDN

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  

2.3 引入jQuery核心函数

  抛出一个问题,我们在引入了jQuery库后,到底是引入了什么。

在这里插入图片描述

  

① 作为工具类使用

在这里插入图片描述

  

② 作为函数使用(四种参数)

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

注意: 通过jQuery查询到的对象是jQuery对象,而DOM对象仍然是DOM对象。jQuery对象中为我们提供了很多新的方法,方便我们做各种DOM操作,但是jQuery对象不能直接调用原生DOM对象的方法,通过我们为jQuery对象命名时,会使用$开头,加以区分。
    

在这里插入图片描述

在这里插入图片描述

小结:

在这里插入图片描述

2.3 jQuery对象

在这里插入图片描述

在这里插入图片描述

  

2.4 jQuery对象操作class

  jQuery并没有做到化繁为简,它里面的方法其实比DOM还多,所以下面我们只需要看一下常用的方法。(这个东西主要掌握核心思路,具体方法查文档就行了。)

① addClass()

  为jQuery对象添加一个或多个class。
① 麻烦的版本:

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
上面这一块可以简化一下。

在这里插入图片描述

② jQuery对象复制 clone()

在这里插入图片描述

在这里插入图片描述

实现代码:

在这里插入图片描述

复制完后,孙悟空被移走了,那么怎么操作才能让孙悟空还在呢?(用clone)

在这里插入图片描述

③ 增加容器

在这里插入图片描述

  

④ 添加子元素

  

2.5 jQuery操作CSS

  

在这里插入图片描述

在这里插入图片描述

  

2.6 筛选jQuery对象

在这里插入图片描述

 // $(".box1")[0] // $(".box1").get(0) 

上面这两个返回的是DOM对象,而eq()获取的是jQuery对象。

在这里插入图片描述

  

2.7 事件的处理

三、总结:🍓🍓🍓

Alt

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/122650.html

(0)
上一篇 2025-10-15 08:33
下一篇 2025-10-15 09:00

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信