jQuery的一些简单语法总结

本文是笔者在学习了基础的jQuery雨大之后留下的笔记，目的是方便需要时快速查询，同时，对于初学者来说，这也是一个不错的基础教程噢~

jQuery 有两个版本的可供下载：

a. Production version - 用于实际的网站中，已被精简和压缩。

b. Development version - 用于测试和开发（未压缩，是可读的代码）

 

jQuery 语法实例

$(this).hide()

演示 jQuery hide() 函数，隐藏当前的 HTML 元素。

$("#test").hide()

演示 jQuery hide() 函数，隐藏 id="test" 的元素。

$("p").hide()

演示 jQuery hide() 函数，隐藏所有 <p> 元素。

$(".test").hide()

演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

 

文档就绪函数

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

a. 试图隐藏一个不存在的元素

b. 获得未完全加载的图像的大小

 

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

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

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

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

 

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

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

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

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

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

 

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

实例

$("p").css("background-color","red");

 

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

·  把所有 jQuery 代码置于事件处理函数中

·  把所有事件处理函数置于文档就绪事件处理器中

·  把 jQuery 代码置于单独的 .js 文件中

·  如果存在名称冲突，则重命名 jQuery 库

 

jQuery 事件

下面是 jQuery 中事件方法的一些例子：

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

 

jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

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

 $("p").hide();

});

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

 $("p").show();

});

语法：

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

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：

实例

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

 $("p").hide(1000);

});

 

jQuery toggle()

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

显示被隐藏的元素，并隐藏已显示的元素：

实例

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

 $("p").toggle();

});

语法：

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

 

jQueryFading 方法

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

jQuery 拥有下面四种 fade 方法：

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

1、jQuery fadeIn() 方法

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

语法：

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

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

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

下面的例子演示了带有不同参数的 fadeIn() 方法：

实例

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

 $("#div1").fadeIn();

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

 $("#div3").fadeIn(3000);

});

2、jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

语法：

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

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

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

下面的例子演示了带有不同参数的 fadeOut() 方法：

实例

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

 $("#div1").fadeOut();

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

 $("#div3").fadeOut(3000);

});

3、jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法：

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

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

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

下面的例子演示了带有不同参数的 fadeToggle() 方法：

实例

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

 $("#div1").fadeToggle();

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

 $("#div3").fad eToggle(3000);

});

4、jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法：

$(selector).fadeTo(speed,opacity,callback);

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

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

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

下面的例子演示了带有不同参数的 fadeTo() 方法：

实例

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

 $("#div1").fadeTo("slow",0.15);

 $("#div2").fadeTo("slow",0.4);

  $("#div3").fadeTo("slow",0.7);

});

 

jQuery 滑动方法

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

jQuery 拥有以下滑动方法：

slideDown()、slideUp()、slideToggle()

1、jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

语法：

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

实例

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

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

});

2、jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

语法：

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

实例

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

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

});

3、jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

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

实例

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

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

});

 

jQuery 动画 - animate() 方法

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

语法：

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

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

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

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

下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：

实例

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

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

});

提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。

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

 

几乎可以用 animate() 方法来操作所有 CSS 属性，不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

 

jQuery  stop() 方法

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

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

语法

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

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

实例

$("div").stop()

按钮会停止当前活动的动画，但允许已排队的动画向前执行。

$("div").stop(true)

按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。

$("div").stop(true, true)

会立即完成当前活动的动画，然后停下来。

$("div").stop(false,true)

会立即完成当前活动的动画，但允许已排队的动画向前执行。

 

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

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

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

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

实例

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

 alert("Text: " + $("#test").text());

});

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

 alert("HTML: " + $("#test").html());

});

通过 text()、html() 以及 val() 方法来设置内容：

实例

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

 $("#test1").text("Hello world!");

});

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

 $("#test2").html("<b>Hello world!</b>");

});

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

 $("#test3").val("Dolly Duck");

});

 

获取属性 - attr()

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

实例

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

 alert($("#w3s").attr("href"));

});

 

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：

实例

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

 $("#w3s").attr("href","http://www.w3school.com.cn/jquery");

});

attr() 方法也允许您同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性：

实例

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

 $("#w3s").attr({

   "href" : "http://www.w3school.com.cn/jquery",

   "title" : "W3School jQuery Tutorial"

  });

});

 

jQueryappend() 方法

jQuery append() 方法在被选元素的结尾插入内容。

实例

$("p").append("Some appendedtext.");

jQueryprepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

实例

$("p").prepend("Someprepended text.");

 

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

实例

$("img").after("Some textafter");

$("img").before("Some textbefore");

 

通过 jQuery，可以很容易地删除已有的 HTML 元素。

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

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

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

1、jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素。

实例

$("#div1").remove();

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素：

实例

$("p").remove(".italic");

2、jQuery empty() 方法

jQuery empty() 方法删除被选元素的子元素。

实例

$("#div1").empty();

 

jQuery css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

实例

$("p").css("background-color");

设置 CSS 属性

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值：

实例

$("p").css("background-color","yellow");

设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size：

实例

$("p").css({"background-color":"yellow","font-size":"200%"});

 

jQuerywidth() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

下面的例子返回指定的 <div> 元素的宽度和高度：

实例

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

  vartxt="";

 txt+="Width: " + $("#div1").width() +"</br>";

 txt+="Height: " + $("#div1").height();

 $("#div1").html(txt);

});

jQueryinnerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

下面的例子返回指定的 <div> 元素的 inner-width/height：

实例

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

  vartxt="";

 txt+="Inner width: " + $("#div1").innerWidth() +"</br>";

 txt+="Inner height: " + $("#div1").innerHeight();

 $("#div1").html(txt);

});

jQueryouterWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

下面的例子返回指定的 <div> 元素的 outer-width/height：

实例

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

  vartxt="";

 txt+="Outer width: " + $("#div1").outerWidth() +"</br>";

 txt+="Outer height: " + $("#div1").outerHeight();

 $("#div1").html(txt);

});

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

实例

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

  vartxt="";

 txt+="Outer width (+margin): " +$("#div1").outerWidth(true) + "</br>";

 txt+="Outer height (+margin): " + $("#div1").outerHeight(true);

 $("#div1").html(txt);

});