jQuery中的DOM操作（二）

最新推荐文章于 2024-05-12 17:00:18 发布

liujing_555

最新推荐文章于 2024-05-12 17:00:18 发布

阅读量362

点赞数 1

分类专栏： jQuery自学自讲文章标签： jquery dom class 节点合并

本文链接：https://blog.csdn.net/liujing_555/article/details/54835356

版权

jQuery自学自讲专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>元素的offset
var left = offset.left;//获取左边距
var top =  offset.top;//获取上边距

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

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

liujing_555

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录