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元素。
这部分使用参数可以看网上资料
表单选择器 方便获取表单中的数据
jQuery中的DOM操作
<!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"> //<![CDATA[ $(function () { var $a = $("a");//获取a节点 var a_text = $a.attr("title");//attr获取节点属性 var $p = $("ul li:eq(2)");//获取li第三个数据 var p_text = $p.attr("title"); var p_txt = $p.text(); alert(a_text); alert(p_text); alert(p_txt); }); </script> <body> <a title="我最讨厌的水果">我最讨厌的水果？</a> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html>
以上代码中，实现了查找元素节点和查找属性节点。
创建元素节点
$(html);
根据HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQue对象返回。
例如创建两个<li>元素，作为子节点加入<ul>
var $li_1=$("<li></li>");
var $li_2=$("<li></li>");
将两个元素插入文档中。
$("ul").append($li_1);
$("ul").append($li_2);
单个元素要写$("<p></p>")
创建文本节点，属性节点都是类似的。
不论HTML里面的代码多么复杂，创建的方法都是一样的。
插入节点，用的是append方法。
删除节点，使用Remove()方法。
$("ul li:eq(1)").remove(); 删除ul中第二个li元素节点
获取属性和设置属性
获取属性,给attr方法一个参数：var $para=$("p");
var text=$para.attr("title");
设置属性则传递两个值 $("p").attr("title","your title");//设置单个属性的值
$("p").attr({"title":"your title","name":"your name"});
获取样式和设置样式
获取样式同样使用attr方法，class也是元素的属性。设置的方法也一样。
追加样式:addClass().
例如： .another{
font-style:italic;//斜体
color:blue;//字体颜色蓝色
}
$("p").addClass("another");//追加another类
CSS 规定 1.如果一个元素添加了多个class值，合并样式
2.如果有不同的class设置同一样式，则后者覆盖前者。
切换样式
toggle() 控制重复行为
遍历节点
children()看子节点
next()后面紧邻的同辈元素
prev()前面紧邻的同辈元素
siblings()获取所有同辈元素
CSS-DOM操作
获取和设置样式属性
获取样式属性：$("p").css("color");
设置样式属性:$("p").css("color","red");//单个 多个的方法和attr一样
设置透明度 $("p").css("opcaity","0.5");//设置半透明
Ajax 异步JS和XML
$.ajsx(options)是jQuery最底层的实现。
$.ajax({ type: "post", url: "../Handler/Demo.ashx", data: { "empno": empno }, cache: false, success: function (result) { } })
Cookie存储网页信息
设置Cookie
.cookie(COOKIE_NAME, 'test', { path: '/', expires: 10 });//KEY VALUE OPTIONS 三个参数
获取Cookie
$.cookie(COOKIE_NAME);