目录
JavaScript库：jQuery（90%），js(10%)
jQuery是一个JavaScript函数库，函数主要实现方面如下：
一，jQuery简介
1.什么是jQuery？
jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大低简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发AJax的操作。jQuery封装很多预定义的对象和函数。
-
birth：于2006 年被美国人John resig创建
-
JavaScript库：jQuery（90%），js(10%)
-
理念：write less ,do more
-
tip:jquery不是一门语法，而是一个框架
-
是一些前端框架的基础，如：EasyUI,Bootstrap
-
简而言之，jQuery就是js框架，用来封装js代码
2.jQuery库的特性
jQuery是一个JavaScript函数库，函数主要实现方面如下：
- HTML元素操作
- HTML元素选取
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- AJAX
- utties
tip：jQuery还能够增加各种插件
3.jQuery的适用场所
通常是一些中大型的网页会使用到
4.jQuery的安装
-
官方网址：http://jquery.com/
jQuery本身只是一个js文件，里面是jQuery提供的源码
-
文件区别
- jquery-3.5.1.js是源代码,能够自己编辑
- jquery-3.5.1.min.js是压缩后的代码，不能自己编辑，所占的内存小
-
页面引入
将js文件复制到项目中即可使用
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
</script>tip：引入jQuery的代码一定要在js代码的前面
二，jQuery选择器
1.基本选择器
| 通配符 |
* |
| ID选择器 | #ID |
| 类选择器 | .classname |
| 元素选择器 | element |
$("#id");//ID选择器
$(".classname");//class选择器
$("element");//标签选择器
$("*");//所有元素选择器2.层次选择器
| 后代选择器 | one two | 拿到one的所有子元素 |
| 子代选择器 | one>two | 拿到one的下一级元素 |
$("parent>child");//子代选择器
$("parent chlid");//后代选择器3.过滤选择器
| first | 获取第一个元素 |
| last | 获取最后一个元素 |
| even | 获取偶数下标的元素 |
| odd | 获取奇数下标的元素 |
| gt（index） | 获取大于index的元素 |
| lt（index） | 获取小于index的元素 |
| eq(index) | 获取小标为index的元素 |
| header | 获取元素中标题为h1~h6的元素 |
| not（value） | 获取元素中没有value属性的元素 |
代码解说：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器示例</title>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<input name="apple" />
<input name="flower" checked="checked" />
<table>
<tr>
<td>Header 1</td>
</tr>
<tr>
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
</table>
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$('li:first'); //将会得到<li>list item 1</li>
$('li:last'); //将会得到<li>list item 5</li>
$("input:not(:checked)"); //将会得到<input name="apple" />
$("tr:eq(1)"); //将会得到<tr><td>Value 1</td></tr>
$("tr:gt(0)"); //将会得到<tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr>
$("tr:lt(2)"); //将会得到<tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr>
$(":header").css("background",
"#EEE"); //结果为<h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2>
</script>
</body>
</html>
4.案例
-
隔行换色
1. 纯js的隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery01(纯js的表格换行变色)</title>
<style type="text/css">
.a {
background-color: black;
color: antiquewhite;
}
.b {
background-color: bisque;
color: #000000;
}
</style>
</head>
<body>
<table border=".5" cellspacing="" cellpadding="" id="TABLE">
<tr>
<th>hello world</th>
<th>hello world</th>
<th>hello world</th>
</tr>
<tr>
<td>hello world</td>
<td>hello world</td>
<td>hello world</td>
</tr>
<tr>
<td>hello world</td>
<td>hello world</td>
<td>hello world</td>
</tr>
<tr>
<td>hello world</td>
<td>hello world</td>
<td>hello world</td>
</tr>
</table>
<script type="text/javascript">
//拿到行数(tr的集合)
let trs = document.getElementById("TABLE").children[0].children;
for (var i = 0; i < trs.length; i++) { //还有元素时就遍历
for (let s in trs) { //根据下标遍历
if (s % 2 !== 0) { //如果为奇数
trs[s].style.background = "red"; //将背景设置为红色
}
}
}
</script>
</body>
</html>
效果如下
2.使用jQuery的js代码如下
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$("tr:even").addClass("a");//给偶数行增加class类名
$("tr:odd").addClass("b");//奇数
</script>效果如下
notice:在使用even拿偶数下标的时候，很容易忽略一个点，在我们的第一行小标为0，也属于偶数
tip：使用选择器后得到将会的一个全新的元素组，如
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
// $("tr:even").addClass("a");//给偶数行增加class类名
// $("tr:odd").addClass("b");//奇数
//拿到下标大于1的新元素组，再拿到新元素组下标小于3的元素组
$("tr:gt(1):lt(3)").addClass("b");
</script>效果图如下
我们不难发现，在使用jQuery之后js的代码明显减少了，这就是jquery的妙处。
今天的分享到此为止哈，下期给大家分享更多内容！