1、jQuery入门（Head First笔记）

jQuery()函数

jQuery()，这个函数的主要工作是获取括号中指定的元素。缩写为$();

要使用jQuery获取元素，主要方法是使用选择器，这正是CSS中使用的同样的选择器。

jQuery元素选择器：

$("h1").hide();

jQuery类选择器：

$(".my_class");

jQuery ID选择器：

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

jQuery Syntax

The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(selector).action()

• A $ sign to define/access jQuery
• A (selector) to “query (or find)” HTML elements
• A jQuery action() to be performed on the element(s)

Examples:

$(this).hide() - hides the current element.

$(“p”).hide() - hides all

elements.

$(“.test”).hide() - hides all elements with class=”test”.

$(“#test”).hide() - hides the element with id=”test”.

jQuery hide()

隐藏元素

$("h1").hide();

jQuery hide(), jQuery hide()

With jQuery, you can hide and show HTML elements with the hide() and show() methods.

Syntax:

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

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

The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: “slow”, “fast”, or milliseconds.

The optional callback parameter is a function to be executed after the hide() or show() method completes

jQuery toggle()

With jQuery, you can toggle between the hide() and show() methods with the toggle() method.

Syntax:

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

The optional speed parameter can take the following values: “slow”, “fast”, or milliseconds.

The optional callback parameter is a function to be executed after toggle() completes.

slideUp()、slideDown()、slideToggle()

元素向上滑动，直至高度为0。

$(".my_class").slideUp();

元素向下滑动

$("div").slideDown();

元素原本是向上滑动的，则会向下滑动。元素原本是向下滑动的，则会向上滑动。

$("div").slideToggle();

jQuery slideUp() Method

The jQuery slideUp() method is used to slide up an element.

Syntax:

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

The optional speed parameter specifies the duration of the effect. It can take the following values: “slow”, “fast”, or milliseconds.

The optional callback parameter is a function to be executed after the sliding completes.

jQuery slideToggle() Method

The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.

If the elements have been slid down, slideToggle() will slide them up.

If the elements have been slid up, slideToggle() will slide them down.

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

jQuery fadein()、jQuery fadeOut()

使元素淡入

$("img").fadeIn();

使元素淡出，直到不可见

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

jQuery fadeIn() Method

The jQuery fadeIn() method is used to fade in a hidden element.

Syntax:

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

The optional speed parameter specifies the duration of the effect. It can take the following values: “slow”, “fast”, or milliseconds.

The optional callback parameter is a function to be executed after the fading completes.

jQuery fadeOut() Method

The jQuery fadeOut() method is used to fade out a visible element.

Syntax:

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

jQuery fadeToggle() Method

The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.

If the elements are faded out, fadeToggle() will fade them in.

If the elements are faded in, fadeToggle() will fade them out.

Syntax:

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

jQuery fadeTo() Method

The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).

Syntax:

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

The required speed parameter specifies the duration of the effect. It can take the following values: “slow”, “fast”, or milliseconds.

The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).

The optional callback parameter is a function to be executed after the function completes.

ready()

文档加载完毕后，运行function里面的内容

$(document).ready(function() {

});

click()

将ID为clickMe的元素与click事件连接

$(document).click(function() {

});

​