Jquery

是一个javascript的库

功能概括

1、html 的元素选取

2、html的元素操作

3、html dom遍历和修改

4、js特效和动画效果

5、css操作

6、html事件操作

7、ajax异步请求方式

 

 

代码

$(document).ready(function(){

  $("button").click(function(){

    $("p").hide();

  });

});

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

美元符号定义 jQuery

选择符（selector）"查询"和"查找" HTML 元素

jQuery 的 action()执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p>元素

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

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

 

$("*") 选取所有元素

$(this) 选取当前 HTML 元素

$("p.intro") 选取 class 为 intro 的<p> 元素

$("p:first") 选取第一个 <p> 元素 在线实例

$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素

$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素

$("[href]") 选取带有 href 属性的元素 在线实例

$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的<a> 元素

$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的<a> 元素

$(":button") 选取所有 type="button" 的 <input> 元素 和<button> 元素

$("tr:even") 选取偶数位置的 <tr> 元素

$("tr:odd") 选取奇数位置的 <tr> 元素

 

 

 

鼠标事件     键盘事件   表单事件   文档/窗口事件

click           keypress(一直按)submit     load

dblclick(双击)    keydown     change     resize

mouseenter(穿过)keyup focus(在框里)         scroll

mouseleave         blur(不在框里)     unload

 

通过 jQuery，您可以使用toggle() 方法来切换hide() 和show() 方法。

 

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade方法：speed或callback前三个

fadeIn()

fadeOut()    $("#div2").fadeOut("slow");

fadeToggle()(淡入加淡出)

fadeTo()  jQuery fadeIn() 用于淡入已隐藏的元素。

语法:

$(selector).fadeIn(speed,callback);

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown()

slideUp()

slideToggle()

 

jQuery animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了250 像素：

实例

$("button").click(function(){

  $("div").animate({left:'250px'});

});

默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed或 absolute！

$("button").click(function(){

  $("div").animate({

    left:'250px',

    opacity:'0.5',

    height:'150px',

    width:'150px'

  });

});

$(document).ready(function(){

  $("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");

  });

});

$(document).ready(function(){

  $("button").click(function(){

    var div=$("div");  

    div.animate({left:'100px'},"slow");

    div.animate({fontSize:'3em'},"slow");

  });

});

 

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery效果函数，包括滑动、淡入淡出和自定义动画。

语法:

$(selector).stop(stopAll,goToEnd);

 

$("#stop").click(function(){

  $("#panel").stop();

});

 

链式结构

$("#p1").css("color","red")

  .slideUp(2000)

  .slideDown(2000);

 

 

获得内容 - text()、html()以及 val()允许同时设置多个属性

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML标记）

val() - 设置或返回表单字段的值

attr() 方法用于获取属性值。attr()

用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

删除

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

 

 

遍历树( <input type="hidden" value="${你要的元素名字}")  $(this).next(":input").val();

parent()方法返回被选元素的直接父元素。

parents()方法返回被选元素的所有祖先元素

parentsUntil()方法返回介于两个给定元素之间的所有祖先元素。

children() 方法返回被选元素的所有直接子元素。

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

水平

siblings()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()