jQuery

javaScript库[prototype ,YUI,ExtJS,jQuery]

jQuery能做什么？1.取得页面中的元素2.修改页面的外观3.改变页面的内容

4.响应用户有的页面操作5.为页面添加动态效果6.无需刷新页面即可从服务器获取信息

7.简化常见的javaScript任务

jQuery的特色

1.利用css的优势2.支持扩展3.抽象浏览器不一致性4总是面向集合5.将多行操作集于一行

$(selector).action

$("p.test").hide()- 隐藏所有出纳搜索=test的标签元素

 DOM对象  docuemnt.getElementById("trst");

jQuery对象  $("#trst").

jQuery 选择器

元素选择器

$("p") 选取页面中<p>元素 $("#demo") 选取页面中ID为demo的元素 $(".demo") 选取页面中类样式为intro的元素 

$(".content.box")-jQuery中的层级选择器

$("#content  box")选择所有的子孙元素

$("#content>.box") 只选择子元素

属性选择器

$("[attribute="value"]")

筛选

children（exe）匹配的子元素集合

find（exe）匹配后代  元素集合

parent（exe）匹配父 元素

parents（exe）匹配上级元素集合

siblings（exp）匹配的同辈元素集合

操作标签属性

获取属性值　　$("p").attr(name)    修改属性值  $("p").attr(key,value)  删除属性 $("p").removeAttr(name)

操作css  

获取样式 -css(name) 修改单个样式 -css(name,value)   -css({key1:value1,key2:value2......})

 $(function(){ $('#demo').css('background-color','#0c0').css('height','100px')})

 $(function(){ $('#demo').css({'background-color':'#0c0','height':'100px'})}) 

操作类样式

添加类样式 -addClass(class)  移除样式类-removeClass(class)

$("#demo").addClass("currtent1  current2") 

内容操作
获取设置内部html- html() ,html(val) 替代源标签的内容

获取或设置对象的值 -val(), val(val)

追加内容 -append(content)

删除节点 -remove()

jQuery 事件

绑定事件 -bind(type,fn) type有 click 

触发事件-trgger(type)

$(function(){
    $("#id").bind("click",function(){
         //  $("#regForm").trigger("submt");
              $("#regForm").submt();
    })
})

 

绑定活动事件   为了让后面添加的相同name按钮执行之前的绑定函数用live

 $(".btn").live("click",function(){}) 

jQuery 效果

显示隐藏效果（只能用于隐藏的）-show()直接显示

-show(speed[,callback])   speed:动画时长（毫秒）运行的快慢（slow，fast,normal)， callback 效果执行完毕执行指定函数

隐藏显示效果   -hide(speed[,callback]) 

滑动

向上滑动-slideUp(speed[,callback]),向下滑动 slideDown(speed[,callback]),

淡入淡出

淡入fadeIn(speed[,callback]),淡出fadeOut(speed[,callback]),

 自定义动画 

animate(params[,duration][callback])  params最终css效果 , duration 执行动画所用的时间

$(#demo).animate({"width":"400px","heigth":"200px"},1000);