概述
目录
一，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修改颜色：
<!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：在给定的父元素下匹配所有的子元素
<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小于
示例：
<!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的概念二，jQuery的作用三，jQuery的使用步骤四，jQuery选择器所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复