//DOM对象和jQuery对象
DOM：Document Object Model：文档对象模型
DOM对象表示: var variable;
可以通过JavaScript中的getElementById 或者getElementsByTagName来获取元素节点。
DOM对象可以使用js中的方法。eg: var ObjHtml=document.getElementById("id").innerHtml;
jQuery对象：就是通过jQuery包装DOM对象后产生的对象。
jQuery对象表示：ver $variable;
jQuery对象可以使用jQuery中的方法。注意innerHtml方法是JS中的方法，Jquery对象不能使用。
$("#id").html(); //这行代码产生的结果等同于 document.getElementById("id").innerHtml;
一定要注意哪些方法是JS中的方法，哪些方法是JQuery中的方法。DOM对象只能使用JS中的方法，jQuery对象只能使用jQuery中的方法。
如果串用会报错的。
//DOM对象和jQuery对象的相互转换：
1，jQuery对象转DOM对象：
var $cr=$("#cr");//待转jQuery对象
var cr=$cr[0]; //方法一：jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。DOM对象
var cr=$cr.get(0);//方法二：这种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。
2，DOM对象转jQuery对象：
var cr=document.getElementById("cr");//DOM对象
var $cr=$(cr);//jQuery对象
注意：平时使用的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。
//jQuery选择器
1，继承了CSS选择器的风格。
2，jQuery选择器分类
|--基本选择器
|--层次选择器
|--过滤选择器
|--基本过滤
|--内容过滤
|--可见性过滤
|--属性过滤
|--子元素过滤
|--表单对象属性过滤
|--表单选择器
-详细说明：
(1)基本选择器是jQuery中最新常用的选择器，也是最简单的，它通过id,class和标签名来查找DOM元素。$("#id")、$(".cls")、$("p")
(2)层次选择器通过DOM元素之间的层次关系来获取特定元素，例如：后代元素、子元素、相邻元素和兄弟元素。
|--后代元素：$("ancestor descendant") //eg:$("div span") //选取<div>里的所有的span元素
|--子元素 ：$("parent>child") //eg:$("div>span") //选取<div>元素下元素名是<span>的子元素
|--相邻元素：$("prev + next") //eg:$(".one + div")//获取class为one的下一个div元素
|--兄弟元素：$("prev~siblings") //eg:$("#two~div") //获取id为two元素的所有div兄弟元素
(3)过滤选择器
a：基本过滤选择器：格式：$("[标签名][选择器]") 举例：
:first :header $("div:first")//:first选择器
:last :animated $("div:gt(3)")//:gt()选择器
:not(selector) :eq(index)
:gt(index) :lt(index)
:even//索引是奇数的所有元素 :odd
b:内容过滤选择器：格式：$("[标签名][选择器]")
:contains(text)//选取含有文本内容为text的元素 :empty //选取不包含子元素或者文本的空元素
:has(selector)//选取含有选择器所匹配的元素的元素 :parent //选取含有子元素或者文本的元素
c:可见性过滤选择器
:hidden//选取所有不可见的元素
:visible//选取所有可见的元素
注意：在可加性选择器中，需要注意选择器:hidden，它不仅包括样式属性display为“none”的元素，也包括文本隐藏域(<input type="hidden">)
和visibility:hidden之类的元素。
d:属性过滤选择器
[attribute] [attribute*=value]
[attribute=value] [selector1][selector2][selectorN]//用属性选择器合并成一个复合属性选择器
[attribute!=value]
[attribute^=value]
[attribute$=value]
e:子元素过滤选择器
:nth-child(index/even/odd/equation) //选取每个父元素下的第index个子元素或者奇偶元素（index从1开始）
:first-child //选取每个父元素的第一个子元素 $("ul li:first-child")//选取每个ul下的第一个li元素
:last-child
:only-child //如果某个子元素是其父元素中的唯一一个子元素，那么将会被匹配。
f:表单对象属性过滤选择器：此选择器主要是对所选择的表单元素进行过滤，比如选择被选中的下拉框，多选框等等。
:enabled //选取所有可用元素 $("#form1:enable") //选取id为form1的表单内的所有可用元素。
:disabled //选取所有不可用元素
:checked //选取所有被选中的元素(单选框、复选框) $("input:checked") //所有被选中的<input>的元素
:selected //选取所有被选中的选项元素。
(4)表单选择器：为了更加灵活地操作表单。
:input //选取所有的<input>、<textarea>、<select>、<button>元素
:text //选取所有的单行文本框
:password //选取所有的密码框
:radio //选取所有的单选框
:checkbox //选取所有的多选框
:submit //选取所有的提交按钮
:image //选取所有的图像按钮
:reset //选取所有的充值按钮
:file //选取所有的上传域
:button //选取所有的按钮
:hidden //选取所有的不可见元素
***选择器中的注意事项***
1、选择器中含有特殊符号的注意事项
(1)含有“.”、“#”、“(”、“)”、“[”、“]”
例如：<div id="id#b">bb</div> 获取方式：$(#id\\#b) 要转移特殊字符"#",转义符号为\\
<div id="id[1]">cc</div> 获取方式：$(#id\\[1\\])
(2)属性选择器的引号问题
例如：$(input[name=‘type‘])
2、选择器中含有空格的注意事项
例如：var $t_a=$(".test :hidden");//带空格，选取class为test的元素里面的隐藏元素。实为test后代中隐藏的元素
var $t_b=$(".test:hidden");//不带空格，选取class为test并隐藏的元素
//jQuery中的事件
1.事件绑定
bind(type,data,fn)
|--type:事件类型，包括：blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup
|--data:可选参数，作为event.data属性值传递给事件对象的额外数据对象。
|--fn:用来绑定的处理函数。
例如：$(function(){
$("#panel h5.head").bind("mouseover",function(){
$(this).next("div.content").show();
});
$("#panel h5.head").bind("mouseout",function(){
$(this).next("div.content").hide();
});
})
简写形式如下：
$(function(){
$("#panel h5.head").mouseover(function(){
$(this).next("div.content").show();
});
$("#panel h5.head").mouseout(function(){
$(this).next("div.content").hide();
});
})
2.合成事件
jQuery有两个合成事件，hover()方法和toggle()方法，这两个方法都是jQuery自定义的方法。
(1)hover()方法：模拟光标悬停事件，当光标移动到元素上时，会触发指定的第一个函数（enter）；当光标移除这个元素时，会触发指定的第二个函数（leave）。
语法结构：hover(enter,leave);
将上面的代码用hover()方法替换如下：
$(function(){
$("#panel h5.head").hover(function(){
$(this).next("div.content").show();
},function(){
$(this).next("div.content").hide();
});
})
(2)toggle()方法：用于模拟鼠标连续单击事件。第一次单击触发第一个函数；第二次单击触发第二个函数，，重复对几个函数的轮番调用。
语法结构：toggle(fn1,fn2,,,,fnN);
将上面的代码用hover()方法替换如下：
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next(div.content).show();
},function(){
$(this).next(div.content).hide();
});
})
3.事件冒泡
(1)解释冒泡现象：
用例子来解释冒泡事件：
<script type="text/javascript">
$(function(){
$("span").click(function(){
var span_txt=$("#msg").html()+"<p>内存元素span被单击</p>";
$("#msg").html(span_txt);
});
$("#content").bind("click",function(){
var div_txt=$("#msg").html()+"<p>外层元素div被单击</p>";
$("#msg").html(div_txt);
})
$("body").bind("click",function(){
var body_txt=$("#msg").html()+"<p>body被单击</p>";
$("#msg").html(body_txt);
})
})
</script>
<div id="content">
<span>内层span元素</span>
</div>
<div id="msg"></div>
冒泡现象：当单击内部<span>元素时，就会触发外部<div>元素和<body>元素上绑定的的click事件。这是由冒泡事件引起的。
元素的click事件会按照以下顺序冒泡：
(1)<span>
(2)<div>
(3)<body>
之所以称为冒泡，是因为时间会按照DOM的层次结构像水泡一样不断向上直至顶端。
(2)事件冒泡引发的问题：
|--事件对象:
$("element").bind("click",function(event){ //event:事件对象
});
|--停止事件冒泡：
停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在jQuery中提供了stopPropagation()方法来停止事件冒泡。
上述例子停止冒泡代码如下：
$("span").click(function(event){
var span_txt=$("#msg").html()+"<p>内存元素span被单击</p>";
$("#msg").html(span_txt);
event.stopPropagation();//return false;
});
$("#content").bind("click",function(event){
var div_txt=$("#msg").html()+"<p>外层元素div被单击</p>";
$("#msg").html(div_txt);
event.stopPropagation();//return false;
})
|--阻止默认行为：网页中的元素有自己默认的行为，比如单击超链接后回跳转，单击“提交”按钮后表单会提交，有时需要阻止元素的默认行为。
在jQuery中，提供了preventDefault()方法来阻止元素的默认行为。
例如:
$("#sub").bind("click",function(evet){
$("#msg").html("hello world");
event.preventDefault();//阻止表单自动提交行为
//或者用 return false;来代替event.preventDefault();
//return false;也可以阻止表单提交，也可以阻止冒泡事件。
})
4.事件对象的属性
(1)event.type(); //获取到事件的类型
(2)event.preventDefault(); //阻止元素默认行为
(3)event.stopPropagation(); //阻止时间的冒泡
(4)event.target(); //获取到触发事件的元素
(5)event.relatedTarget(); //访问相关元素
(6)event.pageX();/even.pageY()//获取到光标相对于页面的x坐标和y坐标
(7)event.which(); //在鼠标单击事件中获取到鼠标的左中右键，在键盘事件中获取到键盘的按键。
(8)event.metaKey(); //键盘事件中获取<ctrl>按键
(9)event.originalEvent(); //指向原始的事件对象。
5移除事件
unbind([type][,data]); //[type]:事件类型 [data]:要移除的函数名
(1)如果没有参数，则删除所有绑定的事件
(2)如果提供了事件类型作为参数，则只删除该类型的绑定事件
(3)如果提供了函数名（第二个参数），则只删除该函数。
对于只需要触发一次，随后就要立即解除绑定的情况，可以使用one()方法，这个方法与bind()方法类似。
one(type,[data],fn);
6.模拟操作
trigger(type [,data])方法有两个操作，第一个参数是要触发的事件类型，第二个参数是要传递给事件处理函数的附加数据。以数组形式传递。
$("#btn").trigger("click");
执行默认操作：trigger()方法触发事件后，会执行浏览器默认的操作。例如：
$("input").trigger("focus");//此行代码不仅会触发<input>元素绑定的focus事件，也会使<input>元素本身得到焦点。
如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法——triggerHandler()方法。
$("input").triggerHandle("focus");//只触发绑定的focus事件，不会得到焦点。
7.其他用法
(1)绑定多个事件类型
$(function(){
$("#div").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
})
})
(2)添加事件命名空间，便于管理
$(function(){
$("div").bind("click.plugin",function(){
$("body").append("<p>click事件</p>");
});
$("div").bind("mouseover.plugin",function(){
$("body").append("<p>mouseover事件</p>");
});
$("div").bind("dblclick",function(){
$("body").append("<p>dblclick事件</p>");
});
$("#button").click(function(){
$("div").unbind(".plugin");//等价于：$("div").unbind("click").unbind("mouseover");
})
})
在所绑定的事件类型后面添加命名空间，这样在删除事件时只需要指定命名空间即可。
单击<button>后，“plugin”的命名空间被删除，而不在“plugin”的命名空间的“dblclick”事件依然存在。
(3)相同事件名称，不同命名空间执行方法
$(funtion(){
$("div").bind("click",function(){
$("body").append("<p>click事件</p>");
});
$("div").bind("click.plugin",function(){
$("body").append("<p>click事件</p>");
});
$("#btn").click(function(){
$("div").trigger("click!");//注意click后面的感叹号，其作用是不包含在命名空间中的click方法。
})
})
//jQuery中的动画
jQuery中的任何动画效果都可以指定3种速度参考：slow:600ms、normal:400ms、fast:200ms
1.show()方法和hide()方法 //会同时改变内容的高度、宽度、不透明度
show()方法和hide()方法让元素动起来
如果上述两个方法不带参数，意思是将匹配的元素立刻隐藏或显示。
如果希望在调用时慢慢显示或隐藏，可以为show和hide方法指定速度参数。
例：$("div").show("slow");
$("div").show(1000);
$("div").hide("fast");
2.fadeIn()方法和fadeOut()方法//只改变元素的不透明度
fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素消失。
fadeIn()方法则相反。
3.slideUp()方法和slideDown()方法//只会改变元素的高度
slideUp();//元素将由下到上缩短隐藏
slideDown();//元素将由上到下延伸显示
4.自定义的动画animate()方法
(1)语法结构：animate(params,speed,callback);
参数说明：params:一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2",...}
speed:速度参数，可选
callback:在动画完成时执行的函数，可选。
(2)累加累减动画
function(){
$("#panel").animate({left:‘+=500px‘},3000);
});
(3)多重动画
|--同时执行多个动画：向右滑动并同时向下滑动，并同时变大。
$("#panel").click(function(){
$("#panel").animate({left:‘500px‘,top:‘300px‘,height:‘200px‘,width:‘200px‘},300);
});
|--按顺序执行多个动画：按顺序执行动画
$("#panel").click(function(){
$(this).animate({left:‘500px‘},300);
$(this).animate({top:‘300px‘},300);
$(this).animate({height:‘200px‘},300);
$(this).animate({width:‘200px‘},300);
});
(4)综合动画和动画回调函数
$("#panel").css("opacity","0.5");
$("#panel").click(function(){
$(this).animate({left:‘400px‘,height:‘200px‘,opacity:‘1‘},3000)
.animate({top:‘200px‘,width:‘200px‘},3000)
.fadeOut("slow").fadeIn("fast").animate({top:‘0px‘,width:‘100px‘},3000)
.animate({left:‘0px‘,height:‘100px‘,opacity:‘0.5‘},3000,function(){
alert("hahahaha");
});
5.停止动画和判断动画是否处于动画状态
(1)停止元素的动画
stop([clearQueue][,gotoEnd]);//两个参数都是布尔型的
|--参数clearQueue代表是否要清空未执行完的动画队列；true:清空
|--参数gotoEnd代表是否直接将正在执行的动画跳转到末状态。true:跳到末状态
(2)判断元素是否处于动画状态
if(!$(element).is("animated")){//判断元素是否处于动画状态
//如果没有进行的动画，则添加新动画。
}
6.其他的动画方法
(1)toggle(speed,[callback]);//此方法可以切换元素的可见状态。如果元素时可见的，则切换为隐藏；如果元素时隐藏的，则切换为可见。
eg://使用toggle()方法来代替hide()方法和show()方法
$("#panel h5.head").click(function(){
$(this).next("div.content").toggle();
})
相当于:
$("#panel h5.head").click(function(){
$(this).next("div.content").hide();
},function(){
$(this).next("div.content").show();
})
(2)slideToggle(speed,[callback]);//此方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。
(3)fadeTo(speed,opacity,[callback]);//此方法可以把元素的不透明度以渐进的方式调整到制定的值。这个动画只调整元素的不透明度，即匹配的元素的高度和宽度不会发生变化。
7.总结
|--
hide()和show() //同时修改多个样式属性即高度、宽度和不透明度
toggle() //用来代替hide()方法和show()方法，所以会同时修改多个样式属性即高度、宽度和不透明度
fadeIn()和fadeOut() //只改变不透明度
fadeTo() //只改变不透明度
slideUp()和slideDown() //只改变高度
slideToggle() //用来代替slideUp()和slideDown()，所以只改变高度
animate() //属于自定义动画的方法，以上各种动画方法实质内部都调用了animate()方法。此外，直接使用animate()方法还能自定义其他的样式属性。例如：left、marginLeft、scrollTop
|--动画队列：
(1)一组元素上的动画效果：
当在一个animate()方法中应用多个属性时，动画是同时发生的。
当以链式的写法应用动画时，动画是按照顺序发生的。
(2)多组元素上的动画效果：
默认情况下，动画都是同时发生的。
当以回调的形式应用动画方式时，动画是按照回调顺序执行的。
//表单应用
1.表单应用
(1)单行文本框应用：获取和失去焦点改变样式
(2)多行文本框应用