首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jquery 学习 (2)

2013-09-07 
jquery 学习 (二)1)jquery对象和dom对象区别及相互转换2)jquery和其他库冲突解决3)css选择器和jquery选择

jquery 学习 (二)

1)jquery对象和dom对象区别及相互转换

2)jquery和其他库冲突解决

3)css选择器和jquery选择器

3.1)基本选择器(id选择器、类选择器、元素选择器、*选择器、多个选择器以逗号分隔的集合选择器)

3.2)层次选择器(后代元素、子元素)。eg.  $("ul li") 和 $("ul > li"),一个是所有后元素,一个是直接子元素。 $("ul").next("div") 下一个同辈 ,$("ul").nextall("div") 后面的所有同辈,slibings()所有同辈,不管前还是后。

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

热点排行