浅谈我对 jQuery 的了解

- 总述
- 总结

知己知彼,面进阿里 ——不屈小强

整理了这些作为下阶段读源码前的知识储备，同时分享给大家。共勉。

总述

jQuery 框架提供了很多方法，但大致上可以分为3 大类：

获取jQuery 对象的方法
在jQuery 对象间跳转的方法
获取jQuery 对象后调用的方法

获取 jQuery 对象

是怎样获取jQuery 对象。大致来说，是通过最核心的$()方法，将页面上的元素（或者在页面上不存在的 html 片段）包装成 jQuery 对象。
$()方法里面支持的语法又包括：

分别是表达式（包括类表达式.，id 表达式#，元素表达式等）
符号（包括后代符号space，next 符号+等)
过滤器（包括:过滤器和[]过滤器）
现在显然还有更多

通过以上组合，通过选择器 $() 可”查询“得到 jQuery 对象（或者jQuery 对象的集合）。

对象跳转

是在jQuery 对象间的跳转。也就是说，已经得到了一个jQuery 对象，但并不是想要的，那么可以通过一系列的跳转方法，比如parent()、next()、children()、find()等，或者过滤筛选的方法，比如eq、filter()、not()等，来得到最终想要操作的jQuery 对象。

用跳转和过滤方式得到的jQuery 结果，往往通过比较复杂的表达式组合，可以达到同样的目的。
比如说 $("div").eq(3)，也可以用$("div:eq(3)") 达到同样的目的。
又比如说$("div").find("span")，可以用$("div span")取到同样的元素。
方法是很灵活的，要根据具体的情况来选择。根据经验来说，HTML 页面写得越规范，使用 jQuery 就越简单。

还有一种情况，在得到了jQuery()对象之后，想要判断其是否满足条件，那么可以调用 is()、hasClass()等方法，返回一个boolean 值，进行后续的判断。这类方法也可以归到这类。

方法调用

在获取准确的 jQuery 对象之后，调用其上的各种方法，来进行操作。这一步反而是比较简单的了。
后面就是对 jQuery 框架各种方法的简要介绍。

常用API

$(…);

/**
 *  一切的核心，可以跟4 种参数。
 */
$();

/**
 *  返回jQuery 对象或者jQuery 对象的集合
 *  比如$("#id")、$(".class")
 */
$(expression);

/**
 *  返回jQuery 对象，或者jQuery 对象的集合
 *  比如$("<span>hello world</span>")
 */
$(html)

/**
 *  返回jQuery 对象，或者jQuery 对象的集合
 *  比如$(document.body)
 */
$(element)

/**
 *  所有元素
 */
$(*)

jQuery 对象获取


/**
 *  返回该jQuery 对象在集合中的索引
 */
jQuery.index(element);

/**
 *  遍历jQuery 对象集合，在每个对象上执行 callback 函数，
 *  function callback(index, domElement){
 *    this //DOMElement
 *  };
 */
jQuery.each(function);

/**
 *  返回 jQuery 对象集合的大小
 */
jQuery.size();

/**
 *  相当于size()方法
 */
jQuery.length

/**
 *  获取原生 DomElement 对象的 Array,
 *  即将 jQuery 对象转成 数组对象，
 *  虽然 jQuery 对象也有 length 属性，且可用下标读写
 *  但并非是数组对象。
 */
jQuery.get()

/**
 *  获取原生 DomElement 对象
 */
jQuery.get(index)

/**
 *  获取 jQuery 对象集合中的一个 jQuery 对象
 */
jQuery.eq(position)

Data 相关方法

在匹配的元素身上存值(store data)， .data() 方法允许在我们以一种安全的方式附加数据到 dom 元素，不会产生循环引用和内存泄露。

jQuery.data(name)        // 取值
jQuery.data(name, value) // 赋值
jQuery.removeData(name)  // 清理

$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
$( "body" ).data( "foo" ); // 52
$( "body" ).data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

选择器

/**
 *  多目标选择器
 *  可以选择多个元素或者表达式，
 *  包装成 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 无效

总结

最后，由于篇幅限制，把最重要的 事件绑定 和 ajax 独立出来，并且也还没写完呢，先到这里。

posted @ 2014-08-21 19:06 砺能阅读(7037) 评论(6) 编辑收藏举报

刷新页面返回顶部

yardfarmer

有梦想有思想不瞎想

浅谈我对 jQuery 的了解

总述

获取 jQuery 对象

对象跳转

方法调用

常用API

$(…);

jQuery 对象获取

Data 相关方法

选择器

基本的过滤器

内容过滤选择器

可见性过滤器

属性过滤器

孩子过滤器

表单过滤器

属性相关的方法

类相关的操作

html相关的操作

文本相关的方法

值相关的操作

在jQuery 对象之间查找

串联方法

DOM 文档操作方法

CSS 相关方法

位置计算相关方法

宽度和高度计算相关方法

浏览器及特性检测

数据缓存方法

工具方法

总结

公告

yardfarmer

有梦想 有思想 不瞎想

浅谈我对 jQuery 的了解

总述

获取 jQuery 对象

对象跳转

方法调用

常用API

$(…);

jQuery 对象获取

Data 相关方法

选择器

基本的过滤器

内容过滤选择器

可见性过滤器

属性过滤器

孩子过滤器

表单过滤器

属性相关的方法

类相关的操作

html相关的操作

文本相关的方法

值相关的操作

在jQuery 对象之间查找

串联方法

DOM 文档操作方法

CSS 相关方法

位置计算相关方法

宽度和高度计算相关方法

浏览器及特性检测

数据缓存方法

工具方法

总结

公告

有梦想有思想不瞎想