JQuery使用教程
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;
width: 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 {
width: 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;
width: 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 {
width: 1226px;
height: 460px;
margin: 0 auto;
background-color: orange;
position: relative;
cursor: pointer;
}
.scroll_view {
width: 100%;
height: 100%;
position: relative;
}
.scroll_view li {
background: red;
width: 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 {
width: 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 {
width: 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 {
width: 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;
width: 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;
width: 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.属性值为数值+单位方式,可以省略单位, 尽量全部用字符串数据赋值
width: '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 {
width: 100px;
height: 100px;
background-color: orange;
}
.sup {
width: 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;width: 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;
width: 350px;
border: dashed 5px cornflowerblue;
}
.outer .small_box{
position: relative;
}
.outer .small_box .float{
height: 175px;
width: 175px;
background-color: darkgray;
opacity: 0.4;
fill-opacity: 0.4;
position: absolute;
display: none; } .outer .big_box{
height: 400px;
width: 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; width: 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 {
width: 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 {
width: 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({
width: 0
}, 1000, 'linear', function () {
console.log("动画结束了!!!")
})
});
$('.btn').eq(1).on('click', function () {
$('.box').animate({
width: 300
}, 'slow', 'swing', function () {
console.log("动画结束了!!!")
})
}) </script>
</html>
jq动画案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq动画案例</title>
<style>
.wrap {
width: 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 {
width: 2000px;
position: absolute;
}
.scroll li {
width: 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;
width: 80px;
text-align: right;
}
textarea {
width: 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>
JQuery使用教程的更多相关文章
- 值得 Web 开发人员学习的20个 jQuery 实例教程
这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...
- JQuery强化教程 —— jQuery Easing
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- jquery 基础教程[温故而知新二]
子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识如果 ...
- jQuery插件开发教程
jQuery插件开发教程 ——让你的jQuery水平提升一个台阶 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台 ...
- Jquery easyui 教程
Jquery easyui教程 目 录 1基本拖放... 4 2构建购物车型拖放... 5 3创建课程表... 8 4菜单和按钮Menu and Bu ...
- jQuery 实验教程
jQuery 实验教程 jQuery 简介.语法及事件处理 jQuery 以其特有的简练的代码风格,极大得改变了 JavaScript 代码编写的方式.本教程以实例代码为基础,讲解 jQuery 的使 ...
- jquery基础教程读书总结
最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...
- jQuery插件教程
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 非常不错的jQuery插件教程
- 大量Javascript/JQuery学习教程电子书合集
［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人 不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pd ...
- ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
随机推荐
- 完美解决onchange不能实时的监听
我们大家都知道onchange有时候很不好用,因为onchange事件是离开焦点后才会被触发,而不是实时去监听! 那么oninput()事件和onpropertychange()完美的解决了问题:(o ...
- sql server低版本到高版本还原，找不到备份集
关键词:sql server低版本到高版本还原 故障问题,图中备份集(红色框线部分)没有数据,无法选择,导致无法还原 解决办法: [1] 低版本的备份到高版本的,用语句可以还原 注意事项: 低版本不一 ...
- Vue 数据绑定语法
数据绑定语法 Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板, ...
- 第22章 CLR寄宿和AppDomain
22.1 CLR寄宿 CLR Hosting(CLR 宿主)的概念:初始启动.Net Application时,Windows进程的执行和初始化跟传统的Win32程序是一样的,执行的还是非托管代码,只 ...
- libsvm使用
先挖个坑,有空重写svm_scale, svm_train, svm_predict几个代码,给的实在写的不敢恭维 package org.ml.svm; import java.io.File; i ...
- Jmeter CSV Data Set Config参数化
在使用Jemeter做压力测试的时候,往往需要参数化用户名,密码以到达到多用户使用不同的用户名密码登录的目的.这个时候我们就可以使用CSV Data Set Config实现参数化登录: 首先通过Te ...
- testng入门教程11 TestNG运行JUnit测试
现在,您已经了解了TestNG和它的各种测试,如果现在担心如何重构现有的JUnit代码,那就没有必要,使用TestNG提供了一种方法,从JUnit和TestNG按照自己的节奏.也可以使用TestNG执 ...
- Must be between v0 and v15, inclusive解决办法
invoke-static 改为invoke-static/range
- Are you looking forward to this 11s Black Stingray
The Derek Jeter Air Jordan 11 Navy Suede has quietly dropped a number of various colorways over the ...
- java tar.gz文件生成
/** * 压缩文件成Gzip格式,Linux上可使用 * 压缩文件夹生成后缀名为".gz"的文件并下载 * @param folderPath,要压缩的文件夹的路径 * @par ...