jQuery学习篇
今天简单地学习了jQuery，为加深自己的印象，在此总结一下。
jQuery的简单介绍：jQuery是一个JS库，在这个库中将经常使用的JavaScript复杂的操作封装成了一个又一个方法，以后如果相对网页进行相关的操作，直接调用jQuery中的方法即可，说白了就是jQuery比JavaScript更简单，更方便，更好用。并且jQuery不存在兼容性的问题。jQuery官网：http://jquery.com/
如何使用jQuery？三个基本步骤
1、引包：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery初体验</title>
<script src="jquery-3.4.1.js"></script>
</head>
2、入口函数（两种不同的写法）：
$(document).ready(function () {
});
$(function(){
});
3、功能实现：
$("#btnShowDiv").click(function () {
$("div").show(1000);
});
简单小练习：jQuery初体验（通过点击按钮实现div的显示和文字的添加）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { height: 200px; margin-bottom: 10px; background-color: #a43035; display: none; } </style> <!--1. 需要引入jQuery文件--> <script src="jquery-1.12.4.js"></script> <script> //2. 入口函数的标准 $(document).ready(function(){ //注册事件，把on去掉，是一个方法 $("#btn1").click(function () { //隐式迭代：偷偷的遍历，jQuery会自动的遍历，不需要我们遍历。 $("div").show(1000); }); $("#btn2").click(function () { $("div").text("我是内容"); }); }); </script> </head> <body> <input type="button" value="btn1" id="btn1"> <input type="button" value="设置内容" id="btn2"> <div></div> <div></div> <div></div> </body> </html>
容易混淆的知识：DOM对象和jQuery对象的区别
DOM对象:用js方式获取到的对象叫DOM对象
jQuery对象:用jQuery方式获取到的对象为jQuery对象
DOM和jQuery是两个不同的对象，两者不能相互调用对方的方法。但可以通过转化来调用各自的方法。
DOM->jQuery
var text1=document.getelementById('text1');
$(text1).text('哈哈');
jQuery->DOM
var $li=$("li");
$li[1].style.background="red";
$的实质：$的实质是一个function（）即函数，所以以后用$时记得加上小括号 $();
括号内的参数：参数类型不同，执行的方法（功能）也不同。
1、参数是一个function,即入口函数。
$(function(){
});
2、参数是一个DOM对象，把DOM对象转化为jQuery对象
//入口函数
$(document).ready(function{
});
3、参数是一个字符串，可是是标签类型，id类型，类类型
$("div"); $("#btn1"); $(".current");
jQuery选择器的使用：jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
基本选择器：
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(“#id”); | 获取指定ID的元素 |
| 类选择器 | $(“.class”); | 获取同一类class的元素 |
| 标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”); | 使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 | $(“div.redClass”); | 获取class为redClass的div元素 |
层级选择器：
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(“ul>li”); | 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
| 后代选择器 | $(“ul li”); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
筛选选择器：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
| 名称 | 用法 | 描述 |
|---|---|---|
| children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”)，子类选择器 |
| find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”),后代选择器 |
| siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点，不包括自己本身。 |
| parent() | $(“#first”).parent(); | 查找父亲 |
| eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
| next() | $(“li”).next() | 找下一个兄弟 |
| prev() | $(“li”).prev() | 找上一次兄弟 |
