JQuery 事件,屬性,綁定
.addClass() 向取得的元素添加class即類(lèi),而該元素原來(lái)的類(lèi)不會(huì)被去掉,
如果想添加別的屬性用attr()----attr({'id':'value'}) 相對(duì)的是:removeAttr('id');
******************************************************************************************************************************************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>無(wú)標(biāo)題文檔</title>
< link rel="stylesheet" type="text/css" href="Untitled-2.css" />
< script type="text/javascript" src="jquery-1.6.2.js"></script>
< script type="text/javascript">
$(document).ready(function(){
//通過(guò)選擇符選取元素
$('#selected-plays > li').addClass('horizontal');
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
$('a[href^=mailto]').addClass('mailto');
$("a[href$='.pdf']").addClass('pdflink');
$("a[href^='http'][href*='henry']").addClass('henrylink');
$("tr:even").addClass('alt');//$("tr:odd").addClass('alt');
//通過(guò)連綴來(lái)取得元素
$("td:contains('Tragedy')").addClass('cell01');
$("td:contains('Henry')").parent().children().addClass('cell02');
$("td:contains('Tragedy')").next().andSelf().addClass('cell03');
$("td:contains('Comedy')").nextAll().andSelf().addClass('cell04');
$("td:contains('Comedy')").prev().andSelf().addClass('cell05');
$("td:contains('Macbeth')").prevAll().andSelf().addClass('cell06');
//通過(guò)連綴取得元素
$("td:contains('Henry')")//取的所有包含‘Henry’的單元格
.parent()//取得它的父元素
.find("td:eq(1)")//取得第二個(gè)td元素
.addClass('highlight')//為取得的td元素添加highlight類(lèi)
.end()//恢復(fù)到所有包含'Henry'的父元素
.find("td:eq(2)")//取得第三個(gè)td元素
.addClass('highlight');//為該元素添加highlight類(lèi)
//事件
$('h3').nextAll().addClass('childendiv');
$('#switcher-large').bind('click',function(){//為div添加樣式
$('#switcher-large').removeClass('button');//移除class
$(this).addClass('chapter');//this指的是綁定事件的對(duì)象
});
//事件綁定的簡(jiǎn)寫(xiě)
/*
$('#switcher-large').click(function(){//為div添加樣式
$('#switcher-large').removeClass('button');//移除class
$(this).addClass('chapter');//this指的是綁定事件的對(duì)象
});*/
//復(fù)合事件:點(diǎn)擊第一次時(shí)執(zhí)行toggle里面的第一個(gè)函數(shù),點(diǎn)擊第二才是執(zhí)行第二個(gè)函數(shù)……如果都執(zhí)行完就再循環(huán)
$('h3').toggle(
function(){
$('.button').addClass('hidden');
},
function(){
$('.button').removeClass('hidden');
});
//hover()跟toggle一樣,也可以接受都多個(gè)函數(shù),第一個(gè)函數(shù)在鼠標(biāo)進(jìn)入元素是執(zhí)行,第二個(gè)函數(shù)會(huì)在鼠標(biāo)離開(kāi)元素時(shí)執(zhí)行
$('.button').hover(
function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
})
//通過(guò)事件對(duì)象來(lái)改變時(shí)間旅程
$('.divparent').click(function(event){
if(event.target==this){
$('.divparent').children().toggleClass('hidden')
}
})
//事件冒泡:點(diǎn)擊<td>中的div時(shí),也會(huì)觸發(fā)到<table>外面<div>事件
/*$
('td').addClass('td');
$('.but').addClass('but');
$('.switcher').click(function(){
$('.switcher .but').toggleClass('hidden');
});
*/
//事件目標(biāo):可以有效的解決事件冒泡;
$('.switcher').click(function(event){
if(event.target==this){
$('.switcher .but').toggleClass('hidden');
}
});
/*$('.switcher').click(function(event){
if($(event.target).is('.but')){
$('body').removeClass();
if(event.target.id=='switcher-nar'){
$('body').addClass('large');
}
else if(event.target.id=='switcher-lar'){
$('body').addClass('large');
}
$('.switcher .but').removeClass('selected');
$(event.target).addClass('selected');
event.stopPropagation();
}
});*/
//移除事件:
/*
$('.but').click(function(){
$('.switcher').unbind();//移除事件
});*/
//只綁定一次就解除用one()
$('.but1').one('click',function(){
$('.but1').addClass('hidden');
});
});
posted on 2012-01-19 15:30 強(qiáng)強(qiáng) 閱讀(493) 評(píng)論(0) 編輯 收藏 所屬分類(lèi): web技巧