Getting Started with jQuery in 60 Minutes

Introduction to jQuery

jQuery is a JavaScript library that greatly simplifies JavaScript programming using jQuery.

The jQuery library includes the following features:

HTML element selection

HTML element manipulation

CSS manipulation

HTML event functions

JavaScript effects and animations

HTML DOM traversal and modification

AJAX

Utilities

jQuery installation and use

1. There are two versions of jQuery available for download:

Production version - used in the actual website, stripped down and compressed.

Development version - for testing and development (uncompressed, readable code)

Both versions can be downloaded from jQuery.com .

2. The jQuery library is a JavaScript file that you can use by referencing it with the HTML <script> tag:
<head>
<script src="jquery.js"></script>
</head>
jQuery Basic Syntax
The jQuery syntax is programmed for the selection of HTML elements, and can perform certain operations on the elements.
The basic syntax is: $(selector).action()

dollar sign defines jQuery

selectors "query" and "find" HTML elements

jQuery's action() performs actions on elements

jQuery selectors

jQuery's selectors allow you to operate on groups of HTML elements or individual elements. The main selectors are: element selectors, attribute selectors and CSS selectors.

1. Element selector

jQuery uses CSS selectors to select HTML elements.
$("p") selects the <p> element.
$("p.intro") selects all <p> elements with class="intro".
$("p#demo") selects all <p> elements with id="demo".

2. Attribute selector

jQuery uses XPath expressions to select elements with a given attribute.
$("[href]") selects all elements with the href attribute.
$("[href='#']") selects all elements with href value equal to "#".
$("[href!='#']") selects all elements with href value not equal to "#".
$("[href$='.jpg']") selects all elements whose href value ends with ".jpg"

3. CSS selectors

jQuery CSS selectors can be used to change the CSS properties of HTML elements.

The following example changes the background color of all p elements to red:
$("p").css("background-color","red");
jQuery events

Common event methods and their descriptions

event Event description

click() Trigger, or bind a function to the click event of the specified element

dblclick() Trigger, or bind a function to the double click event of the specified element

load() Trigger, or bind a function to, the load event of the specified element

submit() 触发、或将函数绑定到指定元素的 submit 事件

toggle() 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。

change() 触发、或将函数绑定到指定元素的 change 事件

ready() 文档就绪事件（当 HTML 文档就绪可用时）

focus() 触发、或将函数绑定到指定元素的 focus 事件

mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件

mouseout() 触发、或将函数绑定到指定元素的 mouse out 事件

mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件

mouseup() 触发、或将函数绑定到指定元素的 mouse up 事件

keydown() 触发、或将函数绑定到指定元素的 key down 事件

keyup() 触发、或将函数绑定到指定元素的 key up 事件

keypress() 触发、或将函数绑定到指定元素的 key press 事件

resize() 触发、或将函数绑定到指定元素的 resize 事件

scroll() 触发、或将函数绑定到指定元素的 scroll 事件

bind() 向匹配元素附加一个或更多事件处理器

unload() 触发、或将函数绑定到指定元素的 unload 事件

实例说明：点击button触发click()事件，显示或隐藏<p>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();        
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>
</html>
查看demo

jQuery效果
1、jQuery显示/隐藏
jQuery hide() 和 show()

     语法：     $(selector).hide(speed,callback);
                      $(selector).show(speed,callback);

      可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
      可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

实例说明：可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});
查看demo
jQuery toggle()方法

      语法：    $(selector).toggle(speed,callback);

      可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
       可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

实例说明：可以使用 toggle() 方法来切换 hide() 和 show() 方法
$("button").click(function(){
  $("p").toggle();
});
查看demo

2、jQuery淡入淡出

jQuery fadeIn() 方法

----------------------------------------------- 待更新 ------------------------------------------------

event	Event description
click()	Trigger, or bind a function to the click event of the specified element
dblclick()	Trigger, or bind a function to the double click event of the specified element
load()	Trigger, or bind a function to, the load event of the specified element
submit()	触发、或将函数绑定到指定元素的 submit 事件
toggle()	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
change()	触发、或将函数绑定到指定元素的 change 事件
ready()	文档就绪事件（当 HTML 文档就绪可用时）
focus()	触发、或将函数绑定到指定元素的 focus 事件
mouseenter()	触发、或将函数绑定到指定元素的 mouse enter 事件
mouseout()	触发、或将函数绑定到指定元素的 mouse out 事件
mousedown()	触发、或将函数绑定到指定元素的 mouse down 事件
mouseup()	触发、或将函数绑定到指定元素的 mouse up 事件
keydown()	触发、或将函数绑定到指定元素的 key down 事件
keyup()	触发、或将函数绑定到指定元素的 key up 事件
keypress()	触发、或将函数绑定到指定元素的 key press 事件
resize()	触发、或将函数绑定到指定元素的 resize 事件
scroll()	触发、或将函数绑定到指定元素的 scroll 事件
bind()	向匹配元素附加一个或更多事件处理器
unload()	触发、或将函数绑定到指定元素的 unload 事件

Getting Started with jQuery in 60 Minutes

Introduction to jQuery

jQuery installation and use

jQuery Basic Syntax

jQuery selectors

jQuery events

jQuery效果

Guess you like