迭代,可以理解为数组对象的遍历。
隐式迭代就是默认情况下,对数组对象中所有对象遍历后的效果
显式迭代就是jQuery对象的each()方法,按照循环的方式,主动选择其中对象,进行操作
隐式迭代示例代码:
$(document).ready(function(){
//此操作会将所有div全部设置成lightgray,称之为隐式迭代
$("div").css("backgroundColor","lightgray");
});
显式迭代示例代码:
$(document).ready(function(){
$("div").each(function(index,domElement){
//遍历所有元素
alert(index+"+"+domElement);
//选择遍历
if(index ==0){
domElement.style.backgroundColor="lightgray";
}else if(index==1){
domElement.style.backgroundColor="lightblue";
}else if(index==2){
domElement.style.backgroundColor="red";
}else{
domElement.style.backgroundColor="black";
}
});
});
六、jQuery操作元素属性
使用attr()函数来进行操作
三种方式:
1,attr(attrName) 获取第一个元素的该属性的值
2,attr(attrName,value) 设置所有元素的该属性的值(先为所有元素增加该属性,然后赋值)
3,attr(attrName,function(index,value){ }) 设置所有元素该属性的值,值由函数的返回值决定,index表示元素的索引,value表示该元素的原值
示例代码:
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//传入一个参数,获取div元素的id属性的值,但是只能获取第一个,没有发生隐式迭代
var value = $("div").attr("id");
//传入两个参数,设置所有元素的属性的值
$("div").attr("class","xx");
//传入两个参数,第二个参数为一个函数,返回值决定了第二个参数的值
$("div").attr("xxx", function (index,value) {
return "c"+index;
})
});
</script>
attr()函数对HTML元素固有的属性和自定义属性都有效,但是对于类似复选框的checked属性,一级元素的5个只读属性无效
需要使用jQuery对象的prop()函数来操作,但是prop()函数对自定义属性无效
七、jQuery操作元素的CSS样式
操作元素的style属性:
css(propName); 获取当前的样式属性的值
css(propName,value); 给propName属性赋值
css(propName,function(index,value){ }); 给propName属性赋值,函数的返回值决定赋值的值
操作元素的class属性:
addClass(class) 增加class属性的值
removeClass(class) 去除class属性的值
toggleClass(class) 切换class(如果存在就删除,如果不存在就添加)
也可以使用attr()函数来操作style属性和class属性,但是会出现覆盖的情况
八、操作元素的文本内容、子节点、元素值
html() 获取第一个元素的HTML内容(包括子元素和文本内容)
html(string) 设置所有元素的HTML内容 效果等于DOM对象的innerHTML属性
val() 获取第一个元素的value属性的值(如果有value属性的话,没有就是空字符串)
val(string) 设置所有元素的value属性的值
九、操作元素节点
$(html) 创建元素节点
append(content) 插入子节点
before(content) 插入兄弟节点
remove() 删除元素自己
children() 获得元素的子元素
parent()
获得元素的父元素
prevall() 获得元素之前的兄弟元素
nextall() 获得元素之后的兄弟元素
siblings() 获得兄弟元素
十、jQuery事件处理
jQuery提供了一系列如click(),focus(),mouseover()等方法,给元素注册对应事件处理函数
示例代码:
$("div").click(function(){
alert('xx')
});//给所有的div元素的点击事件注册了处理函数
重点:
1,jQuery提供了ready()函数来代替window的load加载事件,ready()可以在文档的DOM结构加载完成后就触发,不必等到页面的图片等资源也加载完成
2,这些函数都可以多次使用。不会发生覆盖
十一、$(this)的使用
因为jQuery的隐式迭代特性,使用jQuery注册的时间处理函数中的this实际上是DOM对象,因此可以调用DOM API,也可以使用$(this)调用jQuery API
示例代码:
$(document).ready(function(){
$("div").click(function(){
alert(this);//这里的this是div对象
});
});
十二、链式编程
更优雅、可以对一个jQuery对象实现一组操作
为了支持链式编程,大部分jQuery方法的返回值还是此jQuery对象本身
如:$("div").mouseout().click();//始终是对div对象进行操作
如果jQuery方法返回的不是原来的对象,就会发生“断链”。这时使用end()方法返回断链之前的状态
如:$("#div01").siblings().html("other").end().html("div01");//接回之前的状态
但是如果返回值不是jQuery对象的方法,就没法接上了
如:$("div").html();//返回值是字符串,不是原来的div对象了
十三、jQuery动画效果
//time的单位是毫秒
hide(time,function(){
$("div").show(time);//在time时间内发生function函数的事件
});
show(time,function) 是元素在指定事件内渐渐展开