使用JQEURY的原因:
1.轻量级的封装
2.简洁的语法
3.跨平台的兼容性
4.版本的支持性
5.强大的选择器
6.完善的事件处理机制
基本选择器:
$("#test") 选取id为test的元素
$(".test") 选取class为test的元素
$("input") 选取input所有标记为<input>的元素
$("*") 选取所有元素
层次选择器:
$("from input") 选取from表单中所有的input元素
$("div>span") 选取div下所有span元素
$("div+p") 选取紧跟在div后面的p元素
$("div~p") 选取div后面所有的p元素
过滤选择器:(过滤选择器都是以冒号(:)开始)
: not() - $("input:not(.test)") 选取class不是test的input元素
: first - 选取第一个元素
: last - 选取最后一个元素
: even - 选取索引是偶数的元素
: odd - 选取索引是奇数的元素
: eq(index) - $("input:eq(1)") 选取索引为index的input元素
: gt(index) - 选取索引大于index的元素
: lt(index) - 选取索引小于index的元素
内容过滤器:
: contains(text) - 选取内容中含有text的元素
: empty - 选取不包含子元素和文本的空元素
: has(selector) - 选择含有选择器所匹配的元素
: parent - 选取含有子元素或文本的元素
可见性过滤器:
: hidden - 选取所有不可见元素
: visiable - 选取所有可见元素
属性过滤选择器:
[attribute] : $("div[id]") 选择拥有id属性的div元素
[attribute=value] : 选择拥有value属性的元素
[attribute!=value] : 选择没有value属性的元素
[attribute^=value] : 选择属性的值以value开始的元素
[attribute$=value] : 选择以value结束的元素
[attribute*=value] : 选择属性值中含有value的属性
以上过滤器可以合用 : 例 - $("div[id=test][class!=.test")
子元素过滤器:
: nth-child(index/even/odd) - 选择每个父元素下第一个index元素 (注意:是第几个,不是索引)
: first-child - 选择每个父元素的第一个元素
: last-child - 选择每个父元素的最后一个元素
: only-child - 匹配唯一的子元素,如果父类拥有多个子元素将不被匹配
表带对象过滤器:
: enabled - 选取所有可用元素
: disabled - 选取所有不可用的元素
: checked - 选取所有被选中的元素
: selected - 选取所有被选中元素
表单选择器:
: input - 选取所有的<input> <textarea> <select> <button> 元素
: text - 选取所有的单行文本框
: password - 选取所有密码框
: radio - 选取所有单选框
: checkbox - 选取所有复选框
: submit - 选取所有提交按钮
: image - 选取所有图片框
: reset - 选取所有的重置按钮
: file - 选取所有的文件域
: hidden - 选取所有隐藏域
JQUERY 对 DOM 的操作:
(查找元素)
$("ul li:eq(1)") : 获取ul里面第2个<li>元素
$("p").attr("align") : 获取<p>元素align属性的值
(创建节点)
使用$()来创建节点:
$("<li></li>")
创建带属性的节点:
$("<p align='center'></p>")
插入节点:
append : 向元素内容后面添加元素
例 - "html代码" : <p>test</p>
$("p").append("<font size='6'>test</font>");
结果 :
<p>
test
<font size='6'>test</font>
</p
appendTo(B) : append的一个反向操作
$("<font size='6'>test</font>").appendTo("p") :
prepend : 向匹配元素内容前添加内容
$("p").prepend("<font size='6'>test</font>") 结果:testHello
prependTo : prepend的反向操作
after : 向每个匹配元素内容后插入元素
insertAfter : after 的反向操作
before : 向每一个匹配元素内容前插入元素
insertBefore : before的反向操作
(删除元素)
remove :
$("ul li:eq(1)").remove() 删除ul中第2个<li>标签
$("ul li").remove("li[title=name]") 删除li中title的值等于name的元素
empty() 清空内容
属性操作:
attr("attributeName") : 获取属性的值
attr("attributeName","value") : 给指定的属性赋值
removeAttr("attribute") : 删除某个属性
操作样式 (style):
css() : 设置样式
addClass() : 追加样式
removeClass("") : 移除样式
toggle() : 切换样式
toggleClass() : 样式上的重复切换
设置HTML,TEXT,VALUE
html() : 等价于innerHTML
text() : 等价于innerText
val() : 获取元素的值,等价于value属性
遍历节点:
children() : 所有子元素
next() : 紧邻在后面的同辈元素
prev() : 紧邻在前面的同辈元素
siblings() : 紧邻前后所有的同辈元素
JQUERY中的事件:
blur,focus,load,resize,scroll,click,dbclick,mousedown,mouseup,mouseover,
mouseout,change,select,submit,keydown,keypress,keyup
合成事件:
hover(enter,leave) : 当鼠标悬停在元素上时,触发第一个函数,当鼠标离开时触发第二个函数
toggle(function(),function()) : 鼠标连续点击时触发的事件
JQUERY 动画效果:
show() : 显示元素,如果不带参数,等价于:dispaly:block
show(毫秒数) : 设置元素显示的频率
hide() : 隐藏元素
hide(毫秒数)
fadeIn() : 改变元素的透明度来让元素显示
fadeOut() : 改变元素的透明度让元素隐藏
slideUp() : 调整元素的高度来控制元素的显示
slideDown() : 调整元素的高度来控制元素的不显示
animate() : 一种自定义动画方式
JQEURY 对表单,表格的操作:
"对checkbox的操作"
$("[name=likes]:checkbox").each(function(){
$(this).attr("checked",!$(this).attr("checked"));
})
"对表格的操作:隔行变色"
$("tr:odd").addClass() : 给奇数行添加背景色
$("tr:even").addClass() : 给偶数行添加背景色
