JQuery的使用

JQuery是一个JavaScript库，极大的简化JavaScript编程。

• jQuery 库包含以下特性：
• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

JQuery的使用

jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
１、下载
可以通过下载JQuery库，然后把它包含在希望使用的网页中。

下载地址
2、如果不想下载，可以通过CDN(内容发布到网络）引用它。

• 从谷歌引用JQuery

• 从微软引用jQuery

实例

This is a heading
This is a paragraph.
This is another paragraph.
Click me

 

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
美元符号定义jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

JQuery语法实例

• $(this).hide()隐藏当前的HTML元素。
• $("#test").hide()隐藏id="test"的元素。
• $("p").hide()隐藏所有

  元素。

• $(".test").hide()隐藏所有class="test"的元素。

文档就绪函数

所有 jQuery 函数都位于一个 document ready函数中：

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

• 试图隐藏一个不存在的元素
• 获得未完全加载的图像的大小

jQuery 选择器

jQuery元素选择器和属性选择器允许可以通过标签名，属性名或内容对HTML元素进行选择。

jQuery元素选择器

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

• $('p')选取

  元素。

• $("p.into")选取所有class="intro"的

  元素。

• $("p#demo")选取所有id="demo"的

  元素。

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事件

jQuery事件是为事件处理特别设计的。

jQuery 事件函数

jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到 部分的事件处理方法中。
$("button").click(function() {..some code... } )
实例：
$("button").click(function(){ $("p").hide(); });

单独文件中的函数

如果网页中包含许多的页面，并且希望jQuery函数易于维护，就可以把jQuery函数放在独立的.js文件中，通过src属性来引用文件)

jQuery 名称冲突

jQuery使用 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

jQuery中常用的事件方法

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