jQuery设计**

[Suo]

参考：jQuery设计**

[Suo]

设计**一：选择网页元素

//css选择器
$(document) //选择文档对象
$('#myId') //选择ID元素
$('.myClss')//选择class元素
$('input[name=first]') //选择name=first的input元素
//特有表达式
$('a:first') //选择网页中第一个a元素
$('tr:odd') //表格奇数行
$('#myFrom:input') //选择表单中的input元素
$('div:visible') //选择可见元素
$('div:gt(2)') //选择所有的div的元素，除了前三个
$('div:animated') //选择当前处于动画状态的div元素

设计**二：改变结果集

$('div').has('p');
$('div').not('.myClass');
$('div').filter('.myClass');
$('div').first();
$('div').eq(5);

$('div').next('p');
$('div').parent();
$('div').closest('form');
$('div').children();
$('div').sibling();

设计**三：链式操作

//链式操作
$('div').find('h3').eq(2).html('hello');
//分解
$('div')
  .find()
  .eq(2)
  .html('hello');
//end()方法
$('div')
  .find('h3')
  .eq(2)
  .end()
  .find('h2')
  .eq(4)
  .html('world');

设计**四：取值赋值

$('h1').html();
$('h1').html('hello');
$('h3').text();
$('h3').attr(); //属性的值
$('h3').width();
$('h3').height();
$('h3').val(); //表单元素的值
//结果集包含多个元素，赋值给所有的值赋值，取值只取其中之一

设计**五：移动

//移动
$('div').insertAfter($('p'));//div移动到p前面返回div
$('p').after($('div'));//p插到div后面返回p
$('div').insertBefore($('p'));
$('p').before($('div'));
$('div').appendTo('p');//在现存元素内部，从后面插入元素
$('p').append('p');
$('div').prependTo('p');
$('p').prepend('div');

设计**六：复制，删除，创建

$('<p>Hello</p>');
$('<li class='new'>new list item</li>');
$('ul').append('<li>list item</li>');

设计**七：工具方法

$.trim();
$.each();
$.inArray();
$.grep();
$.extend();
$.makeArray();
$.type();
$.isArray();
$.isEmptyObject();
$.insFunction();
$.isPlainObject();
$.support();

设计**八：事件操作

$('p').click(function(){
	alert('hello');
});
.blur();
.change();
.click();
.dblclick();
.focus();
.focusin();
.focusout();
.hover();
.keydown();
.keypress();
.keyup();
.load();
.mousedown();
.mouseenter();
.mouseleave();
.mousemove();
.mouseout();
.mouseover();
.mouseup();
.ready();
.resize();
.scroll();
.select();
.submit();
.toggle();
.unload();
//多个事件绑定
$('input').bind(
	'click change',
	function() {
		alert('Heelo');
	} 
);
$('p').one('click', function() {
  	alert("hello");
});
$('p').unbind('click');
$('p').click(function(){
  	alert(e.type);
});
//this关键字，返回事件针对dom元素
$('a').click(function(e) {
  	if($(this).attr('href').match('evil')){
  		e.preventDefault();
  		$(this).addClass('evil');
  	}
});
//两种方法，可以自动触发事件
$('a').click();
$('a').trigger('click');

特殊效果

$('h1').show();
.fadeIn();
.fadeOut();
.fadeTo();
.hide();
.show();
.slideUp();
.slideToggle();
.toggle();
$('h1').fadeIn(300);
$('h2').fadeOut('slow');

$('p').fadeOut(300,function(){
	$(this).remove();
});
$('div').animate{
	{
		left: "+50",
		opacity: 0.25
	},
	300,
	function() { alert('done!'); }
};