目录
语法：
$(selector).action() ————：
美元符号 == jQuery
选择符 “查询”和“查找”HTML元素
jQuery的action()执行对元素的操作
实例:
$(this).hide() ————隐藏当前元素
$("p").hide() ————隐藏所有p标签
$("p.test").hide() ————隐藏所有class= test 的p标签
$("#test").hide() ————隐藏id=test的标签
选择器：
元素选择器：
$("p") // 所有的 p 标签
id选择器：
$("#test"); // id=test的标签
.class 选择器：
$(".test"); // 所有带有 class="test" 的标签
css 选择器：
$("p").css("background-color","red");
补充选择器：
* $("*") 所有元素
.class,.class $(.demo1,.demo2) class 为 demo1 或 demo2 的所有元素
element1,element2 $("p,div,span") 所有 p, div, span 的元素
:first $("p:first") 第一个 p 元素
:last $("p:last") 最后一个 p 元素
:even $("p:even") 所有偶数位置的 p 元素
:odd $("p:odd") 所有奇数位置的 p 元素
:first-child $("p:first-child") 属于其父元素的第一个子元素的所有 p 元素
:last-child $("p:last-child") 属于其父元素的最后一个子元素的所有 p 元素
:nth-child(n) $("p:nth-child(num)") 属于其父元素的第n个子元素的所有 p 元素
:only-child $("p:only-child") 属于其父元素的唯一子元素的所有 p 元素
parent > child $("div>p") <div>元素的直接子元素的所有 <p>元素
parent child $("div p") <div> 元素的后代的所有 <p> 元素
element + next $("div + p") 每个<div>元素相邻的下一个<p>元素
element ~ siblings $("div ~ p") <div>元素同级的所有 <p>元素
:eq(index) $("ul li:eq(3)") 列表中的第四个元素(索引为0)
:gt(index) $("ul li:gt(3)") 列举index大于 3 的元素
:lt(index) $("ul li:lt(3)") 列举index小于 3 的元素
:not(selector) $("input:not(:even)") 所有不是偶数位置的input 元素
:header $(":header") 所有标题元素 <h1>~<h6>
:animated $(":animated") 所有动画元素（带有动画效果的元素）
:focus $(":focus") 当前具有焦点的元素
:contains(text) $(":contains("Hello")") 所有包含文本"Hello"的元素
:has(selector) $("div:has(p)") 所有包含有<p>元素在其内的<div>元素
:empty $(":empty") 所有空元素(空元素值得是不包含子元素或文本的元素)
:parent $(":parent") 选择所有含有子元素或者文本的父级元素
:hidden $("input:hidden") 所有隐藏的input元素
:visible $("input:visible") 所有可见的input
:lang(language) $("p:lang(de)") 所有带有以"de"的 lang(还不能改其他都不可以) 属性值的 <p> 元素
[attribute] $("[href]") 所有带有href属性的元素
[attribute=value] $("[href='baidu.com']") 所有带有href属性且值等于 baidu.com 的元素
[attribute != value] $("[href!="baidu.com"]") 所有带有href属性且值不等于 baidu.com 的元素
[attribute $= value] $("[href$=".jpg"]") 所有带有href属性且值以 ".jpg" 结尾的元素
[attribute |= value] $("[href |= 'Tom']") 所有带有href属性且值等于"Tom"或者以"Tom"后跟连接符（‘-’）作为开头的字符串
[attribute ^= value] $("[title^='Tom']") 所有带有title属性且值以"Tom"开头的元素
[attribute ~= value] $("[title~='hello']") 所有带有title属性且值包含单词(整体)"hello"的元素
[attribute *= value] $("[title*='hello']") 所有带有title属性且值包含字符串"hello"的元素
单纯针对 form 表单的选择器:
:input $(":input") 所有input元素 (和$("input")没发现有什么区别)
:text $(":text") 所有带有 type="text" 的input 元素
:password $(":password") 所有带有type="password" 的input 元素
:checkbox $(":checkbox") 所有带有type="checkbox" 的input 元素
:submit $(":submit")
:reset
:button
:image
:file
:enabled $(":enabled") 所有启用的 input元素
:disabled $(":disabled") 所有禁用的input元素
:selected $(":selected") 所有选定的input元素 多选
:checked $(":checked") 所有选中的input元素 单选
事件：
鼠标事件：
click() 当按钮点击事件被触发
dbclick() 当双击元素时，会发送dbclick事件
mouseenter() 当鼠标指针穿过元素时
mouseleave() 当鼠标指针离开元素时
mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键
mouseup() 当在元素上松开鼠标按钮时
hover() 用于模拟光标悬停事件 （相当于 mouseenter + mouseleave）
focus() 当元素获得焦点时，（当通过鼠标点击选中元素或通过tab键定位到元素时，该元素就会获得焦点）
blur() 当元素失去焦点时
键盘事件：
keydown() 在键盘上按下某键时会发生，一直按着会不断触发，返回的是键盘代码
keypress() 在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效，换句话说，只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
keyup() 用户松开某一个按键式触发，与keydown相对，返回键盘代码
jQuery HTML
获取内容：
text() $("p").text()
html() $("p").html()
val() $("p").val()
上面三个都有 回调函数：
回调函数有两个参数：
1. 被选元素列表中当前元素的下标
2. 原始的值
然后以函数新值返回希望使用的字符串
例如：
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
获取属性
attr() $("a").attr("href")
可以用于设置/改变属性值
$("a:eq(0)").attr("href","www.baidu.com");
同时设置好几个属性值。。 以键值对形式，放在字典中
$("a:eq(0)").attr(
{"href":"www.baidu.com",
"color":"red",
});
attr() 也支持回调函数（同上面的回调函数）
属性值 可以是 回调函数
例如:
$("button").click(function(){
$("#w3cschool").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
removeAttr() 从每一个匹配的元素中删除一个属性
特殊：用于checkbox 和radio / select / disabled
prop(“:radio”，t/f) 获取属性
removeProp() 删除属性
添加元素：
append() 在被选元素内部的结尾插入指定内容
$("p").append("Some append text.");
appendTo() 反向（和上面正好相反）
prepend() 在被选元素内部的开头插入内容
$("p").prepend("我插入到头部了");
append 和 prepend 这两个方法：
可以添加 新元素
例如：
var txt1="<p>Text.</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("Text."); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("p").append(txt1,txt2,txt3); // 追加新元素
after() 在被选元素之后插入内容
insertAfter() 反转
before() 在被选元素之前插入内容
insertbefoer() 反转
这两个方法也可以 添加新元素
注意：在jQuery中,append和prepend 是在选择元素内部嵌入，而 after/before 是在元素外部追加
删除元素：
remove() 删除被选元素（及其子元素）
$("#div1").remove();
可以接受一个参数，允许过滤
$("p").remove(".italic") 删除 class="italic" 的所有 p 元素
empty() 删除被选元素的子元素
$("#div1").empty();
替换：
a.replaceWith(b) b 把 a 替换掉
b.replaceAll(a) b 把 a 替换掉
复制：
clone() 复制 有一个参数可选，（true/false） true 会复制被选元素的事件
jQuery CSS/CLASS类
addClass() 想被选元素添加一个或多个类（类与类之间用空格隔开）
removeClass() 从被选元素删除一个或多个类
toggleClass() 对被选元素进行反转，如果存在就删除，反之则添加
css() 设置或返回样式属性
设置一个属性：
$("p").css("color","red");
设置多个属性：
$("p").css({
'color':'red',
'backgroud-color':'red',
});
jQuery尺寸：
width() 设置或返回元素的宽度(不包括内边距，边框或外边距)
height() 设置或返回元素的高度(不包括内边距，边框或外边距)
innerWidth() 返回元素的宽度（包括内边距）
innerHeight() 返回元素的高度（包括内边距）
outerWidth() 返回元素的宽度（包括内边距和边框）
outerHeight() 返回元素的高度（包括内边距和边框）
提示：
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）；
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
jQuery遍历：
祖先 (向上查找 注意如果查找出来是多个父级的话，是 反向输出的)：
parent() 返回被选元素的直接父元素
$("p").parent()
parents() 返回被选元素的所有祖先标签，知道<html>标签
可以设置参数来过滤
$("p").parents("ul") 返回被选元素的祖先标签，并且他是 ul 元素。其他不显示
parentsUntil() 返回被选元素到指定元素之间的所有祖先标签
$("p").parentsUntil("div") 返回 p 到 父级 div 之间所有的 祖父标签
后代 (向下)：
children() 返回被选元素的所有直接子元素
可以设置参数来过滤
$("div").children("p.l") 返回<div>标签下 类名为 “l”的所有<p>标签
find() 返回被选元素的后代元素，一路向下直到最后一个后代。
区别：
childern 只找 直接的子元素。只要隔一层 他就找不到了
find 只要满足 并且是我的后代，我都可以找得到
同胞:
siblings() 返回被选元素的所有同胞元素
可以设置过滤条件
next() 返回被选元素的下一个同胞元素
可以设置过滤条件，但是好像意义不大
nextAll() 返回被选元素的所有跟随的同胞元素。向下
nextUntil() 返回被选元素到指定元素 之间的所有同胞元素
$("h2").nextUntil("h6") 返回 介于 h2 到 h6 之间的标签，不包括 h2和h6
下面的这些同 next 类型的方法，只不过查找顺序 从下往上
prev()
prevAll()
prevUntil()
过滤：
等同于 选择器中的 :first ,:last, :eq
first() 被选元素的首个元素
$("div p").first() 选取首个div内部的第一个 p 元素
last() 被选元素的最后一个元素
$("div p").last() 选取最后一个div内部的最后一个 p 元素
eq() 返回被选元素中带有指定索引号的元素。从0开始
$("li").eq(0);
filter() 返回满足匹配规则的元素
$("p").filter(".a") 返回所有带 class="a" 的 p 标签
not() 返回不满足匹配规则的元素
$("p").not(".a") 返回所有不带 class="a" 的 p 标签
9482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
