如鹏网学习笔记（十一）JQuery(2)_H5之家 - 中国HTML5教程资源分享第一站

　　迭代，可以理解为数组对象的遍历。
　　隐式迭代就是默认情况下，对数组对象中所有对象遍历后的效果
　　显式迭代就是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="http://www.cnblogs.com/DotNetStu/p/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) 是元素在指定事件内渐渐展开

Tags：如鹏网笔记 JQuery