jQuery基础知识梳理笔记

源星海

2024-03-16 帮助3人

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>
		<!-- 引入jQuery -->
		<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的元素
全局选择器	*	匹配所有元素	$("*" )选取所有元素

示例:

<!-- <!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.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
            <p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></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.00</dd>
            </dl>
            <p id="ticket">领 券：<span>105-6</span>  <span>200-16</span></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.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
            <p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></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.00</dd>
            </dl>
            <p id="ticket">领 券：<span>105-6</span>  <span>200-16</span></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$ =’.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减30</a></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-100</a></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的元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的元素（注：小于1，不包括1）
:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
:focus	选取当前获取焦点的元素	$(":focus" )选取当前获取焦点的元素
:animated	选择所有动画	$(":animated" )选取当前所有动画元素
[:even]	所有偶数
$(“tr:even”).css(“background”,“deeppink”)
[:odd]	所有奇数
$(“tr:odd”).css(“background”,“deeppink”)

元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。

示例:

<!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 onmouSEO（(Search Engine Optimization)）ver="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操作分为三类：
1. DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
2. HTML-DOM：用于处理HTML文档，如document.forms
3. 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操作CSS</h2>
 <p class="text">
	 css()设置或返回样式属性<br>
	 addClass()增加一个或多个类<br>
	 removeClass()移除一个或多个类
 </p>
 <script src="js/jquery-1.12.4.js" ></script>
 <script>
	 //添加鼠标悬浮事件
	 //将下面追加的类样式放里面
	 $("p").mouSEO（(Search Engine Optimization)）ver(function(){
		// $("p").addClass("content border")
	 })
	 //鼠标移出,移除样式
	 $("p").mouSEO（(Search Engine Optimization)）ut(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操作CSS</h2>
 <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").mouSEO（(Search Engine Optimization)）ver(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").mouSEO（(Search Engine Optimization)）ver(function (){
       $(".proList").html("<ul>"  
           "<li>鼠标为什么不管用了?</li>"  
           "<li>天气为什么变冷了啊?</li>"  
           "<li>手为什么发抖啊?</li>"  
           "<li>女神为什么不理我啊,是我舔的不够深情吗?</li>"  
           "</ul>")
       // 获取
       alert( $(".proList").html())
   })
  
   // $("section").mouSEO（(Search Engine Optimization)）ver(function (){
   //     $(".proList").text("<ul>"  
   //         "<li>鼠标为什么不管用了?</li>"  
   //         "<li>天气为什么变冷了啊?</li>"  
   //         "<li>手为什么发抖啊?</li>"  
   //         "<li>女神为什么不理我啊,是我舔的不够深情吗?</li>"  
   //         "</ul>")
   // })
</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 ($ 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 ($ 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 ($ 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 ($ 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 =$ ("< 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 * * ($ 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 = $("<li> 梅西,金球奖！</li>")
		var $ele1 = $("<li style='color: red'> c罗 倒挂金钩！</li>")
		// 同辈 插入元素
		// $("#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>卖甘蔗的老人,街头痛哭,是人性的扭曲,还是道德的沦丧</li>")
		//后替换前
		$("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").mouSEO（(Search Engine Optimization)）ver(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 mini</a></li>
		<li><a href="#">三星GALAXY Ⅲ</a></li>
		<li><a href="#">苹果iPhone 5</a></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 mini</a></li>
		<li><a href="#">三星GALAXY Ⅲ</a></li>
		<li><a href="#">苹果iPhone 5</a></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事件	单击鼠标时
mouSEO（(Search Engine Optimization)）ver( )	触发或将函数绑定到指定元素的mouSEO（(Search Engine Optimization)）ver事件	鼠标指针移过时
mouSEO（(Search Engine Optimization)）ut( )	触发或将函数绑定到指定元素的mouSEO（(Search Engine Optimization)）ut事件	鼠标指针移出时
mouseenter( )	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
mouseleave( )	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

鼠标事件方法的区别

方法	相同点	不同点
mouSEO（(Search Engine Optimization)）ver( )	鼠标进入被选元素时会触发（同下）	鼠标在其被选元素的子元素上来回进入时：触发mouSEO（(Search Engine Optimization)）ver( )不触发mouseenter
mouseenter( )
mouSEO（(Search Engine Optimization)）ut( )	鼠标离开被选元素时会触发（同下）	鼠标在其被选元素的子元素上来回离开时：触发mouSEO（(Search Engine Optimization)）ut不触发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").mouSEO（(Search Engine Optimization)）ver(function (){
		// 	$(this).css("background","#62ff00")
		// })
		$("ul .all~li").mouseenter(function (){
			$(this).css("background","#62ff00")
		})
		/*$("ul .all~li").mouSEO（(Search Engine Optimization)）ut(function (){
			$(this).css("background","#ff2832")
		})*/
		$("ul .all~li").mouseleave(function (){
			$(this).css("background","#ff2832")
		})
//-----------------------------------------------------

     
     </script>
 </body>
</html>

<html>

	<head>
		<meta charset="UTF-8" />
		<title>mouSEO（(Search Engine Optimization)）ver和mouseenter的区别</title>
	</head>

	<body>
		<!--
			需求： 1.给类名为over的div，绑定鼠标移过事件，在其<span>标签内添加文本计数
				  2.给类名为enter的div，绑定鼠标进入事件，在其<span>标签内添加文本计数
		-->
		<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouSEO（(Search Engine Optimization)）ver 事件。</p>
		<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
		<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
			<h2 style="background-color:white;">被触发的 MouSEO（(Search Engine Optimization)）ver 事件：<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").mouSEO（(Search Engine Optimization)）ver(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、mouSEO（(Search Engine Optimization)）ut等基础事件，此外，还可以是自定义事件

示例:

$(this).unbind("mouSEO（(Search Engine Optimization)）ver")

绑定单个与多个事件:

单个:

 $(document).ready(function(){
	$(".on").bind("mouSEO（(Search Engine Optimization)）ver",function(){
		$(".topDown").show();
	});
});

多个:

$(".top-m .on").bind({
    //为mouSEO（(Search Engine Optimization)）ver绑定方法
	mouSEO（(Search Engine Optimization)）ver:function(){
		$(".topDown").show();
	},
    //为mouSEO（(Search Engine Optimization)）ut绑定方法
	mouSEO（(Search Engine Optimization)）ut:function(){
		$(".topDown").hide();
	}
});

示例:

    <script>
		// 绑定单个事件
		// $(".menu-btn").bind("mouSEO（(Search Engine Optimization)）ver",function (){
		// 	$(".topDown").show()
		// })

		// 多个就加大括号

		// 绑定多个事件
		$(".menu-btn").bind({
			mouSEO（(Search Engine Optimization)）ver:function (){
				$(".topDown").show()
			},mouSEO（(Search Engine Optimization)）ut:function (){
				$(".topDown").hide()
				// 写事件 会移除写上的   不写 移除所有事件
				$(this).unbind("mouSEO（(Search Engine Optimization)）ver")
			}
		})
	</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>财富值×10</span><span>经验之石（小）×1</span></p>
                </div>
                <div><input type="button" value="前往"></div>
            </li>
            <li>
                <div>
                    <h1>每日答题</h1>
                    <p>前往回答一个问题</p>
                    <p>奖励：<span>铜宝箱×1</span><span>财富值×10</span><span>经验之石（小）×1</span></p>
                </div>
                <div><input type="button" value="前往"></div>
            </li>
            <li>
                <div>
                    <h1>助人为乐</h1>
                    <p>当日获得1个采纳</p>
                    <p>奖励：<span>铜宝箱×1</span><span>财富值×10</span></p>
                </div>
                <div><input type="button" value="前往"></div>
            </li>
        </ul>
        <ul id="growTask">
            <li>
                <div>
                    <h1>成长之路</h1>
                    <p>知道等级达到2级</p>
                    <p>奖励：<span>财富值×20</span><span>铜宝箱×1</span><span>准备入学微章×1</span></p>
                </div>
                <div><input type="button" value="前往"></div>
            </li>
            <li>
                <div>
                    <h1>知识之路</h1>
                    <p>在知道获得1个采纳</p>
                    <p>奖励：<span>铜宝箱×1</span><span>财富值×20</span><span>经验之石（小）×1</span></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()方法相当于mouSEO（(Search Engine Optimization)）ver与mouSEO（(Search Engine Optimization)）ut事件的组合

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");}
    )

表单验证

jq常用的事件属性

ready() DOM加载完成
**click() **鼠标单击
焦点相关事件
- **blur() **元素失去焦点
- **focus() **元素获得焦点
鼠标移入移出事件
- **mouSEO（(Search Engine Optimization)）ver() **鼠标进入（进入子元素也触发）
- **mouSEO（(Search Engine Optimization)）ut() **鼠标离开（离开子元素也触发）
- **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>