jQuery复习笔记

原文地址：
https://docs.huihoo.com/jquery/jquery-fundamentals/zh-cn/index.html

原理：
调用 jQuery() 时实际上是创建了一个继承了 jQuery 所有方法的全新对象

选择器

Id选择器

类选择器

属性选择器

$('input[name=first_name]'); // 当心，这可能会非常慢

伪选择器

$('a.external:first'); 
$('tr:odd');
$('#myForm :input');   // 在一个form中选择所有的输入项
$('div:visible');
$('div:gt(2)');        // 除去1,3之外的所有项 
$('div:animated');     // 所有当前项动态区分 all currently animated divs

使用 :visible 和 :hidden 伪选择器时, jQuery 会测试元素的真实可见性

当 display 属性为 none 时，就认为这个元素将隐藏， 即使 CSS 将影响它们的视觉渲染，元素也不会被添加到被隐藏的DOM中。

使用表单相关的伪选择器

$("#myForm :input'); // 取得所有接受输入的元素

:button、:checkbox、:checked、:disabled、:enabled、:file、:image、:input 选择 <input>, <textarea>, 和 <select> 元素:password、​: radio、:​​reset:、selected、:submit、:text

测试选择器是否包含多个元素

if ($('div.foo').length) { ... }

在变量中保存选择器，变量名以一个美元符号开头

var $divs = $('div');

使用$(this)将DOM元素转换成可以使用jQuery方法的jQuery对象

$('a').click(function(e) {
    var $this = $(this);
    if ($this.attr('href').match('evil')) {
        e.preventDefault();      //阻止链接被访问
        $this.addClass('evil');
    }
});

只有当你指定一个选择器后，选择器才会从页面取回元素。如果你添加元素到页面延迟了，你必须重新选择或将它们添加到存储在变量中的选择器中。当 DOM 改变时被保存的选择器不会自动更新。

过滤选择器

$('div.foo').has('p');          // 包含<p> 的元素
$('h1').not('.bar');            // h1 元素不包含 bar 这个类
$('ul li').filter('.current');  // 当前类的所有无序项
$('ul li').first();             // 第一项
$('ul li').eq(5);               // 第六项 

获取和设置元素信息

$.fn.end 恢复你原来的选择器

$('#content')
    .find('h3')
    .eq(2)
    .html('new text for the third h3!')
    .end()   // 恢复选择器到 #content 中的所有 h3 部分
    .eq(0)
    .html('new text for the first h3!');

$.fn.html 获取或设置html文档

$('h1').html();
$('h1').html('hello world');

$.fn.text 获取或设置text文档；HTML将被剥离

$.fn.css 获取和设置 CSS 属性

$('h1').css('fontSize'); 
$('h1').css('fontSize', '100px'); // 设置一个属性
$('h1').css({ 'fontSize' : '100px', 'color' : 'red' }); // 设置多个属性

为样式使用CSS类

var $h1 = $('h1');

$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');

if ($h1.hasClass('big')) { ... } 
//为类写CSS规则用以描述各种虚拟状态，简单的改变你需要影响的元素的类

$.fn.width 获取和设置元素宽度

$.fn.height 获取和设置元素高度

$.fn.position 获取位置信息，不能设置

$('h1').width('50px');   
$('h1').width();         
$('h1').height('50px');  
$('h1').height();       
$('h1').position();      

$.fn.attr 获取和设置元素属性

$('a').attr('href', 'allMyHrefsAreTheSameNow.html');
$('a').attr({ 
    'title' : 'all titles are the same too!', 
    'href' : 'somethingNew.html' 
});
$('a').attr('href');

使用函数去确定新的属性值

$('#myDiv a:first').attr({
    rel : 'super-special',
    href : function() { 
        return '/new/' + $(this).attr('href');
    }
});

使用遍历方法围绕DOM移动

$('h1').next('p');
$('div:visible').parent();
$('input[name=first_name]').closest('form');
$('#myList').children();
$('li.selected').siblings();

使用 $.fn.each 的选择器对所有元素进行遍历运行函数

移动元素

$.fn.insertAfter 在提供了参数的元素后面放置一个选择元素

$.fn.after 在选择元素后面放置一个带参数的元素

同样的有：

$.fn.insertBefore、$.fn.before

$.fn.appendTo、$.fn.append

$.fn.prependTo、$.fn.prepend

拷贝元素

$.fn.clone() 拷贝一个元素

删除元素

$.fn.remove 从页面永久删除

$.fn.detach 将数据和事件持久性保留

创建新元素

创建新元素

$('<p>This is a new paragraph</p>');

创建一个包含属性对象的新元素

$('<a/>', { 
    html : 'This is a <strong>new</strong> link',
    'class' : 'new',
    href : 'foo.html'
});

同一时刻创建和添加元素到页面

$('ul').append('<li>list item</li>');

实用方法

$.trim 去除行间和末尾的空白。

$.trim('    大量额外空白    ');
// 返回 '大量额外空白'

$.each 在数组和对象上迭代。

$.each([ 'foo', 'bar', 'baz' ], function(idx, val) {
    console.log('element ' + idx + 'is ' + val);
});

$.inArray 在数组中返回所找的值的索引，如果值不在数组中就为 -1 。

var myArray = [ 1, 2, 3, 5 ];

if ($.inArray(4, myArray) !== -1) {
    console.log('found it!');
}

$.extend 赋值（相当于assign）

var firstObject = { foo : 'bar', a : 'b' };
var secondObject = { foo : 'baz' };

$.extend(firstObject, secondObject);  //返回firstObject
var newObject2 = $.extend({}, firstObject, secondObject);  //返回新对象

$.proxy

返回一个函数它总是运行在一个提供的作用域里 — 就是说，this 的设置意味着内部传递函数到第二个参数。

var myFunction = function() { console.log(this); };
var myObject = { foo : 'bar' };

myFunction(); // 记录 window 对象

var myProxyFunction = $.proxy(myFunction, myObject);
myProxyFunction(); // 记录 myObject 对象

如果你拥有一个带方法的对象，你能传递对象和方法名去返回一个总运行在对象作用域里的函数。

var myObject = {
    myFn : function() {
        console.log(this);
    }
};

$('#foo').click(myObject.myFn); // 记录 DOM 元素 #foo
$('#foo').click($.proxy(myObject, 'myFn')); // 记录 myObject

做校验

校验任意值的类型

var myValue = [1, 2, 3];

// 使用 JavaScript 的 typeof 运算符去测试类型
typeof myValue == 'string'; // false

// 使用严格的相等运算符去测试 null
myValue === null; // false

// 使用 jQuery 方法去测试
jQuery.isFunction(myValue); // false
jQuery.isPlainObject(myValue); // false
jQuery.isArray(myValue); // true

数据方法

$.fn.data 存储和检索一个元素的相关数据

$('#myDiv').data('keyName', { foo : 'bar' });
$('#myDiv').data('keyName'); // { foo : 'bar' }

使用 $.fn.data 存储元素之间的关系

$('#myList li').each(function() {
    var $li = $(this), $div = $li.find('div.content');
    $li.data('contentDiv', $div);
});

// 后来，我们不得不再一次发现 div；
// 我们能从列表项中读取到它
var $firstLi = $('#myList li:first');
$firstLi.data('contentDiv').html('new content');

避免与其他库造成冲突

将 jQuery 设为 no-conflict 模式，可以在其它 JavaScript 库中实用$ 变量

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>var $j = jQuery.noConflict();</script>

在自执行匿名函数中使用 $

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();

(function($) {
   // 你的代码在这，它使用 $
})(jQuery);
</script>

为元素绑定事件

$.fn.click、$.fn.focus、$.fn.blur、$.fn.change

bind这个方法一般用于绑定相同的事件处理函数到多个事件， 也用于为事件处理函数提供数据，或者在使用自定义事件时使用。

使用$.fn.bind方法将数据绑定到事件

$('input').bind(
    'click change',  // 绑定到多个事件
    { foo : 'bar' }, // 传递数据

    function(eventObject) {
        console.log(eventObject.type, eventObject.data);
        // 输出事件类型和{ foo : 'bar' } logs event type, then { foo : 'bar' }
    }
);

$.fn.one 只执行一次的特殊处理函数，或者不希望有处理函数运行，或者需要运行另一个不同的处理函数

$('p').one('click', function() {
    console.log('You just clicked this for the first time!');
    $(this).click(function() { console.log('You have clicked this before!'); });
});

取消事件绑定

取消选择器下所有的点击事件处理函数绑定

$('p').unbind('click');

取消特定点击事件处理函数绑定

var foo = function() { console.log('foo'); };
var bar = function() { console.log('bar'); };

$('p').bind('click', foo).bind('click', bar);
$('p').unbind('click', bar); // foo依然被绑定到点击事件

• pageX, pageY 事件触发时鼠标相对于页面左上角的位置。
• type 事件的类型（例如“click”）
• which 按下的按钮或按键
• data 事件被绑定时传入的所有数据
• target 初始化事件的DOM元素
• preventDefault() 阻止事件默认方法的执行（例如点击一个链接）
• stopPropagation() 停止事件影响其它元素

$.fn.trigger方法在没有用户交互的情况下触发绑定到元素的事件处理函数

把需要调用的函数存储到变量里，当绑定的时候将变量名传递到方法里。 这样可以在任何时候不使用$.fn.trigger直接调用这个函数。

//以正确的方式触发事件处理函数
var foo = function(e) { 
    if (e) { 
        console.log(e); 
    } else {
        console.log('this didn\'t come from an event!');
    }
};
$('p').click(foo); 
foo(); // 不使用$('p').trigger('click')直接调用

使用$.fn.delegate委托事件, $.fn.undelegate解除绑定

//绑定事件
$('#myUnorderedList').delegate('li', 'click', function(e) {
    var $myListItem = $(this);
    // ...
});
//解除绑定
$('#myUnorderedList').undelegate('li', 'click');

$.fn.hover方法让一个或两个函数在mouseenter和mouseleave事件触发的时候执行

$('#menu li').hover(function() { 
    $(this).toggleClass('hover'); 
});

$.fn.toggle方法接收两个或以上函数， 每次事件触发的时候，在列表中的下一个函数将被调用

$('p.expander').toggle(
    function() {
        $(this).prev().addClass('open');
    },
    function() {
        $(this).prev().removeClass('open');
    }
);

基本特效

• $.fn.show 显示匹配的元素
• $.fn.hide 隐藏匹配的元素
• $.fn.fadeIn 通过淡入的方式显示匹配元素
• $.fn.fadeOut 通过淡出的方式显示匹配元素
• $.fn.slideDown 通过高度变化（向下增大）用滑动动画显示一个匹配元素
• $.fn.slideUp 通过高度变化（向上减小）用滑动动画隐藏一个匹配元素
• $.fn.slideToggle 根据当前的元素display属性，用滑动动画显示或隐藏一个匹配元素

//设置动画效果持续时间
$('h1').fadeIn(300);      // 淡入效果以 300ms延时
 $('h1').fadeOut('slow'); 

特效完成后做一些处理

//动画执行完后运行代码
$('div.old').fadeOut(300, function() { $(this).remove(); }); 

$.fn.animate自定义效果

$('div.funtimes').animate(
	{
		left : "+=50",
		opacity : 0.25
	},
	300, // 持续时间
    function() { console.log('done!');}
);

管理效果

$.fn.stop 停止运行当前匹配元素上的动画
$.fn.delay 在运行下一个动画前等待指定的毫秒数

$('h1').show(300).delay(1000).hide(300);

jQuery插件

jQuery 插件：就是一个用于扩展 jQuery 的 prototype 对象的新方法。 通过扩展 jQuery 的 prototype 对象，所有 jQuery 对象都将通过继承获得你添加的新方法。

jQuery主要有两种使用方法:

1.在jQuery集合对象上调用方法$().
2.直接调用jQuery方法 $.

jQuery插件机制：扩展方法

jQuery.fn.extend()
jQuery.extend()

性能优化

在循环中缓存length

var myLength = myArray.length;
for (var i = 0; i < myLength; i++) {
    // do stuff
}

在循环外使用append

// 别这样...
$.each(myArray, function(i, item) {
   var newListItem = '<li>' + item + '</li>';
   $('#ballers').append(newListItem);
});

// 好的做法是这样的
var frag = document.createDocumentFragment();

$.each(myArray, function(i, item) {
    var newListItem = '<li>' + item + '</li>';
    frag.appendChild(newListItem);
});
$('#ballers')[0].appendChild(frag);

// 或者这样的
var myHtml = '';

$.each(myArray, function(i, item) {
    html += '<li>' + item + '</li>';
});
$('#ballers').html(myHtml);

减少使用匿名函数

选择器以 ID 开始总是最好的。

//  快
$('#container div.robotarm');
// 非常快
$('#container').find('div.robotarm');

避免使用无定向选择器

$('.buttons > *');  // 极慢
$('.buttons').children();  // 快很多

使用事件委派，这也使你在往容器里添加新元素时无需重新绑定事件

// 如果列表里面元素很多，不堪想象
$('li.trigger').click(handlerFn);

// 这样写好一点，用 $.fn.live 做事件委派
$('li.trigger').live('click', handlerFn);

// 最好的做法，用 $.fn.delegate 做事件委派，还可以指定一个上下文
$('#myList').delegate('li.trigger', 'click', handlerFn);

先将元素 detach 出来再操作

var $table = $('#myTable');
var $parent = $table.parent();

$table.detach();
// ... 添加大量的行到表格中去
$parent.append(table);

应该使用样式表给大量元素修改 CSS

$('a.swedberg').css('color', '#asd123');
// 操作大于 20 个元素是不错的，但少于时就不值了
$('<style type="text/css">a.swedberg { color : #asd123 }</style>')
    .appendTo('head');

使用 $.data 而不是 $.fn.data

将 $.data 应用于 DOM 元素比直接调用 jQuery 选择结果的 $.fn.data 要快上 10 倍。

// 常规写法
$(elem).data(key,value);
// 快 10 倍
$.data(elem,key,value);

关于JQuery对象 和 DOM对象的区别：

参考 https://blog.csdn.net/xukai871105/article/details/34531373

不费时间在空白的选择结果上

jQuery 不会告诉你，你正在对空白的选择结果执行一段代码，而且会像一点错都没有那样执行了。 所以需要核实选择结果是否为空再执行

// 执行了三个方法后才意识到里面是空的
$('#nosuchthing').slideUp();

// 这会好点，就是代码有点长
var $mySelection = $('#nosuchthing');
if ($mySelection.length) { mySelection.slideUp(); }

// 最好的做法是添加一个 doOnce 插件
jQuery.fn.doOnce = function(func){ 
    this.length && func.apply(this);
    return this; 
}