jquery demo

jquery.js

//jquery  useage

var element = document.getElementById("wem");
var element = $('#wem');

var elements = document.getElementByClassName('bar');
var element = $('.bar');

var elements = document.getElementByTagName('p');
var elements = $('p');


var foo = $('.bar .foo');
var username = $("input[name = 'username']");

var example = $('.wem:first');



//dom  遍历

var wem = $('#wem');

wem.find(".test");

wem.parent();

wem.parents(".optionalSelector");

wem.children();


var wem = $('#wem');
wem.eq(0);

wem.first();

wem.filter(".foo");

wem.filter(function(){
	return $(this).hasClass(".foo");
});

wem.has(".selected");

//迭代器

var wem = $("#wem");

wem.map(function(element,index){
	assertEqual(this,element);
	return this.id;
});

wem.each(function(index,element){
	assertEqual(this.element);
	/* ... */
});

var wem = $("#wem");
wem.add($("p"));


//DOM操作

var element = $("p");
element.addClass('bar');
element.text("Some context");

//追加一个新元素
var newDiv = $("<div />");
$("body").append(newDiv);

$(".container").prepend($("<hr />"));

$(".container").after( $("<p />"));

$(".container").before( $("<p />"));

//删除元素
$("wem").remove();

$("#foo").addClass(".bar");

$("#foo").removeClass("bar");

var hasBar = $('#foo').hasClass('bar');

//css设置

var getColor = $('.foo').css('color');
$('.foo').css('color','#000');
$('.foo').css({color:'#000',backgroundColor:'#FFF'});


//变更样式的快捷方法
$('.bar').hide();
$('.bar').show();

//不透明度
$('.foo').fadeout();
$('.foo').fadein();


//html相关
var getHTML = $('.bar').html();
$('.bar').html('<p>Hi</p>');

var getText = $('#bar').text();
$('#bar').text("plain text contents");

$("#bar").empty();


//事件
//添加事件处理句柄
$('.clicky').bind('click',function(event){
	//click执行
});

$('.clicky').click(function(){/*   ....    */});

//document.ready  执行
jQuery(function($){

});

//回调上下文
$('.clicky').click(function(){
	//'this'指向
	assert( $(this).hasClass('.clicky'));
});

//将回调保持在一个局部变量中
var self = this;
$('.clicky').click(function(){
	self.clickedClick();
})

$('.clicky').click($.proxy(function(){
	//上下文
},this));

//AJAX

$.ajax({
	url:"http://github.com/",
	type:'GET',
success: function(){ /* ... */ }
});

$.get('http://www.com', function(){/* ... */});
$.post('http://www.com',{some:'data'});

//请求一个JSON
$.ajax({
	url:'http://www.com',
	type:'get',
	dataType:'json',
success:function(json){/* ...*/},
fail:function(){}
})

$.getJSON('http:sdfasdf.com', function(json){/* ...*/});