目录
切换函数toggle 【包含：toggle()、fadeToggle()、slideToggle()】
nextAll() 方法返回被选元素后面的所有同胞元素，不包括被选元素本身。
nextUntil() 方法返回介于两个给定参数之间的所有同胞元素，不包括两个被选元素。
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (
parentsUntil() 方法返回介于两个给定元素之间的所有元素，不包括两个元素本身。
什么是JQuery?
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库，jQuery的宗旨：写的更少，做得更多！
关于下载及使用
直接在官网下载即可，他有两个版本，一个是轻量级的一个是开发及版本。
这两个版本内部的代码没有任何区别，只不过轻量级的所有代码都没有换行以及空格等，就是不规范，但是会比开发版本要小个200kb，在开发阶段使用开发版本，项目上线时把这个开发版本的jq换成轻量级的，这样会提高运行效率。
jQuery的使用
$(document).ready(...);
这个ready类似于js中的onload，具体区看下面，还有这个$符号等同于jQuery，你把他换成jQuery也可以
DOM对象与jQuery对象
我先说说DOM，Document Object Model(文档对象模型)简称DOM
其实就是说把网页看成一棵树，这棵树叫DOM数，他的节点就是网页的标签、属性、文本内容。在使用层面上，这三种节点的具体对象就是DOM对象,其实DOM对象就是js获取的元素对象。
<script type="text/javascript">
//用js获取dom对象
window.onload = function(){
var p1_obj = document.getElementById("p1");
alert(p1_obj.innerHTML);
}
//使用jQuery获取jQuery对象
$(document).ready(function(){
var $p1 = $("#p1");
alert($p1.text());
});
</script>
<p id="p1">hhhhhhh</p>
本节主要说的是js和jq的对象不相同，使用方式也不一样，在创建jq对象时一般建议加上$符号命名。
jQuery对象和DOM对象相互转换
基本知识：jq对象默认是一个数组或者集合。DOM对象默认就是一个单独的对象。
DOM对象转jq对象 ==》$(DOM对象)；
jq对象转DOM对象 ==》 jQ对象[0]; 或者jQ对象.get(0);
啥意思呢，就是说如果你有一个jQ对象，你可以把它看成数组，或者集合。那么要进行jq对象转DOM对象，就是从数组或者集合取出一个元素的过程。
jQuery选择器
jQuery选择器是jq的根基，是jq最重要的知识点，没有之一。还有就是你必须要知道jq对象默认是以数组或者集合的形式存在的。
分为基本选择器、层次选择器、属性选择器、过滤选择器...
基本选择器
标签选择器：$("标签名");
类选择器：$(".class值")；
id选择器：$("#id值")；
交集选择器：$("p.p1");
并集选择器：$(".class值，#id值")；
全局选择器：$("*");
以上演示的是通过不同的基本选择器获取jq数组或集合，里面包含的都是jq对象。
层次选择器
相邻选择器+（只能获取后面的第一个）：比如$("#uname+p")；
注：先定位到id为uname，然后选中该id后一位p。
同辈选择器~（只能获取后面的所有同辈）：比如$("#广州~li");
注：先定位到id为广州的标签，然后选中与此id同级的li。
<nav>
<ul>
<li></li>
</ul>
</nav>注：用上面一个例子说明后代和子代，ul和li都是nav的后代，但是只有ul才是nav的子代
后代选择器（空格）：$("nav li");也可以$("nav ul");
子代选择器>：$("nav>ul"); 不可：$("nav>li");
属性选择器：(属性指的是html标签的属性，比如class、id等)
过滤选择器：
:first：选中最开头那一个。比如$("ul>li:first");
:last：选中最后一个。比如$("ul>li:list");
:even：选中所以偶数位，从0开头，开头第一个是0(0也是偶数)。比如$("ul>li:even");
解读一下：选中定位到ul，选中ul下的所以li，然后选中下标为偶数的li
:odd：选中所以奇数位，从0开头数。比如$("ul>li:odd");
:eq(index)：第index个。例如$("ul>li:eq(3)");第三个li，从0开始数
:gt(index)：大于index的li，$("ul>li:gt(1)");下标大于1的li，从0开始数
:lt(index)：小于index的li，$("ul>li:gt(1)");下标大于1的li，从0开始数，那就只有第0个li了
:not(选择器)：除了...以外
:header：选中所有的标题元素h1~h6
:focus：选中当前焦点元素
注：另外first也是一个jq函数，$("ul>li:first");这样是通过选择器选中，$("ul>li").first();这样是通过函数选中。
还有两个
事件
jQuery事件和js事件其实差不多只不过就是写法不一样。js事件是以on开头+事件名，jq事件是直接写事件名。
具体访问：参考手册
关于jQuery事件的一些常用函数
这里单独说一个函数绑定函数：jq可以通过绑定事件bind()同时去绑定一个或者多个具体的事件，比如说。
绑定函数：bind()
绑定一个事件：$(“选择器”).bind("事件名",函数);
绑定多个事件：$(“选择器”).bind({"事件名"：函数}，{"事件名"：函数}，{"事件名"：函数}...);
多个事件内部已JSON的形式存在。当你对一个标签对象绑定对个事件时如果你想移除某个事件那么可以不需要改变源代码，使用unbind函数移除事件。
移除函数：unbind()
移除事件：$(“选择器”).unbind("事件名");
理论上事件名后面是可以跟着一个函数的但是一般用不到
切换函数
hover(函数1,函数2)；切换鼠标悬浮-离开
toggle(速度/ms , 回调函数); 切换隐藏、显示
toggle(f1，f2，...，fn); 切换调用函数(仅jQuery1.9以前适用)
fadeToggle(速度，回调函数)；切换淡入与淡出
slideToggle(速度，回调函数); 切换元素上下滑动显示隐藏；
每一个切换函数都切换两个具体的函数，比如hover函数就是切换mouseover和mouseout
其实在jQuery中用于切换事件的函数有两个一个是hover一个是toggle，hover响应鼠标悬浮，toggle响应单击事件click。
切换函数hover
$(selector).hover(inFunction,outFunction)；
切换函数toggle 【包含：toggle()、fadeToggle()、slideToggle()】
toggle()；
toggle英文翻译为切换，转换，指2种状态之间进行切换，他是通过响应click事件来切换的，给一个对象注册了这个函数就相当于给该对象注册了一个click事件，但是每一次点击他可以调用不同的函数。此函数能切换很多元素状态，比如切换 隐藏/显示、淡入/淡出、控制高度、轮询调用函数。
作用一：切换显示与隐藏(重点要知道这个)对于我们java工程师来说主要需要知道这个作用，隐藏与显示本来是两个单独的函数，分别对应hide()和show()然后调用toggel函数就相当于同时调用了hide和show。
实例：按钮一(显示) 按钮二(隐藏) 按钮三(显示/隐藏)
按钮一对应：show(速度/ms , 回调函数)；
按钮二对应：hide(速度/ms , 回调函数)；
按钮三对应：toggle(速度/ms , 回调函数)； 点一下显示再点一下隐藏
速度指的是显示和隐藏的速度，速度也可以写英文单词，"slow"、"fast"、"normal"（慢、快、适中）单词要加双引号。回电函数可以写也可以不写取决于你的业务需求。
作用二：$("#btn").toggle(f1，f2，...，fn);
用于响应click事件，调用该方法相当于绑定了多个click事件，toggle(f1，f2，...，fn);括号里面可以传入多个函数，当点击对应的目标对象时轮询调用f1到fn函数(调用完fn会回来重写调用f1)，就是你点击一下他就调用f1，再点击一下就调用f2这样子。注意：该功能仅在jQuery1.9版本以前适用。
fadeToggle(速度，回调函数)；切换淡入与淡出
slideToggle(速度，回调函数); 切换上下拉动显示；
jQuery操作DOM(重点)
首先要知道DOM就是一棵树，我们操作DOM其实就是操作他的每一个结点元素。
获取(查询)操作
jQuery获取DOM内容的四个方法：
获取DOM文本text()、
获取DOM内部内层html()、
获取表单value值的val()、
获取DOM的属性值attr()；
演示：text、html
例如：<div>
<p>这是一个文本</p>
</div>
div对象.text()；返回DOM节点div的文本 ：这是一个文本
div对象.html()；返回DOM节点div的内部html： <p>这是一个文本</p>
演示val
val（)；获得输入字段的值
例如：点击显示值可以返回米老鼠
演示attr
点击按钮会返回a标签的href属性值，就是那个网址
以上内容具体详见：jQuery 获得内容和属性
设置操作
jQuery设置DOM的方法是跟获取一样的，还是那四个方法：
设置DOM文本text(“文本内容”)、
设置DOM内部内层html(“html内容”)、
设置表单value值的val("value值")、
语法案例：
设置DOM的属性值attr("属性值")；
语法案例：
通过回调函数修改DOM
就是在text()、html()、val()、attr()括号里面传入一个函数，比如说：
$(".p1").text(function(){
return "修改的内容";
})
还有一个点：如果通过回调函数来修改DOM内容，那么浏览器会发送两个实参给你，你可在
text(function(i，old_text){})；小括号里面修改两个形参来接收，浏览器传过来的第一个参数i一直都是0，他代表被替换的目标文本列表首下标值，这里可能会很难理解，但是你就记住他返回的第一个参数是0，第二个参数old_text就是被替换的文本。
其他三个使用方式大同小异，具体详见：jQuery 修改内容和属性
添加操作
- append() - 在被选元素的结尾插入内容
$("p").append("Some appended text.");- prepend() - 在被选元素的开头插入内容
$("p").prepend("Some prepended text.");- after() - 在被选元素之后插入内容
$("img").after("Some text after");- before() - 在被选元素之前插入内容
$("img").before("Some text before");- 区别：我就拿append和after来举例吧，比如说
<p>hello</p>
$("p").append(" <b>world!</b>");添加的结构是：<p>helloworld!</p>
$("p").after(" <b>world!</b>");添加的结构是：<p>hello</p><b>world!</b>
即：一个是在被选元素内部插入，一个是在被选元素外部后面插入。
以上方法可以批量添加，以逗号隔开。详见：jQuery 添加元素 (w3school.com.cn)
删除操作
jQuery对DOM的删除操作有两个方法：
- remove(支持一个参数) - 删除DOM节点
- empty(不支持参数) - 清除DOM节点内容，保留DOM节点
remove()支持一个参数：remove([expr])，其中expr为可选项，可填可不填，用来进一步筛选要删除的目标。如：
克隆操作
clone(true/false);克隆DOM也就是复制一个DOM节点
需要传入一个布尔值，代表是否克隆选中节点的属性，true则完全克隆节点，包含被选中节点的所以属性(js中的注册事件也是节点的属性哦)，若false则只克隆DOM节点不带被选中节点的属性值。
$("#p1").clone(true/false);
CSS操作
首先你要知道：
jQuery是通过函数来向DOM节点注入class，这些class一般都是事先在
<style type="text/css"></style>中写好了样式，
比如：
<style type="text/css">
.p1{font:10px;}
</style>
<p><p>
我可以通过jQuery的方法把$("p").addClass("p1");的方式给p标签添加一个class属性，执行完后相当于：<p class="p1"><p> 那么上面的样式就可以渲染到这个p标签。还有一个点是一个标签可以添加多个css类
- addClass() - 向被选元素添加一个或多个类
添加一个类：$("p1,p2,p3").addClass("text_type"); 添加多个类：$("#div1").addClass("type1 type2");用空格隔开- removeClass() - 从被选元素删除一个或多个类(跟上面的使用方式一样，前提是被删除的类在选中元素中存在)
- toggleClass() - 对被选元素进行切换添加/删除类的切换操作
$("h1,h2,p").toggleClass("type1");- css() - 设置或返回被选元素的一个或多个样式属性
设置一个：$("p").css("background-color","yellow"); 设置多个：$("p").css({"background-color":"yellow","font-size":"200%"})； 返回属性值：$("p").css("background-color");
尺寸操作
传参则获取不传参则设置
详见：jQuery 尺寸
获取集合
先知：该知识点需要知道子代和后代的概念，以及直接父辈和祖辈的概念。我用一个案例解释：
<nav>
<ul>
<li></li>
</ul>
</nav>
ul是nav的子代，li是nav的后代也是ul的子代；
ul是li的直接父辈，nav是li的祖辈
子代和后代
<body>
<nav>
<ul>
<li></li>
</ul>
</nav>
<div></div>
</body>
children() 方法返回被选元素的所有子代；
$("body").children();返回一个集合包含nav和div
$("body").children("nav");返回一个集合包含nav
find() 方法返回被选元素的所有后代；
$("body").find();返回一个集合包含nav和div、ul、li
$("body").children("li");一个集合包含返回li
注：该方法不推荐使用，影响效率
详细请看：jQuery 遍历 - 后代
同辈
<body>
<h2></h2>
<nav>
<ul>
<li></li>
</ul>
</nav>
<div></div>
</body>
siblings() 方法返回被选元素的所有同胞元素.
$("h2").siblings();返回nav和divnext() 方法返回被选元素的下一个同胞元素。
$("h2").next();返回navprev() 方法返回被选元素的前一个同胞元素。
$("nav").prev();返回h2
nextAll() 方法返回被选元素后面的所有同胞元素，不包括被选元素本身。
$("nav").nextAll();返回div
nextUntil() 方法返回介于两个给定参数之间的所有同胞元素，不包括两个被选元素。
注意：这两个元素是同辈
$("h2").nextUntil(“div”);返回nav
详细请看：jQuery 遍历 - 同胞
祖先
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil() 方法返回介于两个给定元素之间的所有元素，不包括两个元素本身。
注意：这两个给定元素是祖先与后代的关系(包括子代与后代)
详细请看：jQuery 遍历 - 祖先
过滤
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。
遍历集合(重要)
语法结构：
集合.each(function(index，element){
这里可以操作每一个元素
})；
注意：index表示元素的下标从0开始，element代表元素,他是一个DOM对象
案例：遍历打印ul的子代li
$("ul>li").each(function(index,element){
var $element = $(element);//先把dom对象转jq对象
alert("这是第" + index + "个元素:" + $element.html() );
})
如果你觉得转这个dom对象转jq对象麻烦也可以这样写：
$("ul>li").each(function(index,element){
alert("这是第" + index + "个元素:" + this.html() );
})
//this代表当前元素，这样获取到的就是jq对象
4969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
