JQuery常用方法

$(‘div’).last();//选择最后一个匹配元素

$(‘div’).eq(1);//选择第二个匹配元素

$(‘div’).eq(-1);//选择倒数第一个匹配元素

$(‘div’).filter(‘.selected’);//选择含有.selected类的匹配元素

$(‘div’).not(‘.selected’);//选择不含有.selected类的匹配元素


$(‘div’).children();//选择div的第一代(孩子)

$(‘div’).find(‘span’);//选择div的span后代


$(‘div’).parent();//选择div的上一代(父亲)

$(‘div’).parents();//选择div的前代(祖宗)


$(‘h2’).closest(‘h1’);//选择离h2最近的h1


$(‘div’).siblings();//选择div的同级兄弟元素


$(‘div’).html();//得到div的值

$(‘div’).html(‘xiao’);//修改div的值


addClass();

removeClass();

toggleClass();

hasClass();


$.isArray(object);//检查object是否为数组,返回布尔值



jQuery处理CSS

使用.css()方法

使用.addClass()和.removeClass()方法

使用.toggleClass()方法


jQuery处理特效和动画

使用.animate() 方法

$(‘#run’).click(function(){

 $(‘#demo’).animate({‘font-size’:‘18’,‘width’:‘+=300’//注意这行});}); $(‘#reset’).click(function(){ $(‘#demo’).animate({‘font-size’:‘14px’,‘width’:‘-=300’//注意这行});});

使用.stop() 方法


$(‘#run’).click(function(){
$(‘#demo’).animate({
‘width’: ‘-=128px’,
‘height’: ‘-=128px’,
‘opacity’:0.2,
‘padding-top’: ‘-=10px’
}, 5000);});

$(‘#reset’).click(function(){
$(‘#demo’).stop().animate({
‘width’: ‘128px’,
‘height’: ‘128px’,
‘opacity’: 1
});});

使用setinterval()和clearinterval()方法


var progressbar;
$(‘#run’).click(function(){
progressbar = setInterval(function () {
$(‘#demo’).animate({
‘width’: ‘+=10’
});
}, 1000);
$(this).attr(“disabled”, true);
$(‘#reset’).attr(“disabled”, false);});

$(‘#reset’).click(function(){
clearTimeout(progressbar);
$(‘#run’).attr(“disabled”, false);
$(this).attr(“disabled”, true);});



使用.delay()方法

$(‘#run’).click(function(){
$(‘#demo’).html(‘2秒后消失’);
$(‘#demo’).show(200).delay(2000).hide(200);//hide()和show()方法要带参数,否则不能正常运行的[原因]
});

jQuery DOM操作

使用.html(),.Text()和.empty()方法

//.html()设置或者取得特定标签中的内容

.text()设置或者取得文本而非标签的内容,返回一个字符串。


$(‘#run’).click(function(){
var ct = $(‘#container’);
ct.append(ct.prev().html()).append(‘<br/>’).append(ct.prev().text());});

$(‘#reset’).click(function(){
$(‘#container’).empty(‘’);});



使用.append(),prepend(),after()和.before()方法


$(‘#run’).click(function(){
var ct = $(‘#container’);
ct.append(‘append添加的内容’).prepend(‘prepend添加的内容’).before(‘before添加的内容’).after(‘after添加的内容</br>’);});

$(‘#reset’).click(function(){
$(‘#container’).empty(‘&nbsp;www.gbin1.com&nbsp;’);});

使用.clone()方法

$(‘#run’).click(function(){

var ct = $(‘#container’);



    ct.append(ct.prev().html()).append(‘<br/>’).append(ct.prev().text());});

$(‘#reset’).click(function(){
$(‘#container’).empty(‘’);});


使用jQuery的AJAX方法[使用指南]

使用get方法可以快速使用HTTP的get方法来取得页面内容

使用.load()方法

使用.post()方法



## jQuery处理事件


使用bind和unbind方法

//.click() 其实和bind(‘click’)方法是一样的。 当然,使用unbind方法我们可以将事件触发删除。

$(‘.item’).bind(‘click’, function(){//bind

    $(this).html(“clicked”);});

$(‘.item’).bind(‘dblclick’, function(){
$(this).html(“dblclicked”);});

$(‘.item’).clone().appendTo(‘#container’);//添加新元素

使用live(),on(),off()方法

$(‘.item’).live(‘click’, function(){//live

    $(this).html(“clicked”);});

$(‘.item’).live(‘dblclick’, function(){
$(this).html(“dblclicked”);});

$(‘.item’).clone().appendTo(‘#container’);

很多老的方法像.live(),.bind()和.delegate()都可以使用最新的on()方法来实现,所有其它方法最后都是调用on方法,所以这里我们也可以将以上代码如下书写:

$(‘#container’).on(‘click’,‘.item’, function(){//on

    $(this).html(“clicked”);});

$(‘#container’).on(‘dblclick’,‘.item’, function(){
$(this).html(“dblclicked”);});

$(‘.item’).clone().appendTo(‘#container’);

使用delegate方法

//老版本的jQuery中,我们应该尽量使用delegate方法而不是live方法,你会发现delegate方法的性能要优于live方法,因为live方法将会从document层次来搜索元素,这会带来性能损失。

$(‘#container’).delegate(‘.item’,‘click’, function(){

    $(this).html(“clicked”);});

$(‘#container’).delegate(‘.item’, ‘dblclick’, function(){
$(this).html(“dblclicked”);});

使用one()方法

//需要元素只执行一次事件

$(‘#container’).one(‘mouseleave’,‘.item’, function(){

    $(this).html(“mouseleave once”);});

使用preventDefault()方法

阻止缺省的事件触发,例如,你点击 <a href=”http://www.gbin1.com">gbin1.com</a&gt; 将会转向对应的页面,如果你使用preventDefault()方法,将阻止页面加载:

$(‘#prevent’).click(function(e){

  e.preventDefault();
$(this).html(‘阻止访问gbin1.com’);
});

使用.stopPropagation()方法

//和preventDefault()方法类似,这个方法也可以阻止缺省行为,但区别是阻止上层元素的事件。注意不能和live方法联用,因为如果父元素是document会处理一次事件。

$(‘#prevent’).click(function(e){

  e.stopPropagation();
$(this).html(‘阻止父元素事件’);
});

$(‘#normal’).click(function(e){
$(this).html(‘不阻止任何父元素事件’);
});

$(‘.wp’).click(function(e){
$(this).append(‘触发父元素事件’);
});




使用.stopImmediatePropagation()方法

//使用这个方法将立刻阻止所有相关绑定事件。

$(‘#prevent’).click(function(e){

  e.stopImmediatePropagation();
$(this).html(‘阻止父元素事件’);
});

$(‘#normal’).click(function(e){
e.stopPropagation();
$(this).html(‘不阻止任何父元素事件’);
});

$(‘button’).click(function(e){
$(this).append(‘-button触发事件’);
});




## jQuery DOM操作,循环和过滤


使用$.each()和.each() 方法

//$.each()方法是jQuery的一般性方法用来处理javascript对象或者数组。而.each()方法用来处理jQuery的自有对象。

//使用$.each()方法:

var gb_array = [‘jquery’, ‘javascript’, ‘java’, ‘jsp’, ‘java’, ‘c#’, ‘c’, ‘cpp’, ‘node.js’, ‘struts’, ‘spring’];


$.each(gb_array,function(i, v){ $(‘#langlist’).append(‘<li id=”‘+ i +‘“>’+ v +‘</li>’);})


//使用.each()方法:

$(‘#langlist’).each(function(i) {

$(this).css({color:‘red’});})

使用$.data(),.data(),$.hasData()和 $.removeData()方法

var $p = $(“p”),p = $p[0];

$.data(p,“site”,“gbin1.com”); $p.append($.hasData(p)+“ “); $.removeData(p); $p.append($.hasData(p)+“ “);

使用slice()方法

//选择一系列元素中的特定区域,注意你可以输入负值,这样会从后面计算:

$(‘div’).slice(-4,-1).css(‘background-color’, ‘red’);

使用.filter()方法

$(‘div’).filter(‘:even’).css(‘background-color’, ‘red’);

使用.prev()和.next()方法

在同一类的元素中选取前一个或者后一个元素:

$(‘div:first’).addClass(‘selected’);var $cur = $(‘div.selected’);

$(‘#prev’).live(‘click’, function(){
if ($cur.prev(‘div’).html()) {
$cur.removeClass(‘selected’).prev(‘div’).addClass(‘selected’);
$cur = $cur.prev(‘div’);
}});

$(‘#next’).live(‘click’,function(){
console.log($cur.next(‘div’));
if ($cur.next(‘div’).html()) {
$cur.removeClass(‘selected’).next(‘div’).addClass(‘selected’);
$cur = $cur.next(‘div’);
}});


使用.find(),.children(),.parent(),.parents(),closest()方法

//查询DOM中的元素


$(‘#level1’).find(‘#level3’).css({‘border’:‘1px solid #ccc’}).append(‘- 使用find找到元素’);
$(‘#level1’).children(‘div’).css({‘border’:‘1px solid red’}).append(‘- 使用children找到子元素’);