JavaScript之jQuery学习三部曲【上篇】(2)

本文讨论了在开发中选择jQuery.js还是jQuery.min.js的问题,介绍了两者的区别,强调了压缩后的jQuery.min.js适用于线上项目以减少文件大小和提高加载速度。同时,文章还概述了jQuery对象的获取方法和常见操作,如HTML内容的获取和修改,以及属性的读取和删除。
摘要由CSDN通过智能技术生成

那我们要导入哪一个呢?排除法做一下,肯定只剩下前两个:jQuery.js和jQuery.min.js,那么到底是哪一个?那就要了解一下jQuery.js和jQuery.min.js的区别

(1) jquery.js是完整的未压缩的jQuery库,文件比较大,一般用于阅读学习源码或修改源码,一般不用于线上项目

(2) jquery.min.js是由完整版的jQuery库经过压缩得来,压缩后功能与未压缩的完全一样,只是将其中的空白字符、注释、空行等与逻辑无关的内容删除,并进行一些优化这个版本一般用于网站引用使用,减小文件体积,降低网站流量,提升访问速度等。

ok,结论就是引入jquery.min.js,那么我们引入就好了,如果不知道怎么引入js文件的话,我给出引入js文件的语法格式

我们用下面这段代码检验自己是否引入成功(放在引入语句下面)(复制使用,暂时无需理解它):

如果成功了,应该能看到下面这个弹窗


III. jQuery对象的概念和一些基本操作


📘 jQuery对象的介绍

首先,学习这部分之前,如果不知道什么是DOM对象的朋友,请先去看我的DOM对象的文章,之后再来看这部分。

学过DOM对象,我们知道对于任意一个网页,它的所有元素组合在一起形成了一颗DOM树

我们会用DOM的语法获取元素,处理元素,那自然而然的,这种方法获取的元素被称为DOM对象。于是与之对应的jQuery对象是

通过jQuery包装DOM对象后产生的对象叫jQuery对象。

也就是说,我们的jQuery对象,内核还是DOM对象,但是我们现在不要内核,我们看表面,那么表面就是一个jQuery对象。它的好处是给我们提供了一系列更方便的DOM操作


📘 jQuery对象的获取方法

// 1.获得 id=XXX 的元素对象(id可以是标签的id或CSS样式id),很常用,需熟练掌握

var $jquery_obj1 = $(“#XXX”)

// 2.获得样式class的名字是.abc的元素对象,很常用,需熟练掌握

var $jquery_obj2 = $(“.abc”)

// 3.获得某个标签的所有元素,下面以div标签为例,选择所有的div元素,常用,需掌握

var $jquery_obj3 = $(“div”)

// 4.获得input标签中name='xxx’的元素对象(xxx是任意名称),比较常用

var $jquery_obj3 = $(“input[name=‘xxx’]”)

// 5.组合拳:表示获得ID是xxx的元素,该元素同时还使用了类样式xxx,并且限定获取的是某个标签(例如span)

var $jquery_obj4 = $(“#a,.b,span”)

这些语法其实不难掌握,因为我们会发现,例如以id获取元素,格式和我们书写css是一致的,唯一需要注意的是,**jQuery变量最好是以$符号开头,虽然不以这个开头不会报错,但是这是一种规范的写法**,也这是区分jQuery对象与普通JavaScript对象的依据。


📘 jQuery对象的一些常用操作方法

获取了jQuery对象,我们总得干点什么吧?那就是对这些对象进行操作,那么有哪些操作呢,我们看下面的代码:

// 1.获取或设置jQuery对象中的html内容

var $jquery_obj1 = $(“#paragraph1”)

// 获取

alert($jquery_obj1.html())

// 修改

$jquery_obj1.html(“跳探戈的小龙虾”)

// 2.读取或设置jQuery对象的属性值(以修改ID属性为例)

var $jquery_obj2 = $(“#paragraph2”)

$jquery_obj2.attr(“id”,“blue”)

// 3.删除jQuery对象的某个属性(以删除class属性为例)

var $jquery_obj3 = $(“#paragraph3”)

$jquery_obj3.remove(“class”)

上面部分是一些常用的jQuery对象的操作,关于jQuery对象其他的一些知识点:创建对象、插入和删除对象,我们放在下一篇博客讲解

把上面的部分整合在一个完整的HTML代码中,大家就可以体验一把jQuery的乐趣了:

jQuery_learning_1

今天你学jQuery了吗

jQuery好用吗?确实好用

那就继续学下去吧!

记得修改里面的jquery.min.js的路径,如果懒得动手复制,点这里也可以查看运行结果:【点我揭晓】


最后

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值