溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前面學習了原生的DOM，現在看看如何使用JQuery。JQuery建議使用1.12的版本，這樣對舊版本的IE兼容性比較好。
例1.添加，刪除class
知識要點：
1. 通過<script src='jquery-1.12.4.js></script>調用jquery
2. 相對于Dom的document.getElementbyID('i1'), JQuery直接使用$('#i1')；
類似的，查找類可以用$('.c1')，查找p標簽 $('p')，查找form的元素 $(':text') ，還可以組合使用。具體的選擇器可以參考https://www.w3schools.com/jquery/jquery_ref_selectors.asp
3. addclass（‘hide’）直接給找到的標簽添加一個樣式class，removeClass('hide')刪除一個class，無需使用classlist了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input type="button" value="hide" onclick="hides();"/>
<div id="i1">
<div class="item"></div>
<div class="item">
<div class="c1">123</div>
<a>百度</a>
</div>
<div class="item"></div>
</div>
<div id="i2"></div>
<script src="jquery-1.12.4.js"></script>
<script>
flag=true;
function hides() {
if (flag==true){
$('#i1').addClass('hide');
console.log(flag)
flag=false;
}else{
$('#i1').removeClass('hide');
console.log(flag)
flag=true;
}
}
</script>
</body>
</html>點擊hide按鈕切換隱藏效果
例2. 全選和反選
這個例子在前面的Dom里面出現過，現在看看JQuery如何實現
知識點：
1. 選擇器可以組合使用 比如 $('#tb :checkbox') 表示id=tb下面所有的checkbox元素
2. 對于checkbox的屬性，通過prop()來實現，如果是自定義的其他的屬性，通過attr()實現
3. each()可以實現循環，循環里面如果輸出this,可以看見他是一個dom的格式，如果把他轉換成jquery對象的格式（數組格式），可以通過$(this)實現，如果想把jquery轉為dom的格式，那么直接取第一個數組的值就行了，例子里面實現了3種方式，dom，jquery以及三元運算符的格式
<!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="reverseAll();" />
<input type="button" value="取消" onclick="cancleAll();"/>
<table border="1">
<thead>
<tr>
<th>選項</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody id="tb">
<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() {
$('#tb :checkbox').prop('checked',true);
}
function cancleAll() {
$('#tb :checkbox').prop('checked',false);
}
function reverseAll() {
$(':checkbox').each(function(k){
// this,代指當前循環的每一個元素
// Dom
/*
if(this.checked){
this.checked = false;
}else{
this.checked = true;
}
*/
/*
if($(this).prop('checked')){
$(this).prop('checked', false);
}else{
$(this).prop('checked', true);
}
*/
// 三元運算var v = 條件? 真值：假值
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
}
</script>
</body>
</html>例3 隱藏菜單
知識點：
1. click的事件可以直接選擇到標簽之后執行，這個比在html里面使用onclick事件要好很多。
2. Jquery支持鏈式的編程，因此如下所示可以一行實現很多功能
<!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 >
<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').parent().siblings().find('.content').addClass('hide')
})
</script>
</body>
</html>例4. 復制，刪除文本框
clone（）克隆標簽
find（）查找標簽
attr（）添加一個事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<p>
<a onclick="Add(this);"> + </a>
<input type="text" />
</p>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
function Add(ths){
var p = $(ths).parent().clone();
p.find('a').text(' - ');
p.find('a').attr('onclick', 'Remove(this);');
$(ths).parent().parent().append(p);
}
function Remove(ths){
$(ths).parent().remove();
}
</script>
</body>
</html>效果：點擊+自動復制一行，點擊-刪除自己所在
例5. 綁定事件-例2的升級版
例2里面我們需要給每個標簽都手動的添加onclick事件，如果可以統一綁定事件，會省事很多。有兩種方式，如下所示;
$(function){
....
}里面執行的...會在文檔樹加載之后自動執行，不會等待所有的圖片內容的加載
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
.menu{
width: 200px;
height: 600px;
border: 1px solid #dddddd;
overflow: auto;
}
.menu .item .title{
height: 40px;
line-height: 40px;
background-color: #2459a2;
color: white;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="title">菜單一</div>
<div class="body">
<p>內容一</p>
<p>內容一</p>
<p>內容一</p>
<p>內容一</p>
<p>內容一</p>
</div>
</div>
<div class="item">
<div class="title" >菜單二</div>
<div class="body hide">
<p>內容二</p>
<p>內容二</p>
<p>內容二</p>
<p>內容二</p>
<p>內容二</p>
<p>內容二</p>
</div>
</div>
<div class="item">
<div class="title">菜單三</div>
<div class="body hide">
<p>內容三</p>
<p>內容三</p>
<p>內容三</p>
<p>內容三</p>
<p>內容三</p>
<p>內容三</p>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
//方法一
// $(function(){
// // 當文檔樹加載完畢后，自動執行
// $('.item .title').click(function(){
// // this,$(this)
// $(this).next().removeClass('hide');
// $(this).parent().siblings().find('.body').addClass('hide');
// });
// });
//方法二
$('.item .title').bind('focus', function () {
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.body').addClass('hide');
})
</script>
</body>
</html>例6 事件的延遲綁定
比如通過javascript創建的新標簽，如何讓他自動綁定事件？可以通過delegate實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" onclick="Add();" />
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
/*
$('li').click(function () {
alert($(this).text());
});
*/
$("ul").delegate("li","click",function(){
alert($(this).text());
});
});
function Add(){
var tag = document.createElement('li');
tag.innerText = '666';
$('ul').append(tag);
}
</script>
</body>
</html>
例7 模態對話框 （高級版）
之前用DOM實現過模態對話框，現在用JQuery實現同樣的功能。
知識要點：
1.模態對話框的HTML和CSS布局，3層，最上層居中，中間一個陰影層，最下面是主界面，上面兩層默認隱藏，通過z-index區分上下順序
2. 可以通過attr()方法來獲取和設置自定義的屬性；如果是checkbox或者radio，那么通過prop()方法來獲取和設定屬性
3.通過屬性來定位元素，比如 $("[editable='false']")則可以獲取editable屬性為false的那個標簽元素
4. 文本編輯，對于InnerText的值是通過text()實現，對于input的表單內容則是通過val()實現
5. 添加class，刪除class通過addClass()和removeClass()實現
6. delegate 延遲綁定的實現，一般用于未來的新的標簽，比如通過腳本創建的標簽
7. 動態的創建標簽，可以直接插入html字符串或者通過CreateElement()實現
<!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;
}
.item{
position: relative;
width: 100px;
margin-top: 20px;
margin-left: 30px;
}
.label{
width: 40px;
color: chocolate;
}
.content{
width:100px;
position: absolute;
right:-80px;
}
.buttons{
margin-top: 20px;
margin-left: 30px;
}
</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">80</td>
<td editable="true">
<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">80</td>
<td editable="true">
<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">80</td>
<td editable="true">
<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">80</td>
<td editable="true">
<a class="edit">編輯</a> | <a class="del">刪除</a>
</td>
</tr>
</table>
<div class="modal hide">
<div >
<div class="item">
<label class="label">主機名</label>
<input class="content" name="hostname" type="text" />
</div>
<div class="item">
<label class="label">端口</label>
<input class="content" name="port" type="text" />
</div>
<div class="item">
<label class="label">IP地址</label>
<input class="content" name="ip" type="text" />
</div>
</div>
<div class="buttons">
<input type="button" value="取消" onclick="cancelModal();" />
<input type="button" value="添加" onclick="addModal();" />
<input type="button" value="修改" onclick="updateModal();" />
</div>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$("#tb").delegate('.del',"click",function () {
$(this).parent().parent().remove();
})
function addModal() {
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML = $(".modal input[name='hostname']").val();
var att1=document.createAttribute('target');
att1.value='hostname';
td1.setAttributeNode(att1);
var td2 = document.createElement('td');
td2.innerHTML = $(".modal input[name='port']").val();
var att2=document.createAttribute('target');
att2.value='port';
td2.setAttributeNode(att2);
var td3 = document.createElement('td');
td3.innerHTML = $(".modal input[name='ip']").val();;
var att3=document.createAttribute('target');
att3.value='ip';
td3.setAttributeNode(att3);
var td4 = document.createElement('td');
td4.innerHTML = " <a class='edit'>編輯</a> | <a class='del'>刪除</a>"
$(tr).append(td1);
$(tr).append(td2);
$(tr).append(td3);
$(tr).append(td4);
$('#tb').append(tr);
$(".modal,.shadow").addClass('hide');
}
function addElement() {
$(".modal,.shadow").removeClass('hide');
}
function cancelModal() {
$(".modal,.shadow").addClass('hide');
$('.modal input[type="text"]').val("");
}
function updateModal(){
var host=$(".modal input[name='hostname']").val()
var port=$(".modal input[name='port']").val()
var ip=$(".modal input[name='ip']").val()
var tds=$("[editable='false']").prevAll()
console.log(tds)
tds.each(
function () {
console.log($(this).attr('target'))
if($(this).attr('target')=='ip'){
$(this).text(ip);
console.log('update ip')
}
else if($(this).attr('target')=='port'){
$(this).text(port);
console.log('update port')
}
else if($(this).attr('target')=='hostname'){
$(this).text(host)
console.log('update host')
}
}
)
$(".modal,.shadow").addClass('hide');
$("[editable='false']").attr('editable','true')
}
$("#tb").delegate(".edit","click",function() {
$(".modal,.shadow").removeClass('hide');
// this
$(this).parent().attr('editable', 'false')
var tds = $(this).parent().prevAll();
tds.each(function () {
// 獲取td的target屬性值
var n = $(this).attr('target');
// 獲取td中的內容
var text = $(this).text();
var a1 = '.modal input[name="';
var a2 = '"]';
var temp = a1 + n + a2;
$(temp).val(text);
})
})
</script>
</body>
</html>
例8 TAB效果
知識點：
1.AddClass和RemoveClass的使用
2.小技巧，通過自定義的屬性值進行匹配，定位標簽的時候因為格式為[attr=‘value’]的格式，因此做了一個字符串的拼接
3.注釋掉的代碼是另外一種方法，可以通過索引來進行匹配
<!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 >
<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 target = $(this).attr('a');
# $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
$('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');
});
</script>
</body>
</html>
例9 點贊
知識點：
1. Jquery里面通過css()來改變一個標簽的style
2. 思路和Dom一樣的，動態創建一個span標簽，通過定時器改變大小和位置，當透明度低于一定程度，結束定時器
<!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 () {
AddFavor(this);
});
function AddFavor(self) {
// DOM對象
var fontSize = 15;
var top = 0;
var right = 0;
var opacity = 1;
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 + "px");
$(tag).css('top',top + 'px');
$(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 + 'px');
$(tag).css('opacity',opacity);
if(opacity < 0){
clearInterval(obj);
$(tag).remove();
}
}, 40);
}
</script>
</body>
</html>例10 鼠標移動窗口
下面這個例子可以通過鼠標拖曳窗口
知識點：
1. offset()顯示的是當前標簽在整個html里面的坐標，還有一個position()顯示的是在absolute在relative標簽里面的位置
2. event=e || windows.event 是為了兼容舊版的IE來獲取當前的事件， _event.clientX和_event.clientY這里獲取的是鼠標的坐標
3. 綁定事件有幾種方式，比如直接通過標簽執行 $(''#title).mousover(function(){}); 或者通過on綁定，off接觸綁定，例如$(''#title).on('mousemove',function(){}), $(''#title).off('mousemove'); 或者可以通bind和unbind綁定和接觸綁定，比如例5；最后還可以通過delegate()來延遲綁定，比如例6
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div >
<div id="title" ></div>
<div ></div>
</div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
$(function(){
//鼠標放在標簽上面自動變成移動的符號
$('#title').mouseover(function(){
$(this).css('cursor','move');
});
//鼠標單擊的事件
$("#title").mousedown(function(e){
console.log($(this).offset());
//鼠標所在的坐標
var _event = e || window.event;
var ord_x = _event.clientX;
var ord_y = _event.clientY;
console.log(ord_x)
console.log(ord_y)
//標簽左上角在html里面的坐標
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
$('#title').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');
})
});
$("#title").mouseup(function(){
//撤銷綁定事件
$("#title").off('mousemove');
});
})
</script>
</body>
</html>
例11 阻止事件的發生
有的時候，我們會希望根據一定的條件阻止某個事件的發生，比如表單驗證，如果不符合格式或者內容，則無法提交。
知識點：
默認情況下，當我們執行了自定義的Click事件后，他會自動跳轉到href指定的地址。但是如果我們把自定義的事件返回值為false，那么他就不會執行后面的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a onclick="return ClickOn()" >走你1</a>
<a id="i1" >走你2</a>
<script src="jquery-1.12.4.js"></script>
<script>
function ClickOn() {
alert(123);
return false;
}
$('#i1').click(function () {
alert(456);
return false;
})
</script>
</body>
</html>例12 JQuery的擴展事件
如果希望自己定義一個事件，然后讓JQuery來調用的，可以通過extend
知識點：
1. extend的使用有兩種方式：$. extend('name':function(){})定義，然后$.name來調用； 或者是$.fn.extend()定義，然后通過$('#id').name的方式來調用
2. 可以把這些擴展方法都寫入一個專門的js文件，注意在plugin文件里面，我們是把他放在了一個自執行的方法里面，這個是為了避免和其他js文件里面變量名的沖突。這里我可以直接把JQuery作為參數傳進去，這樣arg.extend 就相當于$.extend了
plugin1.js
(function (arg) {
var status = 1;
arg.extend({
'Hellow': function () {
return 'HOHOH';
}
});
})(jQuery);
test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="jquery-1.12.4.js"></script> <script src="plugin2.js"></script> <script> var v = $.Hellow(); alert(v); </script> </body> </html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
