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对象操作的。