jQuery回炉重造之路：技术补坑，常学常新

这不是攻略，只是查漏补缺。

一、选择器

$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性

$("div#intro .head")    id="intro"的div元素中所有class="head"的元素

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("tr:even")  所有偶数 <tr> 元素

$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
$("ul li:gt(3)")	列出 index 大于 3 的元素
$("ul li:lt(3)")	列出 index 小于 3 的元素

$("input:not(:empty)")	所有不为空的 input 元素

$(":contains('W3School')")	包含指定字符串的所有元素

$(selector).offsetParent() 

返回最近的祖先定位元素。
定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。
可以通过 jQuery 设置 position，或者通过 CSS 的 position 属性

 

二、解决名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

三、事件

$(".a").dbclick(function) 触发或将函数绑定到被选元素的双击事件

delegate()为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

$(selector).delegate(childSelector,event,data,function)

用法实例：
$(document).ready(function(){
  $("div").delegate("p","click",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>这是一个新段落。</p>").insertAfter("button");
  });
});

error() 方法触发 error 事件，或规定当发生 error 事件时运行的函数

$("img").error(function(){
  $("img").replaceWith("
      Missing image!
");
});

one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。

当使用 one() 方法时，每个元素只能运行一次事件处理器函数。

$("p").one("click",function(){
  $(this).animate({fontSize:"+=6px"});
});

event.result	包含由被指定事件触发的事件处理器返回的最后一个值。
event.target	触发该事件的 DOM 元素。

用法实例
$("button").click(function(e) {
  $("p").html(e.result);
});

$("p, button, h1, h2").click(function(event){
  $("div").html("Triggered by a " + event.target.nodeName + " element.");
});

preventDefault() 阻止默认事件

 

四、效果

slideUp()-向上滑动元素
slideDown()-向下滑动元素
jQuery slideToggle()

fadeIn()-用于淡入已隐藏的元素
fadeOut()-用于淡出可见元素
fadeToggle()-可以在 fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo()-允许渐变为给定的不透明度（值介于 0 与 1 之间）

$(".a").fadeTo(speed[slow,fast,10ms],opacity[0-1],callback[function]);
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).animate({params},speed,callback);
1.animate()也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});
2.animate()可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});
3.编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列,逐一运行
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});
4.停止动画
$("#stop").click(function(){
  div.stop();
});
5.由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。
为了避免这个情况，您可以以参数的形式添加 Callback 函数。
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

 五、操作HTML元素和属性

获取内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
:contains() - 选择器选取包含指定字符串的元素

用法实例：
1.获取数据中‘.search-panel’的dom元素并填充到$panel容器中，再进行HTML转义输出页面：
  $panel.html($('.search-panel', data).html());
2.$("p:contains(is)")  选择所有包含 "is" 的 <p> 元素

获取属性
attr()与prop()的区别 https://www.cnblogs.com/zhwl/p/3520162.html

1.9.0 开始不建议使用 attr() 来对具有 true 和 false 两个属性的属性进行操作了。

1.原理
attr()使用的DOM的API setAttribute()和getAttribute()方法操作的属性元素节点
prop()可以理解为 document.getElementById(el)[name] = value，这是转化成 element 的一个属性

2.区别
 1）用prop来设置属性名，html结构是不会发生变化的。而用attr来设置属性名，html结构是会发生变化的。

3.使用原则
 1）具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
 2）对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
 3）对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
 4）通常在获取或者设置checked，selected，readonly，disabled等的时候使用prop效果更好，减少了访问dom属性节点的频率

4.用法实例：
<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”属于固有属性，
因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法，则会出现：
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

操作属性
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
hasClass() -是否有某个类 ，一般用于判断条件
removeAttr() - 从所有匹配的元素中移除指定的属性


用法实例
$("#div1").addClass("important blue");//可一次性添加多个类
$("h1,h2,p").removeClass("blue");//可以在不同元素中同时删除多个类
$("h1,h2,p").toggleClass("blue");
$("p").css("background-color");//返回属性值
$("p").css({"background-color":"yellow","font-size":"200%"});//一次性修改多个属性值
if($("p").hasClass("on")){};

元素增减
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
insertAfter() - 把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore() - 把匹配的元素插入到另一个指定的元素集合的前面。

remove()- 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
detach()- 移除被选元素，包括所有文本和子节点。保留 jQuery 对象中的匹配的元素，因而可以在将来再使
          用这些匹配的元素。保留所有绑定的事件、附加的数据，这一点与 remove() 不同。

hide() - 隐藏，等价于display:none,dom结构会变化
show() - 显示
toggle() - 可以在 slideDown() 与 slideUp() 方法之间进行切换

unwrap() - 删除被选元素的父元素
wrap() - 把每个被选元素放置在指定的 HTML 内容或元素中

用法实例：

function afterText()
{
var txt1="<b>I </b>";                    // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建新元素
var txt3=document.createElement("big");  // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
}

$("p").remove(".italic");
$("#div1").remove();
$("#div1").empty();//remove可以传参，empty不能

$("p").unwrap();
$("p").wrap("<div></div>");

 

尺寸获取
width()-元素的宽度
height()-元素的高度
innerWidth()-元素的宽度（包括内边距）
innerHeight()-元素的高度（包括内边距）
outerWidth()-元素的宽度（包括内边距和边框）
outerHeight()-元素的高度（包括内边距和边框）
outerWidth(true)-元素的宽度（包括内边距、边框和外边距）。
outerHeight(true)-元素的高度（包括内边距、边框和外边距）。

1.display为none时，jQuery的outerWidth()与原生JavaScript的offsetWidth的区别
  offset()函数用于设置或者返回当前匹配元素相对于当前文档的偏移，即相对于当前文档的坐标，只对可见元素有效。
  offsetWidth 是javascript 对象属性
  display为block时，$('#p1').outerWidth()与$('#p1').get(0).offsetWidth 取的值是相同的
  =width+padding+border;
  display为none时，上例中$('#p1').outerWidth()=100与$('#p1').get(0).offsetWidth=0;
  $('#p1').outerWidth(true)=width+padding+border+margin;
2.获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别
  https://segmentfault.com/a/1190000010746091
  
  $(window).width()与$(window).height()：获得的是屏幕可视区域的宽高，不包括滚动条与工具条。
  $(window).width() = width + padding
  $(window).height() = height + padding

  document.documentElement.clientWidth与document.documentElement.clientHeight：
  获得的是屏幕可视区域的宽高，不包括滚动条与工具条，跟jquery的(window).width()与(window).height()获得的结果是一样的。
  document.documentElement.clientWidth = width + padding
  document.documentElement.clientHeight = height + padding

  window.innerWidth与window.innerHeight：获得的是可视区域的宽高，但是window.innerWidth宽度包含了纵向滚动条的宽度，window.innerHeight高度包含了横向滚动条的高度(IE8以及低版本浏览器不支持)。
 window.outerWidth = width + padding + border + 纵向滚动条宽度
 window.outerHeight = height + padding + border + 横向滚动条高度 + 工具条高度

 document.body.clientWidth与document.body.clientHeight：document.body.clientWidth获得的也是可视区域的宽度，但是document.body.clientHeight获得的是body内容的高度，如果内容只有200px，那么这个高度也是200px,如果想通过它得到屏幕可视区域的宽高，需要样式设置，如下：

 offsetWidth & offsetHeight
 返回本身的宽高 + padding + border + 滚动条
 
 offsetLeft & offsetTop所有HTML元素拥有offsetLeft和offsetTop属性来返回元素的X和Y坐标
 1)相对于已定位元素的后代元素和一些其他元素（表格单元），这些属性返回的坐标是相对于祖先元素
 2)一般元素，则是相对于文档，返回的是文档坐标
 offsetParent属性指定这些属性所相对的父元素，如果offsetParent为null，则这些属性都是文档坐标
 

 scrollWidth & scrollHeight
 这两个属性是元素的内容区域加上内边距，在加上任何溢出内容的尺寸.
 因此，如果没有溢出时，这些属性与clientWidth和clientHeight是相等的。

 scrollLeft & scrollTop指定的是元素的滚动条的位置
 scrollLeft和scrollTop都是可写的属性，通过设置它们来让元素中的内容滚动。
 
 兼容性
 1)window innerWidth 和 innerHeight 属性与outerWidth和outerHeight属性IE8以及以下不支持。
 2)测试浏览器IE，火狐，谷歌，360浏览器，Safari都支持document.documentElement.clientWidth与document.documentElement.clientHeight。

遍历DOM树
/*parent()-返回被选元素的直接父元素
parents()-返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
parentsUntil()-返回介于两个给定元素之间的所有祖先元素

children()-返回被选元素的所有直接子元素
find()-返回被选元素的后代元素，一路向下直到最后一个后代

siblings()-返回被选元素的所有同胞元素
next()-返回被选元素的下一个同胞元素
nextAll()-返回被选元素的所有跟随的同胞元素
nextUntil()-返回介于两个给定参数之间的所有跟随的同胞元素
prev()-
prevAll()-
prevUntil()-

first()-返回被选元素的首个元素
last()-返回被选元素的最后一个元素
eq()-返回被选元素中带有指定索引号的元素
filter()-允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not()-返回不匹配标准的所有元素
*/
用法实例:
//返回介于 <span> 与 <div> 元素之间的所有祖先元素
 $("span").parentsUntil("div");
 $("h2").nextUntil("h6");
 $("p").not(".intro"); 

六、AJAX

load 方法:从服务器加载数据，并把返回的数据放入到被选元素中

//{data:与请求一同发送的查询字符串键/值对集合,
//  callback：{responseTxt - 包含调用成功时的结果内容
//              statusTXT - 包含调用的状态
//              xhr - 包含 XMLHttpRequest 对象}
//}

$(selector).load(URL,data,callback);


用法实例：
$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

$.get()  通过 HTTP GET 请求从服务器上请求数据     $.get(URL,callback);
$.post() 通过 HTTP POST 请求从服务器上请求数据    $.post(URL,data,callback);

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

 

 七、定位与偏移

offset() 方法返回或设置匹配元素相对于文档的偏移（位置），只对可见元素有效
第一个匹配元素的偏移坐标，包含两个整型属性：top 和 left，以像素计。

position() 方法返回匹配元素相对于父元素的位置（偏移），只对可见元素有效
返回的对象包含两个整型属性：top 和 left，以像素计。

$(".btn1").click(function(){
  x=$("p").offset();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

$(".btn1").click(function(){
  x=$("p").position();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

scrollLeft() 返回或设置匹配元素的滚动条的水平位置。
滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时，位置是 0。

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
1)scroll top offset 指的是滚动条相对于其顶部的偏移。
2)如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移
3)该方法对于可见元素和不可见元素均有效。
4)当用于获取值时，该方法只返回第一个匹配元素的 scroll top offset。
5)当用于设置值时，该方法设置所有匹配元素的 scroll top offset。

$("div").scrollLeft(100);
$(selector).scrollLeft();