我是靠谱客的博主 舒心柚子,这篇文章主要介绍jQuery基础入门一,jQuery的概念二,jQuery的作用三,jQuery的使用步骤四,jQuery选择器,现在分享给大家,希望可以做个参考。

目录

一,jQuery的概念

二,jQuery的作用

三,jQuery的使用步骤

1.下载jQuery库

2.引入jQuery:将JS文件复制到项目中

3.开始使用

四,jQuery选择器

1.基本选择器

2,层次选择器

3,过滤选择器


一,jQuery的概念

jQuery:通俗的讲,就是封装了很多JS代码的代码库,它不是一门语言,而是js的框架

JavaScript:包含了90%的jQuery和10%的Ext JS(其他的JS)

jQuery的官方地址:http://jquery.com/  在官网中有很多关于jQuery的用法哦,感兴趣的读者也可以去官网看看,了解一下jQuery的使用哦


二,jQuery的作用

大家肯定都会好奇,学习jQuery到底有什么用呢?在上面我也给大家介绍了一下jQuery的一些基本概念,现在来给大家介绍一下 jQuery 到底有哪些作用吧。

如果大家进入过jQuery的官网,就会发现,jQuery的官网上写着这样几个词:write less,do more

写的更少,做得更多。就是这样简单的一句话,就概括了jQuery的作用,其实它就相当于是一个框架基础,可以让大家用更少的代码来做出自己想要的效果。


三,jQuery的使用步骤

1.下载jQuery库

jQuery有两个版本,一个是主要提供给开发使用的js版本,

另一个时主要提供给上市使用的min.js版本 这种版本所占资源较少。

 


2.引入jQuery:将JS文件复制到项目中

在html中新建一个目录 用来装载jQuery 然后将jQuery文件复制粘贴到目录中去

然后引入jQuery

<!-- 引入jQuery -->

<script src="JS/jquery-3.5.1.js"></script>

其中的JS是目录名,可以自定义,jquery-3.5.1.js是jQuery的文件名。

注意 引入jQuery时需要把引入代码放在 head部位,否则可能出现报错现象。

  

3.开始使用

在引入jQuery后就可以开始正常使用,下面来给大家做一个简单的例子来对比一下JS和jQuery的不同之处。

同样给div修改颜色:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 200px; height:200px; background-color: bisque; } </style> <!-- 引入jQuery --> <script src="JS/jquery-3.5.1.js"></script> </head> <body> <div id="a" class="b"></div> <div id="a2" class="b"></div> <div id="a3" class="b"></div> <div id="a4" class="b"></div> <div id="a5" class="b"></div> <button type="button" onclick="fn02()">点我更换颜色</button> <script type="text/javascript"> // js的写法 function fn01(){ a.style.background="blue" } // jQuery的写法 function fn02(){ // $就是jQuery 1.用id来拿取div let div=$("#a") // 2.用class来拿取div let div2=$(".b") // 修改样式 div2.css("background","blue") } </script> </body> </html>

有没有感觉用了jQuery后代码变得简洁了很多,效果也与js是一样的,用jQuery写出的代码不仅简洁,且方便记忆,那接下来就给大家介绍一下jQuery的一些基本用法。


四,jQuery选择器

1.基本选择器

ID选择器:#ID

类选择器:.class

元素选择器:element

通配符:*

这些基本选择器就可以运用在刚刚教大家的简单案例上。

2,层次选择器

parent > child:在给定的父元素下匹配所有的子元素

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> <script> $("form > input") </script>

3,过滤选择器

获取第一个元素:first

最后一个元素:last

获取偶数下标的元素:even

获取奇数下标的元素:odd

过滤选择器:

                    1.gt大于

                    2.lt小于

示例:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .aa{ background: blue; color: white; } .bb{ background: green; color: orange; } </style> <script src="js/jquery-3.5.1.js"></script> </head> <body> <table border> <tr> <td>商品名字</td> <td>商品价格</td> <td>商品编号</td> <td>商品描述</td> </tr> <tr> <td>????????????????????</td> <td>$99.0</td> <td>10001</td> <td>无敌好吃</td> </tr> <tr> <td>????????????????????</td> <td>$99.0</td> <td>10001</td> <td>无敌好吃</td> </tr> <tr> <td>无敌大苹果????</td> <td>$99.0</td> <td>10001</td> <td>无敌好吃</td> </tr> <tr> <td>????????????????????</td> <td>$99.0</td> <td>10001</td> <td>无敌好吃</td> </tr> <tr> <td>????????????????????</td> <td>$99.0</td> <td>10001</td> <td>无敌好吃</td> </tr> <tr> <td>????????????????????</td> <td>$99.0</td> <td>10001</td> <td>无敌好吃</td> </tr> </table> <script> //拿出第一个元素 //$("tr").first().addClass("aa"); //拿出最后一个元素 //$("tr").last().addClass("aa"); //奇数行 $("tr:gt(0):odd").addClass("aa") //偶数行 $("tr:gt(0):even").addClass("bb") // $("tr:gt(1):lt(3)").addClass("bb") </script> </body> </html>

今天的jQuery小知识就分享到这里啦,想要了解更多的代码小知识,精彩下期继续 。

最后

以上就是舒心柚子最近收集整理的关于jQuery基础入门一,jQuery的概念二,jQuery的作用三,jQuery的使用步骤四,jQuery选择器的全部内容,更多相关jQuery基础入门一,jQuery内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(92)

评论列表共有 0 条评论

立即
投稿
返回
顶部