jquery 【一】
<!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>jquery-1.html</title>
<style type="text/css">
.divFather{border:1px solid red; height:500px;width:300px;}
</style>
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".subBtn").bind('click',function(){
if($('.divFather').is(':hidden')){//如果当前隐藏
$('.divFather').show();//那么就显示div
}else{//否则
$('.divFather').hide();//就隐藏div
}
});
})
</script>
</head>
<body>
<div class="divFather"></div>
<input type="submit" value="提交" class="subBtn">
</body>
</html>
【显示，点击隐藏，再次点击显示】
$(“.html”).html(“往指定位置set值”);
<!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>jquery-1.html</title>
<style type="text/css">
.divFather{border:1px solid red; height:500px;width:300px;}
</style>
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".subBtn").bind('click',function(){
var one = $(".divFather >span").eq(2).text();
alert(one);
});
})
</script>
</head>
<body>
<div class="divFather">
<span>一</span>
<span>二</span>
<span>三</span>
</div>
<input type="submit" value="提交" class="subBtn">
</body>
</html>
【获取div 下span 标签中的一个】
<!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>jquery-1.html</title>
<style type="text/css">
.divFather{border:1px solid red; height:500px;width:300px;}
</style>
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".divFather > span").bind('click',function(){
var span = $(this).text();
alert(span);
})
})
</script>
</head>
<body>
<div class="divFather">
<span>一</span>
<span>二</span>
<span>三</span>
</div>
</body>
</html>
【标签相同，点击那个，当前标签弹出来】
$("span").last().text()
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:500px;">div (曾祖父)
<ul>ul (祖父)
<li>li (直接父)
<span>span</span>
</li>
</ul>
</div>
</div>
</body>
</html>
【该标签的父级标签】
<!DOCTYPE html>
<html>
<head>
<style>
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
var p= $("div").children().eq(0).text();
alert(p);
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (当前元素)
<p>p (子)
<span>span (孙yi)</span>
</p>
<p>p (child)
<span>span (孙er)</span>
</p>
</div>
</body>
</html>
【子级标签】
$("div").find("span").eq(0).css({"color":"red","border":"2px solid red"});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.siblings *{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("li.aaa").prev().next().css({"color":"red","border":"2px solid red"});
$("li.start").siblings().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li >li (兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点one)</li>
<li class="aaa">li (兄弟节点)</li>
</ul>
</div>
</body>
</html>
【当前节点的左一个右一个节点，兄弟节点】
$("input[name='username']").val();
var test = $(".divFather span:last-child").text();
var si= $(".si").prevAll().text();
$("#results").html( $.toJSON( $("form").serializeArray() ));
<!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>jquery-1.html</title>
<style type="text/css">
.divFather{border:1px solid red; height:500px;width:300px;}
</style>
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".subBtn").bind('click',function(){
var radio =$(":radio").val();
var checkbox = $(":checkbox").val();
var selected =$("input:checked").val();
alert(selected);
var option = $("select option:selected ").val();
alert(option);
});
})
</script>
</head>
<body>
<div class="divFather">
<span>一</span>
<span>二</span>
<span>三</span>
<input type="radio" value ="男" />男
<input type="radio" value ="女"checked="checked"/>女
<input type="checkbox" value ="足球"/>足球
<input type="checkbox" value="篮球"checked="checked"/>篮球
<select>
<option>one</option>
<option >two</option>
<option selected="selected">three</option>
</select>
</div>
<input type="submit" value="提交" class="subBtn">
</body>
</html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(":radio").each(function(){
alert($(this).val())
});
});
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<input type="radio" value ="男" />男
<input type="radio" value ="女"checked="checked"/>女
</body>
</html>
【遍历】
$(":radio").removeAttr("checked");
<!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>jquery-1.html</title>
<style type="text/css">
.divFather{border:1px solid red; height:200px;width:300px;}
</style>
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var datas = $("form").serialize();
var result = $("form").serializeArray();
console.log(datas);
$(".subBtn").bind('click',function(){
$.ajax({
type : 'post',
data : datas,
url : "/saleToMoney",
async : false,
dataType: "json",
success : function(data) {
var toUrl = data.buyBack;
window.location.href=toUrl;
}
});
});
})
</script>
</head>
<body>
<form>
<div class="divFather">
<input type="text" id="username" name="username" value="黑土"/>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
<input type="date" id="birthday" name="birthday" value="2012-12-12"/>
</div>
<input type="submit" value="提交" class="subBtn">
</form>
</body>
</html>
【表单序列化】
【合并数组】
$(function(){
var first = [1, 3, 5];
var second = [2, 4, 6];
var result = $.merge(first, second);
$(".subBtn").bind('click',function(){
alert(result);
});
})
【倒计时】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var countdown=60;
function sendemail(){
var obj = $("#btn");
settime(obj);
}
function settime(obj) { //发送验证码倒计时
if (countdown == 0) {
obj.attr('disabled',false);
//obj.removeattr("disabled");
obj.val("免费获取验证码");
countdown = 60;
return;
} else {
obj.attr('disabled',true);
obj.val("重新发送(" + countdown + ")");
countdown--;
}
setTimeout(function() {
settime(obj) }
,1000)
}
</script>
<body>
<input type="button" id="btn" value="免费获取验证码" οnclick="sendemail()" />
</body>
</html>