您的位置：首页 > Web前端 > JQuery

jquery随记（选择符）----取得元素，为其添加样式、绑定事件2011.8.18

2011-08-18 10:37 483 查看

*****************************************************************************************************************************************************************

.addClass() 向取得的元素添加class即类，而该元素原来的类不会被去掉，

如果想添加别的属性用attr()----attr({'id':'value'}) 相对的是：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>无标题文档</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(){

//通过选择符选取元素

$('#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');

//通过连缀来取得元素

$("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');

//通过连缀取得元素

$("td:contains('Henry')")//取的所有包含‘Henry’的单元格

.parent()//取得它的父元素

.find("td:eq(1)")//取得第二个td元素

.addClass('highlight')//为取得的td元素添加highlight类

.end()//恢复到所有包含'Henry'的父元素

.find("td:eq(2)")//取得第三个td元素

.addClass('highlight');//为该元素添加highlight类

//事件

$('h3').nextAll().addClass('childendiv');

$('#switcher-large').bind('click',function(){//为div添加样式

$('#switcher-large').removeClass('button');//移除class

$(this).addClass('chapter');//this指的是绑定事件的对象

});

//事件绑定的简写

/*

$('#switcher-large').click(function(){//为div添加样式

$('#switcher-large').removeClass('button');//移除class

$(this).addClass('chapter');//this指的是绑定事件的对象

});*/

//复合事件：点击第一次时执行toggle里面的第一个函数，点击第二才是执行第二个函数……如果都执行完就再循环

$('h3').toggle(

function(){

$('.button').addClass('hidden');

},

function(){

$('.button').removeClass('hidden');

});

//hover（）跟toggle一样，也可以接受都多个函数，第一个函数在鼠标进入元素是执行，第二个函数会在鼠标离开元素时执行

$('.button').hover(

function(){

$(this).addClass('hover');

},

function(){

$(this).removeClass('hover');

})

//通过事件对象来改变时间旅程

$('.divparent').click(function(event){

if(event.target==this){

$('.divparent').children().toggleClass('hidden')

}

})

//事件冒泡：点击<td>中的div时，也会触发到<table>外面<div>事件

/*$

('td').addClass('td');

$('.but').addClass('but');

$('.switcher').click(function(){

$('.switcher .but').toggleClass('hidden');

});

*/

//事件目标：可以有效的解决事件冒泡；

$('.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');

});

});

</script>

</head>

<body>



<table cellspacing="0px">

<tr>

<td>As You Like It</td>

<td>Comedy</td>

<td></td>

</tr>

<tr>

<td>All's Well that Ends Well</td>

<td>Comedy</td>

<td>1604</td>

</tr>

<tr>

<td>Hamlet</td>

<td>Tragedy</td>

<td>1604</td>

</tr> <tr>

<td>Macbeth</td>

<td>Tragedy</td>

<td>1604</td>

</tr>

<tr>

<td>Romeo and Juliet</td>

<td>Tragedy</td>

<td>1604</td>

</tr>

<tr>

<td>Henry IV,Part I</td>

<td>History</td>

<td>1599</td>

</tr>

<tr>

<td>Henry V</td>

<td>History</td>

<td>1599</td>

</tr>

</table>

<br />

<br />

<div class="divparent" style="border-top: 5px solid red; cursor:pointer;">

<h3>style switcher</h3>

<div class="button" id="switcher-default">

Default

</div>

<div class="button" id="switcher-narrow">

Narrow Column

</div>

<div class="button" id="switcher-large">

Larges Print

</div>

</div><br/><br />

1、url可以通过location.href得到；

2、http://hao123.com/weboa/formname?openform&unid=1234567

若想得到unid=1234567：

url.substring(url.indexOf("&")+1,url.length);(注意：substring()后面的s一定是小写；indexOf()中的"O"一定是大写)

若想得到openform和unid=1234567：

var var1=url.subString(url.indexOf("?")+1,url.length)

var arr=var1.split("&");

var openform=arr[0]

var unid=arr[1]

<br />

<br />



<div class="switcher" style="border: 5px solid #69F; cursor:pointer; width:600px;">

<h3>style switcher</h3>

<table>

<tr>

<td>

<div class="but" id="switcher-def">

Default

</div>

</td>

<td>

<div class="but" id="switcher-nar">

Narrow Column

</div>

</td>

<td>

<div class="but1" id="switcher-lar">

Larges Print

</div>

</td>

</tr>

</table>

</div>

<br />

<br />

1、url可以通过location.href得到；

2、http://hao123.com/weboa/formname?openform&unid=1234567

若想得到unid=1234567：

url.substring(url.indexOf("&")+1,url.length);(注意：substring()后面的s一定是小写；indexOf()中的"O"一定是大写)

若想得到openform和unid=1234567：

var var1=url.subString(url.indexOf("?")+1,url.length)

var arr=var1.split("&");

var openform=arr[0]

var unid=arr[1]

</body>

</html>

/**************************************************************************

对应的css

**************************************************************************/

@charset "utf-8";

/* CSS Document */

.horizontal {

float:left;

list-style:none;

margin:10px;

}

.sub-level {

background-color: #CCC;

}

a {

color:#00c;

}

a.mailto{

background:url(mail.gif) no-repeat right top;

padding-right:10px;

}

a.pdflink{

background:url(pdf.gif) no-repeat right top;

padding-right:25px;

}

a.henrylink{

background-color:#fff;

padding:2px;

border:1px solid #000;

}

tr{

background-color:#fff;

}

.alt{

background-color:#ccc;

}

.cell01{

background-color:#CFC;

}

.cell02{

background-color:#C9F;

}

.cell03{

background-color:#C3F;

}

.cell04{

background-color:#F0F;

}

.cell05{

background-color:#FCF;

}

.cell06{

background-color:#696;

}

.highlight{

background-color:#FF9;

}

.childendiv{

float:left;

width:100px;

border:1px solid black;

margin-left:10px;

text-align:center;

}

.chapter{

font-size:36px;

}

.hidden{

display:none;

}

.hover{

cursor:pointer;

background-color:#afa;

}

.td{

width:200px;

}

.but{

border:1px solid #C3C;

cursor:default;

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航