文章目录
jQuery作用安装jQuery入口函数jQuery语法JQuery选择器jQuery事件部分代码的实现
jQuery的技术应用jQuery效果jQueryHTML尺寸jQuery遍历jQueryAjax（异步传输）（重点）jQuery插件整合其他框架
jQuery 是一个高效、精简并且功能丰富的JavaScript 工具库。它提供的API 易于使用且兼容众多浏览器，这让诸如HTML 文档遍历和操作、事件处理、动画和Ajax 操作更加简单。
对操作进行封装，方便我们去使用。方便前端去使用。
jQuery作用
快速获取文档元素
提供漂亮的页面动态效果
创建AJAX无刷新网页
提供对JavaScript语言的增强
增强的事件处理
更改网页内容
安装jQuery
入口函数
jQuery语法
jQuery 语法是通过选取HTML 元素，并对选取的元素执行某些操作。
基础语法：$
(selector
).action()
$
("p").hide() -隐藏所有
<p> 元素
$
(".test").hide() -隐藏所有
class="test" 的元素
$
("#test").hide() -隐藏所有id
="test" 的元素
JQuery选择器
基于元素的id、类、类型、属性、属性值等
"查找"（或选择）HTML 元素。它基于已经存在的CSS 选择器，除此之外，它还有一些自定义的选择器。
元素选择器：$
("p")
Id选择器
:$
("#test")
.class选择器：$
(".test"）
其他选择器
<%@ page language
="java" contentType
="text/html; charset=UTF-8" pageEncoding
="UTF-8" import="java.util.*"%>
<!DOCTYPE html
>
<html>
<head>
<meta charset
="UTF-8">
<title>Insert title here
</title
>
<script type
="text/javascript" src
="js/jquery.min.js"></script
>
<script type
="text/javascript">
$
(document
).ready(function
() {
$
("button").click(function(){
$
("#info").hide();
});
});
</script
>
</head
>
<body>
<p id
="info" class="abc" >alkadsjfljdsafl
</p
>
<input type
="text" id
="txt" />
<button id
=""btn
>BUTTON
</button
>
</body
>
</html
>
jQuery事件
事件处理程序指的是当HTML 中发生某些事件时所调用的方法。
jQuery 事件方法语法
–$
("p").click();
–$
("p").click(function(){
});
常见DOM 事件：
常见jQuery事件方法：
$
(document
).ready()/ $
(function(){}）
click()
focus()
blur()
hover()
mousedown()
部分代码的实现
<%@ page language
="java" contentType
="text/html; charset=UTF-8"
pageEncoding
="UTF-8" %>
<!DOCTYPE html
>
<html>
<head>
<meta charset
="UTF-8">
<title>Insert title here
</title
>
<script type
="text/javascript" src
="js/jquery.min.js"></script
>
<script type
="text/javascript">
$
(document
).ready(function
() {
$
("button").click(function(){
$
("#info").hide();
});
$
("#txt").val("你好");
$
("p").html("<a href=''>sfj</a>");
alert($
("p").html());
$
("p").attr("class", "def");
$
("p").append("<div>kkkkkkkkkkkk</div>");
$
("p").click(function(){
alert("dian dian");
});
});
</script
>
</head
>
<body>
<p id
="info" class="abc" >alkadsjfljdsafl
</p
>
<input type
="text" id
="txt" />
<br
/>
<button id
=""btn
>BUTTON
</button
>
</body
>
</html
>
jQuery的技术应用
jQuery效果
隐藏、显示、切换，滑动，淡入淡出，以及动画
hide()、
show()、
toggle()
fadeIn()、
fadeOut()、
fadeToggle()、
fadeTo()
slideDown()、
slideUp()、
slideToggle()
animate()、
stop()
Callback 函数、链式写法
jQueryHTML
jQuery 拥有可操作HTML 元素和属性的强大方法。
获得、设置内容属性
text()html() val() attr()
添加、删除元素
append() prepend()after() before()
css操作
addClass() removeClass()toggleClass()css(）
处理元素和浏览器尺寸
尺寸
jQuery遍历
用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
向上遍历
parent()、
parents()、
parentsUntil()
向下遍历
children()、
find()
同胞遍历
siblings()、
next()、
nextAll()、
nextUntil()（
prev()、
prevAll()、
prevUntil() ）
jQueryAjax（异步传输）（重点）
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。语法：$(selector).load(URL,data,callback);
jQuery get() 和post() 方法用于通过HTTP GET 或POST 请求从服务器请求数据。$.get(URL,callback);
.
p
o
s
t
(
U
R
L
,
d
a
t
a
,
c
a
l
l
b
a
c
k
)
;
.post(URL,data,callback);
.post(URL,data,callback);.ajax({name:value, name:value, … })
jQuery插件
jQuery还提供了丰富的插件
jQuery Validate 。为表单提供了强大的验证功能
jQuery Password Validation 。
jQuery Tooltip 插件取代了原生的工具提示框
jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单
整合其他框架
jQuery 使用$ 符号作为jQuery 的简写。
如果其他JavaScript 框架也使用$ 符号作为简写怎么办？jQuery
.noConflict();
通过全名替代简写的方式来使用jQuery
noConflict() 可返回对jQuery 的引用，您可以把它存入变量，以供稍后使用
把$ 符号作为变量传递给ready 方法。这样就可以在函数内使用$ 符号了
-而在函数外，依旧不得不使用
"jQuery"
