【JS】【jQuery】【操作对象:属性,节点,事件】

• jQuery对象是一个伪数组
• 取值:取伪数组第一个元素的对应内容.
• 设值:设伪数组全部元素的对应内容.(包括属性,事件,增删改)
• 本文中,obj代表JQuery的对象

操作属性

//取值
//括号为空:取数组第一个元素值;括号有值:设全数组元素的值
obj.val();        //操作表单元素的value;
obj.html();       //操作元素的全部内容(文本+元素的字符串);
obj.text();       //操作元素的文本内容;

//属性操作
obj.attr("name");          //返回元素的name值
obj.attr("name","armo");   //设所有元素的name属性为armo
obj.attr(json对象);         //一次操作多个元素的属性
obj.removerAttr("name");   //移除元素的name属性
obj.attr("name",function(index,attrValue){return 新的值})//动态设值

//css设置  
obj.css("background-color","red");//设置背景颜色为red
obj.attr("style","background-color:red");

元素节点增删改

//内部插入  父节点添加子节点
//括号中可以是文本形式,JQuery对象,Dom对象;
obj.append(XXX);       //添加在最后面
obj.prepend(XXX);      //添加在最前面

//外部插入  添加兄弟节点
obj.after(XXX);       //添加在obj之后
obj.before(XXX);      //添加在obj之前

//删除文本和全部子节点
obj.attr("innerHTML","");
obj.HTML("");
obj.empty();

//删除节点
//若事件不是jQuery方式绑定,二者无区别.都会返回自身对象.可以再次使用
obj.remove();       //删除对应的Jquery绑定的事件
obj.detach();       //不删除对应的Jquery绑定的事件,存于内存

//替换
obj.replaceWith(obj2); //obj对象更换成obj2;

//复制
obj.clone();         //不会复制事件
obj.clone(true);     //复制事件

事件绑定

//传统方式
obj.bind("click",function(){逻辑});
//简写方式
obj.click(function(){逻辑});
//页面加载后执行的事件
$(function(){逻辑});  //等价于window.onload=function(){};


//开关事件,一般写在click事件的函数中,按键来循环执行函数
obj.toggle(fn1,fn2,fn3);  //循环执行fn1,fn2
obj.toggle();             //默认fn1(){obj.css("display","none")}
                          //fn2(){obj.css("display","")}

//悬停事件
obj.hovar(over,out);   //over:鼠标停留的事件
                       //out:鼠标离去的事件
                       //等价于obj.mouseover(over)+obj.mouseout(out)的结合