jQuery基础
jQuery对象和DOM对象
DOM对象为文档对象模型，可以理解为页面上的标签，标签都是DOM元素节点。
jQuery对象通过jQuery包装DOM对象后产生的对象。
jQuery对象都必须加上$，$读为jQuery
以下是一个jQuery导航栏的例子，熟悉下
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "http://www.w3.org/1999/xhtml">衣服导航栏jQuery Demo class="box">class="menu">
- class="level1"> "#none">衬衫
class="level2">
- "#none">短袖衬衫
- "#none">长袖衬衫
- "#none">短袖T恤
- "#none">长袖T恤
- class="level1"> "#none">卫衣
class="level2">
- "#none">开襟卫衣
- "#none">套头卫衣
- "#none">运动卫衣
- "#none">童装卫衣
- class="level1"> "#none">裤子
class="level2">
- "#none">短裤
- "#none">休闲裤
- "#none">牛仔裤
- "#none">免烫卡其裤
效果如下：
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "http://www.w3.org/1999/xhtml">判断勾选框jQuery Demo "checkbox" id="cr" />
创建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操作
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "http://www.w3.org/1999/xhtml">jQuery Demo "我最讨厌的水果">我最讨厌的水果？
- '苹果'>苹果
- '橘子'>橘子
- '菠萝'>菠萝
以上代码中，实现了查找元素节点和查找属性节点。
创建元素节点
$(html);
根据HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQue对象返回。
例如创建两个
var $li_1=$("");
var $li_2=$("");
将两个元素插入文档中。
$("ul").append($li_1);
$("ul").append($li_2);
单个元素要写$("")
创建文本节点，属性节点都是类似的。
不论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) { } })$.ajax()
Cookie存储网页信息
设置Cookie
.cookie(COOKIE_NAME, 'test', { path: '/', expires: 10 });//KEY VALUE OPTIONS 三个参数
获取Cookie
$.cookie(COOKIE_NAME);