jquery學習
阿新 • • 發佈：2020-08-01
目錄
- jquery和原生js的區別
- jquery的入口函式其他寫法
- jquery的衝突問題
- jQuery核心函式
- 靜態方法和例項方法
- each方法
- map方法
- jQuery中的each和map方法的區別
- 內容選擇器
- 屬性節點
- prop方法
- 類操作方法
- 文字值操作方法
- 操作樣式方法
- 尺寸和位置操作
- scrollTop方法
- 事件繫結和解綁
- 事件冒泡和預設行為
- 事件自動觸發
- 事件委託
- 移入移出事件
jquery和原生js的區別
<script type="text/javascript"> // 1.通過原生的js入口函式可以拿到DOM元素 window.onload=function(e){ var img=document.getElementsByTagName('img')[0]; // 2.通過原生的js入口函式可以拿到DOM元素的寬高 var width=window.getComputedStyle(img).width; console.log('onload:\t'+img+'\n'+width); } // 原生js和jquery入口函式的載入模式不同 // 原生js會等到DOM元素載入完畢,並且圖片也載入完成 // jquery會等到DOM元素載入完畢,但不會等到圖片也載入完畢並執行 $(document).ready(function(){ // 1.通過jquery入口函式也可以拿到DOM元素 var $img=$('img'); console.log($img); // 2.通過jquery入口函式不可以拿到DOM元素的寬高 var $width=$img.width(); console.log('ready',$width); }); </script>
jquery的入口函式其他寫法
<script type="text/javascript"> // 第一種 $(document).ready(function(){ alert('hello'); }); // 第二種 $(function(){ alert('$hello'); }); // 第三種 jQuery(function() { alert('JQueryhello'); }); jQuery(document).ready(function() { alert('jQuery(document) hello'); }); </script>
jquery的衝突問題
<script type="text/javascript">
// 1.釋放$的使用權
// 注意點:釋放操作必須在編寫其它jquery程式碼之前
// jQuery.noConflict();
// jQuery(function(){
// alert('hello jQuery');
// })
// 2.自定義符號
var k=jQuery.noConflict();
k(function(){
alert('hello jQuery');
})
</script>
jQuery核心函式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script> <script type="text/javascript"> // $():就代表呼叫jQuery的核心函式 // 1.接收一個函式 $(function() { alert('hello jjjj'); // 2.接收一個字串選擇器 // 返回一個jQuery物件，物件中儲存找到的DOM元素 var $div = $('div'); console.log($div); // 2.2接收一個字串程式碼片段 var $p = $('<p>11111</p>'); console.log($p); $div.append($p); // 3.接收一個DOM元素 會被包裝成一個jquery物件返回給我們 var span = document.getElementsByTagName('span')[0]; console.log(span); var $span = $(span); console.log($span); }) </script> </head> <body> <div> </div> <span> </span> </body> </html>
靜態方法和例項方法
<script type="text/javascript">
// 1.定義一個類
function AClass(){
}
// 2.給這個類新增一個靜態方法
// 直接新增給類就是靜態方法
AClass.staticMethod=function(){
alert('staticMethod');
};
// 靜態方法通過類名呼叫
AClass.staticMethod();
// 3.給這個類新增一個例項方法
AClass.prototype.instanceMethod=function(){
alert('instanceMethod');
}
// 例項方法通過類的例項呼叫
var t=new AClass();
// 通過例項呼叫例項方法
t.instanceMethod();
</script>
each方法
<script type="text/javascript">
var arr=[1,3,4,6,7,3]
var obj={
0:1,
1:3,
2:4,
5:66,
length:5,
}
// 利用jquery的each靜態方法遍歷陣列
$.each(obj,function(value,index){
console.log(index,value);
})
// 原生的forEach方法只能遍歷陣列,不能遍歷偽陣列
obj.forEach(function(value,index){
console.log(index,value);
})
</script>
map方法
<script type="text/javascript">
var arr = [1, 3, 4, 6, 7, 3]
var obj = {
0: 1,
1: 3,
2: 4,
5: 66,
length: 5,
}
// 利用jquery的each靜態方法遍歷陣列
$.map(obj, function(value, index) {
console.log(index * 5, value);
})
// 原生的forEach方法只能遍歷陣列,不能遍歷偽陣列
arr.forEach(function(value, index, array) {
console.log(index, value);
})
</script>
jQuery中的each和map方法的區別
each靜態方法預設的返回值就是遍歷誰就返回誰
map靜態方法預設返回值是一個空陣列
each靜態方法不支援在回撥函式中對遍歷的陣列進行處理
map靜態方法可以在回撥函式中通過return對遍歷的陣列進行處理然後生成新陣列返回
內容選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>內容選擇器</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
div{
width:50px;
height:100px;
background:red;
margin: 10px 0;
}
</style>
<script type="text/javascript">
// :empty作用:找到既沒有文字內容也沒有子元素的指定元素
// var $div=$('div:empty');
// console.log($div);
// :parent作用:找到有文字內容或有子元素的指定元素
// var $div=$('div:parent');
// console.log($div);
// :contains(text)作用:找到包含指定文字內容的指定元素
// var $div=$('div:contains("我是div")');
// console.log($div);
// :has(selector)作用:找到包含指定子元素的指定元素
var $div=$('div:has("span")');
console.log($div);
</script>
</head>
<body>
<div></div>
<div>我是div</div>
<div>它們警告框</div>
<div><span></span></div>
<div><p></p></div>
</body>
</html>
屬性節點
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
$(function() {
// 1.attr(name|pro|key,val|fn)
// 作用:獲取或設定屬性節點的值
// 傳遞一個引數,代表獲取屬性節點的值
// 傳遞兩個引數,代表設定屬性節點的值
// 注意點:無論找到多少個元素,都只會返回第一個元素指定的屬性節點的值
$("span").attr('class', 'box');
console.log($('span').attr('class'));
// 2.removeAttr()
// $('span').removeAttr('class');
$('span').removeAttr('class name');
})
</script>
</head>
<body>
<span class="span1" name="t">
</span>
<span class="span2" name="t2">
</span>
</body>
</html>
prop方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("span").eq(0).prop('demo','test');
$("span").eq(1).prop('demo','sssss');
console.log($('span').prop('demo'));
$('span').removeProp('demo');
// 注意點:prop方法不僅能操作屬性,還能操作屬性節點
$('span').prop('class','prop');
})
</script>
</head>
<body>
<span class="span1" name="t">
</span>
<span class="span2" name="t2">
</span>
</body>
</html>
類操作方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
.class {
width: 100px;
height: 50px;
border: 1px solid black;
margin: 5px;
background-color: brown;
}
.class1 {
width: 100px;
height: 50px;
border: 1px solid #FF0000;
margin: 5px;
background-color: aqua;
}
.class2 {
width: 200px;
height: 100px;
border: 1px solid skyblue;
margin: 10px;
background-color: #87CEEB;
}
.class3 {
width: 300px;
height: 150px;
border: 1px solid greenyellow;
margin: 15px;
background-color: antiquewhite;
}
</style>
<script type="text/javascript">
/*
1.addClass(class|fn)
作用：新增一個類
如果要新增多個，多個類名之間用空格隔開
2.removeClass([class|fn])
作用：刪除一個類,預設刪除當前class
如果想刪除多個，多個類名之間用空格隔開
3.toggleClass(class|fn[,sw])
作用：切換類
有就刪除，沒有就新增
*/
$(function() {
var btns = document.getElementsByTagName('button');
console.log(btns);
btns[0].onclick = function() {
$('div').addClass('class1 class2');
};
btns[1].onclick = function() {
$('div').removeClass();
};
btns[2].onclick = function() {
$('div').toggleClass('class3');
};
});
</script>
</head>
<body>
<button>新增類</button>
<button>刪除類</button>
<button>切換類</button>
<div class="class">54</div>
</body>
</html>
文字值操作方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function() {
var btns = document.getElementsByTagName('button');
btns[0].onclick = function() {
$('div').html('<p>我是一個段落<span>我是span</span></p>');
};
btns[1].onclick = function() {
console.log($('div').html());
};
btns[2].onclick = function() {
$('div').text('<p>我是一個段落<span>我是span</span></p>');
};
btns[3].onclick = function() {
console.log($('div').text());
};
btns[4].onclick = function() {
$('input').val('<p>我是一個段落<span>我是span</span></p>');
};
btns[5].onclick = function() {
console.log($('input').val());
};
});
</script>
</head>
<body>
<button>設定HTML</button>
<button>獲取HTML</button>
<button>設定text</button>
<button>獲取text</button>
<button>設定value</button>
<button>獲取value</button>
<div class="class"></div>
<input type="text">
</body>
</html>
操作樣式方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function() {
// 1.逐個設定
// $('div').css('width',100);
// $('div').css('height',100)
// $('div').css('background','blue');
// 2.鏈式設定
// $('div').css('width','150px').css('height','150px').css('background','red')
// 3.批量設定
$('div').css({
width:'200px',
height:'200px',
background:'green'
});
// 4.獲取css樣式
console.log($('div').css('width'));
});
</script>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
尺寸和位置操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.father{
width:200px;
height:200px;
background:red;
border:50px solid #000;
margin-left: 50px;
position: relative;
}
.son{
width:100px;
height:100px;
background:blue;
position: absolute;
left:50px;
top: 50px;
}
</style>
<script type="text/javascript">
$(function() {
var btns=document.getElementsByTagName('button');
btns[0].onclick=function(){
console.log($('.father').css('width'));
// offset([coordinattes])
// 作用:獲取元素距離視窗的偏移位
console.log($('.son').offset().left);
}
btns[1].onclick=function(){
$('.father').css('width','450px');
$('.son').offset({
'left':10
})
}
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<button type="button">獲取</button>
<button type="button">設定</button>
</body>
</html>
scrollTop方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.scroll{
width: 100px;
height: 100px;
border: 1px solid red;
overflow: auto;
}
</style>
<script type="text/javascript">
$(function() {
var btns=document.getElementsByTagName('button');
btns[0].onclick=function(){
// 獲取滾動的偏移位
console.log($('.scroll').scrollTop());
// 獲取網頁滾動的偏移位
console.log($('body').scrollTop()+$('html').scrollTop());
}
btns[1].onclick=function(){
// 設定滾動的偏移位
$('.scroll').scrollTop(500);
// 設定網頁滾動的偏移位
$('body,html').scrollTop(500);
}
});
</script>
</head>
<body>
<div class='scroll'>我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看</div>
<button type="button">獲取</button>
<button type="button">設定</button>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
事件繫結和解綁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function() {
// jquery中有兩種繫結事件方式
// 1.eventName(fn)
// 編碼效率高/部分事件jquery沒有實現,所以不能新增
$('button:first').click(function(){
alert('hello,world');
});
// 注意點:可以新增多個相同或不同型別的事件,不會覆蓋
// 2.on(eventName,fn);
// 編碼效率略低/所有js事件都可以新增
$('button:last').on('click',function(){
alert('2.on(eventName,fn);');
});
// 滑鼠移入事件
$('button:last').mouseenter(function(){
alert('222.on(eventName,fn);');
});
function test(){
alert('這是手寫的函式');
};
$('button:last').click(test);
// off()如果不傳遞引數,會移除所有的事件
// $('button:last').off();
// off()如果傳遞一個引數,會移除所有指定型別的事件
$('button').off('mouseenter');
// off()如果傳遞兩個引數,會移除所有指定型別的事件
// $('button').off('click',test);
});
</script>
</head>
<body>
<button type="button">我是按鈕</button>
<button type="button">我不是按鈕</button>
</body>
</html>
事件冒泡和預設行為
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.son {
width: 100px;
height: 100px;
background: #0000FF;
}
.father {
width: 200px;
height: 200px;
background: red;
}
</style>
<script type="text/javascript">
$(function(){
// 事件冒泡
$('.son').click(function(event){
alert('我是son');
// return false;
event.stopPropagation();
})
$('.father').click(function(){
alert('我是father');
})
// 預設行為
$('a').click(function(event){
alert('彈出註冊框');
// return false;
event.preventDefault()();
})
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<a href="http://www.baidu.com">註冊</a>
<form action="http://www.taobao.com" method="post">
<input type="text" />
<input type="submit" value=""/>
</form>
</html>
事件自動觸發
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.son {
width: 100px;
height: 100px;
background: #0000FF;
}
.father {
width: 200px;
height: 200px;
background: red;
}
</style>
<script type="text/javascript">
$(function(){
// 使用trigger自動觸發事件,會觸發事件冒泡
$('.son').trigger('click');
// 使用triggerHandler自動觸發事件,不會觸發事件冒泡
// $('.son').triggerHandler('click');
$('input[type="submit"]').click(function(event){
alert('淘寶歡迎您');
})
// 使用trigger自動觸發事件,會觸發預設行為
// $('input[type="submit"]').trigger('click');
// 使用triggerHandler自動觸發事件,不會觸發預設行為
$('input[type="submit"]').triggerHandler('click');
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
事件委託
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.son {
width: 100px;
height: 100px;
background: #0000FF;
}
.father {
width: 200px;
height: 200px;
background: red;
}
</style>
<script type="text/javascript">
$(function(){
// 事件委託是利用事件冒泡，只指定一個事件處理程式來管理某一型別的所有事件。
// $('ul').delegate('li','click',function(){
// console.log($(this).html());
// })
$('ul>li').click(function(){
console.log($(this).html());
})
$('button').on('click',function(){
$('ul').append('<li>我是新增的li</li>')
})
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<ul>
<li>我是1個li</li>
<li>我是2個li</li>
<li>我是3個li</li>
<li>我是4個li</li>
<li>我是5個li</li>
</ul>
<button>新增</button>
</html>
移入移出事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.son {
width: 100px;
height: 100px;
background: #0000FF;
}
.father {
width: 200px;
height: 200px;
background: red;
}
</style>
<script type="text/javascript">
$(function(){
// mouseover/mouseout事件，子元素被移入移出也會觸發父元素的事件
// $('.father').mouseover(function(){
// console.log('移入事件');
// })
// $('.father').mouseout(function(){
// console.log('移出事件');
// })
// 同時監聽移入移出事件
$('.father').hover(function(){
console.log('father移入事件');
},function(){
console.log('father移出事件');
})
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>