简单易懂的jQuery操作
jQuery
（这是我大佬给我 ///=A=///）
介绍
jQuery是js的库。也就是说jQuery是很多js的方法封装在了一个文件中。
jQuery是前端编程中使用最多的库。曾经风靡前端。原因有三：
- 强大的选择器机制
- 优质的隐式迭代
- 无所不能的链式编程
官网：jquery.com
中文方法大全：jquery.cuishifeng.cn
要使用jquery首先需要下载一个jquery文件，然后先引入才能使用。
首先检测一下有没有引入成功，就是输出$或者就jQuery。这是jQuery暴露在全局的唯一的两个函数。
选择器
在jQuery中选择元素，就是暴露在全局的两个函数：
$div = $("div");
//或者
$div = jQuery("div");
其实就相当于使用js获取的dom元素，但是用jQuery获取到的元素，不能使用原生的js方法来操作，必须使用jQuery提供的方法操作。js原生获取到的dom元素也不能使用jQuery的方法来操作。
我们把js原生获取到的元素叫做dom对象，而jQuery获取到的元素叫做jQuery对象。
如果jQuery对象非要使用原生js方法操作，需要取下标
$("div")[0] // 取下标
$("div").get(下标); // 下标
将dom元素转为jQuery对象
$(dom元素)
jQuery选择元素可以使用css选择器。
-
id选择器
$("#id名") -
类名选择器
$(".类名") -
标签选择器
$("标签名") -
属性选择器
$("[name='username']") -
伪类选择器（表单的伪类）
$("li:first-child") $("li:last-child") $("li:nth-child(数字)") // 第一个元素对应数字是1 $("li:empty") // 空标签
并且jQuery获取元素有个特点，页面中能选到多个元素就会都获取到，也就是说获取到的是集合
筛选器
和伪类选择一样，筛选出需要的元素
$("li:first")
$("li:last")
$("li:event")
$("li:odd")
$("li:eq(数字)") // 选择下标是指定数字的元素
$("li:lt(数字)") // 下标小于指定数字的元素
$("li:gt(数字)") // 下标小于指定数字的元素
表单元素选择器
$(":input") // 匹配所有的表单元素 包括：文本框（input）下拉列表(select)、文本域(textarea)
$(":text") // 匹配单行文本框type="text" $("input:text") $("input[type=text]")
$(":password") // 匹配单行密码框
$(":radio") // 匹配单选按钮
$(":checkbox") // 匹配多选按钮
$(":submit") // 匹配提交按钮
$(":reset") // 匹配重置按钮
$(":image") // 匹配图片按钮
$(":button") // 匹配普通按钮
$(":file") // 匹配文件上传
$(":hidden") // 匹配隐藏域
表单对象选择器
$("input:enabled") // 所有可用表单元素
$("input:disbaled") // 所有禁用表单元素
$("input：checked") // 所有选中的表单元素
$("select:selected") // 被选中的下拉框元素
筛选器方法
使用方法来筛选元素
$("li").first() // 第一个元素
$("li").last() // 最后一个元素
$("div").next() // div的下一个兄弟元素
$("div").prev() // div的上一个兄弟元素
$("div").nextAll() // div后面的所有兄弟元素
$("div").prevAll() // div前面的所有兄弟元素
$("div").parent() // div的父元素
$("div").parents() // div的所有直系祖宗元素
$("div").eq(数字) // 指定下标的div元素
$("div").find(选择器) // div下的指定元素
$("div").siblings() // div的所有兄弟元素
筛选方法可以进行链式筛选
事件
jquery中的事件是将事件名作为方法名，传入回调函数即可。
$("div").click(function(){
});
$("div").mouseover(function(){
});
页面加载事件
在原生js中的页面加载事件是window.onload
在jquery中有两种写法：
$(function(){
});
$(document).ready(function(){
});
推荐使用jquery的页面加载事件，jquery的页面加载要比js原生的写法效率高，因为js元素的页面加载事件需要等到页面中的所有资源加载完毕才执行，而jquery的页面加载事件只需要等到页面的标签加载完毕就执行，而不会等待外部文件加载。
标准的事件处理：
on方法用于绑定事件、委托事件、传入参数
$(元素).on(事件类型,[委托元素],[传入的参数],处理的函数)
off方法用于解绑事件
$(元素).off(事件类型,处理函数)
trigger方法用于手动触发事件：
$(元素).trigger(事件类型)
属性操作
设置属性：
$("div").prop(属性名,属性值);
获取属性：
$("div").prop(属性名);
设置自定义属性：
$("div").attr(属性名,属性值);
获取自定义属性：
$("div").attr(属性名);
删除属性：
$("div").removeProp(属性名);
$("div").removeAttr(属性名); // 删除自定义属性
jquery写法：
$(".all").click(function(){
$("input[type='checkbox']").prop("checked",true);
});
$(".reverse").click(function(){
$("input[type='checkbox']").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
});
$(".allNot").click(function(){
$("input[type='checkbox']").prop("checked",false);
});
当操作jquery对象的时候，不需要遍历操作每一个，直接操作的就是每一个元素。因为在jquery内部自带遍历操作。这就是隐形迭代。
each方法用来遍历元素集合，语法：
元素集合.each(i,v){ # i表示下标，v表示值
# v表示元素集合中的每一个元素
}
样式操作
设置样式：
$("div").css(css属性名,值); // 设置一个样式
$("div").css({ // 设置多个样式
css属性名:值,
css属性名:值
})
获取样式：
$("div").css(css属性名);
类名操作
$("div").addClass(类名); // 添加类名
$("div").removeClass(类名); // 删除类名
$("div").toggleClass(类名); // 在添加和删除之间切换
$("div").hasClass(类名); // 判断元素是否有这个类名，有是true，没有是false
补充知识点：
$(this) 是将this关键字转为jquery对象
$(this).index() // index方法是获取元素的下标
链式编程在这里体现的淋漓尽致。
元素内容操作
$("div").text(); // 获取元素内容 === 相当于 div.innerText
$("div").text("盒子"); // 设置元素内容 === 相当于 div.innerText = "盒子"
$("div").html(); // 获取元素代标签的内容 === 相当于 div.innerHTML
$("div").html("文字"); // 设置元素带标签的内容 === 相当于 div.innerHTML = "文字"
$("input").val(); // 获取表单元素的值 === 相当于 input.value
$("input").val("请输入用户名"); // 设置表单元素的内容 === 相当于 input.value = "请输入用户名"
大佬写的文件感觉就是比我的高级，我发这个文件上来是想让更多想学习的人能有更清楚的认识，（绝对不是我电脑烂，怕哪天本文件弄没的原因）