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& ...

随机推荐

C#语言是专门为.NET提供的开发语言（visual studio 2008序列号）
.net是微软的一个平台在这个平台上的语言有C#.C++.VB等,其中C#是专门为.NET平台开发的语言,语法简洁美观.建议安装visual studio 2008,你可以去微软官方下载90天试用版, ...
Mac上使用频率最高的七组快捷键
不管Mac还是Windows,会使用快捷键都能让你的工作效果提升不少,但是快捷键那么多一下子全部记下来也不太实际,这里小编就整理了七组使用频率最高的快捷键,希望可以帮到大家. https://www. ...
Ceph中PG和PGP的区别
http://www.zphj1987.com/2016/10/19/Ceph%E4%B8%ADPG%E5%92%8CPGP%E7%9A%84%E5%8C%BA%E5%88%AB/ 一.前言首先来一 ...
bzoj 2435
http://www.lydsy.com/JudgeOnline/problem.php?id=2435 noi 你为什么那么diao, 这种世纪水题刷一道少一道啊... 我原来还以为是两边的联通块大 ...
c#将数据导出到excel中
DataTable dt = new BLL.T_Expiry().GetAllList().Tables[0];//查询数据 string FileName = "T_Users.xl ...
VC2010 CString.Format使用报错 error C2664
error C2664: “void ATL::CStringT<BaseType,StringTraits>::Format(const wchar_t *,...)”: 不能将参数 1 ...
[六省联考2017]分手是祝愿题解(期望dp)
题目描述 B 君在玩一个游戏,这个游戏由 n 个灯和 n 个开关组成,给定这 n 个灯的初始状态,下标为从 1 到 n 的正整数. 每个灯有两个状态亮和灭,我们用 1 来表示这个灯是亮的,用 0 表示 ...
分布式系统理论基础8：zookeeper分布式协调服务
本文转自 https://www.cnblogs.com/bangerlee/p/5268485.html 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到 ...
树莓派2代 B型 4核 1G内存 raspberry pi 2 model B
树莓派技术交流群:318799602 期盼已久的PI2 已经到货,Element14版,非RS版本.诚信卖家如期发货,不会像某些淘宝卖家一样,没有货还标注现货,发货时间一拖再拖. 树莓派的最新力作!! ...
用FastDFS一步步搭建图片服务器(单机版)
一.FastDFS介绍 FastDFS开源地址:https://github.com/happyfish100 参考:分布式文件系统FastDFS设计原理参考:FastDFS分布式文件系统 1.简介 ...

jquery基础知识实例(一)

jquery基础知识实例(一)的更多相关文章

随机推荐

热门专题