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="data: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="data: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]	选取给定属性是以某些特定值结尾的元素	("[href(" [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减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 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操作分为三类：
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").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操作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").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="data:images/boy.png"></div>
</section>
<script src="js/jquery-1.12.4.js" ></script>
<script>//鼠标悬浮到section时,为div添加内容// 鼠标悬浮  添加无序列表// html():支持标签添加     text():文本$("section").mouseover(function (){$(".proList").html("<ul>" +"<li>鼠标为什么不管用了?</li>" +"<li>天气为什么变冷了啊?</li>" +"<li>手为什么发抖啊?</li>" +"<li>女神为什么不理我啊,是我舔的不够深情吗?</li>" +"</ul>")// 获取alert( $(".proList").html())})// $("section").mouseover(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之后
如：("ul").after(("ul").after(("ul").after(newNode1);
insertAfter(content)	$(A). insertAfter (B)表示将A插入到B之后
如：$newNode1.insertAfter(“ul”);
before(content)	$(A). before (B)表示将B插入至A之前
如：("ul").before(("ul").before(("ul").before(newNode1);
insertBefore(content)	$(A). insertBefore (B)表示将A插入到B之前
如：$newNode1.insertBefore(“ul”);

插入子节点:

语法	功能
append(content)	$(A).append(B)表示将B追加到A中
如：("ul").append(("ul").append(("ul").append(newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中
如：$newNode1.appendTo(“ul”);
prepend(content)	$(A). prepend (B)表示将B前置插入到A中
如：("ul").prepend(("ul"). prepend (("ul").prepend(newNode1);
prependTo(content)	$(A). prependTo (B)表示将A前置插入到B中
如：$newNode1. prependTo (“ul”);

删除节点:

$(selector).remove(); (删除全部节点)
$(selector).empty(); (清空节点内容)
$(selector).detach(); (只清除节点但保留属性)

替换节点:

var newNode1=newNode1=newNode1=("< li>你喜欢哪些冬季运动项目？< /li>");
(".gameListli:eq(2)").∗∗replaceWith∗∗((".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 = $("<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").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="data: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="data: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="data: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事件	单击鼠标时
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="data: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><!--需求： 1.给类名为over的div，绑定鼠标移过事件，在其<span>标签内添加文本计数2.给类名为enter的div，绑定鼠标进入事件，在其<span>标签内添加文本计数--><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代表回车,按回车键时: keyCodeif (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>财富值×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()方法相当于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>