jQuery基础
2021-01-01 本文已影响0人
amanohina
jQuery简介
- 对选择元素的方法进行了优化
- 是一个高效的，精简并且功能丰富的JavaScript工具库
版本发展
- 1.x 兼容 IE6/7/8，是工作中最常用的，学习1.12版本
- 2.X：不兼容 IE6/7/8，多用于 jQuery 官方调整 bug 使用。工作中不使用。
- 3.X：不兼容 IE6/7/8，只能在高版本浏览器中使用，是现在 jQuery 官方主要的维护升级的版本
下载网址
使用过程中建议参考API文档
jQuery使用
- 极大的简化了DOM操作，让编程变得简单了起来
$()使用
- 在DOM操作中，基本都是从获取元素开始的
- 在 jQuery 中，只有一个全局变量 $,这是 jQuery 的一大特点，避免了全局变量的污染。
- 最开始变量不叫做 $，叫做 jQuery() 方法，在库中两个名字是并存的，都可以使用。
- 经典错误：$未定义（经典没引入jQuery文件）
jQuery对象
- $() 方法获取到的内容叫做 jQuery 对象
- 内部封装了大量的属性和方法,比如 .css() 和 .html() 和 .animate() 等方法都是jQuery 对象的方法。
- 通过 $() 获取的元素是一组元素，进行操作时是批量操作。
jQuery对象和原生js对象
- jQuery 对象得到后，只能使用 jQuery 对象的方法，不能使用原生 js 元素对象的方法。
- 原生 JS 对象也不能使用 jQuery 的方法。
- jQuery 对象实际是一个类数组对象，内部包含所有的获取的原生 js 对象，以及大量的jQuery 的方法和属性
JQ对象和原生对象的转换
JQ对象内部原生js对象的个数
- $().length
- $().size()
将JQ对象转换为原生JS对象
- jQuery 转原生：直接利用数组下标方式，得到 jQuery 封装的原生对象。
var $ps = $("p")
$ps[0].innerHTML = "你好"
将JS对象转换为JQ对象
- 原生转 jQuery：将原生对象用 $() 方法包裹即可。
var op = document.getElementsByTagName("p")[0]
$(op).css("background-color","skyblue"
jQuery选择器
CSS2.1和CSS3选择器
- 参数：字符串类型的选择器
在JQ文档手册里，都有说明，可以自行查阅
除开默认已知的选择器，JQ新添加了自己的选择器，过滤选择器
筛选选择器（过滤选择器）
-
用法：在基础选择器后面增加一些筛选的单词，筛选出前面选择器的选中内容中一部分。或者可以作为高级选择器的一部分
筛选方法
- 也叫做过滤方法，jQuery中除了用选择器选择元素，jQuery对象内还封装了一些对应的筛选方法
- 常用：
- $("p").first()
- $("p").last()
- $("p").eq(n)
案例：隔行变色
- 使用JQ的新增筛选选择器直接:even选择到奇数行数变色，方便快捷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
width: 50px;
height: 50px;
margin-bottom: 10px;
}
table {
border-collapse: collapse;
}
td {
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 原生方法
// var trs = document.getElementsByTagName("tr");
// // 遍历
// for (var i = 0 ; i < trs.length ; i+=2) {
// trs[i].style.backgroundColor = "skyblue"
// }
// jQuery的方法
$("tr:even").css("background-color","yellowgreen")
</script>
</body>
</html>
效果
