jQuery对象和DOM对象
DOM对象为文档对象模型，可以理解为页面上的标签，标签都是DOM元素节点。
jQuery对象通过jQuery包装DOM对象后产生的对象。
jQuery对象都必须加上$，$读为jQuery
以下是一个jQuery导航栏的例子，熟悉下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> <title>jQuery Demo</title> </head> <script type="text/javascript"> //等待dom元素加载完毕. $(document).ready(function () { $(".level1 > a").click(function () { $(this).addClass("current") //给当前元素添加"current"样式 .next().show() //下一个元素显示 .parent().siblings().children("a").removeClass("current") //父元素的兄弟元素的子元素<a>移除"current"样式 .next().hide(); //它们的下一个元素隐藏 }); }); </script> <body> <!--<script type="text/javascript"> $(function () { alert("5555"); }) </script>--> <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none">衬衫</a> <ul class="level2"> <li><a href="#none">短袖衬衫</a></li> <li><a href="#none">长袖衬衫</a></li> <li><a href="#none">短袖T恤</a></li> <li><a href="#none">长袖T恤</a></li> </ul> </li> <li class="level1"> <a href="#none">卫衣</a> <ul class="level2"> <li><a href="#none">开襟卫衣</a></li> <li><a href="#none">套头卫衣</a></li> <li><a href="#none">运动卫衣</a></li> <li><a href="#none">童装卫衣</a></li> </ul> </li> <li class="level1"> <a href="#none">裤子</a> <ul class="level2"> <li><a href="#none">短裤</a></li> <li><a href="#none">休闲裤</a></li> <li><a href="#none">牛仔裤</a></li> <li><a href="#none">免烫卡其裤</a></li> </ul> </li> </ul> </div> </body> </html>
效果如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> <title>jQuery Demo</title> </head> <script type="text/javascript"> //等待dom元素加载完毕. $(function () { var $cr = $("#cr"); $cr.click(function () { if ($cr.is(":checked")) { alert("感谢支持"); } }) }) </script> <body> <input type="checkbox" id="cr" /><label for="cr">我已经阅读了上面制度.</label> </body> </html>
创建jQuery对象获取ID选择器，var $cr=$("#cr");
jQuery 选择器
写法简洁 例如 $("#cr")代替document.getElementById() $("cr")代替document.getElementsByTagName()
jQuery判断元素是否存在用长度判断，因为获取的是对象。
选择器一共有四种：基本选择器，层次选择器，过滤选择器和表单选择器。
基本选择器通过ID，class，标签名查找DOM元素，ID唯一，class可以重复使用。
$("#one").css("background","#bbffaa") 修改背景色，其他类似。
层次选择器 根据DOM元素之间的层次关系获取特定元素。
$("body div") $("body >div") 第一个是body下所有div 第二个是body下所有子div
过滤选择器 根据特定规则筛选DOM元素。
这部分使用参数可以看网上资料
表单选择器 方便获取表单中的数据
原文：https://www.cnblogs.com/cdjbolg/p/11847631.html
