一些jQuery的代码和插件备忘录

记录一些常见的jQuery的用法例子

$('td:contains(Henry)') // Find every cell containing "Henry"
.parent() // Select its parent
.find('td:eq(1)') // Find the 2nd descendant cell
.addClass('highlight') // Add the "highlight" class
.end() // Return to the parent of the cell containing "Henry"
.find('td:eq(2)') // Find the 3rd descendant cell
.addClass('highlight'); // Add the "highlight" class

获取索引对象
$('#my-element').get(0),或者使用$('#my-element:eq(0)')

与其他Js 类库使用时,屏蔽自身的$
jQuery.noConflict(); // 关闭自身的$,使用时需要使用 jQuery("..")

在事件监听函数中,使用$(this)访问事件源对象,使用this访问对应的HTML对象

!$(event.target).is('.button') //用于判断事件触发对象是否为指定选择器对象

$('#switcher').trigger('click'); //用于模拟用户事件
$('#switcher').click(); //作用同上

在$(..)中的参数,也可以使用临时拼接+的方式去获取对象
多个css的设置
.css({property1: 'value1', 'property-2': 'value2'})

声明jQuery对象变量的时候,建议使用$开头--$name 作为规范

链式的自定义动画设置
.animate({left: paraWidth - switcherWidth},'slow')
.animate({height: '+=20px'}, 'slow')
.animate({borderWidth: '5px'}, 'slow');

内置动画调用
$switcher
.fadeTo('fast',0.5)
.animate({'left': paraWidth - switcherWidth}, 'slow')
.fadeTo('slow',1.0)
.slideUp('slow')
.slideDown('slow');

也可以在其中加上对css的修改,达到更多样的效果组合

在内置动画的参数中,可以加入一个回调函数,在动画结束后自动调用,也常用在回调函数中组合调用其他特效

注意在链式组成特效时,默认会同时发生, 可以使用.queue()方法在尾部设置成按照顺序发生

$('<a href="#top">back to top</a>'); 用于创建包含HTML的jQuery对象,可以用于后面的插入等操作

.clone() 用于拷贝组件,当默认不拷贝事件,可以使用带clone(true)来替换

1. To create new elements from HTML, user the $() factory function.
2. To insert new element(s) inside every matched element, use:
.append()
.appendTo()
.prepend()
.prependTo()
DOM Manipulation
[ 114 ]
3. To insert new element(s) adjacent to every matched element, use:
.after()
.insertAfter()
.before()
.insertBefore()
4. To insert new element(s) around every matched element, use:
.wrap()
.wrapAll()
.wrapInner()
5. To replace every matched element with new element(s) or text, use:
.html()
.text()
.replaceAll()
.replaceWith()
6. To remove element(s) inside every matched element, use:
.empty()
7. To remove every matched element and descendants from the document without actually deleting them, use:
.remove()

load方法的使用,常用语加载指定网页的内容到指定的元素中
$('#dictionary').load('a.html');

直接获取数据的Ajax方式
$.getJSON('b.json', function(data) {..}); //第二个为回调函数,第一个为json数据所在的url,未知是否需要保证头信息里面包含Json

$('#dictionary').empty(); // 用于清空指定元素的内容
$.getScript('c.js'); //用于异步加载js脚本

访问异步加载的xml数据的方式
$(data).find('entry').each(function() {
var $entry = $(this); //使用循环获取实体,如果实体为集合,也可以再次使用each进行循环读取
$entry.attr('term'); //访问属性
$entry.find('definition').text(); //访问内容

$(data).find('entry:has(quote[author])').each(function() { } //更复杂的查询,
'entry:has(quote[author 表示entry标签下用于quote子标签,而且其拥有author属性

完整的异步提交表单数据的例子
$('#letter-f form').submit(function() {
$.get('f.php', $(this).serialize(), function(data) {
$('#dictionary').html(data);
});
return false; //阻止表单默认的提交,使用上面得Ajax方式提交数据
});

使用全局的Ajax方法,监听Ajax动作的周期, //所谓全局的方法,就是可以作用在任何jQuery对象,当将会被其他任意的事件触发的方法
$('<div id="loading">Loading...</div>')
.insertBefore('#dictionary')
.ajaxStart(function() {
$(this).show();
});

对于跨站点的数据获取,可以使用JSONP方式
var url = 'http://www.examples.com/jsonp/g.php';
$.getJSON(url + '?callback=?', function(data) {..}

加载指定html中符合选择器的部分内容
$('#dictionary').load('h.html .entry'); //使用选择器进行部分加载

组合table,进行排序,异步加载结果集
<a href="index.php?sort=name">Name</a>
$('#my-data tbody').load($(this).attr('href'));
当使用Ajax提交的时候,将会把http header中的 X-Requested-With修改成 XMLHttpRequest,可以通过判断,只要返回<tbody> 内容即可

使用银灰色,能够较好的区分odd 和even的tr

$('obj').each(function(index){$(this)}) //简洁的使用each的方式

查找子元素的方式
var $search = $('#search').addClass('overlabel');
var $searchInput = $search.find('input');
var $searchLabel = $search.find('label');

一些js数字转换的方式
var price = parseFloat($('td.price', this).text().replace(/^[^\d.]*/, ''));
price = isNaN(price) ? 0 : price;

var tax = Math.ceil(totalCost * taxRate * 100) / 100;
$('tr.tax td.cost').text('$' + tax.toFixed(2));
还有类似的parseInt等方法

批量设置样式的方法
var $deleteButton = $('<img />').attr({
'width': '16',
'height': '16',
'src': '../images/cross.png',
'alt': 'remove from cart',
'title': 'remove from cart',
'class': 'clickable'
});

另外一种元素选择器:
$("label","ul"). 用于得到ul下面所有的label元素

对元素大小的获取
var startPos = $(this).offset();
startPos.width = $(this).width();
startPos.height = $(this).height();

标准的创建Json对象的方式
var b={};
b.atts=....; //添加属性

用于判断图片加载完成的方式
if ($enlargedCover[0].complete) {
performAnimation();
}else {
$enlargedCover.bind('load', performAnimation); //这里注意.load()为jQuery的Ajax方法,所以需要bind
}

如果需要对颜色使用animate,需要添加jQuery color plugin,或者jQuery UI的 effects中也包含,提供多种扩展效果

插件所提供的其他效果
$('#sort-container').sortable({
opacity: .5,
cursor: 'move',
axis: 'y'
}) //对Li进行拖拉的排序功能

一些不错的插件推荐
输入:
Jeditable ---可编辑的table.
http://plugins.jquery.com/project/jeditable
Validation--基于css的验证
http://plugins.jquery.com/project/validate
Autocomplete--自动完成
http://plugins.jquery.com/project/autocompletex
Masked input--提供对用户输入的辅助
http://plugins.jquery.com/project/maskedinput

Grid:表格
jqGrid --提供较完善的Table功能
http://plugins.jquery.com/project/jqGrids
Flexigrid--提供更简单和灵活的grid表格,也更简洁一些
http://plugins.jquery.com/project/flexigrid

Image图片展示:
Jcrop -- 提供对图片的截图辅助
http://plugins.jquery.com/project/Jcrop
Magnify-- 局部放大图片
http://www.jnathanson.com/index.cfm?page=jquery/magnify/magnify

更高级的图片显示,提供背景遮盖
FancyBox --提供对图片的高级浏览
http://fancy.klade.lv/
Thickbox -- 提供对内容的暂时,效果同上
http://jquery.com/demo/thickbox/
BlockUI -- 提供多样可控的背景遮盖
http://plugins.jquery.com/project/blockUI

图表插件
Flot --简单的图片展示插件,但好像只有简单的线,块图
http://plugins.jquery.com/project/flot

更多插件:
http://www.iteye.com/news/12391