目录
一,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内容请搜索靠谱客的其他文章。
发表评论 取消回复