jQuery选择元素

最新推荐文章于 2023-11-08 08:20:01 发布

黑妹牙膏有点甜

最新推荐文章于 2023-11-08 08:20:01 发布

阅读量382

点赞数

本文链接：https://blog.csdn.net/DHM00/article/details/53571603

版权

如何理解Dom

文档对象模型(Document Object Model)

的简称

DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：

$();函数相当于jQuery（）；所以这个函数是调用jQuery对象；

$(document).ready();这个一般jQuery代码都写在ready的括号里

//===========================\

基本选择符包括那些

Id、css类、标签

可以通过

addClass () 方法来添加类

子元素组合符“ > ”：选择直接子元素

练习：

为二级以下 li 添加背景颜色

否定式伪类 :not ，语法“ :not( 选择符 ) ”

去除所有与给定选择器匹配的元素

代码：
第一种实现方式
jQuery代码

$(document).ready(
    function(){
        $('ul>li>ul>li').addClass('bg');
    }
);

html代码

<style type="text/css">
  .bg{
      background-color: #0050D0;
  }
</style>

<ul>
    <li>这个是第一级0
        <ul>
             <li>这个是第二级</li>
            <li >这个是第二级</li>
            <li>这个是第二级</li>
            <li>这个是第二级</li>

        </ul>
    </li>
    <li>这个是第一级0
        <ul>
            <li class="bg">这个是第二级</li>
        </ul>
    </li>
</ul>

//=====================================
第二种实现方式

$(document).ready(function(){
    $('#selected-plays > li').addClass('horizontal');
    $('#selected-plays li:not(.horizontal)').addClass('sub-level');
});

html//=================

  <style type="text/css">
      .sub-level{
          background: #ccc;
      }
      .horizontal {
          float: left;
          list-style: none;
          margin: 10px;
      }
    </style>
</head>
<body>
 <!--<form οnsubmit="croTime()" action="">-->
     <!--<input type="button" value="开始" name="start">-->
     <!--<input type="button" value="停止" name="stop">-->
     <!--<input type="text" value=" " name="showTime">-->
 <!--</form>-->
<ul id="selected-plays">
    <li>这个是第一级0
        <ul>
             <li>这个是第二级</li>
            <li >这个是第二级</li>
            <li >这个是第二级</li>
            <li>这个是第二级</li>

        </ul>
    </li>
    <li>这个是第一级0
        <ul>
            <li>这个是第二级</li>
        </ul>
    </li>
</ul>
</body>

黑妹牙膏有点甜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择元素

如何理解Dom文档对象模型(Document Object Model)的简称DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：$();函数相当于jQuery（）；所以这个函数是调用jQuery对象；$(document
复制链接

扫一扫