JQuery

jQuery

jQuery语法是为HTML元素的选取编制，可以对元素执行某些操作

基础语法：$（selector）.action(   )

例如：$(this).hide(    ) 隐藏当前元素

　　　$("p").hide(   ) 隐藏所有p标签

　　　$(".test").hide()  隐藏所有 class="test" 的所有元素

　　　$("#test").hide() 隐藏所有 id="test" 的元素

jQuery 元素选择器

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery 事件

$(document).ready(function)           当文档完成加载时

$(selector).click(function)　　　　点击事件

$(selector).dblclick(function)          双击事件

$(selector).focus(function)              聚焦事件

$(selector).mouseover(function)       鼠标悬停事件

jQuery 隐藏和显示

hide（）隐藏

show（）显示

toggle（）切换隐藏  /  显示

淡入淡出

fadeIn（）淡入已隐藏的元素

fadeOut（）淡出可见的元素

fadeToggle（）切换淡出  /  淡入

fadeTo（）允许渐变为给定的不通明的值

滑动

slideDown（）向下滑动

slideUp（）向上滑动

slideToggle（）切换向上 /  向下

动画

animate（）用于创建自定义动画

animate（）---操作多个属性，用逗号隔开

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

animate（）-----使用绝对值   也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

animate（）------使用预定义的值    "show"、"hide" 或 "toggle"

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

animate（）-------使用队列功能

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

jQuery 停止动画

stop（）　　停止动画或效果，在它们完成之前。

$("#stop").click(function(){
  $("#panel").stop();
});

jQuery Callback 函数

当动画 100% 完成后，即调用 Callback 函数。

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

jQuery - Chaining

可以在相同的元素上运行多条jQuery命令

方法1：$("#p1").css("color","red").slideUp(2000).slideDown(2000);

方法2：$("#p1").css("color","red")
  　　　.slideUp(2000)
 　　　 .slideDown(2000);

获取

• text()  设置或返回所选元素的文本内容
• html()  设置或返回所选元素的内容（包括 HTML 标记）
• val()  设置或返回表单字段的值
• arrt（）用于获取属性值。