导图社区 JQuery
jQuery常用Api总结，获取和设置，DOM操作，效果，选择器，查找，过滤知识点总结。有需要的小伙伴可以下载收藏哦~
正则表达式的知识点总结，涵盖两种模糊匹配，字符组，量词，位置匹配，原理，结构，操作符的知识内容。有需要的小伙伴下载收藏哦~
python Openpyxl库的使用导图，openoyxl知识点总结，工作薄对象，工作表对象，单元格对象，样式对象，优化模式。
社区模板帮助中心，点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
JQuery
选择器
ID选择器
$('#id')
等同于document.getElementById('id')
标签选择器
$('tag')
等同于document.getElementsByTagName('tag')
类选择器
$('.class')
组合选择器
$('选择器1选择器2')
中间没有空格
例子
$('input[name=email]')
查找name为email的input的节点
多项选择器
$('选择器1,选择器2')
中间用逗号分隔
$('div,p')
查找所有div节点和p节点
层级选择器
子元素选择器
$('parent > child')
$("div > p")
元素的直接子元素的所有 元素
后代元素选择器
$('parent descendant')
层级之间用空格隔开
$('ul li')
选择ul节点下面所有的li节点
紧邻下一元素选择器
$('element + next')
$("div + p")
每个 元素相邻的下一个 元素
兄弟元素选择器
$('element ~ siblings')
$("div ~ p")
元素同级的所有 元素
只会选择div下方的同级p元素
表单选择器
:input
可以选择<input>，<textarea>，<select>和<button>
:file
可以选择<input type="file">，和input[type=file]一样
:text
所有带有 type="text" 的 input 元素
:password
所有带有 type="password" 的 input 元素
:submit
所有带有 type="submit" 的 input 元素
:reset
所有带有 type="reset" 的 input 元素
:button
所有带有 type="button" 的 input 元素
:checkbox
可以选择复选框，和input[type=checkbox]一样
:radio
可以选择单选框，和input[type=radio]一样
:focus
可以选择当前输入焦点的元素，例如把光标放到一个<input>上，用$('input:focus')就可以选出
过滤选择器
属性过滤选择器
普通查找
$("[attribute]")
$("[href]")
所有带有 href 属性的元素
$("[attribute='value']")
$("[href='default.htm']")
所有带有 href 属性且值等于 "default.htm" 的元素
$("[attribute!='value']")
$("[href!='default.htm']")
所有带有 href 属性且值不等于 "default.htm" 的元素
前缀查找
$("[attribute^='value']")
$("[title^='Tom']")
所有带有 title 属性且值以 "Tom" 开头的元素
后缀查找
$("[attribute$='value']")
$("[href$='.jpg']")
所有带有 href 属性且值以 ".jpg" 结尾的元素
包含查找
包含单词
$("[attribute~='value']")
$("[title~='hello']")
所有带有 title 属性且值包含单词 "hello" 的元素
包含字符串
$("[attribute*='value']")
$("[title*='hello']")
所有带有 title 属性且值包含字符串 "hello" 的元素
排除查找
:not(selector)
$("li:not(#runoob)")
挑选除id="runoob"以外的所有li
内容过滤选择器
:contains(text)
$(":contains('Hello')")
所有包含文本 "Hello" 的元素
:has(selector)
$("div:has(p)")
所有包含有 元素在其内的 元素
:empty
所有空元素
:parent
匹配所有含有子元素或者文本的父元素
索引过滤选择器
:first
$("p:first")
第一个 元素
:last
$("p:last")
最后一个 元素
:odd
$("tr:odd")
所有奇数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)
:even
$("tr:even")
所有偶数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推
:eq(index)
$("li:eq(4)")
下标等于4的li
:gt(no)
$("li:gt(2)")
下标大于2的li
:lt(no)
$("li:lt(2)")
下标小于2的li
状态过滤选择器
:checked
$(":checked")
所有选中的复选框选项
:selected
$(":selected")
所有选定的下拉列表元素
:enabled
$(":enabled")
所有启用的元素
:disabled
$(":disabled")
所有禁用的元素
可见性过滤选择器
:visible
可见的元素
:hidden
隐藏的元素
查找
后代
children([选择器])
返回被选元素的所有直接子元素
find([选择器])
返回被选元素的后代元素，一路向下直到最后一个后代
祖先
parent([选择器])
返回被选元素的直接父元素
parents([选择器])
返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
parentsUntil([选择器])
返回介于两个给定元素之间的所有祖先元素
$("span").parentsUntil("div")
同胞
siblings([选择器])
返回被选元素的所有同胞元素
向前
prev([选择器])
返回被选元素的上一个同胞元素
只返回一个元素
prevAll([选择器])
返回被选元素的所有之前的同胞元素
prevUntil([选择器])
返回介于两个给定参数之间的所有之前的同胞元素
向后
next([选择器])
返回被选元素的下一个同胞元素
nextAll([选择器])
返回被选元素的所有跟随的同胞元素
nextUntil([选择器])
返回介于两个给定参数之间的所有跟随的同胞元素
过滤
first()
返回被选元素的首个元素
last()
返回被选元素的最后一个元素
eq()
返回被选元素中带有指定索引号的元素
filter()
允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
$("p").filter(".intro")
返回带有类名 "intro" 的所有 元素
not()
返回不匹配标准的所有元素
not() 方法与 filter() 相反
$("p").not(".intro")
返回不带有类名 "intro" 的所有 元素
获取和设置
text()
设置或返回所选元素的文本内容
html()
设置或返回所选元素的内容（包括 HTML 标记）
val()
设置或返回表单字段的值
attr()
设置/改变属性值
概要
回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。以函数的返回值作为新值
DOM操作
添加
append()
在被选元素的结尾插入内容
prepend()
在被选元素的开头插入内容
插入的是子元素
after()
在被选元素之后插入内容
before()
在被选元素之前插入内容
插入的是同胞元素
这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建
function appendText() { var txt1=" Text. "; // 以 HTML 创建新元素 var txt2=$(" ").text("Text."); // 以 jQuery 创建新元素 var txt3=document.createElement("p"); // 以 DOM 创建新元素 txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); // 追加新元素 }
var txt1=" Text. "
var txt2=$(" ").text("Text.")
var txt3=document.createElement("p")
删除
remove([选择器])
删除被选元素（及其子元素）
可接受一个参数，允许您对被删元素进行过滤
empty()
从被选元素中删除子元素
addClass()
向被选元素添加一个或多个类
$("div").addClass("important")
$("body div:first").addClass("important blue")
removeClass()
从被选元素删除一个或多个类
toggleClass()
对被选元素进行添加/删除类的切换操作
$("h1,h2,p").toggleClass("blue")
css()
获取
css("propertyname")
$("p").css("background-color")
设置
单个
css("propertyname","value")
$("p").css("background-color","yellow")
多个
css({"propertyname":"value","propertyname":"value",...})
$("p").css({"background-color":"yellow","font-size":"200%"})
尺寸
width()
height()
不包括内边距、边框或外边距
innerWidth()
innerHeight()
包括内边距
outerWidth()
outerHeight()
包括内边距和边框
outerWidth(true)
outerHeight(true)
包括内边距、边框和外边距
效果
显示/隐藏
显示
$(selector).show(speed,callback);
隐藏
$(selector).hide(speed,callback);
切换
$(selector).toggle(speed,callback);
显示被隐藏的元素，并隐藏已显示的元素
淡入/淡出
淡入
$(selector).fadeIn(speed,callback);
淡出
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
指定值
$(selector).fadeTo(speed,opacity,callback);
滑动
向下滑动
$(selector).slideDown(speed,callback);
向上滑动
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
动画
$(selector).animate({params},speed,callback);
