如何理解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
()
方法来添加类
第一种实现方式
jQuery代码
第二种实现方式
子元素组合符“
>
”:选择直接子元素
练习:
为二级以下
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>