jQuery选择元素

来源：互联网发布：淘宝店招怎么设置全屏编辑：程序博客网时间：2024/06/08 00:17

如何理解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 onsubmit="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