迭代，可以理解为数组对象的遍历。
隐式迭代就是默认情况下，对数组对象中所有对象遍历后的效果
显式迭代就是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) 是元素在指定事件内渐渐展开
谢谢您的访问.
这些内容可能对你也有帮助更多asp.net教程可查看asp.net教程列表页。
相关文章
精彩导读
热门资讯
关注我们
