1、jQuery
(1) jQuary的特点?
jQuary使用选择器(借鉴了css中的选择器语法)查找节点,并且将节点封装成jQuary对象。这样做的目的是,为了兼容不同的浏览器之间的差异;另外,也会简化代码。
(2) jQuary编程的步骤?
step1, 使用选择器查找节点
step2, 调用jQuary对象提供的属性或者方法对节点(原始的DOM节点)进行相应的操作
(3) jQuery对象与DOM对象的转换
a)jQuery对象 ---> DOM对象
var obj = $obj.get(0)
var obj = $obj.get()[0]
b)DOM对象 ---> jQuery对象
var $obj = $(obj)
2、选择器
1) 基本选择器
#id:依据id查找
.class:根据节点的class属性查找
element:依据标记的名称查找
select1,select2,...selectn:将多个选择器查找的结果进行进行合并
*:返回所有的节点
2) 层次选择器
select1 select2 ('#id div')查找#id的后代子孙中满足是div的节点
select1>select2 只查找儿子一代符合条件的
select1+select2 下面的所有的兄弟中第一个紧挨着的
select1~select2 下面的所有的兄弟中满足条件的
3) 过滤选择器
(1) 基本过滤选择器
:first 第一行(table tr:first)
:last 最后一行
:not 排除在外(table tr:not(#tt))
:even 奇数行
:odd 偶数行
:eq(index) 等于下标为index的行
:gt(index)
:lt(index)
(2) 内容过滤选择器
:contains(text) 匹配包含给定文本元素的
:empty() 匹配标签内部为空的元素<div></div>
:has(selector) 匹配含有选择器所匹配的元素的元素
:parent(selector) 匹配含有子元素或者文本的元素
(3) 可见性过滤选择器
:hidden 匹配所有不可见的元素
:visiable 匹配所有可见的元素
(4) 属性过滤选择器
[attribute] 匹配包含给定属性的元素。注意,在jQuery 1.3中,
前导的@符号已经被废除!如果想要兼容最新版本,
只需要简单去掉@符号即可。
如div[id]
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value]
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value]
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[selector1][selector2][selectorN] 复合属性选择器,需要同时满足多个条件时使用。
(5) 子元素过滤选择器
:nth-child(index/even/odd/equation)
匹配其父元素下的第N个子或奇偶元素':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。
:nth-child从1开始的,而:eq()是从0算起的!
可以使用:
:nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
:first-child
:last-child
:on
(6) 表单对象属性选择器
:enabled
:disabled
:checked
:selected
4) 表单选择器
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
3、DOM处理
jQuery的DOM操作与浏览器无关
1)查询
利用jQuery提供的选择器可以利用jQuery对象提供的方法来获得
或者设置节点的属性值,文本,html内容
a) 获得或者设置节点的html内容:html();
b) 获得或者设置节点的文本:text();
c) 获得或者设置节点的值: val();
d) 获得或者设置节点的属性值: attr();
attr('id') 获得
attr('class','c1') 设置
attr({'style':'color:red;','class':'c1'}) 以传对象的形式同时设置多个属性
2)创建
$(html)
var $obj = $('<div>dddddddd</div>')
3)插入节点
append(obj) 把obj节点追加到调用此方法的节点的所有子节点的最后面(父子)
prepend(obj) 把obj节点追加到调用此方法的节点的所有子节点的最前面(父子)
after(obj) 把obj节点追加到调用此方法的节点的后面(兄弟)
before(obj) 把obj节点追加到调用此方法的节点的前面(兄弟)
此外简写可以将创建的内容直接放到括号内
$('div').append('<span>ddd</span>')
4)删除节点
remove() 删除节点
remove(selector) $('ul li').remove('#i2')
empty() 将节点的内容去掉
5)复制
clone()
clone(true):使复制的节点也具有行为(将事件处理代码一块复制)
$(function() {
//当整个页面解析完成,相应的dom树已经生成,会执行这儿的代码
$('#b1').click(function() {
$('d1').html("hello,jQuert");
});
});
为了将数据与行为分离,使用$(function(){})。
$(function(){
$('ul li:eq(2)').click(function(){
alert('hello');
});
$('#b1').click(function() {
var $obj = $('ul li:eq(2)').clone(true);//这里加上参数,将上面的事件处理代码一块复制
$('ul').append($obj);
});
});
6)样式操作
获取和设置:attr('','');
追加样式:addClass(''); == <div class="s1 s2"></div>
去掉样式:removeClass('s1');
或者remove('s1 s2')
或者remove();//移出全部
样式切换:toggleClass('s2') 有该样式就删除,没有就添加
是否有某个样式:hasClass('s1');
读取css('')设置css('','')或者css({'':"","":""})
7)遍历节点
children()/chlidren(selector);只考虑子元素,不考虑其他后代元素
next()/next(selector);兄弟
prev()/prev(selector);
siblings()/siblings(selector);其他兄弟
find(selector) //寻找调用此方法的元素的满足selector的所有的子孙后代
8)模拟操作
trigger('click')
click
doubleClick
<table width="40%">
<thead>
<tr><td>选择</td><td>姓名</td><td>工资</td><td>年龄</td><tr>
<thead>
<tbody>
<tr><td><input type="radio" name="ck" value="1"></td>
<td>张三</td><td>5000</td><td>20</td><tr>
<tr><td><input type="radio" name="ck" value="2"></td>
<td>李四</td><td>6000</td><td>23</td><tr>
<tr><td><input type="radio" name="ck" value="3"></td>
<td>王五</td><td>7000</td><td>21</td><tr>
<tr><td><input type="radio" name="ck" value="4"></td>
<td>赵六</td><td>8000</td><td>22</td><tr>
</tbody>
</table>
4、事件处理
1)事件绑定
bind(type,fn)
2)绑定方式的简写
click(function(){});
3)合成事件
hover(enter,leave) 模拟鼠标悬停时间
toggle(fn1,fn2,...) 模拟鼠标连续点击事件
4)事件冒泡
(1) 获得事件对象
$(function(event) {
var obj = event.target;//将event事件对象转化成js对象,不用考虑浏览器的兼容,此时
的事件对象obj并不是底层的,而是jQuery封装的
})
(2) 停止冒泡
event.stopPropagation()
(3) 停止默认行为
<a href="del.do" on
event.preventDefault();
5) 事件对象属性
event.type 事件的类型
event.target 返回dom类型的节点
6) 模拟操作
5、动画
1) show hide
作用:显示或者隐藏某个节点,通过同时改变节点的宽度和高度
show("slow"/"normal"/"fast"/number毫秒)
show(time,[fn])//fn会在动画执行完以后再执行
2) fadeIn() fadeOut() 改变不透明度
3) slideUp() slideDown()
作用:显示或者隐藏某个节点,通过改变高度
4) 自定义动画animate(params,speed,callback)
用法:
params:是一个js对象,描述了动画执行完毕之后节点的样式
speed:动画执行的速度
callback:是一个函数,在动画执行完毕之后执行
6、类数组
1) each(fn(i))循环遍历每一个元素
this代表被迭代的dom元素。
$(this)代表被迭代的jQuery元素。
$obj = ('ur li')//被封装成一个jQuery对象的多个dom对象
$obj.each(function(){
alert($(this).html());
})
$obj.each(function(i){//i表示正在被遍历的元素的下标/0 1 2
alert(i);
})
2) eq(index) 返回index+1位置处的的jQuery对象。
var $obj2 = $obj.eq(1);//取出类数组的第二个元素
3) index(obj) 返回下标,obj可以是dom对象也可以是jQuery对象
var index = $obj.index($obj2);
4) length:个数
5) get():返回dom对象数组
6) get(index):返回index+1位置处的dom对象
7、jQuery对ajax的支持
1) load(url,[da
url:服务器端的某个组件的地址
da
第一种形式:"username=zs&age=22";//请求字符串
第二种形式:{'username':'zs','age':22}
采用get方式发送请求
2) $.get(url,[da
callback格式:
function(da
服务器返回数据的状态。
type:服务器返回的数据的格式:
text:普通文本
html:html内容
json:json字符串
xml:xml文档
script:javas
$.get('carInfo.do','{'carName':$(this).val()},function(da
//da
//如果服务器返回的是json字符串,会自动转换成js对象
$(this).after()
}.'json');
$.post()格式同上
3) $.ajax(options):options是一个形如{key1:value,key2:value2}
选项参数如下:
url(string):请求地址
type(string):GRT/POST
da
dataType(string):预期服务器返回的数据类型,一般有:
text:普通文本
html:html内容
json:json字符串
xml:xml文档
script:javas
success(function):请求成功以后调用的回调函数
error(function):请求失败调用的函数有三个参数
function(XmlHttpRequest,textStatus,errorThrown)