一、JQuery介绍
JQuery是一个轻量级、兼容多浏览器的JavaScript库。可以更方便的处理HTML Document、Events、实现动画效果、方便的进行Ajax交互，能够极大的简化JavaScript编程。
JQuery1.X版本兼容IE678，官方制作BUG维护，功能不更新。3.x版本不兼容IE678，只支持最新浏览器，官方主页维护该版本。
JQuery对象是JQuery包装DOM对象后产生的对象，如可以通过$("#i1").html()获取id值为i1的元素的html代码。JQuery对象无法使用DOM对象的任何方法。
一般在声明一个JQuery对象变量的时候在变量名前面加上$，如 var $variable = JQuery对象。可以通过$variable[0]将JQuery对象转为DOM对象。
二、JQuery基础语法
1.查找标签
id选择器：
$("#id")标签选择器：
$("tagName")class选择器：
$(".calssName")配合使用：
$("div.c1") ?//具有c1样式类的div标签所有元素选择器：
$("*")组合选择器：
$("#id,.className,tagName")层级选择器：
x和y可以为任意选择器
$("x y"); ??//x的所有后代y$("x > y"); //x的所有儿子y$("x + y"); //找到所有紧挨在x后面的y$("x ~ y"); //x之后所有的兄弟y 基本筛选器：
:first ?//第一个:last ???//最后一个:eq(index) ?//索引等于index的那个元素:even ????//匹配所有索引值为偶数的元素，从0开始计数:odd ????//匹配所有索引值为计数的元素，从0开始计数:gt(index) ?//匹配所有大于给定索引值的元素:lt(index) ??//匹配所有小于给定索引值的元素:not(元素选择器) ??//移除所有满足not条件的标签:has(元素选择器) ?//选取所有包含一个或多个标签在内的标签（后代元素中找）
属性选择器：
[attribute][attribute=value] ??//属性等于[attribute!=value] ??//属性不等于
示例：
<input type="text"><input type="password"><input type="checkbox">$("input[type=‘checkbox‘]") ; //选取checkbox类型的input标签$("input[type!=‘text‘]"); ???//选取类型不是text的input标签表单常用筛选器：
:text:password:file:redio:checkbox:submit:reset:button
示例：
$(":checkbox") ??//找到所有的checkbox表单对象属性：
:enabled:disabled:checked:selected
示例：
<form> ???<input name="email" disabled="disabled"> ???<input name="id"></form>$("input:enabled") ?//找到可用的input标签<select id="s1"> ???<option value="beijing">北京市</option> ???<option value="shanghai">上海市</option> ???<option selected value="guangzhou">广州市</option> ???<option value="shenzhen">深圳市</option></select>$(":selected") ?//找到所有被选中的option2.筛选器
下一个元素：
$("#id").next()$("#id").nextALL()$("#id").nextUntil("#i2")上一个元素：
$("#id").prev()$("#id").prevAll()$("#id").prevUntil("#i2")父亲元素：
$("#id").parent()$("#id").parents() ??//查找当前元素的所有父辈元素$("#id").parentUntil("#i2") //查找当前元素的所有父辈元素，知道遇到匹配的那个元素为止。儿子和兄弟元素：
$("#id").children(); ??//儿子们$("#id").siblings(); ??//兄弟们查找元素：
$("#id").find() ?//搜索所有与指定表达式匹配的元素。补充：
.first() ?//获取匹配的第一个元素.last() ??//获取匹配的最后一个元素.not() ??//从匹配元素的集合中删除与指定表达式匹配的元素.has() ??//保留包含特定后代的元素，去掉那些不包含指定后代的元素。
3.操作标签
样式类:
addClass(); ??//添加指定的css类名removeClass(); ??//移除指定的css类名hasClass(); ??//判定样式是否存在toggleClass(); ?//切换css类名，如果有就删除，如果没有就添加
示例：开关灯的模态框
//CSScss("color","red") //DOM操作：tag.style.color="red"//JQuery$("p").css("color","red")位置：
offset() ??//获取匹配元素在当前窗口的相对偏移或设置元素位置position() ?//获取匹配元素相对父元素的偏移scrollTop() ?//获取匹配元素相对滚动条顶部的偏移scrollLeft() ?//获取匹配元素相对滚动条左侧的偏移
.offset()方法允许检索一个元素相对于文档(document)的当期位置。和.position()的差别在于.position()是相对于父级元素的位移。
尺寸：
height()width()innerHeight()innerWidth()outterHeight()outerWidth()
文本操作
html代码：
html() ??//取得第一个匹配元素的html内容html(val) ?//设置所有匹配元素的HTML内容
文本值：
text() ??//取得所有匹配元素的内容text(val) ??//设置所有匹配元素的内容
值：
val() ??//取得第一个匹配元素的当前值val(val) ?//设置所有匹配元素的值val([val1,val2]) ??//设置checkbox、select的值
示例：
获取被选中的checkbox或radio的值
<label for="c1">女</label><input name="gender" id="c1" type="radio" value="0"><label for="c2">男</label><input name="gender" id="c2" type="radio" value="1">
JQuery中使用
$("input[name=‘gender‘]:checked").val()属性操作
用于id等或自定义属性：
attr(attrName) ?//返回第一个匹配元素的属性值attr(attrName,attrValue) ?//为所有匹配元素设置一个属性值attr({k1:v1,k2:v2}) ?//为左右匹配元素设置多个属性值removeAttr() ??//从每一个匹配的元素中删除一个属性用于checkbox和readio
prop() ??//获取属性removeProp() ??//移除属性
JQuery学习笔记
原文地址：https://www.cnblogs.com/n1ghtwatcher/p/8600680.html