jq总结1

选择器

/**
 *  多目标选择器
 *  可以选择多个元素或者表达式，
 *  包装成 jQuery 对象的集合
 *  例子：$("div,span")
 */

$("table tr td"); //multiple(selector1, selector2)

$("#id > span"); //直接节点

$("label + input") //next(prev, next) 同级的紧挨着的下一个

$("#prev ~ div") // siblings(prev, siblings),同样要求是同级

基本的过滤器

$(":header");     // 所有 header, <h1>~<h6>
$("tr:odd");      // 选中所有奇数行
$("tr:even");     // 选中所有偶数行
$(":animated");   // 选中所有当前有特效的素
$("div:animated");// 选中运行动画的
$("tr:first");    // 选中第一行
$("tr:last");     // 选中最后一行
$("input:not(:checked)");  //选中所有没有“checked”
$("td:gt(4)");    // 选中所有index 是4 之后的td
$("td:lt(4)");    // 选中所有index 是4 之前的td

$("td:eq(4)");    // 选中index 是 4 的td
$("td").eq(4);    // 选中index 是 4 的td

内容过滤选择器

$("div:contains('John')"); // 选中所有包含"John"的div
$("td:empty");    // 选中所有内容为空的td
$("div:has(p)");  // 选中包含有<p>元素的<div>元素，返回jQuery 对象集合

$("td:parent");   //选中所有包含子节点的元素，包括文本也可以算是子节点

可见性过滤器

$("span:hidden");  // 选中所有隐藏的<span>
$("span:visible"); // 选中所有可见的<span>

关于可见性，这里需要额外说明的。在老版本的 jQuery 中 visibility:hidden;是认为不可见的，我有证据，

Sizzle.selectors.filters.hidden = function(elem){
    return "hidden" === elem.type ||
        jQuery.css(elem, "display") === "none" ||
        jQuery.css(elem, "visibility") === "hidden";
};

这段代码出自 jquery-1.3.1.js,然而到近代的版本中(在1.3.2就改了)

  jQuery.expr.filters.hidden = function( elem ) {
            var width = elem.offsetWidth,
                height = elem.offsetHeight;
            // 没有 visibility 什么事
            return ( width === 0 && height === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
        };

简单的说就是：如果元素占用空间了，就认为是可见的。只要不是0的都算可见的。

所以，visibility：hidden; 或者 opacity:0; 由于占有空间，它们算事“可见”的。

属性过滤器

$("div[id]");   // 选中包含 id 属性的div
$("input[name$='bc']");  // 选中 name 属性以 'bc' 结尾的 input
$("input[name^='letter']"); // 选中属性 name 是以'letter'开头的 input
$("input[tag*='man']"); // 属性tag里包含'man'
$("input[abc='def']"); // 属性 abc 的值为 'def'

$("input[title!='722']");  // 选中属性 title 不包含'722'的
$("input[id][gender$='man']"); // 选中包含id 属性，和以'man'结尾的属性 gender 的<input>元素

孩子过滤器

$("ul li:nth-child(2)"); // 选中自身是<ul>元素的第二个子节点的<li>元素，注意这个计算是从 1 开始的，不是从0 开始
$("div span:firstChild"); // 选中自身是<div>元素的第一个子节点的<span>元素
$("div span:lastChild"); // 选中自身是<div>元素的最后一个子节点的<span>元素

表单过滤器

$(":button");   //所有 <button> 和 <input type="button"> 元素
$("form :checkbox")； // 选中所有<form>标签下的<input type="checkbox"> 不过这样会比较慢

$("input:checkbox")； // 推荐

$(":file")； // 选中所有<input type="file">
$(":hidden"); // 选中所有隐藏元素，以及<input type="hidden">
$(":input"); // 选中所有<input>
$(":text");  // 选中所有<input type="text">
$(":password"); // 选中所有<input type="password">
$(":radio");    // 选中所有<input type="radio">
$("input:radio");  // 最佳实践是这样

$(":image")； // 选中所有<input type="image">
$(":reset");  // 选中所有<input type="reset">
$(":submit"); // 选中所有<input type="submit">

$("input:enabled"); // 选中所有enabled 的<input>元素
$("input:disabled"); // 选中所有disabled 的<input>元素
$("input:checked"); // 选中所有 checked 的 checkbox
$("input:selected"); // 选中所有 selected 的<option>元素

属性相关的方法

jQuery.removeAttr(name);
jQuery.attr(name); // 返回属性的值，比如$("img").attr("src")
jQuery.attr(key,value); // 这是设置属性的值
jQuery.attr(properties); // 也是设置属性的值

$("img").attr({
    src: "/images/hat.gif",
    title: "jQuery",
    alt: "jQuery Logo"
});

jQuery.attr(key,function); // function 计算出的结果，赋给key

// 在回调函数中
function callback(index) {
 // index == position in the jQuery object
 // this means DOM Element
}

类相关的操作

jQuery.toggleClass(class); // 反复加减 class
jQuery.toggleClass(class,switch); // 增加一个 switch 表达式

// 表达式计算后返回 class 名称
$( "div.foo" ).toggleClass(function() {
  if ( $( this ).parent().is( ".bar" ) ) {
    return "happy";
  } else {
    return "sad";
  }
});

jQuery.hasClass(class)； // 返回boolean
jQuery.removeClass(class); // 去掉挂载的 class
jQueyr.addClass(class)； // 加载 class

html相关的操作

jQuery.html()； // 返回包含的html 文本
jQuery.html(val); // 用val 替换包含的 html 文本,输入的代码会被执行

文本相关的方法

jQuery.text();  // 返回包含的纯文本，不会包括html 标签，比如<span>abcd</span>，调用 .text() 方法，只会返回abcd，不会返回<span>abcd</span>

jQuery.text(val); // 用 val 替换包含的纯文本，和html(val)方法的区别在于，所有的内容会被看作是纯文本，不会作为html 标签进行处理，比如调用.text("<span>abcd</span>")，<span> 和 </span>不会被认为是html 标签，而是作为纯文本显示了。

值相关的操作

jQuery.val(); // 返回 string 或者array
jQuery.val(val); // 设置 string 值
jQuery.val(array); // 设置多个值，以上 3 个方法，主要都是用在表单标签里，如<input type="text">，<input type="checkbox">等

在jQuery 对象之间查找

需要弄清： 文本和节点是两回事，在 DOM 里就分开了。

jQuery.parent(expr); // 找父亲节点，可以传入expr 进行过滤,比如

$("span").parent();
$("span").parent(". class"); // 用表达式过滤

jQuery.parents(expr); // 祖先元素，不限于父元素
jQuery.children(expr); // 返回所有子节点(不包括文本)，和 parents()方法不一样的是，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点

jQuery.contents(); // 返回下面的所有内容，包括节点和文本。这个方法和 children()的区别就在于，包括空白文本，也会被作为一个jQuery 对象返回，children()则只会返回节点

jQuery.prev(); // 返回上一个兄弟节点，不是所有的兄弟节点
jQuery.prevAll(); // 返回所有之前的兄弟节点
jQuery.next(); // 返回下一个兄弟节点，不是所有的兄弟节点 (+)
jQuery.nextAll(); // 返回所有之后的兄弟节点(~)
jQuery.siblings(); // 返回兄弟姐妹节点，不分前后
jQuery.add(expr); // 往既有的jQuery 对象集合中增加新的jQuery 对象，例子：
$("div").add("p");

jQuery.find(expr); // 从当前的初始集合下去找,不会返回初始集合内容：
$("body").find("div");
// 等同于：
jQuery.find("body div");

jQuery.filter(expr); // 从初始的jQuery 对象集合中筛选出一部分

串联方法

jQuery.andSelf();  // 把最后一次查询前一次的集合,也增加到最终结果集中,比如:

$("div").find("p").andSelf(); 这样结果集中包括所有的<p>和<div>。如果是$("div").find("p"),那就只有<p>，没有<div>

jQuery.end(); // 把最后一次查询前一次的集合，作为最终结果集，比如
$("p").find("span").end(); // 所有的<p>，没有<span>

DOM 文档操作方法

a.append(b); // b 加到 a 上
$("div").append("<span>hello</span>");

a.appendTo(b); // a 加到 b 上
$("<span>hello</span>").appendTo("#div")； 

$("span").appendTo("div"); //隐藏的 move，移动元素

/* 比如在：

 <div id='a'>a: <span> hello </span> </div>
 <div id='b'>b: </div>

 经过

 $('span').appendTo("#b");

 结果会是正样：

 a:
 b: hello

*/

jQuery.prepend(content); // 在选择元素的内部第一个位置插入

a.prependTo(b); // a 插到 b 内部的排头位置

jQuery.after(content); 注意是 content，在外部插入，插入到后面，比如
$("#foo").after("<span>hello</span>"); // 参数是内容，不能是选择器

jQuery.insertAfter(selector)；// 允许是选择器
$("<span>hello</span>").insertAfter("#foo");

jQuery.before(content); // 在外部插入，插入到前面, 参数不是选择器

jQuery.insertBefore(selector); // 外面插入

jQuery.wrapInner(html); // 在内部插入标签，比如
$("p").wrapInner("<span></span>");

jQuery.wrap(html); // 在外部插入标签，比如
$("p").wrap("<div></div>"); // 所有的 p 都会被各自的div 包裹

jQuery.wrapAll(html); // 所选元素会被同一个大的 html 整个的全部包裹

jQuery.replaceWith(content); 比如
$(this).replaceWith("<div>"+$(this).text()+"</div>");

jQuery.replaceAll(selector);
$("<div>hello</div>").replaceAll("p");

jQuery.empty();
$("p").empty(); // 从娃娃做起，会把<p>下面的所有子节点清空,但不清理 p

jQuery.remove(expr);
$("p").remove(); // 从自身做起，会把所有<p>移除，可以用表达式做参数，进行过滤

// 表面看跟 remove 做的一样，删除元素；
// 但是保留了元素中的数据或事件, 通过返回值返回，留存后用，
// 需要时候随时能补上去，绑定的数据事件不受影响。
jQuery.detach();

jQuery.clone([withDataAndEvents ] ));

/*
 * 使用案例

在适用 append 的时候，隐约的我们发现了它具有移动的功效：

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

$( ".hello" ).appendTo( ".goodbye" );

结果变成了这样：

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

如果我们的需求是额外的拷贝一份元素到目的地：

$( ".hello" ).clone().appendTo( ".goodbye" );

这样会更方便，结果会是这样：

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

clone 的用法也分两种：
clone(true);  // 克隆，并且连带数据和绑定的事件
clone()/clone(false); // 克隆，表面结构
*/

CSS 相关方法

jQuery.css(name); // 获取一个 css 属性的值，比如
$("p").css("color")

jQuery.css(object); // 设置css 属性的值，比如
$("p").css({
     "color":"red",
     "border":"1px red solid"
  });

jQuery.css(name,value);
$("p").css("color","red");

位置计算相关方法

jQuery.scrollLeft(); // 设置滚动条偏移，这个方法对可见元素或不可见元素都生效
jQuery.scrollTop();  // 设置滚动条偏移，这个方法对可见元素或不可见元素都生效

jQuery.offset();     // 计算偏移量，返回值有 2 个属性，分别是 top 和left

jQuery.position();  // 计算位置，返回值也有2 个属性，top 和 left,返回：

[object Object] {
  left: 34.546875,
  top: 11
}

这里需要额外补充：

The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent.

简单来说就是：offset 是相对于 document，而 position 相对于父元素。

宽度和高度计算相关方法

这组方法需要结合CSS 的盒子模型来理解，margin 始终不参与计算

jQuery.height();     // 计算的是 content
jQuery.innerHeight();  // 计算的是 content+padding
jQuery.outerHeight(); // 计算的是content+padding+border

jQuery.width();
jQuery.innerWidth();
jQuery.outerWidth();

浏览器及特性检测

$.support，可以检测当前浏览器是否支持下列属性，返回boolean。包括boxModel、cssFloat、
opacity、tbody 等
$.browser，检测当前浏览器类型，返回一个map，其中可能的值有safari、opera、msie、mozilla

数据缓存方法

// 该类方法是jQuery.data()方法和jQuery.removeData()的另一种形式，增加的elem 参数是DOM Element

$.data(elem, name);// 取出elem 上name 的值
$.data(elem, name, value); // 设置elem,name为 value
$.removeData(elem, name); //删除 elem 上的 name
$.removeData(elem); // 删除elem 上的所有缓存数据

工具方法

$.isArray(obj); // 检测一个对象是否是数组
$.isFunction(obj); // 检测一个对象是否是函数
$.trim(str); // 去除string 的空格

$.( value, array [, fromIndex ] )
$.inArray(value, array); // 返回value 在array 中的下标， 如果没有找到则返回-1

$.inArray(123, ["john",1,123,"f"]); // return2

$.unique(array); // 去除array 中的重复元素，该方法只对DOM Element 有效，对string 和 number 无效