jquery 简单操作

最新推荐文章于 2024-07-30 10:56:44 发布

xiyuansanlian

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量78

点赞数

分类专栏： jquery 简单操作！文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/xiyuansanlian/article/details/84418012

版权

jquery 简单操作！专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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=gb2312" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="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();
});*/
/*
function classselctor(){
$(".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");
});
*/
function changeclor(){
$("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();

//var i=$('ul li:eq(2)').html();
//alert(i);
//$('ul li:gt(2)').each(function(){

//alert($(this).text());
//});
$('ul li:lt(3)').each(function(){
//alert($(this).text());
});
var headersize=$(':header').size();
//alert(headersize);
$(':header').each(function(){
//alert($(this).text())
});

});

$(document).ready(function(){
function aniDiv(){
$("#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");

var s='';
$(':selected').each(function(){

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

});
alert(s);
})
*/
/*$(document).ready(function(){

$(':input').css("background-color","#FCD4D4");
$("#bt1").bind("click",function(){
var s='';
$("[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("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
//$("#single").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
var s='';
$("#single option: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.οnlοad=changeclor();
</script>
<style>
.intro1
{
background:#98bf21;
height:40px;
width:100px;
position:relative;
margin-bottom:5px;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro1" id="box">My name is Donald</p>
<button class="btn1">Mark animated element</button>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>

<h1 class="message"><P class="intro">now i will use the jquery class .class</p></h1>
<div id="choose" class="choose">
Who is your favourite:
<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>

<form id="from2" action="#">
<select id="single">
<option value="选择0号">选择1号</option>
<option value="选择2号" disabled='disabled'>选择2号</option>
<option value="选择3号"selected="selected">选择3号</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px">
<option value="选择1号">选择1号</option>
<option value="选择2号">选择2号</option>
<option value="选择3号">选择3号</option>
<option value="选择4号">选择4号</option>
<option value="选择5号">选择5号</option>
</select>

<input type="text" value="text"/>text
<br/>
<input type="input" value="input"/>input
<br/>
<input type="file" value="file"/>file
<br/>
<input type="checkbox" name="checkbox" value="check1"/>多选1
<input type="checkbox" name="checkbox" value="check2"checked='checked'/>多选2
<input type="checkbox" name="checkbox" value="check2" enabled="enabled"/>多选3
<input type="checkbox" name="checkbox" value="check4"/>多选4
<input type="button" id="bt1" value="XXXXXXXXXXX"/>
<br/>
<input type="radio" name="radio" value="radio1"/> 单选1
<input type="radio" name="radio" value="radio2"/> 单选2
<input type="radio" name="radio" value="radio3"/> 单选3
<br/>
<input type="image" value="image"/>image
<br/>
<input type="file" value="file"/>file
<br/>
<input type="reset" name="reset" value="reset"/> reset
<br/>
<input type="password" name="password" value=""/>password
<br/>
<input type="submit" name="submit" value=""/>submit
<br/>
<input type="select" name="select" value=""/>select
<input type="button" id="btnShow" value="submit"/>
<br/><div id="body"></div> <div id="subling"></div>
</form>

</body>
</html>