jQuery中的DOM操作（二）

来源：互联网发布：java中局部变量编辑：程序博客网时间：2024/06/05 20:39

1、样式编辑

1、获取样式和设置样式：attr()；

var p_class=$("p").attr("class");     //获取<p>元素的class$("p").attr("class","high");          //设置<p>元素的class为"high"

2 、追加样式：addClass()；
【注意】（1）如果给一个元素添加了多个class值，那么就相当于合并了他们的样式；（2）若有不同的class设定了同一样式属性，则后者覆盖前者。
这里写图片描述
3. 移除样式：removeClass()与addClass()方法相反
【注意】 (1) 用空格的方式删除多个class名。如：$(“p”).removeClass(“high another”)
(2) 当removeClass()不带参数时时，会将class值全部删除。
4. 切换样式
toggleClass()方法，控制样式上的重复切换
toggle()交替执行两个函数，主要控制行为上的重复切换
5. 判断是否含有某个样式：
hasClass()方法可以用来判断元素中是否含有某个class，如果有，返回true，否则返回false
【注意】这个方法是为了增强代码可读性而产生的，在jQuery内部实际上是调用了is()方法来完成这个功的。$("p").hasClass("another");等价于$("p").is(".another");

//样式操作例子<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">.high{ font-weight:bold;   /* 粗体字 */ color : red;        /* 字体颜色设置红色*/}.another{ font-style:italic; color:blue;}</style><script src="../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript">  $(function(){      $("input:eq(0)").click(function(){            alert( $("p").attr("class") );      });//获取样式      $("input:eq(1)").click(function(){            $("p").attr("class","high");      });//设置样式      $("input:eq(2)").click(function(){            $("p").addClass("another");      });//追加样式      $("input:eq(3)").click(function(){            $("p").removeClass();      }); //删除全部样式      $("input:eq(4)").click(function(){            $("p").removeClass("high");      }); //删除指定样式       $("input:eq(5)").click(function(){            $("p").toggleClass("another");      }); //重复切换样式       $("input:eq(6)").click(function(){            alert( $("p").hasClass("another") );            //alert( $("p").is(".another") );      }); //判断元素是否含有某样式  });  //]]>  </script></head><body>    <input type="button" value="输出class类"/>    <input type="button" value="设置class类"/>    <input type="button" value="追加class类"/>    <input type="button" value="删除全部class类"/>    <input type="button" value="删除指定class类"/>    <input type="button" value="重复切换class类"/>    <input type="button" value="判断元素是否含有某个class类"/>    <p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p>    <ul>      <li title='苹果'>苹果</li>      <li title='橘子'>橘子</li>      <li title='菠萝'>菠萝</li>    </ul></body></html>

2、设置和获取HTML、文本和值

html()方法
此方法类似于JavaScript中的innerHTML属性，可用来读取或者设置某一个元素中的HTML内容
【注意】html()方法可以用于XHTML文档，但不能用于XML文档

alert(  $("p").html() );//获取并打印<p>元素的HTML代码$("p").html("<strong>你最喜欢的水果是?</strong>");//设置<p>元素的HTML代码

2、text()方法：此方法类似于JavaScript中的innerText属性，用来设置、获取某个元素中的文本内容
【注意】(1)JavaScript中的innerText属性并不能在Firefox 浏览器下运行，而jQuery的text()方法支持所有的浏览器
(2)text()方法对HTML文档和XML文档都有效。

alert(  $("p").text() );//获取并打印<p>元素的文本内容$("p").text("你最喜欢的水果是?");//设置<p>元素的文本内容

3、val()方法
此方法类似于JavaScript中的value属性,用来设置、获取元素的值.无论元素是文本框，下拉框还是单选框，它都可以返回元素的值，如果元素是多选，则返回一个包含所有选择的值的数组。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript">  $(function(){      $("#address").focus(function(){         // 地址框获得鼠标焦点            var txt_value =  $(this).val();   // 得到当前文本框的值            if(txt_value=="请输入邮箱地址"){                  $(this).val("");    // 如果符合条件，则清空文本框内容            }       });      $("#address").blur(function(){         // 地址框失去鼠标焦点            var txt_value =  $(this).val();   // 得到当前文本框的值            if(txt_value==""){                $(this).val("请输入邮箱地址");// 如果符合条件，则设置内容            }       })      $("#password").focus(function(){            var txt_value =  $(this).val();            if(txt_value=="请输入邮箱密码"){                $(this).val("");            }       });      $("#password").blur(function(){            var txt_value =  $(this).val();            if(txt_value==""){                $(this).val("请输入邮箱密码");            }       })  });  </script></head><body>    <input type="text" id="address" value="请输入邮箱地址"/>   <br/><br/>    <input type="text" id="password" value="请输入邮箱密码"/>  <br/><br/>    <input type="button" value="登录"/></body></html>

由上例可知： val()方法不仅能设置元素的值，同时也能获取元素的值。另外，val()方法还能使select（下拉列表框）、checkbox（多选框）、和radio（单选框）相应的选项被选中。

3、遍历节点

children()方法：只考虑子元素不考虑其他后代元素；
next()方法：用于取得匹配元素后面紧跟的同辈元素；
prev()方法：用于取得匹配元素前面紧跟的同辈元素；
siblings()方法：用于取得匹配元素前后所有的同辈元素；
closeset()方法：用于取得最近的匹配元素
6.parent()、parents()与closeset()的区别

4、CSS-DOM操作
1.css():获取元素的样式属性

$("p").css("color");//获取<p>元素的color$("p").css("color","red");//设置<p>元素的color$("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"});//同时设置字体大小和背景颜色

2.height()：获取、设置元素的高度，默认单位px;

3.width()：获取、设置元素的宽度

4.offset()：获取、设置元素在当前视窗的相对偏移，返回值包含top和left，只对可见元素有效。

var offset = $("p").offset();//获取<p>元素的offsetvar left = offset.left;//获取左边距var top =  offset.top;//获取上边距

5.position()：获取元素相对于最近一个position样式属性设置为relative或absolute的祖父节点的相对偏移，与offset一样，返回值包含top和left

6.scrollTop()和scrollLeft()：分别是获取元素滚动条距顶端的距离和距左侧的距离

1 0