jquery 学习 （二）
1）jquery对象和dom对象区别及相互转换
var $cr = $("#cr");
var cr = $cr[0]; #方法1
var cr = $cr.get(0) #方法2
var cr = document.getElementById("cr");
var $cr = $(cr);#dom对象转换为jquery对象
$(document).ready(function(){
var $cr = $("#cr");
var cr = $cr[0];
$cr.click(function(){
if (cr. checked){
alert('aaa');
}
})
})
$(document).ready(function(){
var $cr = $("#cr");
$cr.click(function(){
if ($cr. is(":checked")){
alert('aaa');
}
})
})
2）jquery和其他库冲突解决
3）css选择器和jquery选择器
需要注意，$("#tt")获取的永远是对象，即使网页上没有此元素，检测某个元素在网页上是否存在，不能
if ($("#tt")){}
应该根据长度来判定
if ($("#tt").length>0){}
3.1）基本选择器（id选择器、类选择器、元素选择器、＊选择器、多个选择器以逗号分隔的集合选择器）
3.2）层次选择器（后代元素、子元素）。eg. $("ul li") 和 $("ul > li"),一个是所有后元素，一个是直接子元素。 $("ul").next("div") 下一个同辈 ,$("ul").nextall("div") 后面的所有同辈，slibings（）所有同辈，不管前还是后。
$("div span")选取div里的所有span元素
$("div>span")选取div的span子元素，上一个为后代元素
$(".one+div")选取class为one的下一个div同辈元素
$("#two~div") 选取id为two后面的所有div同辈元素
3.3）过滤选择器
3.3.1）基本过滤选择器 :first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) :header :animated :focus
3.3.2）内容过滤选择器 :contains(text) :empty :has(selector) :parent
3.3.3）可见性过滤选择器 :hidden :vidible
3.3.4）属性过滤选择器
3.3.5）子元素过滤选择器
3.3.6）表达对象属性过滤选择器
3.4）表单选择器
选择器插件：
1）moreselectors for query
2）basic path
4）jquery中的dom操作
4.1）查找dom节点（使用选择器）
4.2）查找属性节点 var $para = $("p");var p_txt = $para.attr("title“）获取p节点的title属性
4.3）创建节点
var $li_1 = $("<li></li>");
var $li_1 = $("<li></li>");
$("ul").append($li_1);
$("ul").append($li_2);
4.4）插入节点
append,appendto,prepend,prependto,after,insert after,befor,insert before
4.5）移动节点
4.6）删除节点 remove、detatch、empty
4.6）复制节点 clone
4.7）替换节点
4.8）包裹节点 wrap wrapall
4.9）属性操作 attr（）获取属性，removeattr（）删除属性
4.10）样式操作 $("p").attr("class","high") 设置p元素的class为high
4.11）追加样式（addclass）、移除样式（removeclass）、切换样式（toggle）、判断是否含有某个样式 .hasclass()
4.12）设置和获取html、文本和值html（）方法获取html内容 text（）方法获取文本内容 val（）设置和获取元素的值，且能够使select、checkbox、radio选中
4.13）遍历节点 childeren（），next（）pref（）sibings（）closet（）parent（）
4.14）css dom操作 读取和设置style对象的各种属性。 元素定位：offset（） position（）scrolltop（）scrollleft（）
5）jquery中事件和动画
$(document).ready()，dom就绪时就执行
$(window).load(function(){})。如果绑定在window或者元素上，则等待内容加载完毕才触发
5.1）事件绑定
bind():第一个参数事件类型、第二个参数可选，作为event.data属性值传递给事件对象的额外数据对象 第三个参数则用来绑定处理函数
$(function()){
$("#panel h5.head").bind("click",function(){
$(this).next().show();
}
}
点击“标题”连接，内容就展开
$(function()){
$("#panel h5.head").bind("click",function(){
var $content = $(this).next();
if ($content.is(":vidible")){
$content.hide();
}else{
$(this).next().show();
}
}
}
$(function()){
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
}).bind("mouseout",function(){
$(this).next().hide();
}
}
可以简写绑定事件
$(function()){
$("#panel h5.head").mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
}
}
5.2）合成事件
hover() 当光标移动到元素上时，会触发指定的第一个函数（enter），移出时触发指定的第二个函数（leave）
toggle（）用于模拟鼠标连续单击事件，第一个单击触发第一个函数，第二次触发第二个，如果有更多函数，则依次触发。也可以用来控制元素的可见状态
5.3）事件冒泡
按照dom的层级
对事件的作用范围进行控制
5.4）事件对象（event），停止事件冒泡（stoppropagation）$('#content').bind("click",function(event)){
var txt = $('#msg').html()+"aaa";
$('#msg').html(txt);
event.stoppropagation();
}
5.5）阻止默认行为
网页中的元素都有自己的默认行为，例如单击链接后会跳转，单击提交按钮会表单提交。有时候需要阻止元素的默认行为。
$(funciton(){
$("#sub").bind("click",function(event){
var username = $("#username").val();
if (username==""){
$("#msg").html("<p>用户名不能为空</p>");
event.preventDefault();
}
}
}
想同时停止冒泡和阻止默认行为，可以在做了一个之后，return false
5.6）事件对象的属性
event.type获取事件类型
$("a").click(function(event){
alter(event.type);
return false;//阻止链接跳转
}
event.target 获取到触发事件的元素
event.pageX event.pageY 获取光标相对于页面的x坐标和y坐标
event.which 获取鼠标单击事件中的左、中、右键
5.7）移除事件 unbound
5.8）模拟操作
$("#btn").trigger("click")
触发自定义事件
$("#btn").bind("myclick",function(){
..
}
$("#btn").trigger("myclick");
传递数据
$("#btn").bind("myclick",function(event,message1,message2){
..
}
$("#btn").trigger("myclick",["参数1“，”参数2“]);
执行默认操作
$("input").trigger("focus"); 绑定并触发默认行为，即获取焦点
$("input").triggerHander("focus"); 仅绑定
5.9）绑定多个事件
$(function(){
$("div").bind("mouseover mouseout",function(){}
}
5.10)添加事件命名空间，便于管理，相同事件名称，不同命名空间执行方法
5.11）jquery 中的动画
show（）和 hide()方法 改变元素高度宽度不透明度
$("element").hide() 等价于 $("element").css("display","none");
$("element").show("slow");
$("element").show(1000);
fadein()降低元素不透明度
fadeout()
slideup()slidedown() 改变元素的高度
animate(params,speed,callback)自定义动画方法,第一个参数：一个包含样式属性及值的映射 第二个参数：速度参数，可选 第三个参数：在动画完成时的函数，可选
动画－－－－－－－－－－－－－－－－－－待续－－－－－－－－－－－－－－－－－
6）ajax
不需要插件支持、优秀的用户体验（不用刷新页面）、提高web性能（按须发送，无需整个表单）、减轻服务器和带宽的负担
$.ajax():最底层的方法
load、$.get()、$.post() :第二层
$.getscript() 、$.getjson() 第三层
6.1）load(url,[.data],[.callback]) 载入远程html代码并插入dom中,第二个参数为发送至服务器的key/value数据
1）载入html文档
<input type="button" id="send" value="ajax get"/>
<div class="comment">已有评论</div>
<div id="resText"></div>
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
}
}
通过单击id为send的按钮来调用load（）方法，然后将html的内容加载到id为restext的元素里
2）筛选载入的html文档
$("#resText").load("test.html .para");只需加载test.html页面中class为para的内容
3）传递方式
load（）方法的传递方式根据参数data来自动指定，如果没有传递参数，则采用get方式传递，反之，则会自动转换为post方式
4）回调参数
$("#resText").load("test.html",function(responsetext,textstatus,xmlhttprequest)
请求返回的内容
请求状态 success、error、timeout、not modified
xmlhttprequest对象
load方法通常用来从web服务器上获取静态的数据文件
$.get()和$.post()方法是jquery中的全局函数，而在此之前讲的jquery方法都是对jquery对象操作的。