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完成制作网站 ...
随机推荐
- golang入门-- 一个2D的图形库学习
此库叫gg,源码在github. 1.获取源码并安装到本地: 首先要安装git (传送门) : https://git-scm.com/download/ 然后就可以通过 go get 命令从 ...
- ConcurrentHashMap的get、put、size
ConcurrentHashMap的get操作 get操作的高效之处在于整个get过程不需要加锁,get方法里将要使用的共享变量都定义成volatile. ConcurrentHashMap的Put操 ...
- HDU 4430 Yukari's Birthday (二分+枚举)
题意:给定一个n(18 ≤ n ≤ 10^12),一个等比数列k + k^2 + .......+ k^r = n 或者 = n-1,求出最小的k*r,如果最小的不唯一,则取r更小的 分析:两个未知数 ...
- java基础（八） 面向对象（三）
这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...
- tyvj P1864 [Poetize I]守卫者的挑战（DP+概率）
P1864 [Poetize I]守卫者的挑战 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 打开了黑魔法师Vani的大门,队员们在迷宫般的路上漫无目的地搜 ...
- int 和 long的区别
数据模型决定了C语言中基本数据类型与数据宽度的对应关系.我们常用的32位模型称为ILP32,而64位模型有三种:LP64.LLP64和ILP64.在64位模型中,指针一定是64位的,但是int和lon ...
- servlet清晰理解
servlet介绍 Servlet看起来像是通常的Java程序.它是JSP的前身,在MVC架构中担任Controller的角色,即控制层.主要进行数据的处理操作和流程的控制,并将有关结果存储到Java ...
- 常用iptables规则整理
1.仅允许内部合法的IP地址访问服务器 #setting access rules #one,in access rules,allow all the ips of hudong.com iptab ...
- 移动开发框架，第【一】弹：QuoJs 官方文档（汉化版）
作者:一只猿 原文地址: http://www.92ez.com 转载请注明出处,谢谢 帮助说明 如果您认为QuoJS只是一个触摸事件管理器,那你就错了,它是一个功能丰富的类库,无需第三方JavaSc ...
- [Windows] Adobe Photoshop CC 2015官方原版下载 附破解补丁&破解教程
Photoshop自CS6以后改为CC,目前Photoshop CC 2015是最新版,发布日期为2015年6月. <ignore_js_op> 下载安装主程序: 主程序及补丁下载地址 ...