日志
JQuery中的DOM操作(1)
2019-05-30 13:23
在访问页面时,需要与页面中的元素进行交互式的操作。在操作中,元素的访问是最频繁、最常用的,主要包括对元素属性、内容、值CSS的操作。
一、操作元素的属性 attr() prop() 获取或设置元素的属性值 两者区别:简单来说,对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。 针对属性对象不同 prop( )是针对Dom元素属性,attr( )针对HTML元素属性,和attribute与property区别一样。 用于设置的属性值类型不同 attr()函数操作的是文档节点的属性,因此设置的属性值只能是字符串类型,如果不是字符串类型,也会调用其toString()方法,将其转为字符串类型。 prop()函数操作的是JS对象的属性,因此设置的属性值可以为包括数组和对象在内的任意类型。 应用版本不同 attr()是jQuery 1.0版本就有的函数,prop()是jQuery 1.6版本新增的函数。毫无疑问,在1.6之前,你只能使用attr()函数;1.6及以后版本,你可以根据实际需要选择对应的函数。 其他不同 对于表单元素的checked、selected、disabled等属性,Attr()方法拿不到值,请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作,也尽量使用prop()函数。如下图代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.9.1.min.js"></script> </head> <body> <input type="button" id="btn1" value="按钮"> <input type="button" id="btn2" value="按钮"> <script> //操作元素的属性 //attr() prop()获取或设置元素的属性值 $("#btn1").attr("value","按钮1");//将#btn1的value值改为按钮1 $("#btn1").prop("value","按钮2");//将#btn1的value值改为按钮2 console.log( $("input[type='button']").prop("value"));//获取#btn1的value值,输出为按钮2 console.log($("#btn2").attr("value"));//获取#btn1的value值,输出为按钮 //设置多个属性值 $("input[type='button']").prop({ width:"200px", value:"hello" });//同时设置宽度为100px,value值为hello //根据输出结果,width值设置失败,value值设置成功 console.log($("input[type='button']").prop("width"));//0 console.log($("input[type='button']").attr("width"));//0 $("input[type='button']").attr({ width:"200px", value:"HELLO" })//同时设置宽度为200px,value值为HELLO //根据输出结果可以看到,width和value均设置成功 console.log($("input[type='button']").prop("width"));//0 console.log($("input[type='button']").attr("width"));//200px // var btn=$("input[type='button']"); // btn.attr("data-src","pink"); // console.log(btn.attr("data-src"));//pink // console.log(btn.prop("data-src"));//undefined var btn=$("input[type='button']"); btn.prop("data-src","pink"); console.log(btn.attr("data-src"));//undefined console.log(btn.prop("data-src"));//pink </script> 二、删除元素的属性 removeAttr( name ) ,其中name为元素属性的名称 removeProp( name ) ,其中name为元素属性的名称 三、元素内容的操作 在JQuery中,操作元素内容的方法包括html( )和text( )。前者与JavaScript中的innerHTML属性类似,即获取或设置元素的HTML内容;后者类似于JavaScript中的innerText属性,即获取或设置元素的文本内容。区别如下: 语法格式 参数说明 功能描述 html() 无参数 用于获取元素的HTML内容 html(val) val参数为元素的HTML内容 用于设置元素的HTML内容 text() 无参数 用于获取元素 的文本内容 text(val) val参数为元素的文本内容 用于设置元素的文本内容 <script> //js中的写法 innerHTML innerText var sd=document.getElementById("block"); sd.innerText="小猫吃鱼"; console.log(sd.innerHTML);//小猫吃鱼 console.log(sd.innerText);//小猫吃鱼 // //jquery html() text() 和js一致 获取或设置元素的html值或文本值 console.log($("#block").html());//小猫吃鱼 console.log($("#block").text());//小猫吃鱼 $("#block").text("小猫抓老鼠");//修改innerText内容 console.log($("#block").html());//小猫抓老鼠 console.log($("#block").text());//小猫抓老鼠 $("#block").html("小猫吃肉肉");//修改innerHTML内容 console.log($("#block").html());//小猫吃肉肉 console.log($("#block").text());//小猫吃肉肉 </script> 四、操作表单元素的值 val() 获取或设置表单元素的value值 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.9.1.min.js"></script> </head> <body> <input type="text" id="txt" value="请输入..."> <script> console.log( $("#txt").val());// 获取#txt的value值 输出为:请输入... $("#txt").val("12345");//修改#txt的value值为12345 console.log( $("#txt").val());//12345 </script> </body> </html> 五、元素样式的操作 1.直接设置元素样式值 在JQuery中,通过css()方法为某个指定的元素设置样式值,语法格式如下: css(name,value) ,其中name为样式名称,value为样式的值 css()可以设置样式也可以获取样式 2.增加CSS类别 通过addClass()方法增加元素类别的名称,语法格式如下: addClass(class) ,其中参数class为类名称,可以同时增加多个,用空格隔开即可,如addClass(class0 class1 class2 ...) 3.删除CSS类别 与addClass()方法相对应,removeClass()方法用于删除类别,语法格式与addClass()相同,如果不设定参数,则删除元素中的所有类名称 4.类别切换 通过toggleClass()方法切换不同的元素类别,语法格式如下: toggleClass(class) ,其中参数class为类别名称,其功能是当元素中含有名称为class的CSS类别时,删除该类别,若没有,则增加该类别 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.9.1.min.js"></script> </head> <body> <button id="btn" class="btndata">按钮</button> <script> $("#btn").addClass("btn1");//追加一个类名称 $("#btn").addClass("btn2 btn3");//追加多个类名称 $("#btn").removeClass("btn2 btn1");//移除类名称 $("#btn").removeClass();//移除所有类名称 $("#btn").toggleClass("btn1");//类的切换 toggleClass() 如果有类名称则替换 如果没有就添加 </script> </body> </html> 六、jquery操作子父节点 children() 找父元素里面的子节点 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.9.1.min.js"></script> </head> <body> <ul> <li class="lilist">1</li> <li class="lidata">2</li> <span>6</span> <li class="lilist">3</li> <span>5</span> <li class="lilist">4</li> <span>7</span> </ul> <script> console.log($("ul").children());//输出ul 下的所有子节点 console.log($("ul").children()[0]);//输出ul下索引为0的子节点 console.log($("ul>li").first());//输出ul里面第一个li console.log($("ul>li").last());//输出ul里面最后一个li console.log($("ul>li").eq(2));//eq() 根据索引找元素 console.log($("ul>li").first().siblings(".lilist"));//找同胞元素 输出和first()相同类名称的元素 console.log($("ul>li").eq(1).prev());//找当前元素的前一个元素 console.log($("ul>li").eq(2).prevAll("span"));//当前元素前面的所有指定元素 console.log($("ul>li").eq(2).prevAll());//当前元素前面的所有元素 console.log($("ul>li").eq(1).next());//找当前元素的下一个元素 console.log($("ul>li").eq(1).nextAll("li"));//当前元素后面的所有指定元素 console.log($("ul>li").eq(1).nextAll());//当前元素后面的所有元素 console.log($("ul>li").eq(0).is(".qq"));//is() 判断当前对象是谁 输出true or false 当前元素与类名称相符 输出true </script> </body> </html> 七、JQuery中的尺寸问题 下面以高度为例进行说明 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.9.1.min.js"></script> <style> .ss{ width: 200px; height: 200px; margin: 10px 10px; padding: 20px 20px; } </style> </head> <body> <div class="ss"></div> <script> console.log($(".ss").height());//200 可视区域 不包括内外边距 console.log($(".ss").innerHeight());//240 包括内边距的距离 console.log($(".ss").outerHeight());//240 包括内边距的距离 </script> </body> </html> 蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。 阅读全文 |
下一篇: 用一个实战案例,告诉你如何处理复杂需求!
上一篇: vue-router的两种模式的区别