obj.length 当obj是jquery对象时，得到的是数组的长度；当obj是js对象时，得到的是属性
1.基本知识
$(function() {}) 相当于window.onload = function () {};这样比是不准确的，两者还是有区别的。具体见以下的6.事件总结
也相当于$(document).ready(function(){});这样比是完全准确的，就是它的缩写。
$("#btn1").click(function(){}) 相当于document.getElementById("btn1").onclick = function () {}
jQuery对象和DOM对象（注意！！！！！！！jQuery对象是一个数组对象）
通过jsDOM的api获得的对象为DOM对象，一般声明为var xxx；通过jQuery的方式获得的对象为jQuery对象，一般声明为var $xxx
jQuery对象转为DOM对象：1)var xxx = $xxx[index] ; 2)var xxx = $xxx.get(index)。
DOM对象转为jQuery对象：var $xxx = $(xxx)。
jQuery和DOM对象有各自不同的api方法，不能混淆使用。
例如：$("li")得到的jQuery对象(是个由DOM对象组成的数组)，click()是为这个数组中每一个DOM对象添加事件，所以方法中的this是个DOM对象
$("li").click(function () {
alert($(this).text());
});
2.选择器（可以综合使用）（选择器搞不定可以借助方法）
01.基本选择器（class可以有多个，id只能有一个）（注意！！！！可以连在一起写 例如：$("div.mini") ）
$("#one").css("background", "#ffaabb");//$("#one")选择id为one的节点，返回jQuery元素。并设置背景颜色
$(".mini").css("background", "#ffccaa");//选择class属性为mini的节点
$("div").css("background", "#ffbbaa");//选择TagName为div的节点
$("*").css("background", "#ffaabb");//选择所有节点元素
$("span,#two").css("background", "#ffbbaa");//中间加, 代表选择TagName为span或者id为two的节点
02.层级选择器
$("body div").css("background", "#ffbbaa");
//body中所有的div，（包括子节点，孙节点...）
$("body>div").css("background", "#ffaabb");
//body的所有div子节点
$("#one+div").css("background", "#ffbbaa");
//id为one的下一个相邻div兄弟节点
$("#two~div").css("background", "#ffaabb");
//id为two的节点之后的所有的div节点
$("#two").siblings("div").css("background", "#ffaabb");
//id为two的所有兄弟div节点
$("#two").nextAll("span:first").css("background", "#ffaabb");
//id为two的的节点之后的TagName为span的第一个同辈节点
$("#two").prevAll("div").css("background", "#ffaabb");
//选择id为two的所有在其前面的div兄弟节点（只包括兄弟）
03.基本过滤选择器
//css("background", "#ffaabb");方法是jQuery对象才有的 $("div:first") TagName为div的第一个节点
$("div:last") TagName为div的最后一个节点
$("div:not(.one)") TagName为div的且class不为one的节点数组
$("div:even") TagName为div的且下标为偶数的节点数组
$("div:odd") TagName为div的且下标为奇数的节点数组
$("div:gt(3)") TagName为div的且下标大于3的节点
$("div:eq(3)") TagName为div的且下标等于3的节点
$("div:lt(3)") TagName为div的且下标小于3的节点
$(":header") 所有标题节点<h1></h1>...
$(":animated") 所有在执行动画的节点
$("#two").nextAll("span:first") id为two的节点之后第一个TagName为span的节点
04.内容过滤选择器
//选择 含有文本 'di' 的 div 元素 $("div:contains('di')") //选择的div元素没有子元素 $("div:empty") //选择的div元素包含有class为mini的子元素 $("div:has(.mini)") //选择的div元素含有子元素 $("div:parent")
05.可见性选择器
001.使节点不可见
<div style="display:none;" class="none">style的display为"none"的div</div>
<input type="hidden" value="123456789000" size="8">
002.在js中使其可见
$("div:hidden").show(2000).css("background", "#ffbbaa");
//显现过程为两秒，执行过这个方法之后改div就变成visible的了
003.可见性选择器
$("div:visible")//所有可见的div
$("div:hidden")//不可见的div
//把jQuery对象转为DOM对象，再用DOM的方法得到value属性值
//alert($("input:hidden")[0].value);
alert("~" + $("input:hidden").val());//jquery的方式得到value属性值
06.属性选择器
选取含有 属性title 的div元素. $("div[title]")
选取 属性title值等于'test'的div元素. $("div[title='test']")
选取 属性title值不等于'test'的div元素(没有属性title的也将被选中). $("div[title!='test']")
选取 属性title值 以'te'开始 的div元素. $("div[title^='te']")
"选取 属性title值 以'est'结束 的div元素. $("div[title$='est']")
选取 属性title值 含有'es'的div元素. $("div[title*='es']")
组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素. $("div[id][title*='es']")
选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素. $("div[title][title!='test']")
07.子元素过滤选择器（注意！！！！！！！！要想选取出来的是子元素，：前面要加空格才行。!!!!!!加空格事实上是一个层级选择器的体现）
选取每个class为one的div父元素下的第2个子元素. $("div.one :nth-child(2)")
$("div.one :nth-child(index)");//选取class为one的div下第index个子元素，index从1开始
$("div.one :nth-child(even/odd)");//能选取每个父元素下的索引值为偶/奇数的元素。(:nth-child(even/odd)的索引值是从1开始)
//与$("div.one :even/odd");选择的奇偶恰恰相反
//（注意！！！！！！！！！！！因为:even/odd的索引值是从0开始，这里0也是偶数）
:nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
:nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素
选取每个class为one的div父元素下的第一个子元素. $("div.one :first-child")
选取每个class为one的div父元素下的最后一个子元素. $("div.one :last-child")
如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素. $("div.one :only-child")
08.表单元素过滤选择器（注意！！！！！！！！jQuery对象的each方法）
对表单内 可用input 赋值操作. $(":input:enabled").val("姬云飞");//使所有可用的input的value属性值为“姬云飞”
对表单内 不可用input 赋值操作. $(":input:disabled").val("jiyunfei");
获取多选框选中的个数. alert($(":checkbox[name='newsletter']:checked").length);
获取多选框选中的内容. $(":checkbox[name='newsletter']:checked").each(function () {
alert(this.nextSibling.nodeValue);
});
获取下拉框选中的内容. $("select :checked").each(function () {//:号前面需要加空格因为被选择的是子节点<option>
alert(this.value);
});
3.jQuery对象的方法（可以连缀多个方法，因为调用一个方法的返回值还是调用的对象）（详见API）
01.val() 获得第一个匹配元素的当前值。
若获取的是select节点的val()，那么得到的是被选中<option>节点的文本子节点；
若被选中的有多个，可以使用$("#multiple").val().join("~")得到Multiple~Multiple3 , 若不写.join("~")，默认用,分割。
若获取的是checkbox多选框的val()，那么只能得到第一个被选中的<input>的value属性值，因为$(":checkbox:checked")是数组
val(val) 设置每一个匹配元素的值。
若想使 select，checkbox或radio 选中某一项或多项，可以不用设置checked或selected属性，而是
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
02.attr(name) 取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。
attr(key, value) 为所有匹配的元素设置一个属性值。
03.each() 以每一个匹配的元素作为上下文来执行一个函数。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。
而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整形）。
返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
详见api文档
04.text() 取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
text(val) 设置所有匹配元素的文本内容。与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).
05.click(Function fn) 在每一个匹配元素的click事件中绑定一个处理函数（就是所谓的隐式迭代）。
点击事件会在你的指针设备的按钮在元素上单击时触发。
单击的定义是在屏幕的同一点触发了mousedown和mouseup.几个事件触发的顺序是：mousedownmouseupclick
$("p").click( function () { $(this).hide(); });
06.注意！！！！！val和attr的区别
当<input type="text" name="name" value="">时：
不管在输入框中输入什么，alert($(":text[name='name']").attr("value"));的值为“”
alert($(":text[name='name']").val());的值就是输入的值
当<input type="text" name="name">时：
不管在输入框中输入什么，alert($(":text[name='name']").attr("value"));的值为undefined
alert($(":text[name='name']").val());的值就是输入的值
综上，若涉及到value的属性时最好用val()方法。
07.删除及清空节点
remove()：将把jQuery对象对应的DOM节点直接删除（包含其子节点），返回值是被删除的节点对象
empty()：将把jQuery对象对应的DOM节点的子节点全部删除
08.克隆和替换节点
clone()：克隆节点，返回值是克隆后的副本对象，若原节点带有id，注意克隆后要修改id的属性值不然id值就不唯一了。副本对象不具有事件
clone(true)：副本对象具有原对象的事件函数
replaceWith()：a.replaceWith(b) 意思是把a换成b，返回值为a，移动b且去掉a。a可以用选择器匹配多个
replaceAll()：a.replaceAll(b) 意思是把b换成a，移动a且去掉b。b可以用选择器匹配多个
自定义的互换节点的方法：
function replaceEach($aNode,$bNode) {//切记！！！！形参不用写var
var $aNode2 = $aNode.clone(true);
$bNode.replaceWith($aNode2).replaceAll($aNode);
}
09.包裹节点（了解）
warp()
warpAll()
warpInner()
010.html() 同DOM对象innerHTML一样
html("") 可以清空原来的语句，自己写html语句
011.find(select) 寻找子节点，返回子节点的jQuery对象。var $tdContent = $trNode.find("td:first").text();
012.class相关
//1. hasClass(): 某元素是否有指定的样式 alert($("div:first").hasClass("SubCategoryBox")); //true //2. 移除样式 $("div:first").removeClass("SubCategoryBox"); alert($("div:first").hasClass("SubCategoryBox")); //3. 添加样式 $("div:first").addClass("SubCategoryBox"); //4. 切换样式: 存在, 则去除; 没有, 则添加. $(".showmore").click(function(){ $("div:first").toggleClass("SubCategoryBox"); return false; });
//5. 获取和设置元素透明度: opacity 属性 alert($("div:first").css("opacity")); $("div:first").css("opacity", 0.5); //6. width 和 height alert($("div:first").width()); alert($("div:first").height()); $("div:first").width(400); $("div:first").height(80); //7. 获取元素在当前视窗中的相对位移: offset(). //其返回对象包含了两个属性: top, left. 该方法只对可见元素有效 alert($("div:first").offset().top); alert($("div:first").offset().left);
013.is() show() hide()
$(function () { $(".head").click(function () {//为class为head的节点设置点击事件 var flag = $(".content").is(":hidden");//is();看节点是否符合，这里的意思是是否隐藏 if (flag) {//如果是隐藏的 $(".content").show();//show()方法可以使节点显示 } else { $(".content").hide();//hide()方法使节点隐藏 } }); })
4.操作节点
01.操作文本节点
通过元素选择器获取的元素节点的text方法来操作文本节点
02.操作属性节点
通过元素选择器获取的元素节点的attr()方法来操作属性节点（直接操作value属性可以使用val()方法）
03.操作节点(创建和添加节点)( $("") 引号里写html节点，可以带属性·文本节点·子节点，即为创建 )
<script type="text/javascript" src="jquery/jquery-3.2.1.js"></script> <script type="text/javascript"> $(function() { //这是一对，主谓颠倒的用法。代表加在最后一个子节点的位置 $("<p>你最喜欢的城市？</p>") . appendTo("body"); //里面可以使用这样复合的写法。$("<ul id='city'><li id='bj'>北京</li></ul>"),或者去掉$()都行 $("body") . append($("<ul id='city'><li id='bj'>北京</li></ul>")); //这一对和上面的相反，是加在第一个子节点的位置 $("<li id='xm'>厦门</li>") . prependTo("#city"); $("#city") . prepend("<li id='gz'>广州</li>") //插入到某一个子节点的后面 $("<li id='jz'>焦作</li>") . insertAfter("#bj"); $("#jz") . after("<li id='zz'>郑州</li>") //插入到某一个子节点的前面 $("<li id='hd'>邯郸</li>") . insertBefore("#gz"); $("#gz") . before("<li id='bd'>保定</li>") }) </script>
5.jQuery方法
$.trim("") 去掉字符串前后的空格，返回去掉空格后字符串
6.事件总结
01.click(fn) 鼠标点击时响应
02.blur(fn) 失去焦点时响应
03.focus(fn) 得到焦点时响应 $("#login").focus();设置焦点
04.window.onload(function () {}) 和 $(function () {})也就是$(document).ready(function () {});有什么区别
05.绑定事件bind()
//bind: 为某 jQuery 对象绑定事件. /* $(".head").bind("click", function(){ //使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定 //的选择器. var flag = $(".content").is(":hidden"); if(flag){ //show() 方法: 使隐藏的变为显示 $(".content").show(); }else{ $(".content").hide(); } }); */
06.合成事件
//mouseover: 鼠标移上去 //mouseout: 鼠标移出. /* $(".head").mouseover(function(){ $(".content").show(); }).mouseout(function(){ $(".content").hide(); }); */ //合成事件: hover: 鼠标移上去执行第一个函数, 移出执行第二个函数. 效果等同于上面 /* $(".head").hover(function(){ $(".content").show(); }, function(){ $(".content").hide(); }); */
//合成事件: toggle: 第一次点击执行第一个函数, 第二次点击执行第二个 //函数 ... 循环执行. $(".head").toggle(function(){ $(".content").show(); }, function(){ $(".content").hide(); });
07.事件冒泡
若为多个节点设置click事件，那么响应的顺序是从子节点依次向上响应。阻止这种响应的方法是：
在事件处理函数中返回 false, 会对事件停止冒泡. 还可以停止元素的默认行为.
08.事件对象
在事件函数中添加一个参数（不用加var），那么这个参数会被传入事件对象；
事件对象的几个属性event.pageX, event.pageY: 获取到光标相对于页面的 x, y 坐标。
$("html").mousemove(function (event) {
$("#message").text("x:" + event.pageX + ",y:" + event.pageY);
});
09.移除事件
7.额外
01.若.js文件和html在同一目录下，那么导入方式是 src="jquery-3.2.1.js" 其中开头不带/意思是当前目录下；
若.js文件在html当前目录的子目录下，那么导入方式例如：src="jquery/jquery-3.2.1.js"；
若非以上两种情况，那么导入方式例如：src="../jquery/jquery-3.2.1.js"。
8.动画
//演示动画效果: show() 和 hide() 方法中传入毫秒数以达到动画的效果 /* $(function(){ $(".head").toggle(function(){ $(".content").show(1000); }, function(){ $(".content").hide(1000); }); }) */ //只改变高度 /* $(function(){ $(".head").toggle(function(){ $(".content").slideDown(500); }, function(){ $(".content").slideUp(500); }); }) */ //只改变透明度 /* $(function(){ $(".head").toggle(function(){ $(".content").fadeIn(1000); }, function(){ $(".content").fadeOut(1000); }); }) */ //toggle() 可以切换元素的可见状态. //slideToggle(): 通过高度变化来切换匹配元素的可见性 //fadeToggle(): 通过透明度来切换元素的可见性. //fadeTo(): 把不透明度以渐近的方式调整到指定的值 (0 – 1 之间). $(function(){ $(".content").show(); var i = 1; $(".head").click(function(){ //$(".content").toggle(); //$(".content").slideToggle(); //$(".content").fadeToggle(); $(".content").fadeTo("slow", i); i = i - 0.1; }); })