jQuery基礎
1、 jQuery其實就是一個類庫，集成了DOM/BOM/JavaScript的類庫
http://jquery.cuishifeng.cn/這個網站里有所有的jQuery的方法
2、 查找元素
jQuery里有：選擇器、篩選器
關於jQuery的版本
關於jQuery的版本：(現在一共有三大版本)
1系列版本
2系列版本
3系列版本
三者的區別是：1系列兼容ie的各個版本、2系列以及3系列只能支持ie8以上的瀏覽器
所以選擇1系列，現在最新的是1.12版本
jQuery的導入方式
jQuery的導入方式：
<script src="jquery-1.12.4.js"></script>
調用的時候有兩種方式：
$或者jquery
下面是一個基本的例子
<body> <div id = "i1">zhaofan</div> <script src="jquery-1.12.4.js"></script> <script> console.log($("#i1")) console.log(jQuery("#i1")) </script> </body>
jQuery和Dom獲取標簽的區別即轉換
還是利用上面的例子，我們可以理解為jQuery或的是一個jQuery對象，而dom獲取的直接是內容，兩者之間可以相互轉換
轉換方法：
jQuery轉換為Dom:jQuery對象[0]就可以轉換為Dom內容
Dom轉換為jQuery對象：$(Dom內容)
轉換例子：
選擇器
基本
選擇器，直接查找或某類標簽
1、 id通過id查找標簽
$('#id')
2、 class通過class查找標簽
<div class = 'c1'></div>
$(".c1")
3、 通過標簽名直接查找
<div class = 'c1'>
<a>zzz</a>
<a>zzz</a>
</div>
<div class = 'c2'>
<a>aaa</a>
</div>
找所有的a標簽
$('a')
4、 組合查找
<div class = 'c1'>
<a>zzz</a>
<a>zzz</a>
</div>
<div class = 'c2'>
<a>aaa</a>
<div>bbb</div>
</div>
找到所有的a標簽以及class=c1以及class=c2的標簽
$('a,.c1,.c2')
層級
1、$(".c1 a") 中間用一個空格隔開，表示子子孫孫的找找
從例子中理解：
<div class = 'c1'> <div> <a>bbbb</a> </div> <a>zzz</a> <a>zzz</a> </div>
查找class = 'c1'中的所有的a標簽
這樣就找到了c1所在div中的所有的a標簽
2、$(".c1>a")查找兒子標簽
基本篩選器
查找多個標簽中的第一個,通過：first
<div class = 'c1'> <a>zzz</a> <a>bbb</a> <a>qqq</a> </div>
查找c1下面的第一個a標簽
通過的這里存在：last查找最后一個:even奇數位，:odd偶數位
:eq(index),:gt(index)
屬性
通過屬性查找標簽
<div class = 'c1'> <a zhaofan = '1'>zzz</a> <a zhaofan = '2'>bbb</a> <a zhaofan = '3'>qqq</a> </div>
這里需要記住：
$('[zhaofan]') 查找具有zhaofan屬性的標簽
$('[zhaofan="1"]') 查找具有zhaofan屬性並且值為1的標簽
表單對象屬性
：enabled
:disabled
:checked
:selected
實現多選反選及取消例子
實現代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全選" onclick="checkALL()"> <input type="button" value="取消" onclick="cancleALL()"> <input type="button" value="反選" onclick="reverseALL()"> <table id ="tb1" border="1"> <thead> <tr> <th>選項</th> <th>IP</th> <th>PORT</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkALL() { $("#tb1 :checkbox").prop("checked",true) } function cancleALL() { $("#tb1 :checkbox").prop("checked",false) } function reverseALL() { $("#tb1 :checkbox").each(function () { // 反選這里有三種方式，第一種方式： // if(this.checked){ // this.checked=false // } // else{ // this.checked = true // } // 第二種方式： // if($(this).prop("checked")){ // $(this).prop("checked",false) // } // else{ // $(this).prop("checked",true) // } // 第三種方式：通過三元運算方式 v = $(this).prop("checked")?false:true; $(this).prop("checked",v) }) } </script> </body> </html>
這里的反選一共用了三種方法。
這里有幾個只是需要知道：
$("#tb1 :checkbox").prop("checked",true)
v = $(this).prop("checked")?false:true;
並且要切記一個問題$("#tb1 :checkbox") #tb1和:checkbox之間要有空格
后台左側菜單例子
實現代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color: black; color: wheat; } .content{ min-height: 50px; } .hide{ display: none; } </style> </head> <body> <div style="height:400px;width: 200px;border: 1px solid #dddddd"> <div class="item"> <div class="header">標題一</div> <div id="i1" class="content hide">內容</div> </div> <div class="item"> <div class="header">標題二</div> <div class="content hide">內容</div> </div> <div class="item"> <div class="header">標題三</div> <div class="content hide">內容</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(".header").click(function () { // $(this).next().removeClass('hide') // $(this).parent().siblings().find('.content').addClass('hide') $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') }) </script> </body> </html>
這里有幾個知識需要注意：
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')這種編程方式叫做鏈式編程
還有就是jQuery的綁定事件的方式：
$(".header").click通過這種方式就可以給所有的class=header的標簽綁定click事件
篩選器中的幾個用法：
$(this).next() 下一個
$(this).prev() 上一個
$(this).parent() 父
$(this).children() 孩子
$('#i1').siblings() 兄弟
$('#i1').find('#i1') 子子孫孫中查找
jQuery添加和移除樣式方法：
$('#i1').addClass(..)
$('#i1').removeClass(..)
篩選
$("#i1").prev()
$("#i1").prevAll()
$("#i1").prevUtil("#i1")
$("#i1").parent()
$("#i1").parents()
$("#i1").parentsUntil()
$("#i1").children()
$("#i1").siblings()
$("#i1").find()
關於文本操作
$(..).text() # 獲取文本內容
$(..).text(“<a>1</a>”) # 設置文本內容
$(..).html()
$(..).html("<a>1</a>")
對於input系列以及textarea 以及select獲取和設置是通過val
$(..).val()
$(..).val(..)
模態對話框升級版例子
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .modal{ position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: #eeeeee; z-index: 10; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: black; z-index: 9; } </style> </head> <body> <a onclick="addElement();">添加</a> <table border="1" id="tb"> <tr> <td target="hostname">1.1.1.11</td> <td target="port">80</td> <td target="ip">1.1.1.11</td> <td> <a class="edit">編輯</a> | <a class="del">刪除</a> </td> </tr> <tr> <td target="hostname">1.1.1.12</td> <td target="port">80</td> <td target="ip">1.1.1.12</td> <td> <a class="edit">編輯</a> | <a class="del">刪除</a> </td> </tr> <tr> <td target="hostname">1.1.1.13</td> <td target="port">80</td> <td target="ip">1.1.1.13</td> <td> <a class="edit">編輯</a> | <a class="del">刪除</a> </td> </tr> <tr> <td target="hostname">1.1.1.14</td> <td target="port">80</td> <td target="ip">1.1.1.14</td> <td> <a class="edit">編輯</a> | <a class="del">刪除</a> </td> </tr> </table> <div class="modal hide"> <div> <input name="hostname" type="text" /> <input name="port" type="text" /> <input name="ip" type="text" /> </div> <div> <input type="button" value="取消" onclick="cancleModal();" /> <input type="button" value="確定" onclick="confirmModal();" /> </div> </div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> function addElement() { $(".modal,.shadow").removeClass('hide') } function cancleModal() { $(".modal,.shadow").addClass('hide'); $(".modal input[type='text']").val(""); } $(".edit").click(function () { $(".modal,.shadow").removeClass('hide') var tds = $(this).parent().prevAll(); tds.each(function () { var n = $(this).attr('target'); var text = $(this).text(); $(".modal input[name="+n+"]").val(text) }) }) $(".del").click(function () { $(this).parent().parent().remove(); }) // function confirmModal() { // var tr = document.createElement('tr'); // var td1 = document.createElement('td'); // td1.innerHTML="192.168.1.1"; // var td2 = document.createElement('td'); // td2.innerHTML="8080"; // $(tr).append(td1); // $(tr).append(td2); // $("#tb").append(tr); // $(".modal,.shadow").addClass('hide'); // } </script> </body> </html>
樣式操作
removeClass
addClass
toggleClass
這里通過toggleClass可以實現一個開燈關燈的效果
代碼例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <input id = "i1" type="button" value="開/關"> <div class="c1 hide">aaa</div> <script src="jquery-1.12.4.js"></script> <script> $("#i1").click(function () { // if($(".c1").hasClass('hide')){ // $(".c1").removeClass('hide') // }else{ // $(".c1").addClass('hide') // } $(".c1").toggleClass('hide'); }) </script> </body> </html>
實現效果如下：
默認情況下
當點擊開關的時候：
代碼中注釋的部分：
// if($(".c1").hasClass('hide')){
// $(".c1").removeClass('hide')
// }else{
// $(".c1").addClass('hide')
// }
實現的效果和下面代碼是一樣的：
$(".c1").toggleClass('hide');
屬性操作
$(..).attr 專門用於做自定義屬性操作，可以獲取屬性值，設置屬值
$(..).removeAttr 可以刪除屬性
例子：
$(..).prop 專門用於checkbox，radio做操作
在3版本一下的jQuery中存在一個問題，效果如下：
當設置為選中后在取消：
所以這里通過prop實現：
實現tab菜單功能例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" a="1">菜單一</div> <div class="menu-item" a="2">菜單二</div> <div class="menu-item" a="3">菜單三</div> </div> <div class="content"> <div b="1">內容一</div> <div class="hide" b="2">內容二</div> <div class="hide" b="3">內容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function () { $(this).addClass("active").siblings().removeClass("active") var v =$(this).attr('a') $('.content').children("[b='"+v+"']").removeClass('hide').siblings().addClass('hide') }) </script> </body> </html>
實現效果如下：
上面是通過外加屬性實現的，還可以通過索引實現，這樣就不用額外添加屬性
可以將下面兩行代碼進行替換：
var v =$(this).attr('a')
$('.content').children("[b='"+v+"']").removeClass('hide').siblings().addClass('hide')
替換為：
$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide')
同樣可以實現上述的效果
文檔處理
$("#u1").append(temp) 這個是在當前標簽子標簽里的后面追加
$("#u1").prepend(temp) 這個是在當前標簽子標簽里的前面追加
$("#u1").after(temp) 這個是作為當前標簽的兄弟標簽的后面添加
$("#u1").before(temp) 這個是作為當前標簽的兄弟標簽的前面添加
$('#u1 li').eq(index).remove() 這個是刪除
$('#u1 li').eq(index).empty() 這個是將標簽的值清空
var v = $("#u1 li").eq(index).clone(); 這個是克隆內容
代碼例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id ="a1" type="text"> <input id ="t1" type="button" value="添加"> <input id ="t2" type="button" value="刪除"> <input id ="t3" type="button" value="復制"> <u1 id ="u1"> <li>1</li> <li>2</li> </u1> <script src="jquery-1.12.4.js"></script> <script> $("#t1").click(function () { var v = $("#a1").val(); console.log(v) var temp = "<li>"+v+"</li>"; // $("#u1").append(temp) $("#u1").prepend(temp) // $("#u1").after(temp) // $("#u1").before(temp) }) $("#t2").click(function () { var index = $("#a1").val(); // $('#u1 li').eq(index).remove() $('#u1 li').eq(index).empty() }) $("#t3").click(function () { var index = $("#a1").val(); var v = $("#u1 li").eq(index).clone(); $("#u1").append(v); }) </script> </body> </html>
css處理
$("t1").css('樣式名稱','樣式值')
下面一個例子實現類似抽屜網的點贊功能
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ padding: 50px; border: 1px solid #dddddd; } .item{ position: relative; width: 30px; } </style> </head> <body> <div class="container"> <div class="item"> <span>贊</span> </div> </div> <div class="container"> <div class="item"> <span>贊</span> </div> </div> <div class="container"> <div class="item"> <span>贊</span> </div> </div> <div class="container"> <div class="item"> <span>贊</span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(".item").click(function () { //綁定click事件，並調用AddFavor函數 AddFavor(this); }) function AddFavor(self) { //設置初始的字體大小，位置及透明度 var fontSize = 15; var top = 0; var right = 0; var opacity = 1; //創建一個span標簽，並為其設置初始的css樣式 var tag = document.createElement("span"); $(tag).text("+1"); $(tag).css("color","green"); $(tag).css("position",'absolute'); $(tag).css("fontSize",fontSize+"px"); $(tag).css("right",right); $(tag).css("top",top); $(tag).css("opacity",opacity) $(self).append(tag); //設置定時器，自動更改樣式 var obj = setInterval(function () { fontSize = fontSize+10; top = top-10; right = right - 10; opacity = opacity - 0.1; //將更改后的樣式設置到標簽上 $(tag).css("fontSize",fontSize+"px"); $(tag).css('right',right+"px"); $(tag).css('top',top); $(tag).css('opacity',opacity); //當標簽的透明度小於0的時候將標簽以及定時器刪除 if(opacity<0){ clearInterval(obj) $(tag).remove(); } },40) } </script> </body> </html>
位置
$(window).scrollTop() 獲取 注意切記這里是window而不是windows，並且這里不需要引號
$(window).scrollTop(0) 設置
上面兩個表示的是windows窗體的
scrollLeft() 和scrollTop一樣
offset 獲取指定標簽在html中的坐標
$("#i1").offset().left 獲取指定的坐標
$("#i1").offset().top 獲取指定的坐標
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<div id="i1"></div>--> <div style="height: 100px;width:100px;overflow: auto"> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> </div> <div id="i1" style="height: 1000px"></div> <script src="jquery-1.12.4.js"></script> </body> </html>
關於offset的例子：
這里有幾個高度需要注意：
.height()獲取當前標簽的高度
.innerHeight()獲取自身高度+padding
.outerHeight() ：
參數：false-->獲取自身高度+padding+border；
參數：true--->獲取自身高度+padding+border+margin；
默認是false即獲取自身高度+padding+border
通過如下例子演示：
<body> <div style="position:relative;"> <div> <div id = "i1" style="position: absolute;height: 80px;width: 200px;padding:3px 0;margin:2px;border: 4px solid #dddddd"></div> </div> </div> <script src="jquery-1.12.4.js"></script> </body>
jQuery綁定事件方式
第一種是：
$('.c1').click()等等還有很多
第二種是：(可以綁定同時可以解除綁定)
$('.c1').bind("click",function(){})
$('.c1').unbind('click',function(){})
第三種是：（可以綁定同時可以解除綁定）
$('c1').delegate('a','click',function(){})
$('c1').undelegate('a','click',function(){})
第四種是：（可以綁定同時可以解除綁定）
$('.c1').on('click',function(){})
$('.c1').off('click',function(){})
以上綁定方式中特殊的是delegate綁定方式：
通過下面例子理解：
<body> <input id ="a1" type="text"> <input id ="t1" type="button" value="添加"> <ul id ="u1"> <li>1</li> <li>2</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $("#t1").click(function () { var v = $("#a1").val(); var temp = "<li>"+v+"</li>"; $("#u1").append(temp); }); $('ul li').click(function () { var v = $(this).text(); alert(v) }) </script> </body>
上面代碼中給li綁定click是通過第一種方式綁定的，通過.click()、bind()、以及on三種方式綁定的時候后續增加的li標簽點擊的時候是不會有彈框的，只有將li的click綁定方式用delegate方式綁定就可以實現后續添加的li仍然可以綁定click事件：
$('ul').delegate('li','click',function () {
var v = $(this).text();
alert(v);
})
這種方式在其他語言中加做委托，只有當點擊的時候才會綁定時間並執行
默認先不綁定
關於自身跳轉和人為綁定跳轉
<body> <a onclick="ClickOn()" href="http://www.baidu.com">百度1</a> <script> function ClickOn() { alert(123); } </script> </body>
這樣運行的時候，默認先彈框，然后才會跳轉到百度，也就是先執行我們后天綁定的事件，然后執行標簽本身具有的事件，即后天綁定的事件的優先級高於本身具有的事件
如果不想要執行標簽本身具有的屬性，需要在綁定的事件最后加上：
return false
上述是以Dom方式實現，同樣通過jQuery也是相同的
先實現一個簡單的表單提交
代碼例子：
<body> //這里為了演示效果，只是隨便提交了一個頁面 <form action="ss4.html" method="POST"> <input type="text" /> <input type="submit" value="提交"/> </form> <script src="jquery-1.12.4.js"></script> <script> $(" :submit").click(function () { var v = $(this).prev().val(); if (v.length>0){ return true; }else{ alert("請輸入內容"); return false; } }) </script> </body>
效果如下：
當輸入框不輸入內容時候提交的時候提示需要輸入內容
當輸入框有內容提交的時候，就會將提交
表單提交例子
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .error{ color: red; } </style> </head> <body> <form id = "f1" action="ss4.html" method="POST"> <div><input name="n1" type="text" /></div> <div><input name="n2" type="password" /></div> <div><input name="n3" type="text" /></div> <div><input name="n4" type="text" /></div> <input type="submit" value="提交"/> </form> <script src="jquery-1.12.4.js"></script> <script> $(":submit").click(function () { $('.error').remove(); var flag=true; $('#f1').find("input[type='text'],input[type='password']").each(function () { var v = $(this).val(); if (v.length<=0){ //當輸入框沒有輸入內容的時候 flag = false; var tag = document.createElement("span"); tag.className='error'; tag.innerHTML="必填"; $(this).after(tag); //這里的return false只能終止當前循環，並不能阻止事件的提交 //return false; } }); return flag; }) </script> </body> </html>
實現效果如下：
默認什么都不輸入直接提交，提示必填
當填寫一個之后點擊提交，第一個的就會不再提示必填
只有當全部填寫內容之后才會提交
當頁面框架加載完畢之后自動執行
$(function(){})
一般默認把綁定事件或默認要執行的操作都放到這個里面
jQuery擴展
有兩種方式：
-$.extend 調用的時候$.方法
-$.fn.extend 調用的時候$(..).方法
注意：需要將擴展放到自執行函數里
（function(){}）(jQuery) 防止環境變量沖突