一、JQuery简介
jQuery极大地简化了Javascript编程。
jQuery库包含以下特性:
1.HTML元素选取
2.HTML元素操作
3.CSS操作
4.HTML事件函数
5.JavaScript特效和动画
6.HTML DOM遍历和修改
7.Ajax
8.Utilities
二、JQuery引入
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
解释：
1.jQuery库位于一个JavaScript文家中，其中包含了所有的jQuery函数。
第二行代码：<script type="text/javascript" src="jquery.js"></script>就是把jQuery添加到网页
2.所有的jQuery函数都位于一个document ready函数中： $(document).ready(function(){ /*jQuery函数*/ }；
这样做是为了防止文档在完全加载之前运行jQuery代码。如果在文档没有完全加载之前就运行函数，操作可能失败。
三、jQuery的语法
jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。
基础语法是： $(selector).action
1.美元符号定义jQuery
2.选择符(selector)“查询”和“查找”HTML元素
3.jQuery的action()执行对元素的操作
示例：$(“p”).hide() — 隐藏所有的段落
$(this).hide() —隐藏当前元素
$(“.test”).hide() —隐藏所有的 class =“test”的元素
$(“#test”).hide() —隐藏所有id = “test”的元素
提示：jQuery使用语法是Xpath和CSS选择器语法的组合。
四、jQuery选择器
jQuery元素选择器和属性选择器允许我们通过签名、属性名或内容对HTML元素进行选择。
1.元素选择器 jQuery使用CSS选择器来选取HTML元素。
1）$(“p”)选取<p>元素
2）$(“p.intro”)选取所有class=“intro”的<p>元素
3）$(“p#demo”)选取所有id=“demo”的<p>元素
2.属性选择器 jQuery使用XPath表达式来选择带有给定属性的元素
1）$(“[href]”)选取所有带有href属性的元素
2）$(“[href=‘#’]”)选取所有带有href值等于“#”的元素
3）$(“[href!=‘#’]”)选取所有带有href值不等于“#”的元素
4) $(“[href$=‘.jpg’]”)选取所有href值以”.jpg”结尾的元素
5） $（“ul li:first”）每个<ul>的第一个<li>元素
6）$(“div#intro.head”) id = “intro”的<div>元素中的所有class=“head”的元素
五、jQuery事件
jQuery是为事件处理特别设计的，jQuery事件处理方法是jQuery中的核心函数。事件处理程序指的是当HTML中发生某些事件时有调用的方法。
比如
$(“botton”).click(function(){ … }) — 当按钮的点击事件被触发时会调用这个函数
在实际的开发中，为了便于维护，通常会把jQuery函数放到独立的.js文件中。
比如<script type="text/javascript" src="my_jquery_functions.js"></script>
就引用了 带有jQuery函数的js文件
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript库中的函数（比如 PRototype）同样使用 $符号。
jQuery 使用名为 noConflict()的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $符号。
jq("button").click(function(){
jq("p").css("background-color","#B2E0FF");
})
所以，由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
把所有 jQuery代码置于事件处理函数中把所有事件处理函数置于文档就绪事件处理器中把 jQuery代码置于单独的 .js文件中如果存在名称冲突，则重命名 jQuery库jQuery常见事件函数
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouSEOver(function)触发或将函数绑定到被选元素的鼠标悬停事件
六、jQuery参考手册 -选择器
1.*$("*")所有元素
2.#id$("#lastname")id="lastname"的元素
3..class$(".intro")所有 class="intro"的元素
4.element$("p")所有 <p>元素
5..class.class $(".intro.demo")所有 class="intro"且 class="demo"的元素
6.:first$("p:first")第一个 <p>元素
7.:last$("p:last")最后一个 <p>元素
8.:even$("tr:even")所有偶数 <tr>元素
:even 选择器选取每个带有偶数 index值的元素（比如 2、4、6）。
index 值从 0开始，所有第一个元素是偶数(0)。
最常见的用法：与其他元素/选择器一起使用，来选择指定的组中偶数序号的元素
9.:odd$("tr:odd")所有奇数 <tr>元素
:odd 选择器选取每个带有奇数 index值的元素（比如 1、3、5）。
index 值从 0开始，所有第一个元素是偶数(0)。
最常见的用法：与其他元素/选择器一起使用，来选择指定的组中奇数序号的元素
10.:eq(index)$("ul li:eq(3)")列表中的第四个元素（index从 0 开始）
:eq()选择器选取带有指定 index值的元素。
index 值从 0 开始，所有第一个元素的 index 值是 0
11.:gt(no)$("ul li:gt(3)")列出 index大于 3 的元素 //greater than — gt
12.:lt(no)$("ul li:lt(3)")列出 index小于 3 的元素 //less than — lt
13.:not(selector)$("input:not(:empty)")所有不为空的 input元素
14.:header$(":header")所有标题元素 <h1> - <h6>
15.:animated 所有动画元素
正在动的元素
16.:contains(text)$(":contains('W3School')")包含指定字符串的所有元素
17.:empty$(":empty")无子（元素）节点的所有元素
:empty 选择器选取空的元素。
空元素指的是不包含子元素或文本的元素。
18.:hidden $("p:hidden")所有隐藏的 <p>元素
19.:visible$("table:visible")所有可见的表格
:visible 选择器选取每个当前是可见的元素。
除以下几种情况之外的元素即是可见元素：
设置为 display:nonetype="hidden"的表单元素Width 和 height 设置为 0隐藏的父元素（同时隐藏所有子元素）
20.s1,s2,s3$("th,td,.intro")所有带有匹配选择的元素
21.[attribute]$("[href]")所有带有 href属性的元素
再比如
$("[id]") — 表示选择带有 id属性的所有元素
22.[attribute=value]$("[href='#']")所有 href属性的值等于 "#"的元素
23.[attribute!=value]$("[href!='#']")所有 href属性的值不等于 "#"的元素
24.[attribute$=value]$("[href$='.jpg']")所有 href属性的值包含以 ".jpg"结尾的元素
25.:input$(":input")所有 <input>元素
26.:text$(":text")所有 type="text"的 <input>元素
27.:passWord$(":password")所有 type="password"的 <input>元素
28.:radio$(":radio")所有 type="radio"的 <input>元素
29.:checkbox$(":checkbox")所有 type="checkbox"的 <input>元素
30.:submit$(":submit")所有 type="submit"的 <input>元素
31.:reset$(":reset")所有 type="reset"的 <input>元素
32.:button$(":button")所有 type="button"的 <input>元素
33.:image$(":image")所有 type="image"的 <input>元素
34.:file$(":file")所有 type="file"的 <input>元素
35.:enabled$(":enabled")所有激活的 input元素
36.:disabled$(":disabled")所有禁用的 input元素
37.:selected$(":selected")所有被选取的 input元素
38.:checked$(":checked")所有被选中的 input元素
新闻热点
疑难解答
