【jQuery】基础知识梳理笔记
jQuery(网页特效)
- 简介:
jQ是由漂亮国人…于2006年创建
jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装
他的设计思想是write less ,do more 很多时候他只需要一行代码就可以解决css,js需要大量代码才能解决的问题
形式例如: $(“tr:even”).css(“background-color”,"#0000");
功能与优势
-
功能:
f访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax计数完美结合
-
优势
t体积小,压缩后只有100k左右
强大的选择器
出色的DOM封装
可靠的时间处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持
安装运行
jQuery库文件–官网: http://jquery.com
- 开发版与发布板
| 名称 | 大小 | 说明 |
|---|---|---|
| jQuery-3.版本号.js (开发版) | 约286kb | 完整无压缩版本,主要用于测试开发跟学习 |
| jQuery-3.版本号.min.js (发布版) | 约94kb | 经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目 |
jQuery基本语法结构
<script>
$(document).ready(function() {
alert("我欲奔赴沙场征战jQuery，势必攻克之！");
});
script>
---------------------------------------------------------
<body>
<script type="text/javascript" src="js/jquery-3.6.0.js">script>
<script type="text/javascript">
// 绑定页面加载事件 ready:当dom界面加载完就会执行 而且一个页面中可以写多个
// 与window.onload 区别 onload:只会加载一次 页面中的所有元素加载完才会执行
$(document).ready(function(){
alert("Hello jQuery")
})
script>
body>
- $(document).ready()与window.onload
| window.onload | $(document).ready() | |
|---|---|---|
| 执行时机 | 必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行 | 网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完 |
| 编写个数 | 同一页面不能同时编写多个 | 同一页面能同时编写多个 |
| 简化写法 | 无 | $(function(){ //执行代码 }); |
jQuery选择器
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作
基础语法是：$(selector).action()
基本选择器
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器
| 名称 | 语法构成 | 描述 | 示例 |
|---|---|---|---|
| 标签选择器 | element | 根据给定的标签名匹配元素 | $(“h2” )选取所有h2元素 |
| 类选择器 | .class | 根据给定的class匹配元素 | $(" .title")选取所有class为title的元素 |
| ID选择器 | #id | 根据给定的id匹配元素 | $(" #title")选取id为title的元素 |
| 并集选择器 | selector1,selector2,…,selectorN | 将每一个选择器匹配的元素合并后一起返回 | $(“div,p,.title” )选取所有div、p和拥有class为title的元素 |
| 全局选择器 | * | 匹配所有元素 | $("*" )选取所有元素 |
示例:
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图书简介title>
<link rel="stylesheet" href="css/bookStyle.css">
head>
<body>
<section id="book">
<div class="imgLeft"><img src="images/store.jpg" alt="岛上书店">div>
<div class="textRight">
<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]h1>
<p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！p>
<p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译p>
<div class="price">
<div id="jdPrice">京东价： <span>￥24.10span> [6.9折] <p>[定价：<span>￥35.00span>]p> (降价通知)div>
<p id="mobilePrice">促销信息：<span>手机专享价span> <span>￥9.90span>p>
<dl>
<dt>以下促销可在购物车任选其一dt>
<dd><span>加价购span> 满99.00元另加6.18元即可在购物车换购热销商品dd>
<dd><span>满减span> 满100.00减20.00，满200.00减60.00，满300.00减100.00dd>
dl>
<p id="ticket">领 券：<span>105-6span> <span>200-16span>p>
div>
div>
section>
<script src="js/jquery-1.12.4.js">script>
<script type="text/javascript">
//全局选择器
$("*").css("font-weight","bold")
//并集选择器
$(".intro,dd").css("color","#ff0000")
// 执行jquery代码
// $(function(){ // 等价于ready
// alert("我欲学习jquery,必将征战沙场")
// })
//id选择器
$("#author").css("color","#6b8fe3")
// 1.展示dd中的内容
$("dd").css("display","block")
// 2.使用标签选择器 改变标题颜色
$("h1").css("color","blue") // 单个样式
//类选择器
$(".price").css({ // 多个样式
"background":"#efefef",
"padding":"5px",
"color":""
})
script>
body>
html>
层次选择器
层次选择器通过DOM 元素之间的层次关系来获取元素
| 名称 | 语法构成 | 描述 | 示例 |
|---|---|---|---|
| 后代选择器 | ancestor descendant | 选取ancestor元素里的所有descendant（后代）元素 | $("#menu span" )选取#menu下的< span>元素 |
| 子选择器 | parent>child | 选取parent元素下的child（子）元素 | $(" #menu>span" )选取#menu的子元素< span> |
| 相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元素 | $(" h2+dl " )选取紧邻< h2>元素之后的同辈元素< dl> |
| 同辈元素选择器 | prev~sibings | 选取prev元素之后的所有siblings元素 | $(" h2~dl " )选取< h2>元素之后所有的同辈元素< dl> |
示例:
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图书简介title>
<link rel="stylesheet" href="css/bookStyle.css">
head>
<body>
<section id="book">
<div class="imgLeft"><img src="images/store.jpg" alt="岛上书店">div>
<div class="textRight">
<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]h1>
<p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！p>
<p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译p>
<div class="price">
<div id="jdPrice">京东价： <span>￥24.10span> [6.9折] <p>[定价：<span>￥35.00span>]p> (降价通知)div>
<p id="mobilePrice">促销信息：<span>手机专享价span> <span>￥9.90span>p>
<dl>
<dt>以下促销可在购物车任选其一dt>
<dd><span>加价购span> 满99.00元另加6.18元即可在购物车换购热销商品dd>
<dd><span>满减span> 满100.00减20.00，满200.00减60.00，满300.00减100.00dd>
dl>
<p id="ticket">领 券：<span>105-6span> <span>200-16span>p>
div>
div>
section>
<script src="js/jquery-1.12.4.js">script>
<script >
// 1.使用后代选择器,将所有的p标签设置为红色
$("#book p").css("color","red")
// 2.使用子选择器选中p标签
$(".textRight>p").css("color","red")
// 3.使用相邻兄弟选择器 将自营书加下划线
$("h1+p").css("text-decoration","underline")
//4.使用同辈兄弟选择器 将所有的p 加下划线
$("h1~p").css("text-decoration","underline")
script>
body>
html>
属性选择器
属性选择器通过HTML元素的属性来选择元素
| 语法构成 | 描述 | 示例 |
|---|---|---|
| [attribute^=value] | 选取给定属性是以某些特定值开始的元素 | $(" [href^=‘en’]" )选取href属性值以en开头的元素 |
| [attribute$=value] | 选取给定属性是以某些特定值结尾的元素 | ( " [ h r e f (" [href ("[href=’.jpg’]" )选取href属性值以.jpg结尾的元素 |
| [attribute*=value] | 选取给定属性是以包含某些值的元素 | $(" [href* =‘txt’]" )选取href属性值中含有txt的元素 |
示例:
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>京东快报title>
<link rel="stylesheet" href="css/newStyle.css">
head>
<body>
<section id="news">
<header>京东快报<a href="#" class="more">更多 > a>header>
<ul>
<li><a href="sale.jd.com/act/h7mf8.html" class="hot"><span>[618]span>志玲姐姐：墨镜300减30a>li>
<li><a href="www.jd.com/news.aspx?id=29257"><span>[公告]span>京东无锡馆正式启动a>li>
<li><a href="sale.jd.com/act/k2ad45v.html"><span>[特惠]span>99元抢平板！品牌配件199-100a>li>
<li><a href="www.jd.com/news.aspx?id=29252"><span>[公告]span>节能领跑京东先行a>li>
<li><a href="sale.jd.com/act/ugk2937w.html" class="last"><span>[特惠]span>高洁丝实力撩货，领券五折a>li>
ul>
section>
<script type="text/javascript" src="js/jquery-1.12.4.js">script>
<script type="text/javascript" >
// 使用属性选择器 将有class的背景颜色改变成灰色
//$("a[class]").css("background","#e1e1e1")
// 使用属性选择器修改class属性为last 的背景颜色
//$("a[class=last]").css("background","#d5f6d4")
// 选中属性href以sale开头开头的元素(开头)
//$("a[href^=sale]").css("background","#dbaeea")
// 以html结尾(结尾)
//$("a[href$=html]").css("background","#dbaeea")
// 匹配href 带有jd(模糊匹配)
$("a[href*=jd]").css("background","#f36b8b")
script>
body>
html>
过滤选择器
通过特定的过滤规则来筛选出所需的元素
- 主要分类
基本过滤选择器
可见性过滤选择器
表单对象过滤选择器
内容过滤选择器、子元素过滤选择器…
基本过滤选择器
| 语法 | 描述 | 示例 |
|---|---|---|
| :eq(index) | 选取索引等于index的元素（index从0开始） | $(“li:eq(1)” )选取索引等于1的
|
| :gt(index) | 选取索引大于index的元素（index从0开始） | $(" li:gt(1)" )选取索引大于1的
|
| :lt(index) | 选取索引小于index的元素（index从0开始） | $(“li:lt(1)” )选取索引小于1的
|
| :header | 选取所有标题元素，如h1~h6 | $(":header" )选取网页中所有标题元素 |
| :focus | 选取当前获取焦点的元素 | $(":focus" )选取当前获取焦点的元素 |
| :animated | 选择所有动画 | $(":animated" )选取当前所有动画元素 |
| [:even] | 所有偶数 | |
| $(“tr:even”).css(“background”,“deeppink”) | ||
| [:odd] | 所有奇数 | |
| $(“tr:odd”).css(“background”,“deeppink”) |
示例:
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿冬奥列表内容title>
<link rel="stylesheet" href="css/games.css">
head>
<body>
<div class="contain">
<h2>祝福冬奥h2>
<ul>
<li>喜欢那一条: <input onfocus="tofocus()" type="text" value="请选择">li>
<li onmouseover="toOver()" id="ov" > 贝克汉姆：衷心希望北京能够申办成功！li>
<li> 姚明：北京申冬奥是个非常棒的机会！加油！li>
<li class="not"> 张虹：北京办冬奥，大家的热情定超乎想象！ li>
<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！li>
<li> 赵宏博：北京申办冬奥会是再合适不过了！li>
<li> 你喜欢哪些冬季运动项目？(点击进入调查页)li>
ul>
div>
<script src="js/jquery-1.12.4.js">script>
<script >
function tofocus(){ // 当获取焦点时执行此方法
// 选中获取焦点的元素
$("ul li input:focus").val("")
}
function toOver(){
// jquery动画
$("li").animate({fontSize:20},"slow") // 设置字体大小
$("li").animate({fontSize:40},"slow",toOver) // 重复调用
// 选中所有的动画元素
$(":animated").css("background","red")
}
// 选中第一个li
//$("ul li:first").css("color","#99d970")
// 选中最后一个li
//$("ul li:last").css("color","#76b7e0")
// 不选中某个
//$("ul li:not(.not)").css("background","#1fdbe1")
// 偶数小猪佩奇色
//$("ul li:even").css("background","deeppink")
// 奇数设置为 跳跳虎
//$("ul li:odd").css("background","yellow")
// 选中第二个li
//$("li:eq(1)").css("background","red")
// 选中下标大于2 的li
//$("li:gt(2)").css("background","red")
// 下标小于2
//$("li:lt(2)").css("background","red")
// 选中所有的标题
//$(".contain :header").css("background","red")
script>
body>
html>
可见性过滤选择器
通过元素显示状态来选取元素
| 语法 | 描述 | 示例 |
|---|---|---|
| :visible | 选取所有可见的元素 | $(":visible" )选取所有可见的元素 |
| :hidden | 选取所有隐藏的元素 | $(":hidden" ) 选取所有隐藏的元素 |
$(“p:hidden”).show();
$(“p:visible”).hide();
示例:
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>可见性过滤选择器title>
<style type="text/css">
#txt_show {display:none; color:#00C;}
#txt_hide {display:block; color:#F30;}
style>
head>
<body>
<p id="txt_hide">点击按钮，我会被隐藏哦~p>
<p id="txt_show">隐藏的我，被显示了，嘿嘿^^p>
<input name="show" type="button" value="显示隐藏的P元素" id="show"/>
<input name="hide" type="button" value="隐藏显示的P元素" id="hide" />
<script src="js/jquery-1.12.4.js">script>
<script>
$(document).ready(function(){
// jquery 绑定点击事件
$("#show").click(function (){
// 选中所有被隐藏的元素 展示
$("p:hidden").show()
})
// 选中所有展示的元素 隐藏
$("#hide").click(function (){
$("p:visible").hide()
})
})
//author:XimoHondo西莫沃多
script>
body>
html>
使用jQuery操作DOM
-
DOM操作分为三类：
- DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
- HTML-DOM：用于处理HTML文档，如document.forms
- CSS-DOM：用于操作CSS，如element.style.color=“green”
-
节点与元素的区别
dom文档本身就是1个节点（document）。节点包括文档节点、元素节点、文本节点、属性节点、注释节点。
元素之一是节点的其中部分之一
样式操作
获取属性
css(name(属性名));
设置属性
设置单个属性: css(name(属性名),value(属性值)) ;
设置多个属性: css({name:value, name:value,name:value…}) ;
示例:$(this).css(“border”,“5px solid #f5f5f5”);
追加样式
追加样式: $(selector).addClass(class(样式)); (单个)
或 $(selector).addClass(class1 class2 … classN); (多个)
移除样式
移除样式: $(selector).removeClass(“class”) ; (单个)
或 $(selector).removeClass("class1 class2 … classN ") ; (多个)
切换样式
$(selector).toggleClass(class) ;
判断是否有这个样式
$(selector). hasClass(class);
示例:
doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>追加和移除样式title>
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:14px;
font-family:"微软雅黑";
line-height: 28px;;
}
.title {font-size:14px; color:#03F; text-align: center; }
.text{ padding:10px;}
.content {background-color:#FFFF00; }
.border {border:1px dashed #333; }
style>
head>
<body>
<h2 class="title" >jQuery操作CSSh2>
<p class="text">
css()设置或返回样式属性<br>
addClass()增加一个或多个类<br>
removeClass()移除一个或多个类
p>
<script src="js/jquery-1.12.4.js" >script>
<script>
//添加鼠标悬浮事件
//将下面追加的类样式放里面
$("p").mouseover(function(){
// $("p").addClass("content border")
})
//鼠标移出,移除样式
$("p").mouseout(function(){
//$("p").removeClass("content border")
})
$("p").addClass("content")//追加单个类样式
$("p").addClass("content border")//追加多个类样式
$("p").removeClass("content border")//移除多个类样式
script>
body>
html>
doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>追加和移除样式title>
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:14px;
font-family:"微软雅黑";
line-height: 28px;;
}
.title {font-size:14px; color:#03F; text-align: center; }
.text{ padding:10px;}
.content {background-color:#FFFF00; }
.border {border:1px dashed #333; }
style>
head>
<body>
<h2 class="title" >jQuery操作CSSh2>
<p class="text">
css()设置或返回样式属性<br>
addClass()增加一个或多个类<br>
removeClass()移除一个或多个类
p>
<script src="js/jquery-1.12.4.js" >script>
<script>
//点击事件 还是一样放进去
$("p").click(function(){//function()匿名函数,因为这里的函数是触发形式的,不需要被调用
})
//模拟了addClass()与removeClass()实现样式切换的过程
//点第一下是addClass,第二下就是removeClass,两个样式
$(".text").toggleClacc("content border")//切换多个的类样式
//判断是否有这个类样式,有就删除,没有就添加(if选择结构)
$(".text").mouseover(function(){
//this:谁触发了样式,this就是谁,this代表当前对象
if (!$(this).hasClass("content")) {
$(".text").addClass("content")
}else{
$(".text").removeClass("content")
}
})
script>
body>
html>
内容操作
获取与设置元素中的html代码
$(“div.left”).html(); (获取)
$(“div.left”).html("< div class=‘content’>…< /div>"); (设置)
获取与设置元素中的文本内容
$(“div.left”).text(); (获取)
$(“div.left”).text("< div class=‘content’>…< /div>"); (设置)
html() 和text()方法的区别
| 语法格式 | 参数说明 | 功能描述 |
|---|---|---|
| html() | 无参数 | 用于获取第一个匹配元素的HTML内容或文本内容 |
| html(content) | content为元素的HTML内容 | 用于设置所有匹配元素的HTML内容或文本内容 |
| text() | 无参数 | 用于获取所有匹配元素的文本内容 |
| text(content) | content为元素的文本内容 | 用于设置所有匹配元素的文本内容 |
获取与设置value属性值
$(this).val(); (获取)
$(this).val(value); (设置)
示例:
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>常见问题title>
<link rel="stylesheet" href="css/problem.css">
head>
<body>
<section>
<span>×span>
<h1>常见问题h1>
<div class="proList">div>
<div class="img"><img src="images/boy.png">div>
section>
<script src="js/jquery-1.12.4.js" >script>
<script>
//鼠标悬浮到section时,为div添加内容
// 鼠标悬浮 添加无序列表
// html():支持标签添加 text():文本
$("section").mouseover(function (){
$(".proList").html(""
+
"鼠标为什么不管用了? " +
"天气为什么变冷了啊? " +
"手为什么发抖啊? " +
"女神为什么不理我啊,是我舔的不够深情吗? " +
"")
// 获取
alert( $(".proList").html())
})
// $("section").mouseover(function (){
// $(".proList").text("" +
// "鼠标为什么不管用了? " +
// "天气为什么变冷了啊? " +
// "手为什么发抖啊? " +
// "女神为什么不理我啊,是我舔的不够深情吗? " +
// "")
// })
script>
body>
html>
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>搜索框特效title>
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:12px;
}
input{
float: left;
}
#searchtxt{
width:222px;
height:38px;
line-height:38px;
padding-left:30px;
border:none;
background: url(images/bg.jpg) no-repeat;
}
.search_btn{
width:90px;
height:38px;
line-height:38px;
border:none;
background: url(images/btn.jpg) no-repeat;
margin-left:-4px;
cursor:pointer;
}
style>
head>
<body>
<input name="" type="text" class="search_txt" value="电风扇" id="searchtxt" />
<input type="button" class="search_btn" />
<script src="js/jquery-1.12.4.js" >script>
<script>
//焦点聚焦时让文字消失,失去焦点时让文字再次显现
//这里再次用到了this
// 绑定获取焦点事件
$("#searchtxt").focus(function (){
$(this).val("") // 清空值
})
// 失去焦点时 电风扇让电风扇回来
$("#searchtxt").blur(function (){
$(this).val("电风扇") //恢复值
})
script>
body>
html>
节点操作
创建节点:
-
工厂函数$()用于获取或创建节点
$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点
例如: var $newNode = $("< li title=‘last’>北京申办冬奥会是再合适不过了！< /li>");
插入节点:
插入同辈节点:
| 语法 | 功能 |
|---|---|
| after(content) | $(A).after (B)表示将B插入到A之后 |
| 如： ( " u l " ) . a f t e r ( ("ul").after( ("ul").after(newNode1); | |
| insertAfter(content) | $(A). insertAfter (B)表示将A插入到B之后 |
| 如：$newNode1.insertAfter(“ul”); | |
| before(content) | $(A). before (B)表示将B插入至A之前 |
| 如： ( " u l " ) . b e f o r e ( ("ul").before( ("ul").before(newNode1); | |
| insertBefore(content) | $(A). insertBefore (B)表示将A插入到B之前 |
| 如：$newNode1.insertBefore(“ul”); |
插入子节点:
| 语法 | 功能 |
|---|---|
| append(content) | $(A).append(B)表示将B追加到A中 |
| 如： ( " u l " ) . a p p e n d ( ("ul").append( ("ul").append(newNode1); | |
| appendTo(content) | $(A).appendTo(B)表示把A追加到B中 |
| 如：$newNode1.appendTo(“ul”); | |
| prepend(content) | $(A). prepend (B)表示将B前置插入到A中 |
| 如： ( " u l " ) . p r e p e n d ( ("ul"). prepend ( ("ul").prepend(newNode1); | |
| prependTo(content) | $(A). prependTo (B)表示将A前置插入到B中 |
| 如：$newNode1. prependTo (“ul”); |
删除节点:
- $(selector).remove(); (删除全部节点)
- $(selector).empty(); (清空节点内容)
- $(selector).detach(); (只清除节点但保留属性)
替换节点:
var n e w N o d e 1 = newNode1= newNode1=("< li>你喜欢哪些冬季运动项目？< /li>");
( " . g a m e L i s t l i : e q ( 2 ) " ) . ∗ ∗ r e p l a c e W i t h ∗ ∗ ( (".gameList li:eq(2)").**replaceWith**( (".gameListli:eq(2)").∗∗replaceWith∗∗(newNode1); (后替换前)
replaceAll: 前替换后
复制节点:
$(selector).clone(这里填true或false) ; (深浅复制)
示例:
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿冬奥列表内容title>
<link rel="stylesheet" href="css/games.css">
head>
<body>
<div class="contain">
<h2>祝福冬奥h2>
<ul class="gameList">
<li> 贝克汉姆：衷心希望北京能够申办成功！li>
<li> 姚明：北京申冬奥是个非常棒的机会！加油！li>
<li> 张虹：北京办冬奥，大家的热情定超乎想象！ li>
<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！li>
ul>
div>
<script src="js/jquery-1.12.4.js">script>
<script>
//关于节点的操作
// 创建一个节点
var $ele = $(" 梅西,金球奖！ ")
var $ele1 = $(" c罗 倒挂金钩！ ")
// 同辈 插入元素
// $("#first").after($ele) // 后面插入
// $("#first").before($ele1) // 前面插入
// 返回来
$ele.insertAfter($("#first"))
$ele1.insertBefore($("#first"))
// 追加节点 父子元素 表示 将$ele 追加到 .gameList中 末尾追加
//$(".gameList").append($ele)
// 反过来追加
//$ele1.appendTo($(".gameList"))
// 追加到前面
//$(".gameList").prepend($ele)
//$ele1.prependTo($(".gameList"))
script>
body>
html>
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿冬奥列表内容title>
<link rel="stylesheet" href="css/games.css">
head>
<body>
<div class="contain">
<h2>祝福冬奥h2>
<ul class="gameList">
<li id="first"> 贝克汉姆：衷心希望北京能够申办成功！li>
<li> 姚明：北京申冬奥是个非常棒的机会！加油！li>
<li> 张虹：北京办冬奥，大家的热情定超乎想象！ li>
<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！li>
ul>
div>
<script src="js/jquery-1.12.4.js">script>
<script type="text/javascript">
//选择器:选择第一个
$(".gameList li:first")或者是$("li:first")
//执行删除
$(".gameList li:first").remove()//删除全部
$(".gameList li:first").empty()//只删除内容
$(".gameList li:first").detach()//只删除节点,保留事件或附加的属性/值
//替换节点(创建一个新的节点替换原本的节点)
var $ele = $("卖甘蔗的老人,街头痛哭,是人性的扭曲,还是道德的沦丧 ")
//后替换前
$("li:first").replaceWith($ele)
//前替换后
$ele.replaceAll($("li:first"))
script>
body>
html>
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿冬奥列表内容title>
<link rel="stylesheet" href="css/games.css">
head>
<body>
<div class="contain">
<h2>祝福冬奥h2>
<ul class="gameList">
<li> 贝克汉姆：衷心希望北京能够申办成功！li>
<li> 姚明：北京申冬奥是个非常棒的机会！加油！li>
<li> 张虹：北京办冬奥，大家的热情定超乎想象！ li>
<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！li>
ul>
div>
<script src="js/jquery-1.12.4.js">script>
<script type="text/javascript">
//鼠标悬浮到第一行,复制第一行元素,并追加到后面
//深复制与浅复制
$("li:first").mouseover(function (){
$(this).clone(true).appendTo($(".gameList")) // 深复制 事件和内部元素都会复制
$(this).clone(false).appendTo($(".gameList")) // 浅复制 复制元素
})
script>
body>
html>
属性操作
获取与设置元素属性
- attr(): $(selector).attr([name]) ; (获取)
$(selector).attr({[name1:value1]…[nameN:valueN]}) ; (设置)
删除元素的属性
- removeAttr(): $(selector).removeAttr(name) ;
示例:
head>
<body>
<div class="contain">
<div><img src="images/winter.jpg" alt="奥运五环标志" width="320" height="198">div>
<h2>祝福冬奥h2>
<ul class="gameList">
<li> 贝克汉姆：衷心希望北京能够申办成功！li>
<li> 姚明：北京申冬奥是个非常棒的机会！加油！li>
<li> 张虹：北京办冬奥，大家的热情定超乎想象！ li>
<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！li>
ul>
div>
<script src="js/jquery-1.12.4.js">script>
<script type="text/javascript">
// 获取图片属性值
// 只写属性的话就是获取属性的值
alert($("img").attr("alt"))//获取alt属性值
// 修改图片属性值
// 在属性后面加上value就是设置属性值
$("img").attr("title","冬奥五环")//设置单个属性
$("img").attr({width:"220",height:"150"})//设置多个属性
//删除属性
$("img").removeAttr("src")//删除src的属性
script>
body>
html>
节点遍历
遍历子元素
children()方法可以用来获取元素的所有子元素: $(selector).children([expr]);
#### 遍历同辈元素
jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
| 语法 | 功能 |
|---|---|
| next([expr]) | 用于获取紧邻匹配元素之后的元素 |
| $(“li:eq(1)”).next().addClass(“orange”); | |
| prev([expr]) | 用于获取紧邻匹配元素之前的元素 |
| $(“li:eq(1)”).prev().addClass(“orange”); | |
| slibings([expr]) | 用于获取位于匹配元素前面和后面的所有同辈元素 |
| $(“li:eq(1)”).siblings().addClass(“orange”); |
遍历前辈元素
**parent()：**获取元素的父级元素
**parents()：**元素元素的祖先元素
其他遍历
each():
$(selector).each(function(index,element)) ;
end( )：
结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态
示例:
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点遍历title>
<style type="text/css" >
.hot{ color:#F00;}
a{ color:#000;
text-decoration:none;
}
.orange{
background: #c3910b;
}
.orange a{
color: #ffffff;
}
style>
head>
<body>
<section>
<img src="images/ad.jpg" alt="美梦成真系列抽奖" />
<ul>
<li><a href="#">小米的MI 2手机a><span class="hot">火爆销售中span>li>
<li><a href="#">苹果iPad minia>li>
<li><a href="#">三星GALAXY Ⅲa>li>
<li><a href="#">苹果iPhone 5a>li>
ul>
section>
<script src="js/jquery-1.12.4.js" >script>
<script type="text/javascript">
//子元素遍历(遍历ul)
var $arr = $("ul").children()//遍历
alert(arr.length)//输出
//js对象强转成jq对象:加$
//例如:js对象转jq对象$($arr[i]
//遍历同辈元素
//01.遍历ul里的第二个li元素 的下标从1开始
alert($("ul li:nth-of-type(2)").html())
//02.遍历上一个元素
alert($("ul li:nth-of-type(2)").prev().html())
//03.遍历下一个元素
alert($("ul li:nth-of-type(2)").next().html())
//04.遍历同辈中所有元素
var siblings = $("ul li:nth-of-type(2)").siblings()
for (const sibling of siblings) {
document.write(sibling)
}
script>
body>
html>
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点遍历each()title>
<style type="text/css" >
.hot{ color:#F00;}
a{ color:#000;
text-decoration:none;
}
.orange{
background: #c3910b;
}
.orange a{
color: #ffffff;
}
style>
head>
<body>
<section>
<img src="images/ad.jpg" alt="美梦成真系列抽奖" />
<ul>
<li><a href="#">小米的MI 2手机a><span class="hot">火爆销售中span>li>
<li><a href="#">苹果iPad minia>li>
<li><a href="#">三星GALAXY Ⅲa>li>
<li><a href="#">苹果iPhone 5a>li>
ul>
section>
<script src="js/jquery-1.12.4.js" >script>
<script type="text/javascript">
//遍历前辈(父级)元素
alert($("li:first").parent())
//遍历所有的父级,用数组的形式展现
//先给他赋一个值,用for of遍历
var parents = $("li:first").parents();
for (var parent of parents) {
document.write(parent)
}
//在获取全部父级的基础上,获取某一个父级元素,先找到这个,然后遍历/或者也可以过滤出某个父级
var find = parents.find("section");
alert($(find).attr("id"))
// filter: 过滤出某个父级
var section = parents.filter("section")
alert($(section).attr("id"))
//each遍历
// 遍历所有的li 追加到最末尾
$("img").click(function (){
$("li").each(function (index,element){
// element:遍历的元素
// index:当前元素的下标
// 追加到section元素的最末尾
$("#section").after($(element).clone(false))
})
})
script>
body>
html>
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿冬奥列表内容title>
<link rel="stylesheet" href="css/games.css">
head>
<body>
<div class="contain">
<h2>祝福冬奥h2>
<ul class="gameList">
<li> 贝克汉姆：衷心希望北京能够申办成功！li>
<li> 姚明：北京申冬奥是个非常棒的机会！加油！li>
<li> 张虹：北京办冬奥，大家的热情定超乎想象！ li>
<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！li>
ul>
div>
<script src="js/jquery-1.12.4.js">script>
<script type="text/javascript">
// end():将前面的操作结束掉再执行后面的链式操作
$("li").first().css("background","red").end().last().css("background","green")
// 单独的设置某个样式
$("li").first().height("300").width("800")
script>
body>
html>
补充
除css()外，还有获取和设置元素高度、宽度等的样式操作方法
| 语法 | 功能 |
|---|---|
| css() | 设置或返回匹配元素的样式属性 |
| height([value]) | 设置或返回匹配元素的高度 |
| width([value]) | 设置或返回匹配元素的宽度 |
| offset([value]) | 返回以像素为单位的top和left坐标。仅对可见元素有效 |
| offsetParent( ) | 返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素 |
| position( ) | 返回第一个匹配元素相对于父元素的位置 |
| scrollLeft([position]) | 参数可选。设置或返回匹配元素相对滚动条左侧的偏移 |
| scrollTop([position]) | 参数可选。设置或返回匹配元素相对滚动条顶 |
事件
鼠标事件
鼠标点击或者在网页上移动时产生的事件
| 方法 | 描述 | 执行时机 |
|---|---|---|
| click( ) | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
| mouseover( ) | 触发或将函数绑定到指定元素的mouseover事件 | 鼠标指针移过时 |
| mouseout( ) | 触发或将函数绑定到指定元素的mouseout事件 | 鼠标指针移出时 |
| mouseenter( ) | 触发或将函数绑定到指定元素的mouseenter事件 | 鼠标指针进入时 |
| mouseleave( ) | 触发或将函数绑定到指定元素的mouseleave事件 | 鼠标指针离开时 |
鼠标事件方法的区别
| 方法 | 相同点 | 不同点 |
|---|---|---|
| mouseover( ) | 鼠标进入被选元素时会触发（同下） | 鼠标在其被选元素的子元素上来回进入时：触发mouseover( )不触发mouseenter |
| mouseenter( ) | ||
| mouseout( ) | 鼠标离开被选元素时会触发（同下） | 鼠标在其被选元素的子元素上来回离开时：触发mouseout不触发mouseleave |
| mouseleave( ) |
示例：
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>当当图书导航title>
<link href="css/style.css" rel="stylesheet"/>
head>
<body>
<div class="top">
<div class="wrap">
<div class="top-l left">欢迎光临当当，请<a href="" class="top-login">登录a><a href="">免费注册a>div>
<ul class="top-m right">
<li><a href=""><i class="top-car left">i>购物车a>li>
<li class="line">li>
<li><a href="">我的订单a>li>
<li class="line">li>
<li><a href="">当当自出版a>li>
<li class="line">li>
<li><a href=""><i class="top-tel left">i>手机当当a>li>
<li class="line">li>
<li>
<a href="" class="menu-btn">我的当当a>
li>
<li class="line">li>
<li><a href="" class="menu-btn">企业采购a>li>
<li class="line">li>
<li><a href="" class="menu-btn">客户服务a>li>
<li class="line">li>
ul>
<div class="clearfix">div>
div>
div>
<div class="wrap">
<a href=""><img src="images/logo.jpg"/>a>
div>
<div class="nav-box">
<div class="wrap">
<ul class="nav-ul">
<li class="all"><a href="">全部商品详细分类a>li>
<li>
<a href="">尾品会a>
<div style="width: 100px; height: 100px; background-color: #5a5156">div>
li>
<li><a href="">图书a>li>
<li><a href="">电子书a>li>
<li><a href="">服装a>li>
<li><a href="">运动户外a>li>
<li><a href="">婴孕童a>li>
<li><a href="">家具a>li>
<li><a href="">当当优品a>li>
<li><a href="">电器城a>li>
<li><a href="">当当超市a>li>
<li><a href="">海外购a>li>
<div class="clearfix">div>
ul>
div>
div>
<script src="js/jquery-1.12.4.js">script>
<script>
//鼠标事件
// $("ul .all~li").mouseover(function (){
// $(this).css("background","#62ff00")
// })
$("ul .all~li").mouseenter(function (){
$(this).css("background","#62ff00")
})
/*$("ul .all~li").mouseout(function (){
$(this).css("background","#ff2832")
})*/
$("ul .all~li").mouseleave(function (){
$(this).css("background","#ff2832")
})
//-----------------------------------------------------
script>
body>
html>
<html>
<head>
<meta charset="UTF-8" />
<title>mouseover和mouseenter的区别title>
head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span>span>h2>
div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span>span>h2>
div>
<script type="text/javascript" src="js/jquery-1.12.4.js">script>
<script type="text/javascript">
$(function(){
var x = 0;
$(".over").mouseover(function(){
$(this).find("span").html(++x);
});
var y = 0;
$(".enter").mouseenter(function(){
$(this).find("span").html(++y);
});
});
script>
body>
html>
键盘事件
用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件
| 方法 | 描述 | 执行时机 |
|---|---|---|
| keydown( ) | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
| keyup( ) | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |
| keypress( ) | 触发或将函数绑定到指定元素的keypress事件 | 产生可打印的字符时 |
示例:
//当释放键盘时keyup
$("[type=password]").keyup(function () {
$("#events").append("keyup");
//当按下键盘时keydown
}).keydown(function (e) {
$("#events").append("keydown");
//向密码框输入数字时 keypress
}).keypress(function () {
$("#events").append("keypress");
});
$(document).keydown(function (event) {
//13代表回车,按回车键时: keyCode
if (event.keyCode == "13") {
alert("确认要提交么？");
}
});
浏览器事件
- 调整浏览器窗口大小
$(selector).resize( );
示例:
<script src="js/jquery-1.12.4.js"></script>
<script >
// 当浏览器窗口改变时触发特效
$(window).resize(function (){
alert(1)
})
</script>
绑定事件与移除事件
- 绑定事件: bind(type,[data],fn);
- 移除事件: unbind([type],[fn])
[type] : 事件类型，主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件
示例:
$(this).unbind("mouseover")
绑定单个与多个事件:
- 单个:
$(document).ready(function(){
$(".on").bind("mouseover",function(){
$(".topDown").show();
});
});
- 多个:
$(".top-m .on").bind({
//为mouseover绑定方法
mouseover:function(){
$(".topDown").show();
},
//为mouseout绑定方法
mouseout:function(){
$(".topDown").hide();
}
});
示例:
<script>
// 绑定单个事件
// $(".menu-btn").bind("mouseover",function (){
// $(".topDown").show()
// })
// 多个就加大括号
// 绑定多个事件
$(".menu-btn").bind({
mouseover:function (){
$(".topDown").show()
},mouseout:function (){
$(".topDown").hide()
// 写事件 会移除写上的 不写 移除所有事件
$(this).unbind("mouseover")
}
})
</script>
Tab切换页面
关键词: click
$("#del").click(function(){
$("#nav li:first").unbind("click", content1)
});
示例;任务列表切换
css:
*{margin: 0; padding: 0; font-family: "微软雅黑"; font-size: 14px; line-height: 25px; color: #717578;}
ul,ol,li{list-style: none;}
#taskList{
width: 560px;
overflow: hidden;
margin: 5px auto 0 auto;
}
#taskList>ul li{
float: left;
width: 120px;
height: 35px;
overflow: hidden;
line-height: 35px;
text-align: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #ffffff;
font-size: 16px;
cursor: pointer;
}
#taskList>ul li:first-of-type{
margin-left: 10px;
margin-right: 1px;
background: #26a6e3;
}
#taskList>ul li:last-of-type{
background: #ff9400;
}
.taskContent{
clear: both;
background: #26a6e3;
border-radius: 8px;
height: 310px;
overflow: hidden;
padding-top: 10px;
}
.taskContent li{
height: 95px;
overflow: hidden;
padding-left: 95px;
width: 435px;
margin: 5px auto 0 auto;
border-radius: 5px;
}
.taskContent li div:first-of-type{
float: left;
width: 320px;
padding-top: 10px;
}
.taskContent li div:last-of-type{
width: 100px;
padding-top: 45px;
float: left;
}
.taskContent h1{font-size: 16px; color: #5a5156;}
.taskContent span{color: #fd5000; padding-right: 10px;}
.taskContent input{
width: 92px;
height: 35px;
text-align: center;
height: 36px;
line-height: 35px;
overflow: hidden;
border: none;
color: #ffffff;
font-size: 16px;
border-radius: 5px;
}
#dayTask li:nth-of-type(1){background: #ffffff url(../images/day01.png) 10px 15px no-repeat;}
#dayTask li:nth-of-type(2){background: #ffffff url(../images/day02.png) 10px 15px no-repeat;}
#dayTask li:nth-of-type(3){background: #ffffff url(../images/day03.png) 10px 15px no-repeat;}
#dayTask input{background: #4dc83a;}
#growTask{display: none;}
#growTask li:nth-of-type(1){background: #ffffff url(../images/task01.png) 10px 15px no-repeat;}
#growTask li:nth-of-type(2){background: #ffffff url(../images/task02.png) 10px 15px no-repeat;}
#growTask input{background: #ff4e00;}
html+jq:
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>任务列表title>
<link rel="stylesheet" href="css/taskStyle.css">
head>
<body>
<section id="taskList">
<ul id="nav"><li>日常任务li><li>成长任务li>ul>
<div class="taskContent">
<ul id="dayTask">
<li>
<div>
<h1>交口称赞h1>
<p>为喜欢的回答送出一个赞p>
<p>奖励：<span>财富值×10span><span>经验之石（小）×1span>p>
div>
<div><input type="button" value="前往">div>
li>
<li>
<div>
<h1>每日答题h1>
<p>前往回答一个问题p>
<p>奖励：<span>铜宝箱×1span><span>财富值×10span><span>经验之石（小）×1span>p>
div>
<div><input type="button" value="前往">div>
li>
<li>
<div>
<h1>助人为乐h1>
<p>当日获得1个采纳p>
<p>奖励：<span>铜宝箱×1span><span>财富值×10span>p>
div>
<div><input type="button" value="前往">div>
li>
ul>
<ul id="growTask">
<li>
<div>
<h1>成长之路h1>
<p>知道等级达到2级p>
<p>奖励：<span>财富值×20span><span>铜宝箱×1span><span>准备入学微章×1span>p>
div>
<div><input type="button" value="前往">div>
li>
<li>
<div>
<h1>知识之路h1>
<p>在知道获得1个采纳p>
<p>奖励：<span>铜宝箱×1span><span>财富值×20span><span>经验之石（小）×1span>p>
div>
<div><input type="button" value="前往">div>
li>
<li>
<div>
div>
<div><input type="button" id="del" value="解除绑定">div>
li>
ul>
div>
section>
<script src="js/jquery-1.12.4.js">script>
<script >
$("#nav li").bind("click",function (){
//alert($(this).index())
if ($(this).index() == 0){
$("#dayTask").show()
$("#growTask").hide()
$("#dayTask").parent().css("background","#26a6e3")
}else{
$("#dayTask").hide()
$("#growTask").show()
$("#growTask").parent().css("background","#ff9400")
}
})
$("#del").click(function (){
$("#nav li:last").unbind("click")
})
script>
body>
html>
复合事件
-
hover()方法–鼠标移上与移出
hover()方法相当于mouseover与mouseout事件的组合
hover(enter,leave);
示例:
$(".top-m .on").hover(function(){ //光标移入时触发 $(".topDown").show(); }, function(){ //光标移出时触发 $(".topDown").hide(); } ); //---------------------------------------------------- // 使用hover 使用鼠标悬浮和移除的效果 $(".menu-btn").hover(function (){ // 移入 $(".topDown").show() },function (){ //移出 $(".topDown").hide() }) -
toggle()方法
toggle()方法用于模拟鼠标连续click事件
toggle(fn1,fn2,…,fnN);
示例:
$("input").toggle( function(){$("body").css("background","#ff0000");}, function(){$("body").css("background","#00ff00");}, function(){$("body").css("background","#0000ff");} )
表单验证
以下部分摘自CSDN博主「生有涯，知无涯」的原创文章,懒得自己整理了,up写的很好
jq常用的事件属性
-
ready() DOM加载完成
-
**click() **鼠标单击
-
焦点相关事件
- **blur() **元素失去焦点
- **focus() **元素获得焦点
-
鼠标移入移出事件
- **mouseover() **鼠标进入（进入子元素也触发）
- **mouseout() **鼠标离开（离开子元素也触发）
- **mouseenter() **鼠标进入（进入子元素不触发）
- **mouseleave() **鼠标离开（离开子元素不触发）
- **hover() **同时为mouseenter和mouseleave事件指定处理函数
-
submit() 用户递交表单
当单击表单提交按钮时触发执行submit函数
正则在js的使用方法
在jQuery中，没有额外封装正则的使用方法， 用原生js实现正则
-
正则表达式在js的两种写法：
var re=new RegExp(‘规则’, ‘可选参数’)
var re=**/规则/**参数
-
正则表达式对象的使用
正则变量.test(数据) – 验证数据是否合法
- 合法： 返回true
- 不合法： 返回false
QQ注册验证
HTML:
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿QQ注册title>
<link href="css/style.css" rel="stylesheet"/>
head>
<body>
<div class="container">
<h2 class="reg-top">h2>
<div class="reg-box">
<div class="reg-main">
<h3>注册账号h3>
<form action="" method="post" class="reg-form">
<div class="reg-input">
<label><i>*i>昵称：label>
<input type="text" id="uName" required placeholder="英文、数字长度为6-10个字符" pattern="[a-zA-Z0-9]{6,10}" />
div>
<div class="reg-input">
<label><i>*i>密码：label>
<input type="password" id="pwd" required placeholder="长度为6-16个字符" pattern="[a-zA-Z0-9]{6,16}"/>
div>
<div class="reg-input">
<label>手机号码：label>
<input type="text" pattern="^1[34578][0-9]{9}$"/>
<span id="tel-tip">忘记密码时找回密码使用span>
div>
<div class="reg-input">
<label><i>*i>邮箱：label>
<input type="email" required id="email"/>
div>
<div class="reg-input">
<label>年龄：label>
<input type="number" min="12"/>
div>
<div class="submit-box">
<input type="submit" id="submit" value="立即注册" >
div>
form>
div>
div>
div>
<script src="js/jquery-1.12.4.js">script>
<script src="js/reg.js">script>
body>
html>
css:
*{padding:0;margin:0;}
body,html{font-family:"Microsoft YaHei",SimHei,"微软雅黑","黑体";}
body{
background:url(../img/body.png) repeat-x;
}
h2,h3{
font-weight:normal;
}
.container{
width:956px;
margin:0 auto;
}
.reg-top{
background:url(../img/bg_chs.png) repeat-x center top;
height:109px;
}
.reg-box{
height:500px;
background:#f9fdff;
border:1px #81add9 solid;
border-top:0 none;
}
.reg-main{
width:600px;
margin-left: 25px;
padding:1px;
}
.reg-main h3{
height:25px;
line-height:25px;
border-left:3px #59AfE4 solid;
padding-left:10px;
font-size:18px;
margin-top:80px;
color:#666;
}
.reg-form{
border-top:1px #d7d7d7 solid;
margin-top:10px;
}
.reg-input{
height:36px;
line-height:36px;
margin-top:18px;
}
.reg-input label{
float:left;
width:80px;
padding-right:8px;
text-align:right;
font-size:14px;
}
.reg-input label i{
color:red;
margin-right:3px;
font-style:normal;
}
.reg-input input{
float:left;
width:280px;
height:18px;
line-height:18px;
font-size:14px;
padding:8px;
border:1px #a8d2e7 solid;
}
.reg-input span{
float:left;
padding-left:10px;
font-size:12px;
color:#666;
}
#submit{
width:180px;
height:50px;
font-size:24px;
line-height:50px;
text-align:center;
color:#fff;
margin-top:50px;
margin-left:110px;
border:0 none;
background:#b6010e;
font-family: "Microsoft YaHei",SimHei,"微软雅黑","黑体";
cursor:pointer;
}