选择器
基本选择器
$("#id")：id选择器，返回单个元素
$(".class")：class选择器，返回集合元素
$("element")：选定指定的元素名匹配的元素，返回集合元素
$("*")：通配符选择器，选择所有元素，返回集合元素
$("selector1,selector2")：选择所有选择器匹配的元素，返回集合元素
层次选择器
$("ancestor descendant")：选择ancestor元素的所有descendant后代元素，返回集合元素
$("parent>child")：选择parent下的child子元素,
$("prev+next")：选择紧接在prev后面的同辈next元素
$("prev~siblings")：获取prev后面的所有同辈siblings元素
说明：
$("prev+next")与$("prev").next()效果相等
$("prev~siblings")与$("prev").sibling()效果相等
基本过滤选择器
:first：选取第一个元素，返回单个元素
:last：选取最后一个元素，返回单个元素
:not(selector)：去除所有给定选择器所匹配的元素，返回集合元素
:even：选取索引为偶数的所有元素，索引号从0开始，返回集合元素
:odd：选取索引为奇数的所有元素，索引号从0开始，返回集合元素
:ep(index)：选取索引等于index的元素，index从0开始返回单个元素
:gt(index)：选取索引号大于index的所有元素,返回集合元素
:lt(index)：选取索引小于index的所有元素，返回集合元素
:header：选取所有的标题元素，返回集合元素
:animated：选取正在执行动画的元素，返回集合元素
:focus：选取当前获取焦点的元素，返回集合元素
内容过滤选择器
:contains(text)：选取含有文本内容为text的元素，返回集合元素
:empty：选取没有子节点或者文本的空元素，返回集合元素
:has(selector)：选取含有选择器所匹配的元素的元素，返回集合元素
:parent：选取含有子节点或者文本的元素，返回集合元素
可见性过滤选择器
:hidden：选取所有不可见的元素，返回集合元素
:visible：选取所有可见的元素，返回集合元素
属性过滤选择器
[attribute]：选取含有此属性的元素，返回集合元素
:[attribute=value]：选取属性的值为value的元素，返回集合元素
:[attribute!=value]：选取属性的值不为value的元素，返回集合元素
:[attribute^=value]：选取属性的值以value开始的元素，返回集合元素
:[attribute$=value]：选取属性的值以value结尾的元素，返回集合元素
:[attribute*=value]：选取属性的值含有value的元素，返回集合元素
:[attribute|=value]：选取属性的值等于value或者是以value为前缀（即“value-”，value后面跟一个连字符）的元素，返回集合元素
:[attribute~=value]：选取属性的值以空格分隔的值中含有value的元素，返回集合元素
:[attribute1][attribute1]……[attributeN1]：用多个属性选择器合并成一个复合属性选择器，返回集合元素
子元素过滤选择器
:nth-child(index/even/odd)：选取父元素下的第index个子元素，index值从1开始，或者选取奇偶子元素,返回集合元素
:first-child：选取父元素下的第一个元素，返回集合元素
:last-child：选取父元素下的最后一个子元素，返回集合元素
:only-child：如果元素是父元素的唯一的元素，则选择，否则，不选择，返回集合元素
另外:nth-child()还可以通过数学表达式选取一组特定的元素，如:
:nth-child(3n)：选取父元素下所有3的倍数的子元素（n从1开始，即选取第3，6，9，……个元素）
表单选择器
:input：选取所有的input、textarea、select、button元素，返回集合元素
:text：选取所有单行文本框，返回集合元素
:password：选取所有的密码框，返回集合元素
:radio：选取所有的单选框，返回集合元素
:checkbox：选取所有的多选框，返回集合元素
:submit：选取所有提交按钮，返回集合元素
:image：选取所有的图像按钮，返回集合元素
:reset：选取所有的重置按钮，返回集合元素
:button：选取所有的按钮，返回集合元素
:file：选取所有的上传域，返回集合元素
表单对象属性过滤选择器
:enabled：选取所有可用元素，返回集合元素
:disabled：选取所有不可用元素，返回集合元素
:checked：选取所有被选中的元素（单选框和多选框），返回集合元素
:selected：选取所有被选中的元素（下拉列表），返回集合元素
DOM操作
查找、设置、删除属性
1、attr()方法：接受一个或两个参数，一个参数是获取属性值，两个参数是设置属性,需要设置多个属性时，attr方法的参数可以是一个由属性和属性值组成的json数据格式
$(
"div"
).attr(
"background"
);
//获取属性值
$(
"div"
).attr(
"background"
,
"blue"
);
//设置属性值
$(
"div"
).attr({
"background"
:
"blue"
,
"height"
:
"200px"
});
//设置多个属性值
|
2、css()方法：接受一个或两个参数，当一个参数是属性名时，获取属性值，当两个参数时，设置属性第一个参数为属性名，第二个参数为属性值，需要设置多个属性时，css方法的参数可以是一个由属性和属性值组成的json数据格式
$(
"div"
).css(
"background"
);
//获取属性值
$(
"div"
).css(
"background"
,
"blue"
);
//设置属性值
$(
"div"
).css({
"background"
:
"blue"
,
"height"
:
"200px"
});
//设置多个属性值
|
另外width()方法和height()方法可以直接获取宽度和高度
3、addClass()：为元素添加class值，可批量添加属性与值
$(
"div"
).addClass(
"myclass"
);
|
4、removeAttr()：删除指定的属性
$(
"div"
).removeAttr(
"background"
);
|
5、removeClass()：有参数时，删除指定的class值，没有参数时，删除全部的class值
$(
"div"
).removeClass(
"myclass"
);
$(
"div"
).removeClass();
|
6、hasClass()：判断匹配的元素是否有某个class值，有则返回true，没有则返回false
$(
"div"
).hasClass(
"myclass"
);
|
创建元素、文本、属性节点
均可以直接将元素、文本、属性添加到$()方法中，如：
var
p=$(
"<p title="
mytitle
">假装是标题</p>"
)
|
插入节点
1、append()：向元素内部添加节点，如：
html代码：
<p>我是内容</p>
jQuery代码：
$(
"p"
).append(
"<span>我是追加的内容</span>"
);
结果：
<p>我是内容<span>我是追加的内容</span></p>
|
2、appendTo()：将元素添加到指定元素内部，即将append方法中的链式操作的成员互换位置
html代码：
<p>我是内容</p>
jQuery代码：
$(
"<span>我是追加的内容</span>"
).appendTo(
"p"
);
结果：
<p>我是内容<span>我是追加的内容</span></p>
|
3、prepend()：向元素内部前置内容
html代码：
<p>我是内容</p>
jQuery代码：
$(
"p"
).prepend(
"<span>我是追加的内容</span>"
);
结果：
<p><span>我是追加的内容</span>我是内容</p>
|
4、prependTo()：将节点前置到指定元素中，即将prepend方法中的链式操作中的成员互换位置
html代码：
<p>我是内容</p>
jQuery代码：
$(
"<span>我是追加的内容</span>"
).prependTo(
"p"
);
结果：
<p><span>我是追加的内容</span>我是内容</p>
|
5、after()：在每个元素节点后添加节点
html代码：
<p>我是内容</p>
jQuery代码：
$(
"p"
).after(
"<span>我是追加的内容</span>"
);
结果：
<p>我是内容</p><span>我是追加的内容</span>
|
6、insertAfter()：讲节点插入到指定节点之后，即将after方法中的链式操作中的成员互换位置
html代码：
<p>我是内容</p>
jQuery代码：
$(
"<span>我是追加的内容</span>"
).insertAfter(
"p"
);
结果：
<p>我是内容</p><span>我是追加的内容</span>
|
7、before()：再节点前面插入节点
html代码：
<p>我是内容</p>
jQuery代码：
$(
"p"
).before(
"<span>我是追加的内容</span>"
);
结果：
<span>我是追加的内容</span><p>我是内容</p>
|
8、insertBefore()：将节点插入到指定元素前面
html代码：
<p>我是内容</p>
jQuery代码：
$(
"<span>我是追加的内容</span>"
).insertBefore(
"p"
);
结果：
<span>我是追加的内容</span><p>我是内容</p>
|
删除节点
1、remove()：从DOM中删除所有匹配的元素，同时该节点所包含的所有后代节点将同时被删除，因为返回值是删除节点的引用，因此可以在以后继续使用这些元素，但是此时这些节点所绑定的事件也会删除，如：
var
$li=$(
"ul li:eq(1)"
).remove();
//删除节点
$li.appendTo(
"ul"
);
//将节点添加回去
|
2、detach()：和remove()几乎一样，不同的是detach方法不会删除节点所绑定的事件和附加的数据
3、empty()：清空所匹配的节点
$(
"ul li:eq(1)"
).empty();
//此时第一个li标签内无任何内容及节点了
|
复制节点
clone()：复制节点，可以有参数
true
，当有
true
参数时，将同时复制节点所绑定的事件，如：
|
替换节点
1、replaceWith()：将匹配的节点替换成指定的节点
$(
"p"
).replaceWith(
"<ul><li></li></ul>"
);
|
2、replaceAll()：用指定的节点替换相应节点，即将replaceWith方法中的链式操作中的成员互换位置
$(
"<ul><li></li></ul>"
).replaceWith(
"p"
);
|
包裹节点
1、wrap()：将匹配的节点用指定的节点单独包裹起来
html代码：
<p>我是内容</p>
<p>我是另一个内容</p>
jQuery代码：
$(
"p"
).wrap(
"<span></span>"
);
结果：
<span><p>我是内容</p></span>
<span><p>我是另一个内容</p></span>
|
2、wrapAll()：将匹配的节点用指定的节点全部包裹起来
html代码：
<p>我是内容</p>
<p>我是另一个内容</p>
jQuery代码：
$(
"p"
).wrap(
"<span></span>"
);
结果：
<span>
<p>我是内容</p>
<p>我是另一个内容</p>
</span>
|
3、wrapInner()：将匹配的节点内部的节点或者文本内容用指定的节点包裹起来
html代码：
<p>我是内容</p>
jQuery代码：
$(
"p"
).wrapInner(
"<span></span>"
);
结果：
<p><span>我是内容</span></p>
|
设置、获取文本、HTML和值
1、html()：类似于原生JavaScript中的innerHTML属性，不含参数时是获取，包含元素节点和文本节点，当内有字符串参数时，是重新设置节点内容和文本内容
$(
"p"
).html();
|
2、text()：类似于原生JavaScript中的innerText属性，不含参数时是获取文本节点，当内有字符串参数时，是重新设置文本内容
$(
"p"
).text(
"我是内容"
);
|
3、val()：类似于原生JavaScript中的value属性，可以用来获取和设置元素的值，无论是元素或者文本框，下拉列表或者单选框，如果元素是多选，则返回一个包含所有选择的值的数组
遍历节点
1、children()：获取所有的子元素集合，返回一个数组，只考虑子元素，不考虑其他后代元素
html代码：
<div>
<p>我是内容
<sapn>我是内嵌的内容
</sapn></p>
<p>我是另一个内容</p>
</div>
jQuery代码：
var
$div=$(
"div"
).children();
$div.length;
//返回2
|
2、next()：获取匹配元素后面紧邻的同辈元素，效果类似于$(“prev+next”)
html代码：
<div>
<p>我是内容
</p>
<h1>我是另一个内容</h1>
</div>
jQuery代码：
var
$h1=$(
"p"
).next();
//返回h1元素节点
|
3、prev()：获取匹配元素前面紧邻的同辈元素
html代码：
<div>
<h1>我是另一个内容</h1>
<p>我是内容</p>
</div>
jQuery代码：
var
$h1=$(
"p"
).next();
//返回h1元素节点
|
4、siblings()：获取匹配元素的前后所有的同辈元素，类似于$(“prev~siblings”)
html代码：
<div>
<h1>我是另一个内容</h1>
<p>我是内容</p>
<ul>我是列表</ul>
</div>
jQuery代码：
var
$h1=$(
"p"
).next();
//返回h1和ul元素节点
|
5、closest()：获取最近的符合匹配的一个父元素
html代码：
<div>
<div class=
"div2"
>
<p>我是内容</p>
</div>
</div>
jQuery代码：
var
$div=$(
"p"
).closest();
//返回class为div2的div元素
|
6、parent()：获取一个父元素
html代码：
<div>
<div class=
"div2"
>
<p>我是内容</p>
</div>
</div>
jQuery代码：
var
$div=$(
"p"
).parent();
//返回class为div2的div元素
|
7、parents()：获取所有匹配的一个祖先元素
html代码：
<div>
<div class=
"div2"
>
<p>我是内容</p>
</div>
</div>
jQuery代码：
var
$div=$(
"p"
).parents();
//返回两个div元素组成的数组
|
元素定位
1、offset()：获取元素在当前视窗的相对偏移，返回一个对象，对象包含top和left两个属性
html代码：
<div>
我是内容
</div>
jQuery代码：
var
$offset=$(
"div"
).offset();
var
left=$offset.left;
var
top=$offset.top;
|
2、position()：获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，返回一个对象，对象包含top和left两个属性
html代码：
<div style=
"position:relative"
>
<div><p>我是内容</p></div>
</div>
jQuery代码：
var
$position=$(
"p"
).position();
var
left=$position.left;
var
top=$position.top;
|
3、scrollTop()：获取元素的滚动条距离顶端的距离
4、scrollLeft()：获取元素的滚动条距离左侧的距离
事件与动画
加载DOM
$(document).ready()：和原生的JavaScript的window.onload()方法有类似的功能，window.onload()方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，而$(docuemnt).ready()在DOM完全就绪时就可以被调用，此时并不意味着这些关联文件都已经下载完毕；另外，$(document).ready()可多次使用，而window.onload()只能用一次，多次使用时会出现覆盖的现象，另外其可以简写成$().ready();
事件绑定
bind()：可以有三个参数，第一个参数是事件类型，第二个参数可选，作为event.data属性值传给事件对象的额外数据对象，第三个参数是处理函数
bind(type data fn);
|
常见的事件类型：
blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mouseover、
mousemove、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keyup、error
|
另外，像click、mouseover、mouseout这类常用的事件，可以简写，如下：
$(
function
(){
$(
"h1"
).mouseover(
function
(){
$(
this
).next().show()
}).mouseout(
function
(){
$(
this
).next().hide()
})
})
|
合成事件
jQuery中有两个合成事件——hover()和toggle()方法
1、hover()：用于模拟光标悬停事件，语法
hover(enter,leave);
|
当光标移动到元素时，会触发第一个函数，离开时触发第二个函数
2、toggle()：用于模拟鼠标连续点击事件，语法
toggle(fn1,fn2,……,fn);
|
阻止事件之外的额外问题
1、停止事件冒泡
用stopPropagation()方法来停止事件冒泡，如：
$(
"span"
).bind(
"click"
,
function
(event){
//事件处理程序
event.stopPropagation()
})
|
2、阻止默认行为
用preventDafault()方法来阻止默认行为，当然也可以用原生JavaScript中的return false如：
$(a
").bind("
click",
function
(event){
//事件处理程序
event.preventDafault();
//或者return false;
})
|
3、事件捕获
事件捕获与事件冒泡是刚好两个相反的过程，jQuery不支持事件捕获。
事件对象
添加事件对象非常简单，只需要为函数添加一个参数，一般会用event
$(a
").bind("
click",
function
(event){
//事件处理程序
})
|
1、事件对象的属性
(1)event.type：获取事件的类型
$(a
").bind("
click",
function
(event){
alert(event.type);
})
|
(2)event.target：获取触发事件的对象元素
$(a
").bind("
click",
function
(event){
alert(event.target.href);
})
|
(3)event.pageX和event.pageY：获取光标相对于页面的x坐标和y坐标
$(a
").bind("
click",
function
(event){
alert(event.pageX);
alert(event.pageY);
})
|
(4)event.which：在鼠标单击时获取到鼠标的左、中、右键；在键盘事件中获取到键盘的按键
$(a").mousedown(
function
(event){
alert(event.which);
})
|
$(a").keyup(
function
(event){
alert(event.which);
})
|
(5)event.metaKey：在键盘事件中获取ctrl按键
2、事件对象的方法
(1)event.preventDefault()：阻止默认事件
(2)event.stopPropagation()：阻止事件冒泡
移除事件
unbind()：没有参数时，删除所有的绑定事件，可以有两个参数，第一个参数是事件类型，第二个参数是将要移除的函数，提供了事件类型，则只删除该事件类型，提供了事件处理函数，则只有这个事件处理函数会被删除，语法结构如下
unbind(type,data)
|
$(
"a"
).click(
function
(){
$(
"#btn"
).unbind(
"click"
,fn1);
}
|
另外，对于只需要触发一次随后就立即解除绑定的情况，jQuery提供了一种简写方法——one()方法，这个方法可以为元素绑定处理函数，当函数触发一次后，立即被删除；
事件的其他用法
1、模拟操作
trigger()：此方法可以模拟操作，例如
$(
"#btn"
).triggle(
"click"
)；
|
这段代码可以触发id为btn的按钮的click事件
trigger()方法会触发浏览器的默认事件，如果不想执行浏览器的默认操作，可以使用jQuery中的另一个方法triggerHandler()方法
2、绑定多个事件类型
bind可以为元素绑定多个事件类型
$(
function
(){
$(
"div"
).bind(
"mouseover mouseout"
,
function
(){
$(
this
).toggleClass(
"over"
);});
})
|
这段代码效果和下方代码一样
$(
function
(){
$(
"div"
).bind(
"mouseover"
,
function
(){
$(
this
).toggleClass(
"over"
);
}).bind(
"mouseout"
,
function
(){
$(
this
).toggleClass(
"over"
)；
});
})
|
动画
1、show()和hide()：这两个是jQuery中的最基本的动画，当这两个方法不含参数时，效果类似于直接将元素的display属性分别改为block和none，这两个方法当有参数时，可以使元素慢慢显示出来，速度关键字有slow、normal、fast，此外，还可以直接指定一个数字作为显示的时间参数，单位为毫秒，其中slow的显示时间为600毫秒，normal的显示时间为400毫秒，fast的显示时间为200毫秒，这两个方法是同时改变元素的高度、宽度和不透明度
$(
"p"
).toggle(
function
(){
$(
this
).next().hide(600);
},
function
(){
$(
this
).next().show(600);
})
|
2、fadeIn()和fadeOut()：这两个函数只改变元素的不透明度，同样可以有以上的速度参数
$(
"p"
).toggle(
function
(){
$(
this
).next().fadeOut();
},
function
(){
$(
this
).next().fadeIn(600);
})
|
3、slideUp()和slideDown()：这两个方法只改变元素的高度，slideDown()方法使元素由上到下延伸展示，而slideUp()方法使元素从下到上缩短隐藏，同样有上述的时间参数
$(
"p"
).toggle(
function
(){
$(
this
).next().slideUp();
},
function
(){
$(
this
).next().slideDown(600);
})
|
4、toggle()：切换元素的可见状态，如果元素可见，则切换为隐藏，如果元素隐藏，则切换为可见，语法结构
toggle(speed,callback);
|
$(
this
).next().toggle();
|
效果和hide()和show()方法类似
5、slideToggle()：通过高度来切换元素的可见性，语法结构
slideToggle(speed,easing,callback);
|
6、fadeTo()：把元素的不透明度以渐进的方式调整到指定的值，这个动画只调整元素的不透明度，语法结构
fadeTo(speed,opacity,callback)
|
$(
this
).fadeTo(100,0.3);
|
7、fadeToggle()：通过不透明度来切换元素的可见性，语法结构
fadeToggle(speed,easing,callback);
|
8、animate()：自定义动画，语法结构
animate(params,speed,callback);
|
params：一个包含样式属性及值的映射，如：{left:”400px”,height:”500px”}
speed：速度参数，可选
callback：在动画完成后执行的函数，可选
另外animate可以添加累加与累减动画，如：
$(
function
(){
$(
"p"
).click(
function
(){
$(
this
).animate({left:
"+=500px"
},300)
});
});
|
利用animate中的第一个参数很容易实现同时执行多个动画的效果，而需要按顺序执行动画，只需要顺序写animate动画即可，另外也可以使用链式操作
$(
this
).animate({left:
"500px"
},300);
$(
this
).animate({height:
"500px"
},300);
|
等效于
$(
this
).animate({left:
"500px"
},300).animate({height:
"500px"
},300);
|
9、判断元素是否处于动画状态
if
(!$(
"p"
).is(
":animated"
)){
//没有处于动画状态时执行的程序
}
|
10、延迟动画
延迟动画利用delay()方法
$(
this
).animate({left:
"500px"
},200).delay(1000);
|
5984
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
