【JS】【jQuery】【操作对象:属性,节点,事件】
2017-12-26 11:49
561 查看
jQuery对象是一个伪数组
取值:取伪数组第一个元素的对应内容.
设值:设伪数组全部元素的对应内容.(包括属性,事件,增删改)
本文中,obj代表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)的结合
相关文章推荐
- js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)
- 05、JS对HTML节点对象的属性操作:
- js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)
- jQuery第二课 ——节点选择、元素创建与操作、包装对象、jq转原生js
- js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)
- js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
- 第5天(就业班) BOM、window对象、事件、location对象、screen对象、Dom编程根据属性找节点、通过关系找节点、添加附件、联动框、操作元素的css样式、正则表达式
- js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)
- js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)
- js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)
- js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
- HTML5中自定义的data-*属性使用和js/jquery的data()方法操作
- JS DOM操作(三) Window.docunment对象——操作属性
- 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
- JS/jQuery 遍历对象属性
- jQuery 事件对象的属性和方法
- 认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法
- JQuery事件对象属性小结
- Photoshop脚本 > 文档对象操作 > 属性与事件
- Jquery -- JQuery对象操作(附对应JS方法)