jquery几个常用的demo
新建两个页面。一个叫做 ---- 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);
}
jquery几个常用的demo的更多相关文章
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- jQuery中的常用内容总结(一)
jQuery中的常用内容总结(一) 前言 不好意思(✿◠‿◠),由于回家看病以及处理一些其它事情耽搁了,不然这篇博客本该上上周或者上周写的:同时闲谈几句:在这里建议各位开发的童鞋,如果有疾病尽快治 ...
- jQuery中的常用内容总结(三)
jQuery中的常用内容总结(三) 转载请注明地址:http://www.cnblogs.com/funnyzpc/p/7571998.html 内容提要 选择器(第一节) 选择器的扩展方法(第一节) ...
- jQuery中的常用内容总结(二)
jQuery中的常用内容总结(二) 转载请注明地址: http://www.cnblogs.com/funnyzpc/p/7571993.html 前言 距离上次博客更新已经有二十来天了(●′ω`●) ...
- jQuery之基础核心（demo)
jQuery之基础核心 作者的热门手记 jQuery之基础核心(demo) 本文主要简单的介绍下jQuery一些基础核心,大致了解jQuery使用模式.适用于有HTML.CSS.javas ...
- jquery倒计时按钮常用于验证码倒计时
<!doctype html><html><head> <meta charset="utf-8"> <title>jq ...
- jQuery ajax解析xml文件demo
解析xml文件,然后将城市列表还原到下拉列表框中:当选择下拉列表框时,在对应的文本框中显示该城市信息. 前端代码: <!doctype html> <html> <hea ...
- jquery中最常用的API有哪些
jquery中最常用的API有哪些 一.总结 一句话总结:取html的方法,class相关的方法,val相关的方法,data相关的方法,attr相关的方法 1.jQuery Object Access ...
- 从零开始学习jQuery (十) jQueryUI常用功能实战
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是实战篇. 使用jQueryUI完成制作网站 ...
随机推荐
- Candies(差分约束)
http://poj.org/problem?id=3159 题意: flymouse是幼稚园班上的班长,一天老师给小朋友们买了一堆的糖果,由flymouse来分发,在班上,flymouse和snoo ...
- touchend事件的preventDefault阻止掉了click事件
<div id="box">box</div> <script> var isTouchDevice = function() { return ...
- iso学习网站记录
[零基础学习iOS开发] http://www.cnblogs.com/mjios/archive/2013/04/24/3039357.html 非零基础学习iOS开发2-Objective-C h ...
- Camus导入中文乱码问题（源码修改、编译、部署、任务启动）
Camus使用过程中业务方反映从Kafka导入至HDFS中的数据有中文乱码问题,且业务方确认写入的数据编码为UTF-8,开始跟进. 问题重现: (1)编写代码将带有中文的字符串以编码UTF-8 ...
- 数据结构之数组Array
数组Array 基本操作 Status InitArray(int dimm,...)//若维数dim和随后的各维长度合法,则构造相应的数组A,并返回OK Status DestroyArray() ...
- 6N137的使用
(1)引脚图 (2)功能表 (3)内部结构图 信号从2.3脚输入,反向偏置的光敏二极管受光照后导通,经过电流电压转换,输入到与门一端,与门另一端为使能端.由于输入信号为集电极开路,需要加上拉电阻.当使 ...
- php 错误信息配置
display_errors = on/off错误回显,一般常用语开发模式,但是很多应用在正式环境中也忘记了关闭此选项.错误回显可以暴露出非常多的敏感信息,为攻击者下一步攻击提供便利.推荐关闭此选项. ...
- Centos6快速yum lamp
yum install httpd httpd-devel mysql mysql-server mysql-devel php php-mysql php-common php-gd php-mb ...
- 与IO相关的等待事件troubleshooting-系列5
'db file scattered read' 这是另一种常见的等待事件.他产生于Oracle从磁盘读取多个块到Buffer Cache中非连续(" scattered&q ...
- CentOS 7 安装和配置JDK
1.下载linux版的JDk 2.cd /usr/local 目录下,上传刚刚下载jdk文件 3.rpm -ivh jdk-8u111-linux-x64.rpm 4.设置环境变量 找到profile ...