jquery 简单操作

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<scripttype="text/javascript"src="js/jquery-1.9.1.min.js"></script>

<scripttype="text/javascript">

/*$(document).ready(function(){

<!--$("body*").css("background-color","#B2E0FF");

});*/

/*$(document).ready(function(){

$("#choose").css("background-color","#B2E0FF");

});*/

/*

$(document).ready(function(){

$('.intro').css("background-color","red");

})*/

/*$(document).ready(function(){

$('p').remove();

});*/

/*

functionclassselctor(){

$(".intro.choose").css({"background-color":"yellow","font-size":"200%"});

};

$(document).ready(function(){

$(".message").css("background-color","red");

alert(123);

});

*/

/*

$(document).ready(function(){

$("p:first").hide();

$("p:last").html("123456");

});

*/

functionchangeclor(){

$("tr:even").css("background-color","#B2E0FF");

$("tr:odd").css("background-color","red");

$("li").each(function(index,$this){

//alert(index+"=="+$(this).text())

})

}

$(document).ready(function(){

changeclor();

//vari=$('ulli:eq(2)').html();

//alert(i);

//$('ulli:gt(2)').each(function(){

//alert($(this).text());

//});

$('ulli:lt(3)').each(function(){

//alert($(this).text());

});

varheadersize=$(':header').size();

//alert(headersize);

$(':header').each(function(){

//alert($(this).text())

});

});

$(document).ready(function(){

functionaniDiv(){

$("#box").animate({width:300},"slow");

$("#box").animate({width:100},"slow",aniDiv);

}

aniDiv();

$(".btn1").click(function(){

$(":animated").css("background-color","blue");

});

});

$(document).ready(function(){

$(":contains('Welcome')").each(function(){

//alert($(this).text());

});

});

/*$(document).ready(function(){

$(':input').css("background-color","#FCD4D4");

vars='';

$(':selected').each(function(){

s=s+$(this).val()+',';

});

alert(s);

})

*/

/*$(document).ready(function(){

$(':input').css("background-color","#FCD4D4");

$("#bt1").bind("click",function(){

vars='';

$("[type=radio]:checked").each(function(){

//s=s+$(this).val()+',';

alert($(this).val())

});

});

})*/

$(document).ready(function(){

$(':input').css("background-color","#FCD4D4");

$("#bt1").bind("click",function(){

//$("#single").append("<optionvalue='Value'>Text</option>");//为Select追加一个Option(下拉项)

//$("#single").prepend("<optionvalue='0'>请选择</option>");//为Select插入一个Option(第一个位置)

vars='';

$("#singleoption:selected").each(function(){

//s=s+$(this).val()+',';

alert($(this).val());

});

$("input[name='checkbox']").attr("checked","checked");

$("input[name='checkbox']").attr("name","XXXXXXXXXX");

//alert($("input[name='checkbox']").attr("checked"));

});

})

//document.onload=changeclor();

</script>

<style>

.intro1

{

background:#98bf21;

height:40px;

width:100px;

position:relative;

margin-bottom:5px;

}

</style>

</head>

<body>

<h1>WelcometoMyHomepage</h1>

<pclass="intro1"id="box">MynameisDonald</p>

<buttonclass="btn1">Markanimatedelement</button>

<p>IliveinDuckburg</p>

<p>MybestfriendisMickey</p>

<h1class="message"><Pclass="intro">nowiwillusethejqueryclass.class</p></h1>

<divid="choose"class="choose">

Whoisyourfavourite:

<ul>

<li>Goofy</li>

<li>Mickey</li>

<li>Pluto</li>

<li>Pluto2</li>

<li>Pluto3</li>

</ul>

</div>

<form>

<div>

<table>

<tr>

<td>1</td><td>123123</td><td>123123</td>

</tr>

<tr>

<td>2</td><td>123123</td><td>123123</td>

</tr>

<tr>

<td>3</td><td>123123</td><td>123123</td>

</tr>

<tr>

<td>4</td><td>123123</td><td>123123</td>

</tr>

</table>

</div>

</form>

<formid="from2"action="#">

<selectid="single">

<optionvalue="选择0号">选择1号</option>

<optionvalue="选择2号"disabled='disabled'>选择2号</option>

<optionvalue="选择3号"selected="selected">选择3号</option>

</select>

<selectid="multiple"multiple="multiple"style="height:120px">

<optionvalue="选择1号">选择1号</option>

<optionvalue="选择2号">选择2号</option>

<optionvalue="选择3号">选择3号</option>

<optionvalue="选择4号">选择4号</option>

<optionvalue="选择5号">选择5号</option>

</select>

<inputtype="text"value="text"/>text

<br/>

<inputtype="input"value="input"/>input

<br/>

<inputtype="file"value="file"/>file

<br/>

<inputtype="checkbox"name="checkbox"value="check1"/>多选1

<inputtype="checkbox"name="checkbox"value="check2"checked='checked'/>多选2

<inputtype="checkbox"name="checkbox"value="check2"enabled="enabled"/>多选3

<inputtype="checkbox"name="checkbox"value="check4"/>多选4

<inputtype="button"id="bt1"value="XXXXXXXXXXX"/>

<br/>

<inputtype="radio"name="radio"value="radio1"/>单选1

<inputtype="radio"name="radio"value="radio2"/>单选2

<inputtype="radio"name="radio"value="radio3"/>单选3

<br/>

<inputtype="image"value="image"/>image

<br/>

<inputtype="file"value="file"/>file

<br/>

<inputtype="reset"name="reset"value="reset"/>reset

<br/>

<inputtype="password"name="password"value=""/>password

<br/>

<inputtype="submit"name="submit"value=""/>submit

<br/>

<inputtype="select"name="select"value=""/>select

<inputtype="button"id="btnShow"value="submit"/>

<br/><divid="body"></div><divid="subling"></div>

</form>

</body>

</html>

相关推荐