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>Insert title here</title>
<style type="text/css">
#content{overflow:hidden;padding:0px;position:relative;width:550px;height:240px;border:5px solid orange;margin:100px auto;}
#d1,#d2,#d3,#d4{cursor:pointer;background:#abcdef;position:absolute;border:1px solid red;padding:3px 5px;}
#d1{bottom:10px;right:90px;}
#d2{bottom:10px;right:65px;}
#d3{bottom:10px;right:40px;}
#d4{bottom:10px;right:15px;}
#dong{width:2212px;position:absolute;left:0px;top:0px;}
#dong img{float:left;display:block;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
function showImage(num){
curNum=num;
var L=(1-num)*550+"px";
$("#dong").animate({left:L},1000);
$("#content>div:gt(0)").css('background',"#abcdef");
$("#d"+num).css("background","yellow");
}
var curNum=1;
function d(){
curNum++;
if(curNum>4){
curNum=1;
}
showImage(curNum);
}
var t;
$().ready(function(){
t=setInterval(d,2500);
$("#content>div:gt(0)").mouseenter(function(){
clearInterval(t);
})
$("#content>div:gt(0)").mouseleave(function(){
t=setInterval(d,2500);
})
})
</script>
</head>
<body>
<div id="content">
<div id="dong">
<img src="../images/a.jpg"/>
<img src="../images/b.jpg"/>
<img src="../images/c.jpg"/>
<img src="../images/d.jpg"/>
</div>
<div id='d1' onmouseover="showImage(1)" style="background:yellow;font-weight:bold;">1</div>
<div id='d2' onmouseover="showImage(2)">2</div>
<div id='d3' onmouseover="showImage(3)">3</div>
<div id='d4' onmouseover="showImage(4)">4</div>
</div>
</body>
</html>
鼠标经过时显示坐标位置
<!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>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
$("#div1").mousemove(function(e){
$(this).html("x:"+e.pageX+"|y:"+e.pageY);
})
})
</script>
</head>
<body>
<div style="font-size:30px;width:500px;height:400px;border:5px solid red;" id="div1"></div>
</body>
</html>
省市联动
<!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>Insert title here</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
var provinces=[{id:1,name:'北京'},{id:2,name:'河北'},{id:3,name:'山东'}];
var citys={1:[{id:10,name:'海淀'},{id:11,name:'丰台'}],2:[{id:21,name:'石家庄'},{id:22,name:'承德'}],3:[{id:31,name:'济南'},{id:32,name:'青岛'}]}
var areas={10:[{id:101,name:'h1'},{id:102,name:'h2'}],11:[{id:111,name:'f1'},{id:112,name:'f2'}]}
$().ready(function(){
//给province追加option
$("[name='province']").append("<option value='0' selected='selected'>请选择</option>");
for(var k in provinces){
$("[name='province']").append("<option value='"+provinces[k].id+"'>"+provinces[k].name+"</option>");
}
getCity();
})
function getCity(){
//得到province的value属性值
var v=$("[name=province]").val();
//获取市数据
var arr=citys[v];
$("[name=city]").empty();
//追加一个请选择
$("[name=city]").append("<option value='0' selected='selected'>请选择</option>");
//遍历jOb,为city产生option
for(var k in arr){
$("[name=city]").append("<option value='"+arr[k].id+"'>"+arr[k].name+"</option>");
}
getArea();
}
function getArea(){
//得到市id
var cid=$("[name=city]").val();
//去areas中获取县信息
var arr=areas[cid];
$("[name=area]").empty();
$("[name=area]").append("<option value='0'>请选择</option>");
for(var k in arr){
$("[name=area]").append("<option value='"+arr[k].id+"'>"+arr[k].name+"</option>");
}
}
</script>
</head>
<body>
<select onchange="getCity();" name="province"></select>
<select onchange="getArea();" name="city"></select>
<select name="area"></select>
</body>
</html>
jquery基础知识实例(一)的更多相关文章
- JQuery基础知识梳理篇
这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- JQuery基础知识（1）
JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的 ...
- JQuery基础知识（2）
JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...
- 0417 jQuery基础知识
jQuery基础知识 jQuery需要引入一个js文件,并且这个文件在所有js代码之前(包括引入的其他js文件) 基础操作(对比js): 1.找标签: js:document.getElement.. ...
- 【JQuery基础知识/statusCode(状态码)】---初学者必备
今天,给大家分享一下JQuery的基础知识,简单介绍一下JQuery高级_Ajax,和我们常见的一些statusCode(状态码)~~~ 如果存在错误,请大家多多指正留言~小女子在此谢过! 一.JQu ...
- 【前端】之jQuery基础知识
jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...
- python爬虫之Beautiful Soup基础知识+实例
python爬虫之Beautiful Soup基础知识 Beautiful Soup是一个可以从HTML或XML文件中提取数据的python库.它能通过你喜欢的转换器实现惯用的文档导航,查找,修改文档 ...
- jQuery基础与实例
一.简介 1.什么是jQuery jQuery是一个轻量级.快速简洁的javaScript库,能让我们方便快捷的选择元素操作元素属性. 2.下载地址 3.jQuery使用方式 $("div& ...
随机推荐
- LA 3971 Assemble（二分）
题目: 给你b元钱,让你组装一台电脑,有n个配件,属性有 种类 名字 价格 品质,每种类型选至少一个,并且最小品质最大.输出这个最大的最小品质. 白书上说了,最小值最大的问题一般是二分来求解答案.在这 ...
- java web项目的https配置
1.进入到jdk下的bin目录 keytool -v -genkey -alias tomcat -keyalg RSA -keystore d:/tomcat.keystore -validity ...
- CF1061E Politics E. Politics 解题报告
CF1061E Politics E. Politics 考虑利用树的性质,因为是子树问题,所以放到dfs序上. 只考虑一个树,问题是每个区间选恰好\(k\)个.因为区间其实是子树,所以区间要么包含, ...
- SCP-bzoj-1084
项目编号:bzoj-1084 项目等级:Safe 项目描述: 戳这里 特殊收容措施: 分类讨论+DP.#滑稽 预处理前缀和s[i][s]=Σa[j][s](∀j∈[1,i])(m=1时略去第二维) 对 ...
- 泰坦尼克号沉没之谜，用数据还原真相——Titanic获救率分析（用pyecharts）
泰坦尼克号获救率数据分析报告,用数据揭露真相. 一,船上乘客生存率分析报告 泰坦尼克号生存率仅有38%的,可见此次事件救援不力,救生艇严重不足,且泰坦尼克号号撞得是冰山,海水冷,没有救生艇,在水里冻死 ...
- eclipse debug (调试)基础
进入debug模式: 1.设置断点 2.启动servers端的debug模式 3.运行程序,在后台遇到断点时,进入debug调试状态 ============================= 作用域 ...
- java并发编程笔记（三）——线程安全性
java并发编程笔记(三)--线程安全性 线程安全性: 当多个线程访问某个类时,不管运行时环境采用何种调度方式或者这些进程将如何交替执行,并且在主调代码中不需要任何额外的同步或协同,这个类都能表现 ...
- 建站手册-职业规划：职业履历（CV）
ylbtech-建站手册-职业规划:职业履历(CV) 1.返回顶部 1. http://www.w3school.com.cn/careers/career_cv.asp 2. 2.返回顶部 1. 履 ...
- 56、salesforce学习笔记（三）
Date类型 Datetime nowDatetime = Datetime.now(); Datetime datetime1 = Datetime.newInstance(2015,3,1,13, ...
- linux安装相关软件
XShell上传jdk文件到Linux并安装配置1.yum -y install lrzsz2.sudo rz选文件3.sudo tar -zxvf jdk-8u131-linux-x64.tar.g ...