jQurey学习

  API.jQuery 

1.方法备忘

　　８－１

$(document).ready( foo );

jQurey.noConflict();        //避免冲突

$().bind( 'click' , click_foo );
$().unbind('click');

$(this).addClass( 'name' ).removeClass( 'name' );  	//jquery连缀

$().toggle('slow', foo);	//new method using in 1.9.1, changing 'display'
$().hover(foo1, foo2);

keyup/keydown/keypress
String.fromCharCode( event.keyCode )

$().trigger('click');	//模拟用户事件、

$().css('pro',val);
$().css({'pro1':val1, 'pro2':val2});

$().show().hide().fadeIn().fadeOut();  	//can add time in ()

$().is('button');	//判断元素
$().animate(css, speed, easing, foo);
$().outWidth();
$().each( function(){ $(this).attr = ''; });

$('<a href="#">link</a>');	//创建元素
= $.parseHTML('<a href="#">link</a>');

$(el).find('li');　　　　//返回选择元素列表
$(el).children('li');
= $( "li", el);

　The delegate() method attaches one or more event handlers for specified elements that are children of selected elements, and specifies a function to run when the events occur.

      $( "table" ).delegate( "td", "click", function() {        //jQuery1.4.3+  
　　　　$( this ).toggleClass( "chosen" );
　　});

　　$( "table" ).on( "click", "td", function() {  　　　　//jQuery 1.7+
　　　　$( this ).toggleClass( "chosen" );
　　});     

　　.data() Store arbitrary data associated with the matched elements

$('p').data("x","p first");		
$('p:first').text($('p').data("x"));

        //改变属性值
	$('div.chapter a').attr({'rel':'external'});
	$('div.chapter a[href*=wikipedia]').each(function(index){
		$(this).attr({
			'rel':'external',
			'id' :'wiki_link_'+index
		});
	});

	//插入
	$(el_a).insertAfter(el_b);
	$(el_b).after(el_a);
	.insertBefore();
	.before();

	//加入子节点
	$(el_child).prependTo(el_parent);
	.prepend();
	.append();
	.appendTo();

	.wrap();
	.wrapAll();
	.wrapInner();

	.clone();

	.html();
	.text();
	.replaceAll();
	.replaceWith();

	.empty();
	.remove();

两种each

$.each(collection, callback_foo(index,val){});　
//collection can be array[1,2], object{'a':1,'b':2}

$(el).each( funciton(index,val){});

.filter()

//add foo
$('li').filter(function(index) {
return index % 3 == 2;
}).css('background-color', 'red');
//select
$("div")..filter(".middle").css("background", "#c8ebcc");
$('li').filter(':even');

AJAX

jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

$.load("xx.html");

$.post()

 

$('<div id="loading">Loading</div>')
			.insertBefore('#targetEle')
			.ajaxStart(function(){
				$(this).show();
			}).ajaxStop(function(){
				$(this).hide();
			});

　$(el,callback());

 

2.jQuery插件

    jQuery插件的写法

    深入理解jQuery插件开发

3.树状组件封装格式

$.fn.GMVin = function(config){
  var GMVin = {
    detailParam: {},
    initData: function(data){},
    genLabelContent: function(info){},
    genLeftLabel: function(list, ren, colors){},
    genRightLabel: function(list, ren, colors){},
    genCenterLabel: function(list, ren, colors){},
    genLeftLine: function(ren, colors){},
    genRightLine: function(ren, colors){},
  };
  var chart = new Highcharts.Chart({..});
  return chart;
}