首页 > 代码库 > jQuery基础学习
jQuery基础学习
1.广受欢迎的 JavaScript 框架：
- jQuery
- Prototype
- MooTools
- 这些框架都提供针对常见 JavaScript 任务的函数，包括动画、DOM 操作以及 Ajax 处理
2.jQuery 使用 CSS 选择器（即html元素）来访问和操作网页上的 HTML 元素（DOM 对象）。
3.jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
4.jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数
可以通过下面的标记把 jQuery 添加到网页中：
<head>
<script type="text/javascript" src="http://www.mamicode.com/jquery.js"></script>
</head>
注意，<script> 标签应该位于页面的 <head> 部分。
5.通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）
jQuery 语法实例
- $(this).hide() 演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
- $("#test").hide() 演示 jQuery hide() 函数，隐藏 id="test" 的元素。
- $("p").hide() 演示 jQuery hide() 函数，隐藏所有 <p> 元素。
- $(".test").hide() 演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。
- 6.jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
美元符号$定义 jQuery选择符。
（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
7.所有 jQuery 函数位于一个 document ready 函数中,这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码
8.jQuery选择器：选择器允许您对元素组或单个元素进行操作
| $(this) | 当前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
| $("[href$=‘.jpg‘]") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
9.jQuery事件：是为事件处理特别设计的。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法
通常会把 jQuery 代码放到 <head>部分的事件处理方法中
10.如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
而不要直接在html中的<script>标签中直接书写jQuery函数。直接采用在<script>标签中使用src属性来引用外部文件。
11.
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
12.
jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
- 把所有 jQuery 代码置于事件处理函数中
- 把所有事件处理函数置于文档就绪事件处理器中
- 把 jQuery 代码置于单独的 .js 文件中
- 如果存在名称冲突，则重命名 jQuery 库
13.
下面是 jQuery 中事件方法的一些例子：
| Event 函数 | 绑定函数至 |
|---|---|
| $(document).ready(function) | 将函数绑定到文档的就绪事件（当文档完成加载时） |
| $(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
| $(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
| $(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
| $(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
jQuery基础学习