jquery基础研究学习【基础】

2017年6月6日15:07:58     该看：http://www.runoob.com/jquery/jquery-fade.html                淡入淡出

jQuery 教程
jQuery 教程
jQuery 简介
jQuery 安装
jQuery 语法
jQuery 选择器
jQuery 事件
-------------------分割线-------------
笔记：
1.jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
2.通过使用 jQuery 应用 JavaScript 效果。
3.jQuery 库可以通过一行简单的标记被添加到网页中。
4.什么是 jQuery ？
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示： 除此之外，Jquery还提供了大量的插件。
5.网页中添加 jQuery

可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：

从 jquery.com 下载 jQuery 库
    从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

6. CDN（内容分发网络）
7.通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。
8.jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

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

美元符号定义 jQuery
    选择符（selector）"查询"和"查找" HTML 元素
    jQuery 的 action() 执行对元素的操作

实例:

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

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

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

$("#test").hide() - 隐藏所有 id="test" 的元素
9.文档就绪事件

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
简洁写法（与以上写法效果相同）:
$(function(){
 
   // 开始写 jQuery 代码...
 
});
总结：这个的功能就是当浏览器全部读取完文档后，在开始执行jquery中的代码。
10.jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
1.jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。
2.元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:
$("p")

3. #id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：
$("#test")
4. .class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：
$(".test")
5.更多实例
语法     描述     实例
$("*")     选取所有元素     在线实例
$(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> 元素
6.jQuery 事件

jQuery 是为事件处理特别设计的。
7.什么是事件？

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：

在元素上移动鼠标。
    选取单选按钮
    点击元素

8.常见 DOM 事件：
鼠标事件     键盘事件     表单事件     文档/窗口事件
click     keypress     submit     load
dblclick     keydown     change     resize
mouseenter     keyup     focus     scroll
mouseleave           blur     unload
9.页面中指定一个点击事件：
$("p").click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
$("p").click(function(){
    // 动作触发后执行的代码!!
});
10.常用的 jQuery 事件方法
$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。
1.click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
dblclick()
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：
mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：
mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：
mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：
hover()

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
focus()

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：
blur()

当元素失去焦点时，发生 blur 事件。

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：