前端入门之——jquery day9
生活随笔
收集整理的這篇文章主要介紹了
前端入门之——jquery day9
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
轉載 https://www.cnblogs.com/yuanchenqi/articles/5663118.html
一 jquery簡介
?
1 jquery是什么??
- jQuery由美國人John Resig創建，至今已吸引了來自世界各地的眾多?javascript高手加入其team
- jQuery是繼prototype之后又一個優秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。
- 它是輕量級的js庫(壓縮后只有21k)?，這是其它的js庫所不及的，它兼容CSS3，還兼容各種瀏覽器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
- jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTML documents、events、實現動畫效果，并且方便地為網站提供AJAX交互。
- jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。
- jQuery能夠使用戶的html頁保持代碼和html內容分離，也就是說，不用再在html里面插入一堆js來調用命令了，只需定義id即可。
2 什么是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?對象
基本語法：$(selector).action()?
二 尋找元素(重要的選擇器和篩選器)? ? ? ? ? ? ? ? ? ??
2.1 ? 選擇器
? ??2.1.1 基本選擇器?? ? ?$("*") ?$("#id") ? $(".class") ?$("element") ?$(".class,p,div")
? ??2.1.2層級選擇器?? ? ??$(".outer div") ?$(".outer>div") ? $(".outer+div") ?$(".outer~div")
? ??2.1.3 基本篩選器 ??? ?$("li:first") ?$("li:eq(2)") ?$("li:even") $("li:gt(1)")
? ??2.1.4 屬性選擇器?? ???$('[id="div1"]') ? $('["alex="sb"][id]')
? ??2.1.5 表單選擇器???? ?$("[type='text']")----->$(":text")?? ? ? ? ? ? ? ? ? ?注意只適用于input標簽
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$("input:checked")
?
2.2 篩選器
? ? ?2.2.1 ?過濾篩選器
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???$("li").eq(2) ?$("li").first() ?$("ul li").hasclass("test")
? ? ?2.2.2 ?查找篩選器
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??$("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()
?
實例 左側菜單?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>left_menu</title><script src="js/jquery-2.2.3.js"></script><script>function show(self){ // console.log($(self).text())$(self).next().removeClass("hide")$(self).parent().siblings().children(".con").addClass("hide")}</script><style>.menu{height: 500px;width: 30%;background-color: gainsboro;float: left;}.content{height: 500px;width: 70%;background-color: rebeccapurple;float: left;}.title{line-height: 50px;background-color: #425a66;color: forestgreen;}.hide{display: none;}</style> </head> <body><div class="outer"><div class="menu"><div class="item"><div class="title" οnclick="show(this);">菜單一</div><div class="con"><div>111</div><div>111</div><div>111</div></div></div><div class="item"><div class="title" οnclick="show(this);">菜單二</div><div class="con hide"><div>111</div><div>111</div><div>111</div></div></div><div class="item"><div class="title" οnclick="show(this);">菜單三</div><div class="con hide"><div>111</div><div>111</div><div>111</div></div></div></div><div class="content"></div></div></body> </html> View Code?
實例 tab切換
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>tab</title><script src="js/jquery-2.2.3.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" οnclick="tab(this);">菜單一</li><li xxx="c2" οnclick="tab(this);">菜單二</li><li xxx="c3" οnclick="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> View Code?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="div">hello</div> <script>// function func1(self){// // console.log(self.getAttribute("id"))// }document.getElementById("div").οnclick=function () {console.log(this.getAttribute("id"))} </script> </body> </html> this的用法?
三 ? 操作元素(屬性 CSS 和 文檔處理) ?
3.1 屬性操作
? ? ?$("p").text() ???$("p").html() ? $(":checkbox").val()
? ? ? $(".test").attr("alex") ??$(".test").attr("alex","sb")?
? ? ? $(".test").attr("checked","checked") ?$(":checkbox").removeAttr("checked")
? ? ? $(".test").prop("checked",true)
? ? ? $(".test").addClass("hide")
實例 編輯框正反選
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-2.2.3.js"></script><script>function selectall(){$("table :checkbox").prop("checked",true)}function che(){$("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) // } // // } $("table :checkbox").each(function(){if ($(this).prop("checked")){$(this).prop("checked",false)}else {$(this).prop("checked",true)}});// li=[10,20,30,40] //// dic={name:"yuan",sex:"male"} // $.each(li,function(i,x){ // console.log(i,x) // }) }</script> </head> <body><button οnclick="selectall();">全選</button><button οnclick="che();">取消</button><button οnclick="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> View Code <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.3.1.js"></script></head> <body><button οnclick="selectall();">全選</button><button οnclick="che();">取消</button><button οnclick="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><script>function selectall() {$("table :checkbox").each(function () {$(this).prop("checked",true);})}function che() {$("table :checkbox").each(function () {$(this).prop("checked",false);})}function reverse() {$("table :checkbox").each(function () {if($(this).prop("checked")){$(this).prop("checked",false);}else{$(this).prop("checked",true);}})}//第一種遍歷方法 jQuery// li=[10,20,30,40]// dic={name:"yuan",sex:"male"}// $.each(dic,function(i,x){// console.log(i,x)// })//第二種遍歷方法 jQuery<!--$("table tr").each(function () {--><!--console.log($(this).html())--><!--})--></script></body> </html> View Code?
遍歷對象的方法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.3.1.js"></script></head> <body><button οnclick="selectall();">全選</button><button οnclick="che();">取消</button><button οnclick="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><script> //第一種遍歷方法 jQuery// li=[10,20,30,40]// dic={name:"yuan",sex:"male"}// $.each(dic,function(i,x){// console.log(i,x)// })//第二種遍歷方法 jQuery$("table tr").each(function () {console.log($(this).html())})</script></body> </html> View Code?實例 模態對話框
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>批量編輯</title><!--<link rel="stylesheet" href="css/mycss.css" />--><style>*{margin: 0;padding: 0; } body {font-family: 'Open Sans', sans-serif;font-weight: 300;line-height: 1.42em;color:rebeccapurple;background-color:goldenrod; }h1 {font-size:3em;font-weight: 300;line-height:1em;text-align: center;color: #4DC3FA; } .blue {color: #185875; } .yellow {color: #FFF842;}/*!*彈出層罩子*!*/ #full {background-color:gray;left:0;opacity:0.7;position:absolute;top:0;filter:alpha(opacity=30); }.modified {background-color: #1F2739;border:3px solid whitesmoke;height:400px;left:50%;margin:-200px 0 0 -200px;padding:1px;position:fixed;/*position:absolute;*/top:50%;width:400px;display:none; } li {list-style: none;margin: 20px 0 0 50px;color: #FB667A; } input[type="text"] {padding: 10px;border: solid 1px #dcdcdc;/*transition: box-shadow 3s, border 3s;*/}.iputbutton {margin: 60px 0 0 50px;color: whitesmoke;background-color: #FB667A;height: 30px;width: 100px;border: 1px dashed;}.container th h1 {font-weight: bold;font-size: 1em;text-align: left;color: #185875; }.container td {font-weight: normal;font-size: 1em; }.container {width: 80%;margin: 0 auto;}.container td, .container th {padding-bottom: 2%;padding-top: 2%;padding-left:2%; }/*單數行*/ .container tr:first-child {background-color: red; }/*偶數行*/ .container tr:not(first-child){background-color: cyan; }.container th {background-color: #1F2739; }.container td:last-child {color: #FB667A; } /*鼠標進過行*/ .container tr:hover {background-color: #464A52; } /*鼠標進過列*/ .container td:hover {background-color: #FB667A;color: #403E10;font-weight: bold;transform: translate3d(5px, -5px, 0); }</style><script src="jquery-2.2.3.js"></script><script>//點擊【編輯】顯示 $(function () {$("table[name=host] tr:gt(0) td:last-child").click(function (event) {alert("234"); // $("#full").css({height:"100%",width:"100%"}); $(".modified").data('current-edit-obj', $(this));$(".modified,#full").show();var hostname = $(this).siblings("td[name=hostname]").text();$(".modified #hostname").val(hostname);var ip = $(this).siblings("td[name=ip]").text();$(".modified #ip").val(ip);var port = $(this).siblings("td[name=port]").text();$(".modified #port").val(port);});//取消編輯$(".modified #cancel").bind("click", function () {$(".modified,#full").hide();});// 確定修改$(".modified #ok").bind("click", function (event) {var check_status = true;var ths = $(".modified").data('current-edit-obj');var hostname = $(".modified #hostname").val().trim();var ip = $(".modified #ip").val().trim();var port = $(".modified #port").val().trim();var port = parseInt(port);console.log(port);// 端口為空設置為22if (isNaN(port)) {alert("您沒有設置正常的SSH端口號，將采用默認22號端口");var port = 22;}else if ( port > 65535) {// 如果端口不是一個數字 或者端口大于65535var check_status = false;$(".modified #port").css("border-color","red");alert("端口號超過范圍!")};// 主機和ip不能是空if ( hostname == ""){var check_status = false;$(".modified #hostname").css("border-color","red");}else if (ip == "") {var check_status = false;$(".modified #ip").css("border-color","red");};if (check_status == false){return false;}else{//$(this).css("height","60px") 為什么不用$(this),而用$()$(ths).siblings("td[name=hostname]").text(hostname);$(ths).siblings("td[name=ip]").text(ip);$(ths).siblings("td[name=port]").text(port);$(".modified,#full").hide();};});});</script></head><body><h1><span class="blue"><</span>Homework1<span class="blue">></span> <span class="yellow">HostList</span></h1><div id="full"><div class="modified"><li>主機名：<input id="hostname" type="text" value="" />*</li><li>ip地址：<input id="ip" type="text" value="" />*</li><li>端口號：<input id="port" type="text" value="" />[0-65535]</li><div id="useraction"><input class="iputbutton" type="button" name="確定" id="ok" value="確定"/><input class="iputbutton" type="button" name="取消" id="cancel" value="取消"/></div></div></div><table class="container" name="host"><tr><th><h1>主機名</h1></th><th><h1>IP地址</h1></th><th><h1>端口</h1></th><th><h1>操作</h1></th></tr><tr><td name="hostname">web01</td><td name="ip">192.168.2.1</td><td name="port">22</td><td>編輯 </td></tr><tr><td name="hostname">web02</td><td name="ip">192.168.2.2</td><td name="port">223</td><td>編輯 </td></tr><tr><td name="hostname">web03</td><td name="ip">192.168.2.3</td><td name="port">232</td><td>編輯 </td></tr><tr><td name="hostname">web04</td><td name="ip">192.168.2.4</td><td name="port">232</td><td>編輯 </td></tr></table></body> </html> View Code3.2 CSS操作
? ? ? ??3.2.1(樣式)? ?css("{color:'red',backgroud:'blue'}")?
? ? ? ??3.2.2(位置)?? offset() ? ?position() ?scrollTop() ?scrollLeft() ? ?
? ? ? ??3.2.3(尺寸)???height() ?width()??
實例 返回頂部
<!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" οnclick="returnTop();">返回頂部</div> </body> </html> View Code實例 滾動菜單?
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>body{margin: 0px;}img {border: 0;}ul{padding: 0;margin: 0;list-style: none;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.wrap{width: 980px;margin: 0 auto;}.pg-header{background-color: #303a40;-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);box-shadow: 0 2px 5px rgba(0,0,0,.2);}.pg-header .logo{float: left;padding:5px 10px 5px 0px;}.pg-header .logo img{vertical-align: middle;width: 110px;height: 40px;}.pg-header .nav{line-height: 50px;}.pg-header .nav ul li{float: left;}.pg-header .nav ul li a{display: block;color: #ccc;padding: 0 20px;text-decoration: none;font-size: 14px;}.pg-header .nav ul li a:hover{color: #fff;background-color: #425a66;}.pg-body{}.pg-body .catalog{position: absolute;top:60px;width: 200px;background-color: #fafafa;bottom: 0px;}.pg-body .catalog.fixed{position: fixed;top:10px;}.pg-body .catalog .catalog-item.active{color: #fff;background-color: #425a66;}.pg-body .content{position: absolute;top:60px;width: 700px;margin-left: 210px;background-color: #fafafa;overflow: auto;}.pg-body .content .section{height: 500px;}</style> </head> <body><div class="pg-header"><div class="wrap clearfix"><div class="logo"><a href="#"><img src="images/3.jpg"></a></div><div class="nav"><ul><li><a href="#">首頁</a></li><li><a href="#">功能一</a></li><li><a href="#">功能二</a></li></ul></div></div></div><div class="pg-body"><div class="wrap"><div class="catalog"><div class="catalog-item" auto-to="function1"><a>第1張</a></div><div class="catalog-item" auto-to="function2"><a>第2張</a></div><div class="catalog-item" auto-to="function3"><a>第3張</a></div></div><div class="content"><div menu="function1" class="section"><h1>第一章</h1></div><div menu="function2" class="section"><h1>第二章</h1></div><div menu="function3" class="section"><h1>第三章</h1></div></div></div></div><script type="text/javascript" src="js/jquery-2.2.3.js"></script><script type="text/javascript">window.onscroll=function(){var ws=$(window).scrollTop()if (ws>50){$(".catalog").addClass("fixed")}else {$(".catalog").removeClass("fixed")}$(".content").children("").each(function(){var offtop=$(this).offset().top; // console.log(offtop)var total=$(this).height()+offtop;if (ws>offtop && ws<total){if($(window).height()+$(window).scrollTop()==$(document).height()){var index=$(".catalog").children(" :last").css("fontSize","40px").siblings().css("fontSize","12px")console.log(index)target='div[auto-to="'+index+'"]';$(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px")}else{var index=$(this).attr("menu");target='div[auto-to="'+index+'"]';$(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px")}}})}</script></body> </html> View Code3.3 文檔處理
? ? ??內部插入??$("#c1").append("<b>hello</b>") ? ? $("p").appendTo("div")
? ? ? ? ? ? ? ? ? ?prepend() ? ?prependTo()
? ? ??外部插入??before() ?insertBefore() ?after insertAfter()
? ? ? ? ??? ? ? ? ? ?replaceWith() ? remove() ?empty() ?clone()
實例 clone方法的應用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title></head> <body><div class="outer"><div class="condition"><div class="icons" style="display:inline-block"><a οnclick="add(this);"><button>+</button></a></div><div class="input" style="display:inline-block"><input type="checkbox"><input type="text" value="alex"></div></div></div><script src="js/jquery-2.2.3.js"></script><script>function add(self){var $duplicate = $(self).parent().parent().clone();$duplicate.find('a[οnclick="add(this);"]').attr('onclick',"removed(this)").children("").text("-");$duplicate.appendTo($(self).parent().parent().parent());}function removed(self){$(self).parent().parent().remove()}</script> </body> </html> View Code <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/*p:after{*//*content: "hello after";*//*color: #cc3399;*//*}*/</style> </head> <body> <!--<input type="text" value="123">--> <!--<input type="checkbox" value="hobby">--><div id="div1"><p>hello xiaop</p> </div> <p>hello p</p> <div id="outer"><div class="item"><input type="text"><input type="button" value="+" οnclick="fun1(this)"></div> </div> <script src="jquery-3.3.1.js"></script> <script>// console.log($(":text").val())// console.log($(":checkbox").val())// $(":text").val("456")// $("#div1").append($("p"))// $("p").appendTo($("#div1"))function fun1(self) {var ele=$(self).parent().clone();ele.children(":button").val("-")ele.children(":button").attr("onclick","fun2(this)")ele.appendTo($("#outer"))}function fun2(self) {$(self).parent().remove()} </script></body> </html> View Code?
3.4 事件
? ? ??3.4.1
? ? ? ? ? ? ? ?$(document).ready(function(){}) -----------> $(function(){})
? ? ??3.4.2
? ? ? ??? ? ? ?$("p").click(function(){})
? ? ? ? ? ? ? ?$("p").bind("click",function(){}) ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?$("ul").delegate("li","click",function(){})
實例 拖動面板
<!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="background-color: black;height: 40px;color: white;">標題</div><div style="height: 300px;">內容</div></div><!--<p>nihao</p>--> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script>// $("p").mouseenter(function(){// $("p").css("background-color","yellow");// });$(function(){// 頁面加載完成之后自動執行$('#title').mouseover(function(){$(this).css('cursor','pointer');}).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).on('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).off('mousemove');});}) </script> </body> </html> View Code <!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="background-color: black;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> View Code <!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="js/jquery-2.2.3.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> Vi放大鏡?de3.5 動畫效果
實例 ?隱藏與顯示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-2.2.3.js"></script><script>/*** Created by yuan on 16/5/5.*/$(document).ready(function(){$("#hide").click(function(){$("p").hide(1000);});$("#show").click(function(){$("p").show(1000);});//用于切換被選元素的 hide() 與 show() 方法。$("#toggle").click(function(){$("p").toggle();})for (var i= 0;i<7;i++){ // 顛倒了常規的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。$("<div>").appendTo(document.body);}$("div").click(function(){$(this).hide(2000);}); });</script><link type="text/css" rel="stylesheet" href="style.css"> </head> <body><!--1 隱藏與顯示--><!--2 淡入淡出--><!--3 滑動--><!--4 效果-回調:每一個動畫執行完畢之后所能執行的函數方法或者所能做的一件事--><p>hello</p><button id="hide">隱藏</button><button id="show">顯示</button><button id="toggle">隱藏/顯示</button></body> </html> View Code實例 ?淡入淡出
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-2.2.3.js"></script><script>$(document).ready(function(){$("#in").click(function(){$("#id1").fadeIn(1000);$("#id2").fadeIn(1000);$("#id3").fadeIn(1000);});$("#out").click(function(){$("#id1").fadeOut(1000);$("#id2").fadeOut(1000);$("#id3").fadeOut(1000);});$("#toggle").click(function(){$("#id1").fadeToggle(1000);$("#id2").fadeToggle(1000);$("#id3").fadeToggle(1000);});$("#fadeto").click(function(){$("#id1").fadeTo(1000,0.4);$("#id2").fadeTo(1000,0.5);$("#id3").fadeTo(1000,0);}); });</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><div id="id2" style="display:none; width: 80px;height: 80px;background-color: orangered "></div><div id="id3" style="display:none; width: 80px;height: 80px;background-color: darkgreen "></div></body> </html> View Code實例 ?滑動
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-2.2.3.js"></script><script>$(document).ready(function(){$("#flipshow").click(function(){$("#content").slideDown(1000);});$("#fliphide").click(function(){$("#content").slideUp(1000);});$("#toggle").click(function(){$("#content").slideToggle(1000);})});</script><style>#flipshow,#content,#fliphide,#toggle{padding: 5px;text-align: center;background-color: blueviolet;border:solid 1px red;}#content{padding: 50px;display: none;}</style> </head> <body><div id="flipshow">出現</div><div id="fliphide">隱藏</div><div id="toggle">toggle</div><div id="content">helloworld</div></body> </html> View Code實例 ?回調函數
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-2.2.3.js"></script><script>$(document).ready(function(){$("button").click(function(){$("p").hide(1000,function(){alert('動畫結束')})// $("p").css('color','red').slideUp(1000).slideDown(2000) }) });</script> </head> <body><button>隱藏</button><p>helloworld helloworld helloworld</p></body> </html> View Code3.6 擴展(插件機制)???
- ?jquery.extend({})??
- ?jquery.fn.extend({})
實例 商城菜單
<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width"><meta http-equiv="X-UA-Compatible" content="IE=8"><title>購物商城</title><style>*{margin: 0;padding: 0; } .hide{display:none; }.header-nav {height: 39px;background: #c9033b; } .header-nav .bg{background: #c9033b; }.header-nav .nav-allgoods .menuEvent {display: block;height: 39px;line-height: 39px;text-decoration: none;color: #fff;text-align: center;font-weight: bold;font-family: 微軟雅黑;color: #fff;width: 100px; } .header-nav .nav-allgoods .menuEvent .catName {height: 39px;line-height: 39px;font-size: 15px; }.header-nav .nav-allmenu a {display: inline-block;height: 39px;vertical-align: top;padding: 0 15px;text-decoration: none;color: #fff;float: left; }.header-menu a{color:#656565; }.header-menu .menu-catagory{position: absolute;background-color: #fff;border-left:1px solid #fff;height: 316px;width: 230px;z-index: 4;float: left; } .header-menu .menu-catagory .catagory {border-left:4px solid #fff;height: 104px;border-bottom: solid 1px #eaeaea; } .header-menu .menu-catagory .catagory:hover {height: 102px;border-left:4px solid #c9033b;border-bottom: solid 1px #bcbcbc;border-top: solid 1px #bcbcbc; }.header-menu .menu-content .item{margin-left:230px;position:absolute;background-color:white;height:314px;width:500px;z-index:4;float:left;border: solid 1px #bcbcbc;border-left:0;box-shadow: 1px 1px 5px #999; }</style> </head> <body><div class="pg-header"><div class="header-nav"><div class="container narrow bg"><div class="nav-allgoods left"><a id="all_menu_catagory" href="#" class="menuEvent"><strong class="catName">全部商品分類</strong><span class="arrow" style="display: inline-block;vertical-align: top;"></span></a></div></div></div><div class="header-menu"><div class="container narrow hide"><div id="nav_all_menu" class="menu-catagory"><div class="catagory" float-content="one"><div class="title">家電</div><div class="body"><a href="#">空調</a></div></div><div class="catagory" float-content="two"><div class="title">床上用品</div><div class="body"><a href="http://www.baidu.com">床單</a></div></div><div class="catagory" float-content="three"><div class="title">水果</div><div class="body"><a href="#">橘子</a></div></div></div><div id="nav_all_content" class="menu-content"><div class="item hide" float-id="one"><dl><dt><a href="#" class="red">廚房用品</a></dt><dd><span>|?<a href="#" target="_blank" title="勺子">勺子</a>?</span></dd></dl><dl><dt><a href="#" class="red">廚房用品</a></dt><dd><span>|?<a href="#" target="_blank" title="菜刀">菜刀</a>?</span></dd></dl><dl><dt><a href="#" class="red">廚房用品</a></dt><dd><span>|?<a href="#">菜板</a>?</span></dd></dl><dl><dt><a href="#" class="red">廚房用品</a></dt><dd><span>|?<a href="#" target="_blank" title="碗">碗</a>?</span></dd></dl></div><div class="item hide" float-id="two"><dl><dt><a href="#" class="red">廚房用品</a></dt><dd><span>|?<a href="#" target="_blank" title="">角閥</a>?</span></dd></dl><dl><dt><a href="#" class="red">廚房用品</a></dt><dd><span>|?<a href="#" target="_blank" title="角閥">角閥</a>?</span></dd></dl><dl><dt><a href="#" class="red">廚房用品</a></dt><dd><span>|?<a href="#" target="_blank" title="角閥">角閥</a>?</span></dd></dl></div><div class="item hide" float-id="three"><dl><dt><a href="#" class="red">廚房用品3</a></dt><dd><span>|?<a href="#" target="_blank" title="角閥">角閥3</a>?</span></dd></dl><dl><dt><a href="#" class="red">廚房用品3</a></dt><dd><span>|?<a href="http://www.meilele.com/category-jiaofa/" target="_blank" title="角閥">角閥3</a>?</span></dd></dl></div></div></div></div></div><script src="js/jquery-2.2.3.js"></script><script type="text/javascript">$(document).ready(function () {Change_Menu('#all_menu_catagory','#nav_all_menu', '#nav_all_content');});function Change_Menu(all_menu_catagory,menu, content) {$all_menu_catagory = $(all_menu_catagory);$menu = $(menu);$content = $(content);$all_menu_catagory.bind("mouseover", function () {$menu.parent().removeClass('hide');});$all_menu_catagory.bind("mouseout", function () {$menu.parent().addClass('hide');});$menu.children().bind("mouseover", function () {$menu.parent().removeClass('hide');$item_content = $content.find('div[float-id="' + $(this).attr("float-content") + '"]');$item_content.removeClass('hide').siblings().addClass('hide');});$menu.bind("mouseout", function () {$content.children().addClass('hide');$menu.parent().addClass('hide');});$content.children().bind("mouseover", function () {$menu.parent().removeClass('hide');$(this).removeClass('hide');});$content.children().bind("mouseout", function () {$(this).addClass('hide');$menu.parent().addClass('hide');});} </script></body> </html> View Code實例 編輯框
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.edit-mode{background-color: #b3b3b3;padding: 8px;text-decoration: none;color: white;}.editing{background-color: #f0ad4e;}</style> </head> <body><div style="padding: 20px"><input type="button" οnclick="CheckAll('#edit_mode', '#tb1');" value="全選" /><input type="button" οnclick="CheckReverse('#edit_mode', '#tb1');" value="反選" /><input type="button" οnclick="CheckCancel('#edit_mode', '#tb1');" value="取消" /><a id="edit_mode" class="edit-mode" href="javascript:void(0);" οnclick="EditMode(this, '#tb1');">進入編輯模式</a></div><table border="1"><thead><tr><th>選擇</th><th>主機名</th><th>端口</th><th>狀態</th></tr></thead><tbody id="tb1"><tr><td><input type="checkbox" /></td><td edit="true">v1</td><td>v11</td><td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在線</td></tr><tr><td><input type="checkbox" /></td><td edit="true">v1</td><td>v11</td><td edit="true" edit-type="select" sel-val="2" global-key="STATUS">下線</td></tr><tr><td><input type="checkbox" /></td><td edit="true">v1</td><td>v11</td><td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在線</td></tr></tbody></table><script type="text/javascript" src="js/jquery-2.2.3.js"></script><script>/*監聽是否已經按下control鍵*/window.globalCtrlKeyPress = false;window.onkeydown = function(event){if(event && event.keyCode == 17){window.globalCtrlKeyPress = true;}};window.onkeyup = function(event){if(event && event.keyCode == 17){window.globalCtrlKeyPress = false;}};/*按下Control，聯動表格中正在編輯的select*/function MultiSelect(ths){if(window.globalCtrlKeyPress){var index = $(ths).parent().index();var value = $(ths).val();$(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){$(this).parent().parent().children().eq(index).children().val(value);});}}</script><script type="text/javascript">$(function(){BindSingleCheck('#edit_mode', '#tb1'); });function BindSingleCheck(mode, tb){$(tb).find(':checkbox').bind('click', function(){var $tr = $(this).parent().parent();if($(mode).hasClass('editing')){if($(this).prop('checked')){RowIntoEdit($tr);}else{RowOutEdit($tr);}}}); }function CreateSelect(attrs,csses,option_dict,item_key,item_value,current_val){var sel= document.createElement('select');$.each(attrs,function(k,v){$(sel).attr(k,v);});$.each(csses,function(k,v){$(sel).css(k,v);});$.each(option_dict,function(k,v){var opt1=document.createElement('option');var sel_text = v[item_value];var sel_value = v[item_key];if(sel_value==current_val){$(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).attr('selected',true).appendTo($(sel));}else{$(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel));}});return sel; }STATUS = [{'id': 1, 'value': "在線"},{'id': 2, 'value': "下線"} ];BUSINESS = [{'id': 1, 'value': "車上會"},{'id': 2, 'value': "二手車"} ];function RowIntoEdit($tr){$tr.children().each(function(){if($(this).attr('edit') == "true"){if($(this).attr('edit-type') == "select"){var select_val = $(this).attr('sel-val');var global_key = $(this).attr('global-key');var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], 'id', 'value', select_val);$(this).html(selelct_tag);}else{var orgin_value = $(this).text();var temp = "<input value='"+ orgin_value+"' />";$(this).html(temp);}}}); }function RowOutEdit($tr){$tr.children().each(function(){if($(this).attr('edit') == "true"){if($(this).attr('edit-type') == "select"){var new_val = $(this).children(':first').val();var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text();$(this).attr('sel-val', new_val);$(this).text(new_text);}else{var orgin_value = $(this).children().first().val();$(this).text(orgin_value);}}}); }function CheckAll(mode, tb){if($(mode).hasClass('editing')){$(tb).children().each(function(){var tr = $(this);var check_box = tr.children().first().find(':checkbox');if(check_box.prop('checked')){}else{check_box.prop('checked',true);RowIntoEdit(tr);}});}else{$(tb).find(':checkbox').prop('checked', true);} }function CheckReverse(mode, tb){if($(mode).hasClass('editing')){$(tb).children().each(function(){var tr = $(this);var check_box = tr.children().first().find(':checkbox');if(check_box.prop('checked')){check_box.prop('checked',false);RowOutEdit(tr);}else{check_box.prop('checked',true);RowIntoEdit(tr);}});}else{// $(tb).children().each(function(){var tr = $(this);var check_box = tr.children().first().find(':checkbox');if(check_box.prop('checked')){check_box.prop('checked',false);}else{check_box.prop('checked',true);}});} }function CheckCancel(mode, tb){if($(mode).hasClass('editing')){$(tb).children().each(function(){var tr = $(this);var check_box = tr.children().first().find(':checkbox');if(check_box.prop('checked')){check_box.prop('checked',false);RowOutEdit(tr);}else{}});}else{$(tb).find(':checkbox').prop('checked', false);} }function EditMode(ths, tb){if($(ths).hasClass('editing')){$(ths).removeClass('editing');$(tb).children().each(function(){var tr = $(this);var check_box = tr.children().first().find(':checkbox');if(check_box.prop('checked')){RowOutEdit(tr);}else{}});}else{$(ths).addClass('editing');$(tb).children().each(function(){var tr = $(this);var check_box = tr.children().first().find(':checkbox');if(check_box.prop('checked')){RowIntoEdit(tr);}else{}});} }</script></body> </html> View Code?
?
?
?
?
轉載于:https://www.cnblogs.com/Mengchangxin/p/9647495.html
總結
以上是生活随笔為你收集整理的前端入门之——jquery day9的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： The way of Webpack l
- 下一篇： VS2010/MFC编程入门之二十九（常