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>