JQuery的查询手册 :
一, JQuery的用法
1. 首先要下载Jquery的js文件,并在需要使用JQuery的html文件的<head>标签加载该js文件 :
<script type="text/javascript" src="js/jquery.js"></script>
并在下一行输入JQuery代码 : <script>JQuery代码 </script>
2. JQuery代码都要从如下代码开始 :
完整写法 : $(document).ready(function(){ JQuery代码 })
简略写法 : $(function(){ JQuery代码 })
3. JQuery代码中 "$" 符号的四种应用
(1) $(function(){}) : JQuery代码的开始
(2) $(selector) : 在html中查找标签和属性(JQuery选择器)
(3) $(dom element) : 将javascript中通过documentElementById()方法得到的DOM对象转换成JQuery对象,
这样才能继续使用JQuery的各种方法
(4) $(html) : 将html转换成JQuery对象. 例: $("<p>i love you</p>")
4. JQuery中最重要的用法 , $(selector).action() : 给查找到的html元素添加事件 .
(1) 其中的 selector 选择器包括以下四大类内容 :
①基本选择器 :
a. 标签选择器("div"): 选择所有的div标签
b. id选择器("#123"): 选择属性中 id的值等于123的标签
c. class选择器(".123"): 选择属性中 class的值等于123的标签
d. 并集选择器("p,div"): 选择所有的p标签和div标签
e. 交集选择器("div.123") : 选择标签的class属性等于123的div标签,
f. 全局选择器("*"), 选择所有的标签
②层次选择器 :
a. 后代选择器("ul li"): 选择ul下的所有li (包括指定标签下的所有标签,包括儿子和孙子等等)
b. 子选择器("ul>li"): 选择ul标签的儿子标签li(只包括指定标签的儿子层,不包括孙子等)
c. 相邻选择器("ul+p"): 选择ul标签其后的相邻的同辈p标签(必须是其后并紧挨相邻的同辈标签)
d. 同辈选择器("ul~p"): 选择ul标签其后的所有同辈p标签(ul后面的所有同辈的p标签)
③属性选择器 ([ ]) :
a. 选取含有该属性的标签("div[id]"): 选取包含id属性的div标签
b. 选取属性值等于给定值的标签("div[id='123']"): 选取属性值等于123的div标签
c. 选取属性值不等于给定值的标签("div[id!='123']"): 选取属性值不等于123的div标签
d. 选取属性值以给定值开头的标签("div[id^='123']"): 选取属性值以123开头的div标签
e. 选取属性值以给定值结尾的标签("div[id$='123']"): 选取属性值以123结尾的div标签
f. 选取属性值包含给定值的标签("div[id*='123']"):选取属性值包含123的div标签
g. 选取多个属性都符合给定值的标签("div[id][class='123']"): 选取包含id属性并且class属性等于123的div标签
④过滤选择器 ( : ) :
a. 选取选择的第一个标签("ul li:first"): 选取ul下的第一个li标签
b. 选取选择的最后一个标签("ul li:last"): 选取ul下的最后一个li标签
c. 选取选择的奇数标签("ul li:odd"): 选取ul下的所有奇数li标签(标签从零开始,所以第一个标签是偶数)
d. 选取选择的奇数标签("ul li:even"): 选取ul下的所有偶数li标签(标签从零开始,所以第一个标签是偶数)
e: 反选标签("p:not(.a)"): 选取class属性为a的p标签以外的其余p标签
f: 标题标签(":header"): 选取所有的h1--h6的标题标签
g: 选取获得焦点的标签("input:focus"): 选取获得焦点的所有input标签
h: 选取索引等于给定值的标签("ul li:eq(0)"): 选取ul标签下的索引为0的li标签,即第一个li标签
i: 选取索引大于给定值的标签("ul li:gt(1)"): 选取ul标签下的索引大于1的li标签, 即从第三个以后的li标签
j: 选取索引小于给定值的标签("ul li:lt(2)"): 选取ul标签下的索引小于1的li标签, 即前两个li标签
k: 选取所有的隐藏标签(":hidden"): 选取所有的隐藏的标签 (即type="hidden")
l: 选取所有的可见的元素(":visible"): 选取所有可见的元素 (即没有type="hidden")
(2)action中包含的内容
①. 鼠标事件
a. click(): 鼠标的点击事件
b. mouseover(): 鼠标的滑过事件
c. mouseout(): 鼠标的离开事件
d. hover(): mouseover和mouseout的复合事件, 这时会有两个function(){}参数
②.键盘事件
a. keypress(): 会在敲击按键时触发,我们可以理解为按下并抬起同一个按键
b. keydown(): 键盘按下时触发. (keyCode==13时代表按下 Enter 键)
例: $(document).keydown(function(event){
//判断当event.keyCode 为37时（即左方面键），执行函数to_left();
//判断当event.keyCode 为39时（即右方面键），执行函数to_right();
if(event.keyCode == 37){
to_left();
}else if (event.keyCode == 39){
to_right();
}
});
c. keyup(): 键盘释放时触发
③.动画事件
a. show(), hide() : 参数是响应事件, 毫秒为单位
b. toogle(): 复合事件, show和hide的复合事件
b. fadein(), fadeout(): 参数是响应事件, 毫秒为单位
c. slidedown(), slideup(): 参数是响应事件, 毫秒为单位
④. DOM操作
a. val(), val("") : 不带参数表示获取标签的value属性值, 带参数表示设置该值
b. text(), text("") : 设置或获取被选元素的文本内容(innerText)
c. html(), html("") : 返回或设置被选元素的内容(innerHTML)
d. css(""), css("", "") : 返回或者设置元素的样式
e. addClass(""), removeClass(""), toogleClass("") : 添加样式; 移除样式; 复合操作(添加或移除)
f. append(), appendTo(), prepend(), prependTo() : 在被选元素的结尾(仍然在内部)插入指定内容(append,appendTo); 在被选元素的开头(仍然在内部)插入指定内容(prepend, prependTo); 带To和不带To的区别: 如果是A append B 和 A appendTo B, 前者是B插入A内部的尾部, 后者是A插入B内部的尾部.
g. after(), insertafter(), before(), insertbefore() : A insertafter B 表示将A插入到B(selector)之后; A after B 表示将B插入A(selector)之后
h. replaceWith(), replaceAll() : A(selector) replaceWith B, B替换A; A replaceAll B(selector), A替换B
i. clone() : 生成被选元素的副本, 包括子节点, 文本和属性. 参数为boolean, 意思是是否复制事件
j. attr(""), attr("", "") : 获取或者设置属性的值.
k. empty() : 将指定元素中的所有内容全部清除,包括文本和子元素
l. remove(), detach() : 都是删除指定元素, 删除之后开可以还原. 还原的内容不同: remove()只能还原元素本身,不能还原JQuery数据,事件和附加的数据等; detach()不但可以还原标签,还可以还原事件和附加的数据等
m. childern() : 只能查找儿子元素
n. find() : 能查找所有的后代元素
o. next(), nextAll(), nextUtil(4) : 同辈元素的查找, 下一个, 后面的所有, 后面直到第4个.
p. prev(), prevAll(), prevUtil(4) : 同辈元素的查找, 上一个, 前面的所有, 前面直到第4个.
q. parent() : 只能查找父亲节点
r. parents() : 查找所有的前辈节点
5.使用JQuery完成异步请求 :
(1) 书写形式 : $.ajax({ 参数 })
(2) 详细描述 : $.ajax({ 参数 })是JQuery提供的一个函数,这个函数实现了对ajax的请求,并且帮助开发者完成了具体细节的工作, 比如浏览器的兼容性, post请求头部的设置等. 开发者只需要把所有的参数组装成一个对象当做这个函数的一个参数传入即可.
(3) 参数 :
a. type : get 或者 post
b. url : 请求链接地址
c. async : 是否异步
d. success(function(data){}) : 请求成功后服务器给客户端传递的数据, 通过data变量传递.
e. error : 出错后的处理方式
f. data : post请求的时候才有, 是浏览器给服务器传递的参数
g. beforesend : 发出请求之前执行的内容
h. complete : 完成请求之后执行的内容
(4)注意 : 若发生ajax请求的资源和url指向的网络资源不再同一个服务器中, 直接访问, 请求能够到达,但是服务器的安全机制造成会在客户端报错,无法正常获取数据, 我们需要的服务器端设置两个响应头:
response.setHeader("Access-Control-Allow-Origin", "*"); 表示其他域下的ajax请求都能访问本服务器
response.setHeader("Access-Control-Allow-Methods", "POST, GET"); 允许的请求方式
分享到：
相关推荐
**jQuery 3.1 参考手册** jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 JavaScript 的DOM操作、事件处理、动画制作以及Ajax交互。jQuery 3.1 是该库的一个重要版本，包含了对现代浏览器的良好支持以及一...
总结来说，"jQuery v3.7.1.zip"是一个宝贵的资源，无论你是刚接触前端的新人，还是经验丰富的开发者，都能从中受益。通过深入理解和熟练运用jQuery，你将能够创建更高效、更美观的Web应用，提升你的开发技能和工作...
- 《jQuery中文API手册》：提供了详细的API参考。 - jQuery中文站点：http://jquery.org.cn/，包含丰富的教程和示例。 - 推荐教程：《jQuery的起点教程》、《使用jQuery简化Ajax开发》。 6. **总结** jQuery...
配合“jquery.api.3.2.1.chm”手册，开发者可以迅速查找并应用所需功能，是学习和工作中不可或缺的参考资料。同时，结合“php中文网免费下载站.txt”和“php中文网下载站.url”，开发者还可以获取更多PHP和...
《jQuery手册：深入学习jQuery》 在Web开发领域，jQuery是一个不可或缺的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本篇文章将深入探讨jQuery的核心概念和实用技巧，帮助你全面掌握这...
总结来说，"jquery-1.12.4.zip"这个压缩包是一个宝贵的资源，它包含的jQuery 1.12.4版本是前端开发中不可或缺的工具。无论你是初学者还是经验丰富的开发者，都能从中受益，无论是学习jQuery的基础知识，还是在项目中...
jQuery手册 学习资料大全 资料打包包括: jQuery and jQuery UI Reference 1.2.chm Visual JQuery-API.CHM jQuery中文使用手册.pdf jQuery Reference Guide(2007).pdf jQuery的起点教程.doc ...
总结来说，《jQuery参考手册（1.11.3）》是学习和使用jQuery的重要资源。它涵盖了jQuery的基础用法和高级特性，无论你是初学者还是经验丰富的开发者，都能从中找到所需的信息。通过深入理解和实践手册中的内容，你将...
3. **jQuery学习笔记**：JQuery学习笔记.doc包含了作者在学习过程中的心得和实践案例，是理论与实际相结合的学习材料，有助于加深理解和记忆。 4. **jQuery技巧大放送**：jQuery技巧大放送.doc收录了一系列实用的...
本书不仅适合初学者学习jQuery的基础知识，也适用于有一定经验的开发人员作为参考手册。 #### 三、书籍特点 1. **全面覆盖**：本书涵盖了jQuery 1.4以及jQuery UI 1.8的所有核心功能。 2. **实践导向**：通过大量...
总结，jQuery手册是开发者学习和使用jQuery的宝贵资源，它覆盖了从基础操作到高级应用的所有知识。通过深入理解和熟练运用，开发者可以更高效地构建功能丰富、交互性强的Web应用。在不断发展的Web技术环境中，jQuery...
总结，jQuery 是前端开发中的强大工具，通过这个完整版的手册，你可以系统地学习并掌握其各种功能，提升你的 Web 开发效率。无论是桌面端还是移动端，jQuery 都能帮助你创建出互动性强、用户体验优秀的应用程序。
**jQuery API 手册** jQuery 是一款广泛应用于前端开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。jQuery 1.3 版本是该库的一个重要里程碑，引入了许多增强性能和新功能的改进...
jQuery提供了丰富的DOM操作方法，如`$(selector).append()`在元素末尾添加内容，`$(selector).prepend()`在元素开头插入内容，`$(selector).remove()`删除匹配的元素，`$(selector).html()`设置或获取元素的HTML内容...
**jQuery UI技术手册** jQuery UI 是一个基于jQuery库的开源前端框架，用于构建交互式的用户界面。它提供了多种可自定义的组件，如对话框、拖放功能、日期选择器、进度条、滑块等，使得网页开发变得更加简单。...
结合提供的文档“2-jQuery使用手册.doc”、“4-jQuery技巧总结.doc”、“5-jQuery常用方法事件属性.doc”以及“3-使用 jQuery 简化 Ajax 开发.doc”，你将能够深入理解和实践jQuery的各种功能，成为jQuery的熟练使用...