1. jQuery基礎(chǔ)擴(kuò)展
<!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é)點(diǎn)操作===========-->
<div id="box1" style="background-color: yellowgreen;">
<p id="p1">我是段落</p>
</div>
<!--========2.屬性操作==========-->
<div id="box2">
<h1 class="c1" id="h1">我是標(biāo)題0</h1>
<div id="div1">
<h1 class="c1">我是標(biāo)題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é)點(diǎn)(標(biāo)簽)
/*
1)語(yǔ)法:
$(HTML代碼) - 返回標(biāo)簽對(duì)應(yīng)的jQuery對(duì)象
例如: $("<p id='p1'>我是一個(gè)段落</p>")
*/
aNode = $("<a )
//2.添加節(jié)點(diǎn)
//1)jq節(jié)點(diǎn)1.append(jq節(jié)點(diǎn)2) - 在節(jié)點(diǎn)1中的最后添加節(jié)點(diǎn)2
$('#box1').append(aNode)
$('#box1').append($('<img src="img/luffy.jpg"/>'))
//2)節(jié)點(diǎn)1.prepend(節(jié)點(diǎn)2) - 在節(jié)點(diǎn)1的最前面插入節(jié)點(diǎn)2
$('#box1').prepend($('<h1>我是標(biāo)題1</h1>'))
//3)節(jié)點(diǎn)1.before(節(jié)點(diǎn)2) - 在節(jié)點(diǎn)1的前面插入節(jié)點(diǎn)2
$('#p1').before($('<p>我是段落0</p>'))
//4)節(jié)點(diǎn)1.after(節(jié)點(diǎn)2) - 在節(jié)點(diǎn)1的后面插入節(jié)點(diǎn)2
$('#p1').after($('<p>我是段落2</p>'))
//3.刪除標(biāo)簽
//1)jq對(duì)象.remove() - 刪除指定節(jié)點(diǎn)
$('#box1 p').remove()
//2)jq對(duì)象.empty() - 清空指定節(jié)點(diǎn)
$('#box1').empty()
//$('#box1 *').remove() # '#box1 *' 選中id是box1中所有的后代
//2.=============屬性操作===============
//1)標(biāo)簽內(nèi)容屬性: innerHTML徐绑、innerText沪曙、value
//a.html方法(相當(dāng)于innerHTML)
//節(jié)點(diǎn).html() - 獲取節(jié)點(diǎn)內(nèi)容
//節(jié)點(diǎn).html(值) - 給節(jié)點(diǎn)內(nèi)容賦值
//b.text()方法(相當(dāng)于innerText)
console.log($('#box2 #div1').html())
$('#box2 #div1').html('<a )
//c.val()方法(相當(dāng)于value)
$('#box2 input').val('小明')
//2)普通屬性
//節(jié)點(diǎn).attr(屬性名) - 獲取指定節(jié)點(diǎn)指定屬性的值
//節(jié)點(diǎn).attr(屬性名,值) - 修改指定節(jié)點(diǎn)直接屬性的值
console.log($('#box2 input').attr('type'))
$('#box2 input').attr('type', 'password')
//3)class屬性
//節(jié)點(diǎn).addClass(值) - 添加class屬性值
$('#h1').addClass('c2')
//節(jié)點(diǎn).removeClass(值) - 移除指定的class值
$('#h1').removeClass('c1')
//3.==========樣式屬性=============
//1)獲取樣式屬性的值
//節(jié)點(diǎn).css(樣式屬性名)
console.log($('#h1').css('color'))
//2)修改樣式屬性的值
//節(jié)點(diǎn).css(樣式屬性名,值)
$('#h1').css('color', 'deeppink')
$('#h1').css('font-size', '30px')
//節(jié)點(diǎn).css(對(duì)象) - 同時(shí)設(shè)置多種樣式
$('#h1').css({
'width':'300px',
'color':'blue',
'text-decoration': 'underline'
})
console.log($('#h1'))
//4.============事件綁定============
//方法一：直接綁定
//節(jié)點(diǎn).on(事件名,函數(shù)) - (和js中的addEventLinsenner功能一樣)
//注意: this是js對(duì)象巫玻，evt是jQuery對(duì)象
$('button').on('click', function(evt){
console.log(this)
console.log(evt)
//1）this是js對(duì)象
//====js代碼
// if(this.innerText == '暫停'){
// this.innerText = '播放'
// }else{
// this.innerText = '暫停'
// }
//====jQuery代碼
if($(this).text() == '暫停'){
$(this).text('播放')
}else{
$(this).text('暫停')
}
// 2)evt是事件對(duì)象不是節(jié)點(diǎn)對(duì)象薯鼠，所以獲取屬性的時(shí)候以對(duì)象獲取屬性的方式來獲取
console.log(evt.clientX, evt.clientY)
})
//方式二:
//節(jié)點(diǎn).on(事件名,選擇器,函數(shù)) - 給指定節(jié)點(diǎn)綁定指定事件守呜，
// 并且讓節(jié)點(diǎn)中選擇器對(duì)應(yīng)的子標(biāo)簽對(duì)事件做出反應(yīng)
//錯(cuò)誤示范:新添加的標(biāo)簽沒有綁定上對(duì)應(yīng)的事件
/*
$('#box3 input').on('click', function(){
console.log(this)
alert(this.value+'被點(diǎn)擊')
})
$('#box3').append($('<input type="button" value="按鈕3"/>'))
*/
//#box3 選擇器
$('#box3').on('click','input', function(){
console.log(this)
alert(this.value+'被點(diǎn)擊')
})
$('#box3').append($('<input type="button" value="按鈕3"/>'))
</script>
</body>
</html>
2. Ajax請(qǐng)求
<!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就是異步j(luò)s考廉，專門用來提供異步網(wǎng)絡(luò)請(qǐng)求操作
/*
$.ajax({
type:請(qǐng)求方式(get/post),
url:請(qǐng)求地址,
data:請(qǐng)求參數(shù),
async:是否異步,
dataType:返回的數(shù)據(jù)類型
success:請(qǐng)求成功后調(diào)用的函數(shù),函數(shù)的參數(shù)就是請(qǐng)求結(jié)果
})
*/
/*
$.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>
3. 周公解夢(mèng)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
height: 250px;
/*background-color: lightblue;*/
border-bottom: 1px solid rgb(150,150,150);
position: relative;
}
/*盒子*/
#box1 div{
position: absolute;
bottom: 5px;
width: 100%;
text-align: center;
}
/*輸入框*/
#box1 input{
border: 0;
border-bottom: 1px dotted rgb(200,200,200);
width: 300px;
height: 60px;
font-size: 25px;
text-align: center;
vertical-align: bottom;
}
#box1 input:focus{
outline: 0;
}
/*按鈕*/
#box1 button{
width: 100px;
height: 40px;
background-color: orangered;
color: white;
font-size: 20px;
vertical-align: bottom;
}
#box2 p{
/*background-color: yellow;*/
width: 400px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="box1">
<div id="">
<input type="" name="" id="" value="" />
<button>查詢</button>
</div>
</div>
<div id="box2">
<p></p>
</div>
<script type="text/javascript">
//===查詢事件
$('#box1 button').on('click', function(evt){
//1.獲取輸入框中的內(nèi)容
const value = $('#box1 input').val()
//2.網(wǎng)絡(luò)請(qǐng)求
$.ajax({
type:"get",
url:"http://api.tianapi.com/txapi/dream/",
data:{
key:'772a81a51ae5c780251b1f98ea431b84',
word:value
},
async:true,
success:function(result){
let message = result['newslist'][0]['result']
//console.log('===:',message)
$('#box2 p').html(message)
}
});
})
</script>
</body>
</html>
