jQuery基礎之選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1.導入jQuery-->
<!--導入本地jQuery文件-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--企業(yè)開發(fā)-->
<!--<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
</head>
<body>
<script type="text/javascript">
//1.什么是jQuery
/*
jQuery本質就是js诵闭，它是為了能夠更方便的使用js而封裝的一個庫
如果想要使用jQuery必須先導入jQuery的js文件
js可以將任何內(nèi)容轉換js對象疏尿，例如:document褥琐、節(jié)點敌呈、事件對象
jQuery提供的方法只支持jQuery對象
在jQuery中$代表jQuery, $() -> 創(chuàng)建jQuery對象的語法
document -> js對象磕洪； $(document) -> jQuery對象
*/
//2.ready方法 - 等待網(wǎng)頁中內(nèi)容加載完成
/*
和onload功能一樣
$(document).ready(function(){
頁面加載完成后才會執(zhí)行的代碼
})
簡寫:
$(function(){
頁面加載完成后才會執(zhí)行的代碼
})
*/
// $(document).ready(function(){
//
// pNode = document.getElementById('p1')
// console.log(pNode)
// })
$(function(){
pNode = document.getElementById('p1')
console.log(pNode)
})
</script>
<p id="p1">我是段落1</p>
<div id="div1">
<p class="cp1">我是段落2</p>
<div id="div2">
<a href="">我是超鏈接</a>
<p>我是段落3</p>
<p>我是段落4</p>
<span id="">
<p>我是段落5</p>
</span>
<p>我是段落6</p>
</div>
</div>
<p class="cp1">我是段落2</p>
<script type="text/javascript">
//3.DOM操作
//1)獲取節(jié)點
/*
語法: $(選擇器)
說明: 選擇器 - 和CSS中的選擇器一樣
a.普通選擇器: 和css一樣的
*/
var pNode = $('#p1')
console.log(pNode)
pNode.text('新的段落1')
pNodes = $('.cp1')
console.log(pNodes)
pNodes.text('新的段落2')
for(x=0;x<pNodes.length;x++){
//遍歷取出來的是js對象
const p = pNodes[x]
// $(p).text(x)
}
pNode = $('div p')
console.log('===:',pNode)
/*
b.其他特殊情況
選擇器1>選擇器2 - 選中選擇器中的選擇器2對應的直系子標簽
選擇器1+選擇器2 - 選中緊跟著選擇器1的選擇器2(選擇器1和選擇器2對應的標簽必須是兄弟關系)
選擇器~選擇器2 - 選中離選擇器1最近的選擇器2(選擇器1和選擇器2對應的標簽必須是兄弟關系)
選擇器:first - 第一個選擇器
選擇器:last - 最后一個選擇器
選擇器>*:first-child - 選中選擇器中第一個子標簽
選擇器 *:first-child - 選中選擇器中第一個子標簽
*/
pNode = $('div>p')
console.log('===:',pNode)
pNode = $('#p1 + div')
console.log('===:',pNode)
pNode = $('#p1~p')
console.log('===:',pNode)
pNode = $('p:first')
console.log('===:',pNode)
pNode = $('#div2>p:first')
console.log('===:',pNode)
pNode = $('#div2>p:last')
console.log('===:',pNode)
var xNode = $('#div2>*:first-child')
console.log('===:',xNode)
</script>
</body>
</html>
jQuery節(jié)點操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.c1{
color: red;
}
.c2{
background-color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<!--=========1.節(jié)點操作===========-->
<div id="box1" style="background-color: yellowgreen;">
<p id="p1">我是段落</p>
</div>
<!--========2.屬性操作==========-->
<div id="box2">
<h1 class="c1" id="h1">我是標題0</h1>
<div id="div1">
<h1 class="c1">我是標題1</h1>
</div>
<div id="div2"></div>
<input class="c1" type="text" name="" id="" value="" />
</div>
<!--========3.事件綁定=========-->
<button>暫停</button>
<div id="box3">
<input type="button" name="" id="" value="按鈕1" />
<input type="button" name="" id="" value="按鈕2" />
</div>
<script type="text/javascript">
//1.創(chuàng)建節(jié)點(標簽)
/*
1)語法:
$(HTML代碼) - 返回標簽對應的jQuery對象
例如: $("<p id='p1'>我是一個段落</p>")
*/
aNode = $("<a )
//2.添加節(jié)點
//1)jq節(jié)點1.append(jq節(jié)點2) - 在節(jié)點1中的最后添加節(jié)點2
$('#box1').append(aNode)
$('#box1').append($('<img src="img/luffy.jpg"/>'))
//2)節(jié)點1.prepend(節(jié)點2) - 在節(jié)點1的最前面插入節(jié)點2
$('#box1').prepend($('<h1>我是標題1</h1>'))
//3)節(jié)點1.before(節(jié)點2) - 在節(jié)點1的前面插入節(jié)點2
$('#p1').before($('<p>我是段落0</p>'))
//4)節(jié)點1.after(節(jié)點2) - 在節(jié)點1的后面插入節(jié)點2
$('#p1').after($('<p>我是段落2</p>'))
//3.刪除標簽
//1)jq對象.remove() - 刪除指定節(jié)點
$('#box1 p').remove()
//2)jq對象.empty() - 清空指定節(jié)點
$('#box1').empty()
//$('#box1 *').remove() # '#box1 *' 選中id是box1中所有的后代
//2.=============屬性操作===============
//1)標簽內(nèi)容屬性: innerHTML锦聊、innerText、value
//a.html方法(相當于innerHTML)
//節(jié)點.html() - 獲取節(jié)點內(nèi)容
//節(jié)點.html(值) - 給節(jié)點內(nèi)容賦值
//b.text()方法(相當于innerText)
console.log($('#box2 #div1').html())
$('#box2 #div1').html('<a )
//c.val()方法(相當于value)
$('#box2 input').val('小明')
//2)普通屬性
//節(jié)點.attr(屬性名) - 獲取指定節(jié)點指定屬性的值
//節(jié)點.attr(屬性名,值) - 修改指定節(jié)點直接屬性的值
console.log($('#box2 input').attr('type'))
$('#box2 input').attr('type', 'password')
//3)class屬性
//節(jié)點.addClass(值) - 添加class屬性值
$('#h1').addClass('c2')
//節(jié)點.removeClass(值) - 移除指定的class值
$('#h1').removeClass('c1')
//3.==========樣式屬性=============
//1)獲取樣式屬性的值
//節(jié)點.css(樣式屬性名)
console.log($('#h1').css('color'))
//2)修改樣式屬性的值
//節(jié)點.css(樣式屬性名,值)
$('#h1').css('color', 'deeppink')
$('#h1').css('font-size', '30px')
//節(jié)點.css(對象) - 同時設置多種樣式
$('#h1').css({
'width':'300px',
'color':'blue',
'text-decoration': 'underline'
})
console.log($('#h1'))
//4.============事件綁定============
//方法一：直接綁定
//節(jié)點.on(事件名,函數(shù)) - (和js中的addEventLinsenner功能一樣)
//注意: this是js對象，evt是jQuery對象
$('button').on('click', function(evt){
console.log(this)
console.log(evt)
//1）this是js對象
//====js代碼
// if(this.innerText == '暫停'){
// this.innerText = '播放'
// }else{
// this.innerText = '暫停'
// }
//====jQuery代碼
if($(this).text() == '暫停'){
$(this).text('播放')
}else{
$(this).text('暫停')
}
// 2)evt是事件對象不是節(jié)點對象，所以獲取屬性的時候以對象獲取屬性的方式來獲取
console.log(evt.clientX, evt.clientY)
})
//方式二:
//節(jié)點.on(事件名,選擇器,函數(shù)) - 給指定節(jié)點綁定指定事件抽诉，
// 并且讓節(jié)點中選擇器對應的子標簽對事件做出反應
//錯誤示范:新添加的標簽沒有綁定上對應的事件
/*
$('#box3 input').on('click', function(){
console.log(this)
alert(this.value+'被點擊')
})
$('#box3').append($('<input type="button" value="按鈕3"/>'))
*/
//#box3 選擇器
$('#box3').on('click','input', function(){
console.log(this)
alert(this.value+'被點擊')
})
$('#box3').append($('<input type="button" value="按鈕3"/>'))
</script>
</body>
</html>
ajax請求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
//1.什么是Ajax
//Ajax就是異步js迹淌，專門用來提供異步網(wǎng)絡請求操作
/*
$.ajax({
type:請求方式(get/post),
url:請求地址,
data:請求參數(shù),
async:是否異步,
dataType:返回的數(shù)據(jù)類型
success:請求成功后調(diào)用的函數(shù),函數(shù)的參數(shù)就是請求結果
})
*/
/*
$.ajax({
type:"get",
url:"https://www.apiopen.top/satinApi",
data:{type:1,page:1},
async:true,
dataType:'json',
success:function(result){
console.log(typeof(result))
console.log(result)
}
});*/
$.ajax({
type:"get",
url:"http://rap2api.taobao.org/app/mock/177073/getShoppingCartList",
async:true,
dataType:'json',
success:function(result){
console.log(typeof(result))
console.log(result)
}
});
</script>
</body>
</html>
