17 jQuery基礎(chǔ)
1.什么是jQuery
jQuey就是javascript 的第一個(gè)第三方庫,主要針對標(biāo)簽進(jìn)行封裝(包括節(jié)點(diǎn)操作,屬性操作,樣式操作,事件等 ), 目的是為了讓js寫起來更快更方便
2.怎么寫jQuery代碼
a.通過script標(biāo)簽導(dǎo)入jQuery文件
b.在jQuery中所有的內(nèi)容都是封裝到j(luò)Query對象中的,jQuery對象可以用$代替
節(jié)點(diǎn)操作
window.onload - 當(dāng)網(wǎng)絡(luò)中的內(nèi)容全部加載成功后觸發(fā)的事件(如果有網(wǎng)絡(luò)圖片,會等圖片加載成功)
$(函數(shù)) - 函數(shù)中的函數(shù)體會等標(biāo)簽全部添加成功后執(zhí)行
1.等待加載完成
a.
window.onload = function(){
}
b.等待頁面中所有的標(biāo)簽添加成功,就會觸發(fā)
完整版 &(document).ready(function(){})
c.簡寫版
$(function(){
//引入inter1 實(shí)現(xiàn)暫停功能
//封裝一個(gè)計(jì)時(shí)器
var inter1;
function timeAction(){
inter1 = window.setInterval(function(){
console.log('?。。?！')
}, 1000);
}
timeAction()
$('#aa').on('click',function(){
//如果在計(jì)時(shí),點(diǎn)擊則停止, inter1 賦值為null表示暫停狀態(tài)
if(inter1){
window.clearInterval(inter1)
inter1 = null
//如果計(jì)時(shí)器是暫停狀態(tài),點(diǎn)擊則重新啟動
}else{
timeAction()
}
});
2獲取節(jié)點(diǎn)操作(選擇器)
a.選擇器直接選擇相應(yīng)的標(biāo)簽
('標(biāo)簽選擇器') - 選擇網(wǎng)頁中所有的指定標(biāo)簽,返回值是jQUery對象,不是數(shù)組
注意:如果選擇器同時(shí)選擇了多個(gè),返回值和選擇一個(gè)的時(shí)候的類型是一樣的
可以通過結(jié)果直接對選中的所有標(biāo)簽一起操作
var divNodes = $("div");
console.log('====',divNodes);
divNodes.css('color','red');
var div11Node = $('#div11');
console.log(div11Node);
console.log($('.cdiv1'))
console.log($('a,p'))
console.log($('#div2 a'))
b.父子選擇器
console.log(('p+a')) - 獲取緊貼著p標(biāo)簽的a標(biāo)簽
console.log(('div:first')) - 第一個(gè)div標(biāo)簽
console.log(('div *:first-child')) 找到所有div標(biāo)簽中的第一個(gè)子標(biāo)簽
3.創(chuàng)建標(biāo)簽
('HTML標(biāo)簽語法') 例如: $('<div style="color: red">我是div</div>')
var imgNode = %20vardivNode%20%3D)
('<div style="ackground-color: #00BFFF; width: 100px; height: 100px;"></div>')
4.添加標(biāo)簽
父標(biāo)簽.append(子標(biāo)簽) - 在父標(biāo)簽的最后面添加子標(biāo)簽
父標(biāo)簽.perpend(子標(biāo)簽) - 在父標(biāo)簽的最前面添加子標(biāo)簽
$('body').append(imgNode)
$('body').prepend(divNode)
$('h1').before($('<h1 style="color:yellowgreen;">我是標(biāo)題0</h1>'))
$('h1').after($('<h2 style="color: slateblue;">我是標(biāo)題22</h2>'))
5.刪除標(biāo)簽
標(biāo)簽.empty() - 清空指定標(biāo)簽
標(biāo)簽.remove() - 刪除指定標(biāo)簽
$('#div2').empty()
$('h1').remove()
6.拷貝和替換(見手冊)
7.動態(tài)添加:
//1.普通屬性的獲取和修改 - 除了innerHTML,innerText以及value
//標(biāo)簽.attr(屬性名) - 獲取指定的屬性值
//標(biāo)簽.attr(屬性名, 值) - 修改/添加屬性
var text1 = $('img').attr('src') // 獲取屬性的值的時(shí)候只獲取被選中標(biāo)簽中的第一個(gè)標(biāo)簽
console.log(text1)
console.log($('a').attr('href'))
$('img').attr('title', '圖片1') // 修改和添加會針對所有選中的標(biāo)簽
//2.標(biāo)簽內(nèi)容屬性
// 雙標(biāo)簽.html()
// 雙標(biāo)簽.text()
// 單標(biāo)簽.val()
//注意：上面的函數(shù)不傳參就是獲取值，傳參就是修改值
console.log($('p').html()) // 取完整代碼
console.log($('p').text()) // 只取文字
console.log($('input').val()) //單標(biāo)簽中的val屬性
$('p').html('我是新的段落') //
$('input').val('請輸入賬號')
//3.class屬性 - HTML中一個(gè)標(biāo)簽可以有多個(gè)class值，多個(gè)值用空格隔開
//標(biāo)簽.addClass(class值) - 給標(biāo)簽添加class值
//標(biāo)簽.removeClass(class值) - 移除標(biāo)簽中指定的class值
$('div').addClass('w')
$('#div1').removeClass('c')
//4.樣式屬性
//a.獲取屬性值
//標(biāo)簽.css(樣式屬性名) - 獲取樣式屬性值
var height = $('p').css('height')
console.log(height)
//b.修改和添加
//標(biāo)簽.css(樣式屬性名, 值) - 修改屬性值
$('p').css('background-color', 'cornflowerblue')
//標(biāo)簽.css({屬性名:值, 屬性名2:值2...}) - 同時(shí)設(shè)置多個(gè)屬性
$('p').css({
"color":"yellow",
'font-size':'30px'
})
//5.事件
//a.標(biāo)簽.on(事件名,回調(diào)函數(shù)) - 給標(biāo)簽綁定指定的事件（和js中的addEventLinsenner一樣）
//事件名不需要要on
$('button:first').on('mouseover',function(){
console.log(this)
//注意: this - js對象, 可以直接js對象的屬性和方法
// $(this) - jQuery對象，可以使用jQuery對象的屬性和方法
// $(js對象) - 將js對象轉(zhuǎn)換成jQuery對象
//this.innerText = '進(jìn)入！'
$(this).text('進(jìn)入~')
});
//b.父標(biāo)簽.on(事件名,選擇器,回調(diào)函數(shù)) - 在父標(biāo)簽上添加事件，傳遞給選擇器對應(yīng)的子標(biāo)簽
//選擇器 - 前面標(biāo)簽的后代標(biāo)簽(子標(biāo)簽/子標(biāo)簽的子標(biāo)簽)
$('#v01').on('click','.v011 .v0111',function(){
console.log(this)
})
ajax的使用
<!--
Ajax(由jQuery封裝的) - asynchronous javascript + xml(異步j(luò)s+xml)
一般用來做網(wǎng)絡(luò)數(shù)據(jù)請求，類似python中requests庫(http請求)
語法：
1.get請求
$.get(url,data,回調(diào)函數(shù),返回?cái)?shù)據(jù)類型)
- url：請求地址（字符串）
- data：參數(shù)列表 (對象)
- 回調(diào)函數(shù)：請求成功后自動調(diào)用的函數(shù)(函數(shù)名，匿名函數(shù))
- 返回?cái)?shù)據(jù)類型：請求到的數(shù)據(jù)的格式(字符串，例如：'json')
2.post請求
$.post(url,data,回調(diào)函數(shù),返回?cái)?shù)據(jù)類型)
- url：請求地址（字符串）
- data：參數(shù)列表 (對象)
- 回調(diào)函數(shù)：請求成功后自動調(diào)用的函數(shù)(函數(shù)名，匿名函數(shù))
- 返回?cái)?shù)據(jù)類型：請求到的數(shù)據(jù)的格式(字符串，例如：'json')
3.ajax
$.ajax({
'url':請求地址,
'data':{參數(shù)名1:值1, 參數(shù)名2:值2}，
'type':'get'/'post',
'dataType':返回?cái)?shù)據(jù)類型,
'success':function(結(jié)果){
請求成功后要做的事情
}
})
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<button>刷新</button><br />
<!--1.get請求-->
<script type="text/javascript">
//1.請求數(shù)據(jù)
var page = 1;
function getData(){
var url = 'https://www.apiopen.top/satinApi'
page++
$.get(url, {'type':'2', 'page':page}, function(re){
//re就是請求結(jié)果
// console.log(re)
var allData = re.data;
for(var x in allData){
var data = allData[x];
var bimageuri = data.profile_image;
var imgNode = $('<img style="width: 100px; height: 100px;"/>').attr('src', bimageuri)
$('body').append(imgNode)
}
});
}
//2.刷新
$('button').on('click',getData);
</script>
</body>
</html>
