jQuery学习笔记
【新增】jquery.tmpl.js笔记：
http://www.365mini.com/ [jQuery方法讲解很详细]
https://www.cnblogs.com/zhuzhiyuan/p/3510175.html
https://www.cnblogs.com/think8848/archive/2011/07/17/2108570.html
1： $ = jQuery $() = jQuery()
【新增】
1、多条件选择器
用途：使用多个条件同时选择多个标签
用法：$(“条件1，条件2，条件3，……，条件n “);
特征：多个条件在“”内用逗号隔开；
用例：$(“div#id,span.tip,p”); //同时选择id为“id”的div标签,class为“tip”的span标签和p标签；
用途：使用第二个参数选出相对元素，从而不影响其他具有相同条件的元素
用法：$(“条件1”,条件2)；
特征：两个参数
相对选择器
只要在$()指定第二个参数，第二个参数为相对的元素。比如html代码如下代码如下:<table id="table1"> <tr><td>dsds</td><td>dsfdef</td></tr> <tr><td>dsds</td><td>dsfdef</td></tr> <tr><td>dsds</td><td>dsfdef</td></tr> <tr><td>dsds</td><td>dsfdef</td></tr> <tr><td>dsds</td><td>dsfdef</td></tr> </table>那么可以用如下的js代码操作td的背景色
$("td", $(this)).css("background", "red"),//这里也可以是$("td", this).css('background','red');这句代码用的就是相对选择器，选择出的td是以当前的tr为相对的元素。选择的td元素是当前的tr元素下的所有td元素，没有涉及到其他行的td元素
代码如下:<script type="text/javascript"> $(function () { $("#table1 tr").click(function () { $("td", $(this)).css("background", "red"); }); }); </script>用途：选择后代节点
用法：$(“条件1 条件2 条件3”);
特征：双引号之内，条件之间用空格隔开；
用例：$(“#com ul li”);
//选择Id为com的元素中的UL里面的所有li节点；
- <element class="a b">
1. 交集选择： $(".a.b") --选择同时包含a和b的元素。
2. 并集选择：$(".a, .b") --选择包含a或者包含b的元素。
- $("div[title='ttt'][class='aaaa']").click()
所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素
二： 选择元素
0：访问DOM元素。即由jquery对象得到DOM元素，使用.get(n)方法,从0开始。简写方式为$()[n],类似数组用法
1：CSS选择符（多个选择器组合用”,"隔开）
①，属性选择符 $('a[href^="mailto:"]')表示href以“mailto:”开头的a元素。同样$表示结尾，*表示通配符。属性可以写多个，如$('a[href$=".pdf"][href*="strive"]')表示href以.pdf结束且含有strive的a元素
②，层次选择器
1，祖先后代选择器（空格）。$(“ancestor descendant”). 返回符合条件的所有的后代元素。
2，父子选择器（ > ）。$(“parent > child”)。返回所有符合条件的子元素。（子元素只有一辈，后代元素有很多辈）。
3，隔壁选择器 （+）（后向）。$(“prev + next”)。返回同辈中 紧邻在prev元素之后的next元素。注意：只返回一个next,且要求prev和next同辈。 【效果类似next()方法】
4，邻居选择器（~）(后向)。$(“prev ~ siblings”)。返回在prev元素之后所有同辈元素。 【效果类似nextAll()方法】
2： 在1中CSS选择符基础上进一步过滤
用在CSS选择器后面，进一步筛选，语法类似CSS中的伪类，以冒号（:）开头。
①, :eq(n) 第n个，从0开始计数
②, :even/:odd 偶/奇
③, :nth-child(),参数可为数字或者odd/even，这是jQuery中唯一从1开始计数的选择器。（注意：浏览器选择时是从右向左的）
④, :contains() 参数为字符串，可以不加引号，也可以加引号，区分大小写
⑤, :not() 否定式伪类选择符. 参数为选择符，可以不加引号，也可以加引号。如:not(.classname)。
⑥, :has()。参数为选择符，可以不加引号，也可以加引号。匹配含有选择器所匹配的元素的元素。如
$("div:has('p')").返回包含p标签的div标签
⑦,:hidden 这个选择器可以单独使用,$(':hidden')，也可以在css选择符之后之后,$('p:hidden')。
:hidden 选择器选取隐藏的元素。
以下几种情况的元素是隐藏元素：
-
-
- 设置为 display:none
- 带有 type="hidden" 的表单元素
- width 和 height 设置为 0
- 隐藏的父元素（这也会隐藏子元素）
-
注释：该选择器对 visibility:hidden 和 opacity: 0 的元素不起作用。
⑧，:input 获取表单，不只是input表单，还包括<select><textarea><button>。而input标签选择器只获取input表单。
⑨，:text,:password,:checkbox,:radio,:submit,:file,:image,:reset,:button,等等，获取input标签中的特定类型的表单
⑩, :checked; :selected.匹配所有选中的被选中元素(复选框、单选框，select中的option)，对于select元素来说，获取选中推荐使用:selected
3: DOM遍历方法(筛选)
① filter()方法。筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式(同多个CSS选择器).参数可接受函数
② next()方法。返回下一个紧邻的同辈元素，(效果类似于CSS选择符中的隔壁选择器)
nextAll()方法。返回后面所有的同辈元素，(效果类似于CSS选择符中的邻居选择器)
prev()方法。返回前一个紧邻的同辈元素，
prevAll()方法。返回前面所有的同辈元素，
siblings()方法。返回所有的同辈元素。
parent()方法。返回唯一的父元素，
parents()方法。返回所有的直系祖先元素，（父元素只有一个，祖先元素可有很多）。沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。
closest(‘selector’)方法。获得匹配选择器的第一个直系祖先元素。
closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。
children()方法。返回所有的子元素。（注意：只返回子元素，子元素之后的后代元素不选择【可用CSS选择符中的后代选择器】）
.find() 和 .children() 方法类似，不过后者只沿着 DOM 树向下遍历单一层级。
③ addBack()方法。jQuery对象维护一个堆栈内部来跟踪匹配的元素集合的变化。当一个DOM遍历方法被调用时，新的元素集合推入到堆栈中。
如果还需要包含先前的元素集合，.addBack() 可以提供帮助。考虑一个页面，一个简单的列表就可以了：
下面的代码的返回结果是后面3，4和5项是一个红色的背景：
首先，初始选择位于第3项，初始化堆栈集合只包含这项。调用.nextAll() 后将第4和第5项推入堆栈。
最后，调用.addBack() 合并这两个组元素在一起，创建一个jQuery对象，指向所有三个项元素（按照
文档中的顺序）：{[<li.third-item>,<li>,<li> ]}
④：end()方法。回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。
这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf','children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent','parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。
例子：
$('td:contains(Henry)') //取得包含Henry的所有单元格
.parent() //取得它的父元素
.find('td:eq(1)') //在父元素中查找第2个单元格
.addClass('highlight') //为该单元格添加hightlight类
.end() //恢复到包含Henry的单元格的父元素
.find('td:eq(2)') //在父元素中查找第3个单元格
.addClass('highlight'); //为该单元格添加hightlight类
⑤：find()方法。搜索所有与指定表达式匹配的元素,返回后代元素。这个函数是找出正在处理的元素的后代元素的好方法。.find() 和 .children() 方法类似，不过后者只沿着 DOM 树向下遍历单一层级。
⑥：hasClass()方法。
参数为类名，必须加引号。检查选择的元素集合中是否含有某个特定的类，如果有(至少有一个就可以)，则返回
true，否则返回false. 注意如果查找到的元素是父元素,那么只在父元素中查找是否含有类，不涉及它的子元素。
⑦：is()方法。这个也可以代替hasClass()方法，它比hasClass()方法更灵活，可以接受任何选择符表达式。
根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就
返回true,否则返回false。【单个元素就是 是不是，元素集合就是 包不包含】。
注意（同上）：如果查找到的元素是父元素,那么只在父元素中查找是否含有参数表达式，不涉及它的子元素。
经验：要加引号。多个选择器可以用逗号隔开。
三：事件,
1，为了保证JavaScript代码执行以前页面已经应用了样式,最好是在 <head>元素中把 <link rel="stylesheet"> 标签
和 <style> 标签放在 <script> 标签前面。
2，每次调用$(document).ready()都会向内部的行为队列中添加一个新函数,当页面加载完成后,所有函数都会被执行。
而且,这些函数会按照注册它们的顺序依次执行。通过window.onload虽然也可以注册多个函数,但却不能保证按顺序执行。
3，向.ready()回调函数中传入参数
在某些情况下,可能有必要在同一个页面中使用多个JavaScript库。由于很多库都使用$标识
符(因为它简短方便)
,因此就需要一种方式来避免名称冲突。
为解决这个问题,jQuery提供了一个jQuery.noConflict()方法,调用该方法可以把对$
标识符的控制权让渡还给其他库。使用jQuery.noConflict()方法的一般模式如下:
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
</script>
<script src="myscript.js"></script>
首先,包含jQuery之外的库(这里是Prototype)
。然后,包含jQuery库,取得对$的使用权。
接着,调用.noConflict()方法让出$,以便将控制权交还给最先包含的库(Prototype)
。这样
就可以在自定义脚本中使用两个库了——但是,
在需要使用jQuery方法时,
必须记住要用jQuery
而不是$来调用。
在这种情况下,
还有一个在.ready()方法中使用$的技巧。
我们传递给它的回调函数可以接
收一个参数——jQuery对象本身。利用这个参数,可以重新命名jQuery为$,而不必担心造成冲
突,如下面的代码所示:
jQuery(document).ready(function($) {
//在这里,可以正常使用!
});
或者,也可以使用刚刚介绍的简写语法:
jQuery(function($) {
//使用$的代码
});
4，toggleClass(class|fn [,switch])方法。
如果存在（不存在）就删除（添加）一个类。
有两个参数，第一个参数是类名（必须加引号），同时也可以一个返回类名的回调函数。第二个参数是可选的，其返回值是true 或者 false。
如果是true，则为选中的元素添加指定的类；如果是false，则为选中的元素去除指定的类。
一个例子：此例当count的值为3的倍数时，第二个参数返回true，将会添加参数一中返回的类；不是3的倍数时，移除参数一中的类
var count = 0;
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
},count++ % 3 == 0);
5，事件目标。
事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素（属于DOM元素）。通俗理解就是实际被点击的具体元素。
关于this：当触发任何事件处理程序时,关键字this引用的都是处理事件的DOM元素，也就是代码中事件前的DOM元素，而且有两点要说明：①如果事件前的
元素是一个父元素，那么this具体就只指代这个元素，它的子元素是不包含在this里的。②如果事件前的是元素集合，那么this实际指代的是其中真正执行事
件的那一个元素
6，阻止事件传播；阻止默认行为。event.stopPropagation();event.preventDefault();
如果想要同时停止事件传播和默认操作,可以在事件处理程序中返回false,这是对在事件对象(event)上同时调用 .stopPropagation() 和 .preventDefault()的一种简写方式。
7，事件委托
原理；在DOM中的一个祖先元素上指定一个单击处理程序。由于事件会冒泡，未遭拦截的单击事件最终会
到达这个祖先元素，而我们可以在此时再作出相应处理（通过条件语句
【如$(event.target).is('button')=>返回真或假】过滤出需要进行行为的子元素）。
jquery内置事件委托方法：on()方法。详细请点击此链接 off()方法详情点击此链接
on()简单介绍：（总共可以传四个参数）
如果给.on()方法传入的第二个参数是一个选择符表达式,jQuery会把click事件处理程序
绑定到#switcher对象,同时比较event.target和选择符表达式(这里的'button')。如果匹
配,jQuery会把this关键字映射到匹配的元素,否则不会执行事件处理程序。
off()简单介绍：（总共可以传三个参数）,理解为on()方法的反方法，解除(符合条件的)事件绑定
事件绑定一点说明： 当在jQuery中把处理程序绑定到事件时,之前绑定的处理程序仍然有效，事件会有个累加效果。注意区分
事件个数的累加和 每个事件次数的累加。 one()方法表示事件触发一次，随后立即解除绑定。
8，模拟用户操作：
trigger()方法：$().trigger('click')触发click事件，简写方式为$().click(),不加参数表示触发事件而不是绑定行为
9，响应键盘事件： 1 对按键响应keyup keydown（keyCode），按了哪个键
对文本输入响应keypress(charCode), 输入了什么内容
2 event.which(which属性对DOM原生的event.keyCode和event.charCode进行了标准化。)
3 which: http://www.365mini.com/page/jquery-event-which.htm
4 String.fromCharCode()；参数为Unicode字符值，返回字符串。没有传入参数则返回空字符串
此函数属于静态函数，而且只能够通过全局String对象进行调用，不能通过String对象的实例进行调用。
5：鼠标位置：event.pageX event.clientX event.offsetX event.originalEvent.x
详情参见： http://www.cnblogs.com/everest33Tong/p/5951200.html
6：mousedown、mouseup、click 执行顺序是从左到右的，更重要的是一旦mousedown事件激活，
正常情况下后面两个事件也肯定会被激活。mousemove 事件在是一直在元素上运行的。
一个例子：使用.mousedown()和.mouseup()跟踪页面中的鼠标事件。如果鼠标按键在按下 它的地方被释放,
则为所有段落添加hidden类。如果是在按下它的地方之下被释放的, 删除所有段落的hidden类。
var u_Y, d_Y;
$(document).mousedown(function (e) {
d_Y = e.pageY;
})
.mouseup(function (e) {
u_Y = e.pageY;
if (u_Y < d_Y) {
$("p").removeClass('hidden');
}; //按下后在下面释放
if (u_Y == d_Y) {
$('p').addClass('hidden');
}
});
10，获取元素绑定了那些事件
在1.8.0版本之前，我们要想获取某个DOM绑定的事件处理程序可以这样：$.data(domObj,'events');//或者$('selector').data('events')而从1.8.0版本开始，jQuery突然不支持这样使用了，而是改到了一个叫'_data'的函数功能上了，即，1.8.0及以后的版本你可以这么用：$._data(domObj,'events');//注意，这里不能像$('selector')._data('events')这样用了。要想写出兼容兼容各个jQuery版本的方式，这样获取即可：var eventsData = $.data(domObj,'events') || $._data(domObj,'events');//这个改变在easyui 1.3.1的源码中也有体ps：1.接受的domObj节点必须为dom节点对象，不能为jquery对象，如果是获取的jquery对象，要用get(0)或者[0]转为dom对象2.只能获取到使用jquery方法绑定的参数 on ,live 等。如果是直接写到元素上的事件是不能获取的，使用其他非jquery设置的事件也是无法获取的
四：样式与动画
1，以下方法都是通过设置display属性实现的。
前者,display: none； 后者,display: 上一个display属性值。
对于jQuery提供的任何效果,都可以指定两种预设的速度参数: 'slow' 和 'fast' 。使
用.show('slow')会在600毫秒(0.6秒)内完成效果,而.show('fast')则是200毫秒(0.2秒)。
如果传入的是其他字符串( 一般是normal ),jQuery就会在默认的400毫秒内完成效果。
要指定更精确的速度,可以使用毫秒数值,例如.show(850)。注意,与字符串表示的速度
参数名称不同,数值不需要使用引号。
hide(),show() ========== jQuery复合效果方法 toggle()
例如.hide('duration')【duration可以为 slow 或 fast 或 normal】方法,会同时减少元素的
高度、宽度和不透明度,直至这3个属性的值都达到0,与此同时会为该元素应用CSS规则display:none。
而.show(' duration ')方法则会从上到下增大元素的高度,从左到右增大元素的宽度,
同时从0到1增加元素的不透明度,直至其内容完全可见。
fadeOut(),fadeIn() =========== jQuery复合效果方法 fadeToggle()
逐渐地增大其不透明度。会在一开始就设置元素尺寸
slideUp(),slideDown() =========== jQuery复合效果方法 slideToggle()
这两个动画方法仅改变元素的高度 , 实现垂直滑入的效果
2，fadeTo()方法： $(selector).fadeTo( speed,opacity[,easing,callback] )，
经测试，speed和opacity参数是必须的。
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
3，创建自定义动画
①.animate()方法（测试浏览器 chromium）：点此查看.animate()更详细的用法
①除非你为属性值指定了单位(例如：px、em、%)，否则默认的数值单位为像素(px)。
②对于border等一些属性，只有原来设置了初始值，动画才能生效 。
③对于left top等属性，和在css中一样，要设置pisition属性为 非static(即默认的position值) 的时候动画才生效
所有块级元素默认的CSS定位属性都是static,这个值精确地表明:在改变元素的定位属性之前试图移动它们,它们只会保持静止不动。
④color,background-color等属性无法用于动画(除非使用jQuery.Color()插件)
⑤fontSize 或者 font-size都可以。
⑥还可以将css属性值设为一些特定的字符串，例如："show"、"hide"、"toggle"，则jQuery会调用该属性默认的动画形式。
⑦css属性值也可以是相对的，你可以为属性值加上前缀"+="或"-="，以便于在原来的属性值上增加或减少指定的数值。
例如：{ "height": "+=100" }【省略了单位，默认为px】，表示在原有高度的基础上增加100px。
因为涉及特殊字符问题,所以必须以字符串形式指定相对值,也就是说必须把值放到一对括号内
② 并发效果：效果同时发生，把所有属性都放在animate()的第一个对象参数里即可实现并发效果
排队效果：即让效果一个接一个地发生
(1) 一组元素上的效果:
当在一个.animate()方法中以多个属性的方式应用时,是同时发生的;
当以方法连缀的形式应用时,是按顺序发生的(排队效果)——除非queue选项值为false。
但是排队不能自动应用到其他的非效果方法,如.css()。可使用queue()方法加入排队，例如：
.queue(function(next) {
$switcher.css({backgroundColor: '#f00'});
next();
})
其中的next参数可以为任何其他参数，如aaaa，保持一致即可，如aaaa()。如果不加这个参数
动画到这里就会中断，queue()方法后面连缀的方法都将无法实现。
(2) 多组元素上的效果:
默认情况下是同时发生的;
当在另一个效果方法或者在.queue()方法的回调函数中应用时,是按顺序发生的(排队效果)。
五：操作DOM
1，attr(),removeAttr() 获取、设置、移除 HTML文档属性.例 attr('placeholder','xxx')注意placeholder时val()要为空
2，prop(),removeProp() 获取、设置、移除 DOM属性
3，val() 获取、设置表单控件的值。 三者用法区别与联系，点此链接
4，创建元素
$()除了可以选择DOM，还可以创建DOM,如$('<a href="#top">back to top</a>')将会创建一个dom元素
5，插入新元素。
insertBefore(),insertAfter(),prependTo(),appendTo() ///
\\\ before(),after(),prepend(),append()
$(A).insertBefore(B) 在B元素外部、之前添加$(A)；
如果$(A)是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这相当于一个移动操作，而不是复制操作,以下都一样。
$(A) .prependTo(B) 在B元素内部、之前添加$(A)；
$(A) .appendTo(B) 在B元素内部、之后添加$(A)；
$(A) .insertAfter(B) 在B元素外部、之后添加$(A)。
$(A).before(B) 在$(A)外部、前面添加B;
$(A).after(B) 在$(A)外部、后面添加B；
$(A).prepend(B) 在$(A)内部、前面添加B;
$(A).append(B) 在$(B)内部、后面添加B;
6，包装元素
wrap(),wrapAll(),unwrap().在匹配元素外层添加指定的DOM。详细用法点此链接
7，显示迭代
.each()。----> 详细用法点此链接 <----注意与另一个全局$.each()函数区分
8, 复制元素
.clone()。返回当前jQuery对象的一个克隆副本点此查看详细用法
9, 要用新元素或文本替换每个匹配的元素，使用：
.html()
.text()
.replaceAll()
.replaceWith()
- jQuery.text() 函数详解 【注】text()设置后 只有文字内容，其他所有的html标签都没有了
- jQuery.html() 函数详解
设置操作返回当前jquery对象，读取操作返回读取的字符串
10，要移除每个匹配的元素中的元素，使用：
.empty() jQuery.empty() 函数详解
$().empty() 等价于 $().html('')
11，要从文档中移除每个匹配的元素及其后代元素，但不实际删除它们，使用：
.remove() jQuery.remove() 函数详解
.detach() jQuery.detach() 函数详解
