jQuery简介
jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team jQuery是对原生JavaScript二次封装的工具函数集合 jQuery是一个简洁高效的且功能丰富的JavaScript工具库 jQuery的优势 完全开源的源代码 强大简洁的选择器 事件、样式、动画的良好支持 链式表达式 简化的Ajax操作 跨浏览器兼容 丰富的插件及对外的扩展接口
两种使用方式
安装jQuery-3.3.1 方法一 本地导入方式 [官网下载](https://jquery.com/download/) ```html <script src="js/jquery-3.3.1.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script> // user code </script> ``` 方法二 CDN导入方式 [CDN](https://www.bootcdn.cn/jquery/) ```html <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> // user code </script> ``` jQuery变量命名规范 通常以$开头 JQ对象与JS对象 js对象转换为jq对象：$ele = $(ele); jq对象转换为js对象：ele = ele.get(0);
jQuery对象
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html()
//意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
// 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
//虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
//约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM 对象
$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
jquery的基础语法：$(selector).action()
选择器
基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
基本筛选器
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
属性选择器
$('[id="div1"]') $('["alex="sb"][id]')
表单选择器
$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")
筛选器
过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
查找筛选器
$("div").children(".test") $("div").find(".test")
$(".test").next() $(".test").nextAll() $(".test").nextUntil()
$("div").prev() $("div").prevAll() $("div").prevUntil()
$(".test").parent() $(".test").parents() $(".test").parentUntil()
$("div").siblings()
实例tab切换菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
function tab(self){
var index=$(self).attr("xxx");
$("#"+index).removeClass("hide").siblings().addClass("hide");
$(self).addClass("current").siblings().removeClass("current");
}
</script>
<style>
*{
margin: 0px;
padding: 0px;
}
.tab_outer{
margin: 0px auto;
60%;
}
.menu{
background-color: #cccccc;
/*border: 1px solid red;*/
line-height: 40px;
}
.menu li{
display: inline-block;
}
.menu a{
border-right: 1px solid red;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: darkgray;
color: yellow;
border-top: solid 2px rebeccapurple;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li xxx="c1" class="current" onclick="tab(this);">菜单一</li>
<li xxx="c2" onclick="tab(this);">菜单二</li>
<li xxx="c3" onclick="tab(this);">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
</body>
</html>
运用实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq选择器</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<ul class="ul1">
<li class="li l1">ul1 l1</li>
<li class="li l2">ul1 l2</li>
<li class="li l3">ul1 l2</li>
</ul>
<ul class="ul2">
<li class="li l1">ul2 l1</li>
<li class="li l2">ul2 l2</li>
<li class="li l3">ul2 l3</li>
</ul>
</body>
<script>
// console.log($);
// 1.采用css3语法
// $('css3选择器')
console.log($('.ul1 .l2').text());
console.log($('.l1 ~ .l2').text());
console.log($('.l1, .l2, .l3').text());
// 2.css3之前jq已有的自身选择器
// 偶数位
// 注: 不加结构时, 将所有li作为考虑整体从上之下进行排序, 查找索引为偶数位的(0,2...)
console.log($('.ul1 .li:even'));
// 奇数位
console.log($('.ul2 .li:odd'));
// 匹配索引 *****
console.log($("ul").eq(0));
// $("ul")页面中的所有ul, 取第n个ul
// -- $("ul")[n] => 得到第n索引位js对象, 本非jq对象
// -- $("ul").eq(n) => 得到第n索引位jq对象
// -- $("ul:eq(n))" => 得到第n索引位jq对象
// 3.通过内容进行匹配
// 内容只有包含l1即可, ul1 l1 | ul1 l2 | ul1 l3 | ul2 l1
console.log($('li:contains(l1)').text())
</script>
</html>
操作元素(属性，css，文档处理)
属性操作
--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")
注意
<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见
<script>
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。
// $("#chk1").attr("checked")
// undefined
// $("#chk1").prop("checked")
// false
// ---------手动选中的时候attr()获得到没有意义的undefined-----------
// $("#chk1").attr("checked")
// undefined
// $("#chk1").prop("checked")
// true
console.log($("#chk1").prop("checked"));//false
console.log($("#chk2").prop("checked"));//true
console.log($("#chk1").attr("checked"));//undefined
console.log($("#chk2").attr("checked"));//checked
</script>
实例运用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性操作</title>
<script src="js/jquery-3.3.1.js"></script>
<style>
.active {
100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
<input class="inp" type="text" value="12345">
<img src="" alt="提示">
<!--表单元素的布尔类型属性, 不写为false, 书写后,不管值为什么, 均为属性名-->
<!--eg: checked="checked" | checked="" | checked-->
<input class="ck" type="checkbox" checked="false">
</body>
<script>
// 文本内容操作
// html() | text() | val()
// 赋值: 有参数
$('.box').html('<i>beat box</i>');
// 取值: 无参数
console.log($('.box').text());
// 表单内容
// $('.inp').val("input 内容 为 value");
console.log($('.inp').val());
</script>
<script>
// 属性操作
console.log($('img').attr('alt'));
$('img').attr('src', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1611571505,2177664062&fm=26&gp=0.jpg')
$('img').attr('abc', function () {
return "ABC";
})
// $('.ck').prop("checked", "true"); // 了解
// $('.ck').attr("checked", "true");
</script>
<script>
$('.box').click(function () {
// $(this).addClass('active'); // 添加
// $(this).removeClass('box'); // 删除
// 如果有active 删除, 反之添加
$(this).toggleClass('active'); // 切换
})
</script>
</html>
实例之全反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.3.min.js"></script>
<script>
function selectall(){
$("table :checkbox").prop("checked",true)
}
function cancel(){
$("table :checkbox").prop("checked",false)
}
function reverse(){
// var idlist=$("table :checkbox")
// for(var i=0;i<idlist.length;i++){
// var element=idlist[i];
//
// var ischecked=$(element).prop("checked")
// if (ischecked){
// $(element).prop("checked",false)
// }
// else {
// $(element).prop("checked",true)
// }
//
// }
// jquery循环的两种方式
//方式一
// li=[10,20,30,40]
// dic={name:"yuan",sex:"male"}
// $.each(li,function(i,x){
// console.log(i,x)
// })
//方式二
// $("tr").each(function(){
// console.log($(this).html())
// })
$("table :checkbox").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
// if ($(this).prop("checked")){
// $(this).prop("checked",false)
// }
// else {
// $(this).prop("checked",true)
// }
// 思考:如果用attr方法可以实现吗?
});
}
</script>
</head>
<body>
<button onclick="selectall();">全选</button>
<button onclick="cancel();">取消</button>
<button onclick="reverse();">反选</button>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
</tr>
</table>
</body>
</html>
实例之模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
background-color: rebeccapurple;
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: coral;
opacity: 0.4;
}
.hide{
display: none;
}
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
200px;
background-color: gold;
}
</style>
</head>
<body>
<div class="back">
<input id="ID1" type="button" value="click" onclick="action1(this)">
</div>
<div class="shade hide"></div>
<div class="models hide">
<input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
function action1(self){
$(self).parent().siblings().removeClass("hide");
}
function action2(self){
//$(self).parent().parent().children(".models,.shade").addClass("hide")
$(self).parent().addClass("hide").prev().addClass("hide")
}
</script>
</body>
</html>
jQ轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style >
* {
/*不允许选择文本, 网页文本不能负责*/
user-select: none;
}
body, ul {
margin: 0;
padding: 0;
list-style: none;
}
.scroll {
1226px;
height: 460px;
margin: 0 auto;
background-color: orange;
position: relative;
cursor: pointer;
}
.scroll_view {
100%;
height: 100%;
position: relative;
}
.scroll_view li {
background: red;
100%;
height: 100%;
font: normal 100px/460px 'STSong';
text-align: center;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.scroll_view li.active {
opacity: 1;
transition: .5s;
}
.left {
position: absolute;
top: 170px;
left: 0;
background-color: #eee;
font-size: 100px;
}
.left:hover, .right:hover {
cursor: pointer;
background-color: #333;
}
.right {
position: absolute;
top: 170px;
right: 0;
background-color: #eee;
font-size: 100px;
}
.scroll_tag {
position: absolute;
right: 10px;
bottom: 10px;
}
.scroll_tag li {
10px;
height: 10px;
border-radius: 50%;
background-color: #333;
border: 3px solid #ddd;
float: left;
margin: 0 10px;
}
.scroll_tag li.active {
background-color: #ccc;
border: 3px solid #333;
}
</style>
</head>
<body>
<div class="scroll">
<ul class="scroll_view">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="scroll_toggle">
<li class="left"><</li>
<li class="right">></li>
</ul>
<ul class="scroll_tag">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 页面文档树加载完毕回调
$(function () {
var page_index = 0;
var length = $('.scroll_view li').length;
var toggle_time = 1000;
var timer = 0;
// 无限轮播
timer = setInterval(toggleRole, toggle_time, 1);
// 悬浮停止,移走轮播
$('.scroll').mouseenter(function () { // 悬浮停止
clearInterval(timer);
}).mouseleave(function () { // 移走轮播
timer = setInterval(toggleRole, toggle_time, 1);
});
// 右轮播
$('.right').click(function () {
toggleRole(1);
});
// 左轮播
$('.left').click(function () {
toggleRole(-1);
});
// 切换依据
function toggleRole(role_num) {
page_index += role_num;
// role_num:1向右切换, role_num:-1向左切换
if (role_num > 0) {
if (page_index >= length) { // 右切换临界点
page_index = 0;
}
} else {
if (page_index < 0) { // 左切换临界点
page_index = length - 1;
}
}
toggleState(page_index);
}
// 切换状态
function toggleState(index) {
$('.scroll_view li').removeClass('active').eq(index).addClass('active');
$('.scroll_tag li').removeClass('active').eq(index).addClass('active');
}
})
</script>
</html>
文档处理
文档结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档结构</title>
</head>
<body>
<div class="box"></div>
<div class="sup">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
<div class="ele"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
var $sup = $('.sup');
console.log($sup.children()); // 子们
console.log($sup.parent()); // 父
console.log($sup.prev()); // 上兄弟
console.log($sup.next()); // 下兄弟
console.log($sup.siblings()); // 兄弟们
</script>
</html>
常用文档操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档操作</title>
<style>
.ele1 {
border: 1px solid black;
}
.ele2 {
border: 1px solid orange;
}
.ele2 .div {
background-color: pink;
}
.ele2 .div span {
float: right;
cursor: pointer;
}
.ele3 {
200px;
height: 200px;
background-color: cyan;
}
</style>
</head>
<body>
<p class="p1">你是P</p>
<div class="ele1">
<p>原文本</p>
</div>
<div class="ele2"></div>
<div class="ele3"><span>1</span><span>2</span><span>3</span></div>
<div class="ele4">ele4 ele4 ele4</div>
<!--需求: .wrap-ele5>.ele5 -->
<div class="ele5">
<div class="wrap"></div>
</div>
<!--repleaceWith-->
<div class="container">
<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
</div>
<!--repleaceAll-->
<p>Hello</p><p>cruel</p><p>World</p>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 一.内部插入
var $p1 = $('.p1');
var $ele1 = $('.ele1');
// 父添加子
// $p1就是一个对象, 所以不管操作几次,或是如何操作, 最终只有一种位置结果
$ele1.append($p1); // 父 加 子 到最后
$ele1.append($p1);
$ele1.prepend($p1); // 父 加 子 到最前
$p1.appendTo($ele1); // 子 加到 父 到最后
$p1.prependTo($ele1); // 子 加到 父 到最前
</script>
<script>
// 二.操作文档三步骤
// 1.创建页面元素对象
// 2.设置页面元素对象(样式|属性|内容|事件...)
// 3.添加到指定位置
$ele2 = $('.ele2');
// 1.
var $div = $('<div class="div">我是div</div>');
// 2.
// $div.on('click', function () {
// alert('div被点击了!');
// });
// 委派添加事件
$ele2.on('click', 'div', function () {
alert('div被点击了!');
});
// 3.
// $ele2.append($div);
// 将div中假如一个span标签,在将自身添加到ele2中
$div.append("<span>x</span>").appendTo($ele2);
// 需求: 点击span的小x,删除$div
// 思路: 给span绑定一个点击事件 => 操作让父级$div删除
/* ① 通过选择器找到目标span
$('.ele2 span').click(function (ev) {
// 阻止冒泡
ev.stopPropagation();
// 删除操作
// console.log(this)
// 原生js操作 父删子
// this.parentElement.parentElement.removeChild(this.parentElement);
// jq操作 自删
$(this).parent().remove();
})
*/
// ② 通过事件委派直接绑定给目标span
$ele2.on('click', 'span', function (ev) {
ev.stopPropagation();
$(this).parent().remove();
});
</script>
<script>
// 三.删除操作
// 1.清空所有子级
// empty()操作的返回值为 自身
$('.ele3').append("<span>4</span>").click(function () {
// 打印子级所有文本
// $(this).children().text() | $(this).text()
console.log($(this).text())
}).empty().text("00000");
// 2.不保留事件的删除
// remove()操作的返回值为 自身
// $('.ele3').remove().appendTo($('body'));
// 3.保留事件的删除
// detach()操作的返回值为 自身
// $('.ele3').detach().appendTo($('body'));
</script>
<script>
// 四.兄弟结构操作
$('.ele4').after('<b>after ele4</b>').before('<i>before ele4</i>')
</script>
<script>
// 五.包裹操作(为自身添加父级)
/*
$('.ele5').wrap(function () {
// this指的是ele5
var _this = this;
return $('.wrap').attr('class', function () {
// this指的是wrap
return this.className + "-" + _this.className;
});
}).empty();
*/
var $wrap = $('.wrap');
var $ele5 = $('.ele5').empty();
$ele5.wrap($wrap);
var tg_class = $wrap.attr('class') + "-" + $ele5.attr('class');
console.log(tg_class)
$ele5.parent().attr('class', tg_class);
</script>
<script>
// 六.替换
// 把third用裁剪的first来替换
$('.third').replaceWith($('.first'));
// 用b标签替换所有的p标签
$("<b>Paragraph. </b>").replaceAll("p");
</script>
<!--DOM操作需求:
1.一个输入框,一个提交按钮,提交留言到一个列表中
2.每条留言可以删除
3.每条留言可以修改
-->
</html>
实例之留言框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档操作案例</title>
<style>
input {
vertical-align: middle;
}
ul, p {
margin: 0;
padding: 0;
list-style: none;
}
.msg, .show {
260px;
/*background-color: red;*/
}
.show li:hover {
background-color: #aaa;
}
.show {
margin-top: 14px;
}
.show li {
line-height: 40px;
position: relative;
}
.show span {
cursor: pointer;
position: absolute;
right: 10px;
top: 0;
}
</style>
</head>
<body>
<div class="msg">
<input class="inp" type="text"><input class="btn" type="button" value="留言">
</div>
<ul class="show">
<!--<li>-->
<!--<p>第一条留言</p>-->
<!--<span>×</span>-->
<!--</li>-->
<!--<li>-->
<!--<p>一楼说的对</p>-->
<!--<span>×</span>-->
<!--</li>-->
</ul>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 提交按钮的事件
$('.btn').click(function () {
// 输入框的内容
var msg = $('.inp').val();
// 输入框有内容才提交
if (msg.length != 0) {
addMsg(msg);
}
// 只要留言按钮点击后, 就应该清空输入框
$('.inp').val("");
});
function addMsg(msg) {
$('<li></li>')
.append('<p>' + msg + '</p>') // 为li添加子级p, p内容为留言内容
.append('<span>×</span>') // 为li添加子级span, 内容就是x
.appendTo($('.show')) // 将li添加到父级show最后
.on('click', 'span', function (ev) { // 通过li为子级span委派点击事件
ev.stopPropagation();
console.log(this); // span
$(this).parent().remove(); // span找到父级li,进而删除当前li
})
.on('click', function () { // 为li添加点击事件 => 进入编辑状态
console.log(this); // li
// 将当前li的p内容取出 => 给编辑状态下的输入框
var txt = $(this).children('p').text();
// 如何才可以变为编辑方式 => 将p替换为input
// $(this).children('p').replaceWith($('<input>').val(txt));
$('<input>').val(txt) // 进入编辑状态,新建input输入框,内容是当前留言p的内容
.attr('autofocus', 'true') // ?
.replaceAll($(this).children('p')) // 来替换显示内容的p标签
.blur(function () { // 为当前编辑框添加失去焦点的事件
var edit_txt = $(this).val(); // 存储修改后的文本
if (edit_txt.length == 0) edit_txt = "null"; // 修改后的内容为空的安全处理
$('<p></p>').text(edit_txt).replaceAll(this); // 将编辑完成后的input重新替换为p标签来显示
})
})
}
</script>
</html>
实例之复制样式条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="item">
<input type="button" value="+" onclick="add(this);">
<input type="text">
</div>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
//var $clone_obj=$(self).parent().clone(); // $clone_obj放在这个位置可以吗?
function add(self){
// 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
var $clone_obj=$(self).parent().clone();
$clone_obj.children(":button").val("-").attr("onclick","removed(this)");
$(self).parent().parent().append($clone_obj);
}
function removed(self){
$(self).parent().remove()
}
</script>
</body>
</html>
css操作
CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
尺寸
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
实例返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-2.2.3.js"></script>
<script>
window.onscroll=function(){
var current=$(window).scrollTop();
console.log(current)
if (current>100){
$(".returnTop").removeClass("hide")
}
else {
$(".returnTop").addClass("hide")
}
}
function returnTop(){
// $(".div1").scrollTop(0);
$(window).scrollTop(0)
}
</script>
<style>
body{
margin: 0px;
}
.returnTop{
height: 60px;
100px;
background-color: darkgray;
position: fixed;
right: 0;
bottom: 0;
color: greenyellow;
line-height: 60px;
text-align: center;
}
.div1{
background-color: orchid;
font-size: 5px;
overflow: auto;
500px;
}
.div2{
background-color: darkcyan;
}
.div3{
background-color: aqua;
}
.div{
height: 300px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="div1 div">
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</div>
<div class="div2 div"></div>
<div class="div3 div"></div>
<div class="returnTop hide" onclick="returnTop();">返回顶部</div>
</body>
</html>
样式操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式操作</title>
<script src="js/jquery-3.3.1.js"></script>
<style>
.box {
font-size: 100px;
}
</style>
</head>
<body>
<div class="box">12345</div>
<div class="box">67890</div>
</body>
<script>
// 取值
console.log($('.box').css('font-size'));
// 设值
$('.box').css('color', 'deeppink')
.css({
// 1.就是给css()函数赋值一个js对象
// 2.key为字符串类型,可以省略"",前提要使用js语法,小驼峰命名法
// 2.属性值为数值+单位方式,可以省略单位, 尽量全部用字符串数据赋值
'300px',
'height': 300,
'background-color': 'cyan',
borderRadius: '30px'
})
.css('width', function(index, oldWidth) {
if (index == 0) {
// 延迟1s
// var b_time = new Date().getTime();
// while (new Date().getTime() - b_time < 1000){}
return 1.5 * parseInt(oldWidth);
}
return oldWidth;
})
</script>
</html>
事件
页面载入
ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){})
事件处理
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
// .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
// $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
// click事件；
[selector]参数的好处:
好处在于.on方法为动态添加的元素也能绑上指定事件；如：
//$('ul li').on('click', function(){console.log('click');})的绑定方式和
//$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个
//li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的
//但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
//li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件
[data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", {foo: "bar"}, myHandler)
实例运用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq事件</title>
<style>
.box, .ele, .sub {
100px;
height: 100px;
background-color: orange;
}
.sup {
200px;
height: 200px;
background-color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box">box</div>
<a href="https://www.baidu.com">别动</a>
<div class="ele">ele</div>
<div class="sup">
<div class="sub"></div>
<span>123</span>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
/*
// 1.事件的绑定语法
$('.box').on('click', function () {
console.log('你丫点我了!!!')
});
$('.box').click(function () {
console.log('你丫又点我了!!!')
});
// 2.事件对象
$(document).click(function (ev) {
console.log("父级点击了");
// jq事件对象, 兼容js事件对象
console.log(ev);
// 鼠标点
console.log(ev.clientX, ev.clientY);
});
$(document).keydown(function (ev) {
// jq事件对象, 兼容js事件对象
console.log(ev);
// 鼠标点
console.log(ev.keyCode);
});
// 3.冒泡与默认动作
$('a').click(function (ev) {
console.log("默认动作取消了");
// 取消默认动作1
ev.preventDefault();
// 取消默认动作2
// return false;
})
$('.ele').click(function (ev) {
// ev.cancelBubble = true; // 未兼容
// 阻止冒泡
ev.stopPropagation();
console.log("子级点击了");
})
*/
</script>
<script>
var name = "张三";
/*
$('.sub').click();
$('.sub').on('click', {name: name, age: 8}, function (ev) {
ev.stopPropagation();
console.log(ev);
console.log(">>>", ev.data.name)
});
*/
// 将sup的点击事件委派给自己的span子级
$('.sup').on('click', 'span', {}, function (ev) {
// ev.stopPropagation();
console.log("==================");
});
$('.sup').on('click', {}, function (ev) {
// ev.stopPropagation();
console.log("++++++++++++++++");
})
</script>
</html>
实例之面板拖动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #ddd; 600px;position: absolute;">
<div id="title" style="height: 40px;color: white;">
标题
</div>
<div style="height: 300px;">
内容
</div>
</div>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
<script>
$(function(){
// 页面加载完成之后自动执行
$('#title').mouseover(function(){
$(this).css('cursor','move');
}).mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
// 原始鼠标横纵坐标位置
var ord_x = _event.clientX;
var ord_y = _event.clientY;
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
$(this).bind('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;
var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y);
$(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px');
})
}).mouseup(function(){
$(this).unbind('mousemove');
});
})
</script>
</body>
</html>
实例之放大镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bigger</title>
<style>
*{
margin: 0;
padding:0;
}
.outer{
height: 350px;
350px;
border: dashed 5px cornflowerblue;
}
.outer .small_box{
position: relative;
}
.outer .small_box .float{
height: 175px;
175px;
background-color: darkgray;
opacity: 0.4;
fill-opacity: 0.4;
position: absolute;
display: none;
}
.outer .big_box{
height: 400px;
400px;
overflow: hidden;
position:absolute;
left: 360px;
top: 0px;
z-index: 1;
border: 5px solid rebeccapurple;
display: none;
}
.outer .big_box img{
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div class="outer">
<div class="small_box">
<div class="float"></div>
<img src="small.jpg">
</div>
<div class="big_box">
<img src="big.jpg">
</div>
</div>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(function(){
$(".small_box").mouseover(function(){
$(".float").css("display","block");
$(".big_box").css("display","block")
});
$(".small_box").mouseout(function(){
$(".float").css("display","none");
$(".big_box").css("display","none")
});
$(".small_box").mousemove(function(e){
var _event=e || window.event;
var float_width=$(".float").width();
var float_height=$(".float").height();
console.log(float_height,float_width);
var float_height_half=float_height/2;
var float_width_half=float_width/2;
console.log(float_height_half,float_width_half);
var small_box_width=$(".small_box").height();
var small_box_height=$(".small_box").width();
// 鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理
var mouse_left=_event.clientX-float_width_half;
var mouse_top=_event.clientY-float_height_half;
if(mouse_left<0){
mouse_left=0
}else if (mouse_left>small_box_width-float_width){
mouse_left=small_box_width-float_width
}
if(mouse_top<0){
mouse_top=0
}else if (mouse_top>small_box_height-float_height){
mouse_top=small_box_height-float_height
}
$(".float").css("left",mouse_left+"px");
$(".float").css("top",mouse_top+"px")
var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);
var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);
console.log(percentX,percentY)
$(".big_box img").css("left", -percentX*mouse_left+"px")
$(".big_box img").css("top", -percentY*mouse_top+"px")
})
})
</script>
</body>
</html>
动画效果
显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$("#hide").click(function () {
$("p").hide(1000);
});
$("#show").click(function () {
$("p").show(1000);
});
//用于切换被选元素的 hide() 与 show() 方法。
$("#toggle").click(function () {
$("p").toggle();
});
})
</script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">切换</button>
</body>
</html>
滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("#slideDown").click(function(){
$("#content").slideDown(1000);
});
$("#slideUp").click(function(){
$("#content").slideUp(1000);
});
$("#slideToggle").click(function(){
$("#content").slideToggle(1000);
})
});
</script>
<style>
#content{
text-align: center;
background-color: lightblue;
border:solid 1px red;
display: none;
padding: 50px;
}
</style>
</head>
<body>
<div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">toggle</div>
<div id="content">helloworld</div>
</body>
</html>
淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("#in").click(function(){
$("#id1").fadeIn(1000);
});
$("#out").click(function(){
$("#id1").fadeOut(1000);
});
$("#toggle").click(function(){
$("#id1").fadeToggle(1000);
});
$("#fadeto").click(function(){
$("#id1").fadeTo(1000,0.4);
});
});
</script>
</head>
<body>
<button id="in">fadein</button>
<button id="out">fadeout</button>
<button id="toggle">fadetoggle</button>
<button id="fadeto">fadeto</button>
<div id="id1" style="display:none; 80px;height: 80px;background-color: blueviolet"></div>
</body>
</html>
回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
</head>
<body>
<button>hide</button>
<p>helloworld helloworld helloworld</p>
<script>
$("button").click(function(){
$("p").hide(1000,function(){
alert($(this).html())
})
})
</script>
</body>
</html>
运用实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq动画</title>
<style>
.ele {
100px;
height: 100px;
background-color: orange;
margin-top: 10px;
}
</style>
</head>
<body>
<button class="b1">消失</button>
<button class="b2">显示</button>
<button class="b3">切换</button>
<div class="ele e1"></div>
<hr>
<button class="b4">消失</button>
<button class="b5">显示</button>
<button class="b6">切换</button>
<div class="ele e2"></div>
<hr>
<button class="b7">消失</button>
<button class="b8">显示</button>
<button class="b9">切换</button>
<div class="ele e3"></div>
<div class="ele e4"></div>
<div class="ele e5"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$('.b1').click(function () {
$('.e1').hide(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
});
$('.b2').click(function () {
$('.e1').show(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
})
$('.b3').click(function () {
$('.e1').toggle(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
})
</script>
<script>
$('.b4').click(function () {
$('.e2').slideUp(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
});
$('.b5').click(function () {
$('.e2').slideDown(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
})
$('.b6').click(function () {
$('.e2').slideToggle(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
})
</script>
<script>
$('.b7').click(function () {
$('.e3, .e4, .e5').fadeOut(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
});
$('.b8').click(function () {
$('.e2 ~ .ele').fadeIn(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
})
$('.b9').click(function () {
$('.e3, .e4, .e5').fadeToggle(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
})
</script>
</html>
自定义动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义动画</title>
<style>
.box {
300px;
height: 300px;
background-color: orange;
}
</style>
</head>
<body>
<button class="btn">消失</button>
<button class="btn">显示</button>
<div class="box"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$('.btn').eq(0).on('click', function () {
$('.box').animate({
0
}, 1000, 'linear', function () {
console.log("动画结束了!!!")
})
});
$('.btn').eq(1).on('click', function () {
$('.box').animate({
300
}, 'slow', 'swing', function () {
console.log("动画结束了!!!")
})
})
</script>
</html>
jq动画案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq动画案例</title>
<style>
.wrap {
600px;
height: 200px;
border: 5px solid black;
margin: 0 auto;
position: relative;
overflow: hidden;
/*overflow: auto;*/
}
.btn {
text-align: center;
margin-top: 50px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.scroll {
2000px;
position: absolute;
}
.scroll li {
200px;
height: 200px;
font: 500 50px/200px 'STSong';
text-align: center;
background-color: yellow;
float: left;
}
.scroll li:nth-child(2n) {
background-color: pink;
}
</style>
</head>
<body>
<div class="btn">
<button class="btn1"><</button>
<button class="btn2">></button>
</div>
<div class="wrap">
<ul class="scroll">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<!--
<script>
// 滚动条滚动(overflow)产生的距离
// console.log($('.wrap').scrollLeft());
// 和绝对定位匹配使用
// console.log($('.scroll').position().left);
// 和固定定位匹配使用
// console.log($('.scroll').offset());
// 滚动scroll的总长度
var scroll_total = $('.scroll').width();
// 显示的总宽度,也就是一次性最大滚动的长度
var wrap_width = $('.wrap').width();
$('.btn1').click(function () {
// 往左已滚动的长度, 是负值
var scroll_left = $('.scroll').position().left;
// 剩余的可滚动的长度: 总长抛出显示的一个平面长度,再减去已经滚动到左侧的长度
// 注scroll_left是负值,使用用+运算
var less_long = scroll_total - wrap_width + scroll_left;
// 通过剩余的可滚动长度计算出下一次能滚动的长度
var next_scroll = less_long > wrap_width ? wrap_width : less_long;
// 动画: left为从当前已滚动的长度(scroll_left)再滚动(减去)下一次可滚动的长度
$('.scroll').animate({
left: scroll_left - next_scroll
})
});
$('.btn2').click(function () {
// 往左已滚动的长度, 是负值
var scroll_left = $('.scroll').position().left;
// 往右剩余的可滚动的长度
var less_long = -scroll_left;
// 通过剩余的可滚动长度计算出下一次能滚动的长度
var next_scroll = less_long > wrap_width ? wrap_width : less_long;
$('.scroll').animate({
left: scroll_left + next_scroll
})
})
</script>
-->
<script>
// 不能被点击
var disable_click = false;
$('.btn1').click(function () {
if (!disable_click) { // 能被点击时
disable_click = true; // 动画过程中, 应该不能再被点击
$('.wrap').animate({
scrollLeft: $('.wrap').scrollLeft() + 600
}, 300, function () {
disable_click = false; // 动画结束后,可以重新被点击
})
}
});
$('.btn2').click(function () {
if (!disable_click) {
disable_click = true;
$('.wrap').animate({
scrollLeft: $('.wrap').scrollLeft() - 600
}, 300, function () {
disable_click = false;
})
}
})
</script>
</html>
正则
定义
var re = /d{11}/ig
1.正则的语法书写在//之间
2.i代表不区分大小写
3.g代表全文匹配
匹配案例
"abcABCabc".search(/[abc]/); // 在字符串abcABCabc匹配单个字符a或b或c,返回匹配到的第一次结果的索引, 没有匹配到返回-1 "abcABCabc".match(/w/); // 进行无分组一次性匹配, 得到得到结果构建的数组类型[a, index:0, input:"abcABCabc"], 没有匹配到返回null "abcABC".match(/w/g); // 进行全文分组匹配, 得到结果为结果组成的数组[a, b, c, A, B, C] "abcABC".match(/(abc)(ABC)/);
RegExp.$1取第一个分组
RegExp.$2取第二个分组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则</title>
</head>
<body>
</body>
<script>
// 正则: 有语法规则的字符串, 用来匹配目标字符串
// 定义正则
// 第一种: 通过构造函数来创建正则对象, 特殊字符需要转义
// var re = new RegExp('\d');
// 第二种
var re = /d{2}/;
// 可以用正则的字符串方法
var res = "#abc1abc56".search(re);
console.log(res);
// str.search(): 可以匹配正则, 匹配成功返回匹配的索引, 反之返回-1
var target = 'abc123你好ABC';
var re = /((abc)((123)你好ABC))/;
var res = target.match(re);
console.log(res);
// 取第四个分组
console.log(res[4]);
console.log(RegExp.$4);
// str.match()
// 匹配失败返回null, 匹配成功,如果非全文匹配, 返回匹配到的信息的数组形式
// i: 不区分大小写 eg: /a/i 可以匹配a | A
// g: 匹配匹配 eg: /a/g 可以匹配abcABCabc中的两个a
console.log("abcABCabc".match(/(abc)ABCabc/g))
console.log(RegExp.$1)
</script>
</html>
表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form表单</title>
<style>
label {
display: inline-block;
80px;
text-align: right;
}
textarea {
300px;
height: 200px;
/*horizontal | vertical*/
resize: none;
font-size: 30px;
}
</style>
</head>
<body>
<!--什么是form表单: form组合标签, 用来接收前端用户录入的数据信息 提交 给后台语言-->
<!--表单元素:
input: 基本上都是输入框, 通过type全局属性决定input类型, 默认为text
label: 普通文本框(类似于span), 一般用来为紧跟其后的input框做文本提示
-->
<!--form属性:
action: 后台处理请求的接口(往哪提交数据)
method: 请求方式
-- get: 将数据拼接在请求的接口之后, 拼接的长度是有限的,所有传输数据的大小也是有限的,且不安全
-- post: 将数据作为数据包打包有请求携带给后台, 没有数据大小的限制, 安全
-->
<form action="" method="get">
<div class="row">
<!--普通输入框-->
<label>用户名: </label>
<input type="text" id="usr" name="usr">
</div>
<div class="row">
<!--密文输入框-->
<label>密码: </label>
<input type="password" id="pwd" name="pwd">
</div>
<div class="row">
<!--按钮-->
<input type="button" value="普通按钮">
<button class="btn1">btn按钮</button>
</div>
<div class="row">
<!--提交按钮, 完成的是表单数据的提交动作, 就是为后台提交数据的 动作-->
<input type="submit" value="提交">
<button type="submit">btn提交</button>
</div>
<div class="row">
<!--单选框-->
<!--注; 通过唯一标识name进行关联, checked布尔类型属性来默认选中-->
男<input type="radio" name="sex" value="male">
女<input type="radio" name="sex" value="female">
哇塞<input type="radio" name="sex" value="wasai" checked>
</div>
<div class="row">
<!--复选框-->
<!--注: 用户不能输入内容,但是能标识选择的表单元素需要明确value值-->
篮球<input type="checkbox" name="hobby" value="lq">
足球<input type="checkbox" name="hobby" value="zq">
乒乓球<input type="checkbox" name="hobby" value="ppq">
其他<input type="checkbox" name="hobby" value="other">
</div>
<div class="row">
<!--文本域-->
<textarea></textarea>
</div>
<div class="row">
<!--下拉框-->
<select name="place">
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="sz">深圳</option>
</select>
</div>
<div class="row">
<!--布尔类型属性-->
<!--autofocus: 自动获取焦点-->
<!--required: 必填项-->
<!--multiple: 允许多项-->
<input type="text" autofocus required>
<input type="file" multiple>
<input type="range">
<input type="color">
</div>
<div class="row">
<!--重置-->
<input type="reset" value="重置">
</div>
</form>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 取消btn1的默认动作
$('.btn1').click(function () {
return false;
});
// 取消表单的默认提交动作 => type="submit"所有标签的提交事件都取消了
$('form').submit(function () {
// return false;
})
</script>
</html>
模拟前后台交互
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form案例</title>
<style>
.red {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<!--
http://api.map.baidu.com/place/v2/search
① query：搜索地点 （如：<input type="text" placeholder="如：肯德基" name="query">）
② region：区域中文名 （如：上海）
③ output：返回数据类型 （如：json /xml）
④ ak：密钥 （如：6E823f587c95f0148c19993539b99295）
-->
<form action="http://api.map.baidu.com/place/v2/search">
地点(肯德基):<input class="query" type="text" name="query"> <span></span> <br>
区域(上海):<input type="text" name="region"> <br>
<select name="output">
<option value="json">json</option>
<option value="xml">xml</option>
</select> <br>
<input type="hidden" name="ak" value="6E823f587c95f0148c19993539b99295">
<input type="submit" value="搜索">
</form>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$('.query').blur(function () {
if ($(this).val().search(/.+/) == -1) {
$(this).next().text("请输入内容").addClass('red')
}
})
$('.query').focus(function () {
$(this).next().text("")
})
</script>
</html>
扩展方法 (插件机制)
用JQuery写插件时，最核心的方两个方法
<script>
$.extend(object) //为JQuery 添加一个静态方法。
$.fn.extend(object) //为JQuery实例添加一个方法。
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
console.log($.min(3,4));
//-----------------------------------------------------------------------
$.fn.extend({
"print":function(){
for (var i=0;i<this.length;i++){
console.log($(this)[i].innerHTML)
}
}
});
$("p").print();
</script>
定义作用域
定义一个JQuery插件，首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。
(function(a,b){return a+b})(3,5)
(function ($) { })(jQuery);
//相当于
var fn = function ($) { };
fn(jQuery);
默认参数
定义了jQuery插件之后，如果希望某些参数具有默认值，那么可以以这种方式来指定。
/step01 定义JQuery的作用域
(function ($) {
//step03-a 插件的默认值属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step06-a 在插件里定义方法
var showLink = function (obj) {
$(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
}
//step02 插件的扩展方法名称
$.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性，默认属性
var options = $.extend(defaults, options);
//step4 支持JQuery选择器
//step5 支持链式调用
return this.each(function () {
//step06-b 在插件里定义方法
showLink(this);
});
}
})(jQuery);
实例之注册验证
<form class="Form">
<p><input class="v1" type="text" name="username" mark="用户名"></p>
<p><input class="v1" type="text" name="email" mark="邮箱"></p>
<p><input class="v1" type="submit" value="submit" onclick="return validate()"></p>
</form>
<script src="jquery-3.1.1.js"></script>
<script>
// 注意:
// DOM对象--->jquery对象 $(DOM)
// jquery对象--->DOM对象 $("")[0]
//---------------------------------------------------------
// DOM绑定版本
function validate(){
flag=true;
$("Form .v1").each(function(){
$(this).next("span").remove();// 防止对此点击按钮产生多个span标签
var value=$(this).val();
if (value.trim().length==0){
var mark=$(this).attr("mark");
var ele=document.createElement("span");
ele.innerHTML=mark+"不能为空!";
$(this).after(ele);
$(ele).prop("class","error");// DOM对象转换为jquery对象
flag=false;
// return false-------->引出$.each的return false注意点
}
});
return flag
}
//---------------------------------------------------------
//---------------------------------------------------------
//---------------------------------------------------------
function f(){
for(var i=0;i<4;i++){
if (i==2){
return
}
console.log(i)
}
}
f(); // 这个例子大家应该不会有问题吧!!!
//------------------------------------------
li=[11,22,33,44];
$.each(li,function(i,v){
if (v==33){
return ; // ===试一试 return false会怎样?
}
console.log(v)
});
//------------------------------------------
// $.MyEach(obj,function(i,v){}):
for(var i in obj){
func(i,obj[i]) ; // i就是索引,v就是对应值
// {}:我们写的大括号的内容就是func的执行语句;
}
// 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行
//本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,
//希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:
for(var i in obj){
ret=func(i,obj[i]) ;
if(ret==false){
return ;
}
}
// 这样就很灵活了:
// <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true
// <2>如果你不想return后下面循环函数继续执行,那么就直接写return false
// ---------------------------------------------------------------------
// 说了这么多,请问大家如果我们的需求是:判断出一个输入有问题后面就不判断了(当然也就不显示了),
// 怎么办呢?
// 对了
if (value.trim().length==0){
//...
//...
//flag=false; // flag=false不要去,它的功能是最后如果有问题,不提交数据!
return false
}
//最后,大家尝试着用jquery的绑定来完成这个功能!
$(".Form :submit").click(function(){});
</script>