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

jquery几个常用的demo

2015-08-30 21:47 627 查看
　　新建两个页面。一个叫做 ---- demo1.js-------

一个叫做 ----- demo1.html-----

代码分别如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--引入框架-->
<link href="resource/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="resource/jQuery/jquery-1.11.3.js"></script>
<script src="resource/bootstrap/js/bootstrap.js"></script>

<!--引入自己的js-->
<script src="js/demo1.js"></script>

<style>
/*css选择器：class,id,标签,复合选择器*/
</style>
</head>
<body>

<!-- //练习：实现table的隔行换色 -->
<table class="table">
<tr>
<td>订单号</td>
<td>下单时间</td>
<td>总价</td>
<td>操作</td>
</tr>

<tr>
<td>111111</td>
<td>2015-5-5</td>
<td>200</td>
<td>付款</td>
</tr>

<tr>
<td>111111</td>
<td>2015-5-5</td>
<td>200</td>
<td>付款</td>
</tr>

<tr>
<td>111111</td>
<td>2015-5-5</td>
<td>200</td>
<td>付款</td>
</tr>

<tr>
<td>111111</td>
<td>2015-5-5</td>
<td>200</td>
<td>付款</td>
</tr>

<tr>
<td>111111</td>
<td>2015-5-5</td>
<td>200</td>
<td>付款</td>
</tr>
</table>

<hr/>

<!--打印九九乘法表，并用动画的形式显示出来(div)-->
<a href="" class="btn btn-danger">打印</a>
<br/>
<br/>
<div id="cfb"></div>

<!--//定义两个数组，一个存省份，一个市，实现两个下拉表的二级联动-->
<div id="xlb" style="width: 500px;height: 200px;background: cadetblue;margin:30px auto;padding:30px;">
</div>

<!--//实现简单验证，错误信息显示在输入框后边，并有一定颜色提示-->
<div  id="yz" style="width: 500px;height: 200px;background: cadetblue;margin:30px auto;padding:30px;">

<form>
姓名：<input type="text" value="" name="xm"><br/>
<input type="button" name="tj" value="提交">
</form>

</div>

<!--//实现checkbox多选，并输出选择得值-->
<div  id="cb" style="width: 500px;background: rgba(95, 158, 160, 0.22);margin:30px auto;padding:30px;">
<p class="text-right"> <a class="btn btn-danger" id="sc">删除</a>
</p>
<table class="table">
<tr>
<td>
<input type="checkbox" value="" name="xzcb" >全选/全不选
</td>
<td>
学号
</td>
<td>
姓名
</td>
</tr>

<tr>
<td>
<input type="checkbox" value="1" name="xz">
</td>
<td>
11111
</td>
<td>
张三
</td>
</tr>

<tr>
<td>
<input type="checkbox" value="2" name="xz">
</td>
<td>
2222222
</td>
<td>
李四
</td>
</tr>

<tr>
<td>
<input type="checkbox" value="3" name="xz">
</td>
<td>
3333333
</td>
<td>
王五
</td>
</tr>
</table>
<div id="info" class="bg-danger"></div>

</div>

</body>
</html>


/**
* Created by Administrator on 15-8-30.
*/
//使用js
/*window.onload=function(){
alert('hello world!');
}*/
/*
//使用jquery -jquery内置的一个全局对象。$(参数)：根据参数选择对象返回jquery对象
$(document).read(function(){
$(".box").css("height","200").css("background","red").hide(5000).show(5000);
})
*/
$(function(){
//练习：实现table的隔行换色
//使用过滤器
/*   $("table tr:even").css("background","red");
$("table tr:odd").css("background","blue");*/

var obj=$("table tr");
obj.each(function(index,val)
{
if(index%2==0)
{
$(val).css("background","blue");
}
else
{
$(val).css("background","pink");
}
})

/*  $("table tr").each(function(i,v){
alert(i+","+ v.tagName);
})
*/

$("a").first().click(function(){
var i=1;
var s="";
for(i;i<=9;i++)
{
for(var j=1;j<=i;j++)
{
s+=j+"*"+i+"="+j*i+"     ";
}
s+="<br/>";

}
$("#cfb").html(s);

})

//定义一个数组，遍历数组，赋值给下拉列表，呈现出来
var json=[
{"value":"1","text":"apple"},
{"value":"2","text":"orange"},
{"value":"3","text":"banana"},
{"value":"4","text":"watermelon"},
{"value":"5","text":"pineapple"}
];
var s="";
s=s+"<select>";
$.each(json,function(idx,obj){

s+="<option value="+obj.value+">"+obj.text+"</option>";

});
s=s+"</select>";
$("#cfb").html(s);

//js定义数组var定义变量
var a1="a";
var a2=["abc","abc","efg","广州",3];
var a3=[
["北京","天津"],
["南京","苏州","南通","常州"],
["福州","福安"],
["兰州","白银","定西","敦煌"]
];
var a4=[
{"name":"张三","age":"18"},
{"name":"李四","age":"20"},
{"name":"小明","age":"50"},
{"name":"小红","age":"30"},
];
/* each(index(索引),value(值)),匿名函数的参数是占位符，
$.each(a4,function(index,value){
alert("索引："+index+",值:"+value.name);

})
*/
//两层each遍历
$.each(a3,function(i1,v1){
$.each(v1,function(i2,v2){
alert(v2);
})
})

//定义两个数组，一个存省份，一个市，实现链各个下拉表二级联动
//一位数组存储省份
var pro=["直辖市","江苏","福建","广东","甘肃"];
//二维数组存储市
var city=[
["北京","天津","上海","重庆"],
["南京","苏州","南通","常州"],
["福州","福安","龙岩","南平"],
["广州","潮阳","潮州","澄海"],
["兰州","白银","定西","敦煌"]

];
jzpro(pro);
jzcity(city[0]);
//使用id找到select
$('#pro').change(function(){
//dom操作
$("#city").remove();//删除自身的元素
jzcity(city[$(this).val()]);
})

//从元素开始，使用$（选择符）得到元素
$("input[name=tj]").click(function(){
var xm=$("input[name=xm]");//表单选择器.jquery建议将对象赋值给变量做缓冲
if(xm.val()=="")
{
if(xm.next().is("span"))
xm.next().remove();
xm.after("<span style='color:red'>请输入姓名!</span>");

}
else
{
//提交
$("form:first").submit();
}
})

//实现checkbox多选。并输入选择的值
//实现多选attr\prop区别：
$("input[name=xzcb]").click(function(){
//alert($(this).is(":checked"));
//alert($(this).prop('checked'));
if($(this).is(":checked"))
$("input[name=xz]").prop("checked",true);
else
$("input[name=xz]").prop("checked",false);

})
$("#sc").click(function(){
var v="";
$("input[name=xz]").each(function(index,value){
if($(value).prop("checked"))
v+=$(value).val()+",";

})
$("#info").text("删除的元素为："+v)
})

})
//下拉列表
function jzpro(pro){
var pros="";
pros+="<select id='pro'>";
$.each(pro,function(idx,obj){
pros+="<option value="+idx+">"+obj+"</option>";

});
pros+="</select>";
$("#xlb").append(pros);

}
function jzcity(cityarray){
var citys="";
//初始化的时候，默认加载
citys+="<select id='city'>";
$.each(cityarray,function(idx,obj){
citys+="<option value="+idx+">"+obj+"</option>";

});
citys+="</select>";
//dom操作
$("#xlb").append(citys);
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航