jquery入门专题
本人博客特点：最高重要等级为*****（五红星），依次减少代表重要性相对较低！
jquery 是一个 javascript的一个库，也就是说jquery是基于javascript框架开发出来的。其目的是为了最大化的简化了javascript书写方式。
1. 查找标签（选择器）
2. 筛选器
3. 操作标签
3.1. 样式操作
3.2. 位置操作
3.3. 文本操作
3.4. 属性操作
3.5. 文档操作
4. 事件
5. 动画
6. 插件
jquery对象是通过jquery包装dom对象后产生的对象。按平时的使用来说，只能是jquery对象，才能使用jquery里面的方法【因为，平时在写一个js脚本的时候，里面可能有js原生的东西，也可能会有jquery的一些语法一起使用（这里涉及的到javascript和jquery之间的相互转换，下面内容会提到） 】。jquery的方法是用例子如：$( "#nav" ).html()。
“ $( "#nav" ).html() ; ”这一句的代码分析：在这里的 $( "#nav" )就是jquery对象（也就是点的左边），而点的右边html()就是jquery对象的方法。这句话的意思是：获取id值为nav的标签（元素）的html代码。
注意：如果html里面有内容，例如: $( "#nav" ).html("<p>555</p>")的意思就不是获取nav标签的html代码了，而是变成了，将nav标签里面的所有html全部被替换成<p>555</p>，这个是涉及到操作方法，下面会有细讲，这里只是做个对比，抱砖引玉而且。
与原生javascript对比： “$( "#nav" ).html() ; 相当于原生js的 document.getelementbyid("nav").innerhtml;
虽然jquery对象是通过包装dom对象后生成的，但是jquery对象的是无法直接使用dom对象的任何方法，同样dom对象也无法直接使用jquery对象的任何方法。（这里也涉及的到javascript和jquery之间的相互转换，下面内容会提到）
大家的约定：当我们要声明一个jquery对象的变量的时候要在变量的前面加入$符号：例如
var $run = jquery对象
var run = dom对象
javascript和jquery之间的相互转换：
拿上面的例子来说：
jquery对象：$( "#nav" )
dom对象：document.getelementbyid("nav")
1. jquery对象转换成dom对象：$( "#nav" )[0] ***********************************************************在jquery对象添加一个索引，即可变成了dom对象（因为jquery对象获取到的标签是一个数组）
2. dom对象转换成jquery对象：$(document.getelementbyid("nav"))或者 $($( "#nav" )[0] ) ******在dom对象的外面添加 $() 就可以jquery对象
jquery语法是通过选取（查找）html元素，并随之对已选取到的元素执行某些操作。
基础语法：$(selector).action()
实例：
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
id选择器：
我要评论$("#main_id")
标签选择器：
$("div")
$("p")
$("img")
class（样式类）选择器：
$(".main_class")
配合使用：
$("div.main_class")
或者
$("div#main_class")
通用选择器：
$("*")
组合选择器：
$("#main_id,.nav_class,div.main_class")
x, y可以为任意选择器，x，可以调换。
$("x y") //x的所有后代y
$("x>y") //x的所有儿子y
$("x+y") //所有紧挨在x后台的y
$("x~y") //x的所有兄弟y
常用的筛选器：
//div表示选择器，这里可以是任意选择器。例如;div、#main ul li、x~y等等
$("div:first") //第一个
$("div:last") //最后一个
$("div:eq(index)") //索引等于index的那个元素
$("div:even") //比配所有索引值为偶数的元素，从0开始计数
$("div:odd") //比配所有索引值为奇数的元素，从0开始计数
$("div:gt(index)") //比配所有大于给定索引值的元素
$("div:lt(index)") //比配所有小于给定索引值的元素
$("div:not(元素选择器)") //移除所有满足not条件的标签
$("div:has(元素选择器)") //选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
例子：
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
练习：
未更新
attribute：”属性“的意思。
[attribute] [attribute=value]// 属性等于 [attribute!=value]// 属性不等于
例子：
<input type="text">;
<input type="password">;
<input type="button">;
//应用
$("input[type='text']");
$("input[type='password']"); // 取到password类型的input标签
$("input[type!='button']");// 取到类型不是button的input标签
分为两组来记，第一组（五个），第二组（三个，都是按钮）
:text //例子：$(":text ") 找到表单中的所有text
:password //例子：$(":password") 找到表单中的所有password
:checkbox //例子：$(":checkbox") 找到表单中的所有checkbox
:radio //例子：$(":radio")
:file //例子：$(":file")
:submit //例子：$(":submit")
:reset //例子：$(":reset")
:button // 例子：$(":button ")
通过属性找到对应的标签(4个)：
:enabled //标签可用属性 :disabled //标签可用属性
:checked
:selected
例子：
1.找到可用的input标签
<form>
<input name="username" disabled="disabled">
<input name="id" />
</form>
$("input:enabled") // 找到可用的input标签
2.找到被选中的option：
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被选中的option
找下一个元素：
$("#nav").next();
$("#nav").nextall();
$("#nav").nextuntil("#id");
找上一个元素：
$("#nav").prev();
$("#nav").prevall();
$("#nav").prevuntil("#id");
找父亲元素：
$("#nav").parent();
$("#nav").parents(); //查找当前元素的所有父辈
$("#nav").parentsuntil("#id"); //查找当前标签的所有父辈，直到找到id值为id的父辈元素
找儿子和兄弟元素：
$("#nav").children(); //查找当前元素下面的所有儿子们
$("#nav").siblings(); //查找与当前元素是兄弟（同级）们
查找方法（ .find() ）：
搜索当前元素的指定后代元素的方法。这个方法是找出正在处理的元素的后代的好方法。
$("div").find("p"); //这句话等价于 $("div p");
筛选方法（ .filter() ）：
筛选出与filter方法括号内表达式匹配的元素集合。这个方法可以很好的缩小匹配范围，filter方法括号内的选择器表达式可以是多个，逗号分隔即可。跟组合选择器一样。
$("div").filter(".c1") // 从div结果集中过滤出有c1样式类 这句话等价于 $("div.c1")
几个筛选器和筛选方法的对比：
.first() // 获取匹配的第一个元素 筛选器: :first .last() // 获取匹配的最后一个元素 筛选器: :last .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 筛选器: :not(元素选择器) .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 筛选器: :has(元素选择器) .eq() // 索引值等于指定值的元素 筛选器: :eq(index)
两个不同点：
1.筛选方法前面是点“.“，筛选器是冒号”:”
2.筛选方法后面有小括号，筛选器则是没有
例子：
待更新………………
如对本文有疑问， 点击进行留言回复！！
VScode中的react自动补全标签代码及黄色or红色警告
关于React处理input的方法和多个input共用一个方法（不用jQuery）
网友评论