jQuery
一、jQuery是什么？
是辅助JavaScript开发的js库
二、js与jQuery
1.jQuery的引入
在线引用
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
2.js与jQuery的使用差别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<!--原生js-->
<script type="text/javascript">
window.onload = function () {
//通过document.getElementById()获取dom元素
var btnJS = document.getElementById("btn-01");
//通过obj.click=function(){}绑定点击事件
btnJS.onclick = function () {
alert("原生js获取dom元素方式")
}
//JS的遍历
var btnArr = document.getElementByClassName("btn");
for (var i = 0; i < btnArr.length; i++){
alert(btnArr[i].value);
}
}
</script>
<!--jQuery方式-->
<script type="text/javascript">
//相当于js的window.οnlοad=function(){}，$实际上是封装的一个函数
$(function () {
//通过$()获取dom元素
var $btnJQ = $("#btn-02");
//通过$obj.click(function(){});方式绑定点击事件
$btnJQ.click(function () {
alert("jQuery夺取dom元素方式");
})
//jQuery对的遍历：通过each()方法
//在遍历的function函数中，有个this对象， 这个this对象， 就是当前遍历到的dom对象
var $btnArr = $("button");
$checkboies.each(function () {
alert(this);
});
});
</script>
</head>
<body>
<button id="btn-01">原生js按钮</button>
<button id="btn-02">jQuery按钮</button>
</body>
</html>
三、jQuery的核心函数介绍
$是jQuery的核心函数，$()就是在调用$这个函数
1.传入的参数为【函数】时
表示页面加载完成之后的操作
js形式：在页面加载完成后，需要等【浏览器内核解析标签】并【创建Dom对象】，还要【加载完】【标签所需要的内容】后才执行(当有多个时，只会执行最后一个 )
jq形式：在页面加载完成后，等【浏览器内核解析标签】并【创建Dom对象】后就执行
//形式一
$(function(){
...
});
//形式二
#(document).ready(function(){
...
});
//相当于原生js的
window.onload = function(){
...
}
2.传入的参数为【HTML字符串】时
jQuery会自动创建这个html标签对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function () {
$( "<div>" +
"<h1>jQuery自动创建对象1</h1>" +
"<h2>jQuery自动创建对象1</h2>" +
"</div>").appendTo("body");
});
</script>
</head>
<body>
</body>
</html>
3.传入的参数为【选择器字符串】时
相当于js的Dom元素选择器
$(“#id属性值")：id选择器，根据id查询标签对象
$(“标签名”)：标签名选择器，根据指定的标签名查询标签对象
$(".class属性值")：类型选择器，可以根据class属性查询标签对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function () {
alert("根据#id属性查的按钮个数为："+$("#btn-01").length);
alert("根据标签名查的按钮个数为："+$("button").length);
alert("根据class属性查的按钮个数为："+$(".btn-03-class").length);
});
</script>
</head>
<body>
<button id="btn-01">原生js按钮</button>
<button id="btn-02">jQuery按钮1</button>
<button class="btn-03-class">jQuery按钮2</button>
</body>
</html>
4.传入的参数为【Dom对象】时
会把dom对象转化为jQuery对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function () {
var btn1Obj = document.getElementById("btn-01");
alert("原生js-dom对象："+btn1Obj);
//形式一
alert("将dom对象单座参数传入后的对象"+$(btn1Obj));
});
</script>
</head>
<body>
<button id="btn-01">按钮</button>
</body>
</html>
四、如何区分js原生Dom对象和jQuery对象
1.Dom对象特点
Dom对象alert出来的效果是：[objectHTML标签名Element]
通过以下方法创建的对象，是Dom对象
getElementByld()
getElementsByName()
getElementsByTagName()
createElement()
2.jQuery对象特点
jQuery对象alert出来的效果是：[object Object]
通过以下方法创建的对象，都是jQuery对象
通过JQuery提供的API创建的对象，是JQuery对象(见三的点2)
通过JQuery提供的API查询到的对象，是JQuery对象(见三的点3)
通过JQuery包装的Dom对象，是JQuery对象(见三的点4)
3.jQuery对象的本质
jQuery对象 = Dom对象数组 + jQuery提供的一系列功能函数
4.Dom对象与jQuery对象的相互转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
window.onload = function () {
//Dom对象转jQuery对象
var boxObj = document.getElementById("box");
alert("Dom对象转jQuery对象："+ $(boxObj));
//jQuery对象转Dom对象
alert("jQuery对象转Dom对象："+ $(boxObj)[0]);
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
五、jQuery的选择器
选择器：表示任意的，所有的元素
详细见大佬博客：https://blog.csdn.net/weixin_43675447/article/details/87870597
1.基本选择器
基本选择器：即根据【id、class、标签名】来选择jQuery对象
组合选择器：【同时选择两个】jQuery对象
形式如，$("#li3,.li2")，表示获取id=li3的元素和class=li2的元素
2.层级选择器
后代选择器：选择【祖先元素】下的【所有】后代元素
子选择器：选择【父元素】下的【某个】子元素
相邻元素选择器：选择【紧挨着某个元素】的【相邻】元素
之后兄弟选择器：选择【某个元素后】的【所有】同一辈分的元素
形式如，$(.li3+)，表示获取class=li3的元素的相邻元素
3.基本过滤选择器
选择【某个元素】的【特定元素】
形式如，$(“li:first”)，表示获取所有li中的第一个li元素
4.内容过滤器
选择【具有特定内容或特定元素】的【元素】
形式如，$(“div:parent”)，表示获得有子元素或内容(非空)的div
5.属性过滤器
选择符合【特定属性】的元素
形式如，$(“input[name^=‘newsletter’]”)， 表示获取name属性的内容以newsletter为开头的input元素
6.表单过滤器
（1）选择【特定类型】的表单元素
形式如，$(":submit")，获取type=submit元素
（2）选择【特定属性】的表单元素
形式如，$(“input:disabled”)，获取不可用的input元素
六、jQuery元素的筛选
1.eq()：获取第【n】个元素
eq()：获取第【n】个元素(索引从0开始，若为负值，则从最后一个开始倒着数，最后一个是-1)
$("p").eq(1); //如果选择器改为 $("p").eq(-1)，则我是第四个P会被选中
<div>
<p>我是第一个P</p>
<p>我是第二个P</p> //会被选中，索引值为1
<p>我是第三个P</p>
<p>我是第四个P</p>
</div>
2.first()、last()：获取第一个/最后一个元素
first()：获取【第一个】匹配的元素，索引从0开始
last()：获取【最后一个】匹配的元素，索引从-1开始
$("p").first();
$("p").last();
<div>
<p>我是第一个P</p>
<p>我是第二个P</p>
<p>我是第三个P</p>
<p>我是第四个P</p>
</div>
3.hasClass()：判断是否还有某类
判断【指定元素】【是否含有指定类】
if($("p").hasClass("p2")){
alert("我里面含有class=p2的元素");
}
<div>
<p>我是第一个P</p>
<p class="p2">我是第二个P</p>
<p>我是第三个P</p>
<p>我是第四个P</p>
</div>
4.filter()：筛选
选择【符合参数】的元素(该要求可以是表达式、jq对象、dom对象)
$("p").filter(".p2");
<div>
<p>我是第一个P</p>
<p class="p2">我是第二个P</p>
<p>我是第三个P</p>
<p>我是第四个P</p>
</div>
5.is()：筛选
检查【指定元素】是否有【能匹配上的参数】(该参数可以是表达式、jq对象、dom对象)
$($("p").first().is(".p2")){
alert("不会弹出，因为第一个P的class不等于p2");
}
<div>
<p>我是第一个P</p>
<p class="p2">我是第二个P</p>
<p>我是第三个P</p>
<p>我是第四个P</p>
</div>
6.has()：判断是否有子元素
检查【指定元素】是否有【指定子元素】
$("div").has("p");
<div>
<p>我是第一个P</p>
<p class="p2">我是第二个P</p>
<p>我是第三个P</p>
<p>我是第四个P</p>
</div>
7.not()：排除元素
排除含有【特定要求】的元素
$("p").not(".p2");
<div>
<p>我是第一个P</p>
<p class="p2">我是第二个P</p>
<p>我是第三个P</p>
<p>我是第四个P</p>
</div>
8.slice()：选择n个元素
【截取指定长度】个元素(索引从0开始，左闭右开区间)
$("p").slice(1,3)
<div>
<p>我是第一个P</p>
<p class="p2">我是第二个P</p>
<p>我是第三个P</p>
<p>我是第四个P</p>
</div>
9.children()：获取子元素
获取【特定元素】的【子元素】
$("div").children(".p2");
<div>
<p>我是第一个P</p>
<p class="p2">我是第二个P</p>
<p>我是第三个P</p>
<p>我是第四个P</p>
</div>
10.find()：查找元素
从【指定元素】中查找【元素】
$("div").find(".p2");
<div>
<p>我是第一个P</p>
<p class="p2">我是第二个P</p>
<p>我是第三个P</p>
<p>我是第四个P</p>
</div>
11.next()、nextAll()、siblings()、prev()、prevAll()：获取特定顺序的兄弟元素
next()：获取【指定元素】的【下一个兄弟】元素
nextAll()：获取【指定元素后】的【所有兄弟】元素
siblings()：获取【指定元素】的【所有兄弟】元素(不分前后)
prev()：获取【指定元素】的【前一个兄弟】元素
prevAll()：获取【指定元素前】的【所有兄弟】元素
$(".p2").next();
$(".p2").nextAll();
<div>
<p>我是第一个P</p>
<p class="p2">我是第二个P</p>
<p>我是第三个P</p>
<p class="p4">我是第四个P</p>
</div>
12.parent()、parents()：获取父、祖先元素
parent()：获取【指定元素】的【直接父】元素
parents()：获取【指定元素】的【所有祖先】元素(一直到body元素)
$("span").parent();
<div>
<p>
<span>我是一个span</span>
</p>
</div>
13.add()：添加元素
将【特定参数】添加到【jq对象集合】中(该参数可以是表达式、jq对象、dom对象)
$(".p2").add("span").css("background-color","red");
<div>
<p>我是第一个P</p>
<p class="p2">我是第二个P</p> //会变红
<p>我是第三个P</p>
<p class="p4">我是第四个P</p>
</div>
<span>我是一个span</span> //会变红
14.end()：回退操作
将改变【当前选择器】选中的【操作】【回退为上一个状态】
$(".p2").next().end().css("background-color","red");
<div>
<p>我是第一个P</p>
<p class="p2">我是第二个P</p> //会变红
<p>我是第三个P</p> //不会变红
<p class="p4">我是第四个P</p>
</div>
七、jQuery对属性的操作
1.html()：获取或设置内容
设置或获取标签中的内容，与Dom属性的innerHTML一样(不传参数是获取)
2.text()：获取或设置文本
设置或获取标签中的文本，与Dom属性的innerText一样(不传参数是获取)
3.★★val()★★：获得表单项的值
设置和获取【表单项】的value属性值，与Dom属性的value一样(不传参数是获取)
4.attr()：设置或获取属性值
设置或获取【属性】的值，在获取不到是返回undefined(传一个参数是获取，传两个参数是设置)，但是可以自定义属性
5.★★prop()★★：设置或获取属性值
设置或获取【属性】的值，在获取不到是返回false(传一个参数是获取，传两个参数是设置)，推荐使用
<script type="text/javaScript">
$(function(){
//html()
alter("html()方法：" + $("div").html()); //获取
$("div").html("<h1>我是div中新增的h1</h1>"); //设置
//text()
alter("text()方法：" + $("span").text()); //获取
$("span").text("<h2>我是span中新增的h2</h2>"); //设置
//val
$("buttion").click(function(){
alter("val()方法，用于获取或设置表单项的value：" + $("#username").val()); //设置
$("#username").val("张三"); //设置
});
//attr()
$(":checkbox:first").attr("name"); //获取
$(":checkbox:first").attr("name", "checkbox03"); //设置
//prop()，推荐
$(":checkbox:first").prop("name"); //获取
$(":checkbox:first").prop("name", "checkbox03"); //设置
});
</script>
<body>
<div>
我是div
<span>我是div中的span</span>
</div>
<buttion>操作input</button>
<input type="text" name="username" id="username"/>
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
</body>
八、jQuery对Dom的操作
1.内部插入
appendTo()：$("#a").appendTo($(".b"))，把a插入到b的【子元素】末尾
prependTo()：$("#a").prependTo($(".b"))，把a插到b的【所有子元素】前面
2.外部插入
insertAfter()：$("#a").insertAfter($(".b"))，得到ba
insertBefore()：$("#a").insertBefore($(".b"))，得到ab
3.替换
replaceWith()：$("#a").replaceWith($(".b"))，用b替换掉a
replaceAll()：$("#a").replaceAll$((".b"))，用a替换掉所有的b
4.删除
remove()：$("#a").remove()，删除a标签(包括里面的内容)
empty()：$("#a").empty()，清空a标签里的内容(不清理掉标签，只清理内容)
九、jQuery操作css样式
addClass()：【添加】类(可以是一个或多个，用空格间隔开)
removeClass()：【删除】类(可以是一个或多个，用空格间隔开)
toggleClass()：【有就删除，没有就添加】类
offset()：【获取和设置】元素的【坐标】(该元素在当前屏幕上的x、y的位置)
设置元素a的位置(一般与按钮绑定)：$(“a”).offset({left:xx, top:xx})
十、jQuery实现动画
1.基本动画
show(毫秒数, 回调函数)：将隐藏的元素显示
hide(毫秒数, 回调函数)：将可见的元素隐藏
toggle(毫秒数, 回调函数)：可见就隐藏，不可见就显示
毫秒数可写可不写，回调函数会在动画结束后执行
隐藏和显示a元素(一般与按钮绑定)：$(“a”).toggle()
2.淡入淡出动画
fadeln(毫秒数, 回调函数)：淡入(慢慢可见)
fadeOut(毫秒数, 回调函数)：淡出(慢慢消失)
fadeTo(毫秒数, 回调函数)：在指定时长内慢慢的将透明度修改到指定的值。
fadeToggle(速度, 要达到的透明度, 回调函数)：淡入/淡出切换
毫秒数可写可不写，回调函数会在动画结束后执行
十一、jQuery中常用的事件
1. click()：点击事件
绑定、触发单击事件
传函数时为绑定事件，不传时为触发事件
<script type="text/javascript">
//注意this的指向
$(function(){
//绑定click()的点击事件
$(".h5-t").click(function(){
alert("这是H5!哈哈")
});
//实现click()的触发事件
$("#clickBtn").click(function(){
$(".h5-t").click();
});
});
</script>
<div id="panel">
<h5 class="h5-t">这是H5</h5>
<div class="content">
哈哈
</div>
</div>
<button type="button" id="clickBtn">按钮</button>
2.mouseover()：鼠标移入事件
鼠标移入事件
传函数时为绑定事件，不传时为触发事件
3.mouseout()：鼠标移出事件
鼠标移出事件
传函数时为绑定事件，不传时为触发事件
4.bind()、unbind()：绑定事件
bind()：给元素一次性绑定一个或多个事件
unbind()：给元素一次性解除一个或多个事件的绑定
<script type="text/javascript">
//注意this的指向
$(function(){
//绑定click()的点击事件
$(".h5-t").bind("click mouseout", function(){
alert("bind绑定的事件，点击或鼠标移出时会触发")
});
});
</script>
<h5 class="h5-t">这是H5</h5>
5.one()：绑定事件
与bind()事件一样，但是one()绑定的事件只会执行一次
6.★★★live()★★★：绑定事件
与bind()事件一样，对使用jq【动态添加】的元素也有效
十二、jQuery的注意事项
1.事件冒泡
父元素和子元素同时绑定同一种事件，当子元素触发时，父元素也会触发
解决办法：在子元素的事件函数内加入return false即可
2.JavaScript如何事件对象
在给元素绑定事件时，在事件的function(event)中添加一个参数， 该参数名就是js处理函数的事件对象
该对象存储触发的事件所有信息
jQuery小练习
1.全选、全不选、反选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//全选
$("#checkAllBtn").click(function(){
$(":checkbox").prop("checked", true);
});
//全不选
$("#checkNotBtn").click(function(){
$(":checkbox").prop("checked", false);
});
//反选
$("#checkRevBtn").click(function(){
$(":checkbox[type=checkbox]").each(function(){
this.checked = !this.checked;
});
})
//复选框实现的全选/全不选
$("#checkAllElem").click(function(){
$(":checkbox[name=items]").prop("checked", this.checked);
});
//手动选满之后，checkAllElem代表的复选框做出的反应
$(":checkbox[name='items']").click(function(){
var allCount = $(":checkbox[name=items]").length;
var checkedCount = $(":checkbox[name=items]:checked").length;
$("#checkAllElem").prop("checked", allCount==checkedCount);
});
});
</script>
</head>
<body>
<form action="" method="post">
您的爱好是？
<input type="checkbox" name="checkAllElem" id="checkAllElem" />全选/全不选
<br>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br>
<button type="button" name="checkAll" id="checkAllBtn" />全选</button>
<button type="button" name="checkNot" id="checkNotBtn" />全不选</button>
<button type="button" name="checkReverse" id="checkRevBtn" />反选</button>
</form>
</body>
</html>
2.将下拉列表中的内容移动到另一个下拉列表中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js"></script>
<style type="text/css">
select{
width: 6.25rem;
height: 8.75rem;
}
div{
width: 8.125rem;
float: left;
text-align: center;
}
</style>
<script type="text/javascript">
$(function(){
//获取第一个按钮，实现左边被选中的加到右边
$("button:eq(0)").click(function(){
//将左边的opt添加到右边去
$("select:eq(0) option:selected").appendTo($("select:eq(1)"));
});
//获取第二个按钮，实现左边的全部加到右边
$("button:eq(1)").click(function(){
//将左边的opt添加到右边去
$("select:eq(0) option").appendTo($("select:eq(1)"));
});
//获取第三个按钮，实现右边被选中的加到左边
$("button:eq(2)").click(function(){
//将左边的opt添加到右边去
$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
});
//获取第四个按钮，实现右边的全部加到左边
$("button:eq(3)").click(function(){
//将左边的opt添加到右边去
$("select:eq(1) option").appendTo($("select:eq(0)"));
});
});
</script>
</head>
<body>
<div id="left">
<select name="select-01" multiple="multiple">
<option value="opt1">1</option>
<option value="opt2">2</option>
<option value="opt3">3</option>
<option value="opt4">4</option>
<option value="opt5">5</option>
<option value="opt6">6</option>
<option value="opt7">7</option>
<option value="opt8">8</option>
<option value="opt9">9</option>
</select>
<button type="button">选中的加到右边</button>
<button type="button">全部添加到右边</button>
</div>
<div id="right">
<select name="select-02" multiple="multiple">
</select>
<button type="button">选中的加到左边</button>
<button type="button">全部添加到左边</button>
</div>
</body>
</html>
3.动态添加、删除表格的行记录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
//注意this的指向
$(function(){
//抽象出删除事件(实现代码复用)
var deleteFun = function(){
//获得a标签父亲的父亲元素，即行元素
var $trObj = $(this).parent().parent();
//获取第一个td(即名字)
var name = $trObj.find("td:first").text();
//原生js的提示框
if(confirm("确定要删除"+ name +"吗？"))
$trObj.remove();
return false;
}
//添加功能
$("#addBtn").click(function(){
//获取name输入框内容
var name = $("#empName").val();
var email = $("#empEmail").val();
var salary = $("#empSalary").val();
//要添加的元素
var $trObj = $("<tr>" +
"<td>" + name +"</td>" +
"<td>" + email +"</td>" +
"<td>" + salary +"</td>" +
"<td><a href=\"deleteEmp?id=004\">Delete</a></td>" +
"</tr>");
//添加
$trObj.appendTo($("#employeeTab"));
//给动态添加的行的a标签绑定删除功能
$trObj.find("a").click(deleteFun);
});
//删除功能
$("a").click(deleteFun);
});
</script>
</head>
<body>
<table id="employeeTab">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>Tom</td>
<td>123</td>
<td>123</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jack</td>
<td>312</td>
<td>312</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>321</td>
<td>321</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name:</td>
<td class="inp">
<input type="text" name="eName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp">
<input type="text" name="Email" id="empEmail" />
</td>
</tr>
<tr>
<td class="word">salary:</td>
<td class="inp">
<input type="text" name="Salary" id="empSalary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="button" id="addBtn" value="abc">submit</button>
</td>
</tr>
</table>
</div>
</body>
</html>
4.品牌展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js"></script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#container{
width: 600px;
height: 400px;
margin: 0 auto;
margin-top: 100px;
/* border: 1px solid #000; */
}
.subCategoryBox, .showMore{
height: 50%;
width: 100%;
text-align: center;
}
.showMore{line-height: 100px;}
ul{
width: 100%;
padding: 0;
margin: 0;
}
ul>li{
list-style: none;
float: left;
width: 12.5rem;
line-height: 40px;
}
</style>
<script type="text/javascript">
//注意this的指向
$(function(){
//基本初始状态
$("li:gt(5):not(:last)").hide();
//查div后的div后的a
$("div div a").click(function(){
$("li:gt(5):not(:last)").toggle();
//判断是否属于隐藏状态
if($("li:gt(5):not(:last)").is(":hidden")){
//改变a标签的内容
$("div div a span").text("显示全部品牌");
}else{
$("div div a span").text("隐藏品牌");
}
return false;
});
});
</script>
</head>
<body>
<div id="container">
<div class="subCategoryBox">
<ul>
<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>
<li><a href="#">奥斯巴林</a></li>
<li><a href="#">明基</a></li>
<li><a href="#">爱国者</a></li>
<li><a href="#">其它品牌相机</a></li>
</ul>
</div>
<div class="showMore">
<a href="#"><span>展示全部品牌</span></a>
</div>
</div>
</body>
</html>
5.图片跟随
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js"></script>
<style type="text/css">
body{
text-align: center;
}
#small{
margin-top: 9.375rem;
}
#showBig{
position: absolute;
display: none;
}
#showBig>img{
width: 12.5rem;
height: 12.5rem;
}
</style>
<script type="text/javascript">
//注意this的指向
$(function(){
$("#small").bind("mouseover mouseout mousemove", function(event){
if(event.type == "mouseover"){
$("#showBig").show();
}else if(event.type == "mouseout"){
$("#showBig").hide();
}else if(event.type == "mousemove"){
$("#showBig").offset({
left: event.pageX + 10, //防止图片出现重叠而引发的闪烁
top: event.pageY + 10
});
// console.log(event)
}
});
});
</script>
</head>
<body>
<img id="small" src="img/cloudy_128.png" >
<div id="showBig">
<img src="img/cloudy_128.png">
</div>
</body>
</html>
6.表单验证
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>表单验证</title>
<style>
.error{
color: red;
font-weight: bold;
display: none;
}
</style>
<script src="js/jquery.min.js"></script>
</head>
<body>
<h2>用户注册</h2><hr />
<form action="#">
<p>用户名：</p>
<p>
<input type="text" name="username" id="username" class="tag"/>
<span class="error">请输入4-8个长度的用户名(不带空格)</span>
</p>
<p>密码：</p>
<p>
<input type="password" name="password" id="password" class="tag"/>
<span class="error">请输入长度为8-14的密码(至少1个大写字母，1个小写字母，1个数字)</span>
</p>
<p>确认密码：</p>
<p>
<input type="password" name="repassword" id="repassword" class="tag"/>
<span class="error">密码不一致</span>
</p>
<p>邮箱：</p>
<p>
<input type="email" name="email" id="email" class="tag"/>
<span class="error">请输入合法邮箱</span>
</p>
<p>
<input type="submit" name="sub" id="sub" value="提交"/>
<input type="reset" name="reset" id="reset" value="重置"/>
</p>
</form>
<script type="text/javascript">
$(function(){
$(".tag").data({"valid":0});
$("#username").blur(function(){
//判断用户名是否合法
obj = $(this);
var username = obj.val();
//正则表达式：/^开头，$/结尾，[a-zA-Z0-9_-]字母、下划线、数字、减号，{4, 16}限定长度
var usernamePatt = /^[a-zA-Z0-9_-]{4,16}$/;
if(!usernamePatt.test(username)){
$("span:eq(0)").show();
obj.data({"valid":0});
}else
obj.data({"valid":1});
//用户名是否重复需要使用Ajax连接数据库进行判断
});
$("#password").blur(function(){
obj = $(this);
var password = obj.val();
//最少8位，包括至少1个大写字母，1个小写字母，1个数字
var passwordPatt = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,14}$/;
if(!passwordPatt.test(password)){
$("span:eq(1)").show();
obj.data({"valid":0});
}else
obj.data({"valid":1});
});
$("#repassword").blur(function(){
obj = $(this);
//判断用户名是否合法
var password = $("#password").val();
var repassword = obj.val();
if(password != repassword){
$("span:eq(2)").show();
obj.data({"valid":0});
}else
obj.data({"valid":1});
});
$("#email").blur(function(){
obj = $(this);
//判断用户名是否合法
var email = obj.val();
var emailPatt = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ ;
if(!emailPatt.test(email)){
$("span:eq(3)").show();
obj.data({"valid":0});
}else
obj.data({"valid":1});
});
$("#sub").click(function(){
$(".tag").blur();
total = 0;
$(".tag").each(function(){
total += $(this).data("valid");
});
if(total == 4){
$("form").submit();
alert("表单提交成功")
}else{
alert("表单内容存在问题，提交失败")
return false;
}
});
});
</script>
</body>
</html>