jQuery
1.節(jié)點(diǎn)(標(biāo)簽)
- 語法
$(HTML代碼) -- 返回標(biāo)簽對(duì)應(yīng)的jQuery對(duì)象
例如：$("<p id='p1'>我是一個(gè)段落</p>")
- 創(chuàng)建節(jié)點(diǎn)
只創(chuàng)建不添加不會(huì)顯示
<body>
<script type="text/javascript">
aNode = $("<a )
</script>
</body>
- 添加節(jié)點(diǎn)
- jq節(jié)點(diǎn)1.append(jq節(jié)點(diǎn)2) -- 在節(jié)點(diǎn)1中最后添加節(jié)點(diǎn)2
<body>
<script type="text/javascript">
$('#box1').append(aNode)
$('#box1').append($("<img src='img/luffy.jpg'/>"))
</script>
</body>
- jq節(jié)點(diǎn)1.prepend(jq節(jié)點(diǎn)2) -- 在節(jié)點(diǎn)1的最前面添加節(jié)點(diǎn)2
<body>
<script type="text/javascript">
$('#box1').prepend($("<h1>我是標(biāo)題1</h1>"))
</script>
</body>
- 節(jié)點(diǎn)1.before(節(jié)點(diǎn)2) -- 在節(jié)點(diǎn)1的前面插入節(jié)點(diǎn)2
<body>
<script type="text/javascript">
$('#p1').before($("<h1>我是標(biāo)題0</h1>"))
</script>
</body>
- 節(jié)點(diǎn)1.after(節(jié)點(diǎn)2) -- 在節(jié)點(diǎn)1的后面插入節(jié)點(diǎn)2
<body>
<script type="text/javascript">
$('#p1').after($("<h1>我是標(biāo)題2</h1>"))
</script>
</body>
- 刪除節(jié)點(diǎn)
- jq對(duì)象.remove()
<body>
<script type="text/javascript">
$('#box1 p').remove()
$('#box1 p:first').remove() //刪除第一個(gè)
</script>
</body>
- jq對(duì)象.empty() -- 清空指定節(jié)點(diǎn)
<body>
<script type="text/javascript">
$('#box1').empty()
// $('#box1 *').remove() // '#box1 *'選中id是box1中所有的后代
</script>
</body>
2. 屬性操作
- 標(biāo)簽內(nèi)容屬性：innerHTMl社露、innerText、value
- html方法(相當(dāng)于innerHTMl)
節(jié)點(diǎn).html() -- 獲取節(jié)點(diǎn)內(nèi)容
節(jié)點(diǎn).html(值) -- 給節(jié)點(diǎn)的內(nèi)容賦值
<body>
<script type="text/javascript">
console.log($('#box2 #div1').html())
$('#box2 #div1').html("<a )
</script>
</body>
- text()方法(相當(dāng)于innerText)
- val()方法(相當(dāng)于value)
<body>
<script type="text/javascript">
$('#box2 input').val('小明')
</script>
</body>
- 普通屬性
節(jié)點(diǎn).attr(屬性名) -- 獲取指定節(jié)點(diǎn)指定屬性的值
節(jié)點(diǎn).attr(屬性名,值) -- 修改指定節(jié)點(diǎn)直接屬性的值
<body>
<script type="text/javascript">
console.log($('#box2 input').attr('type'))
$('#box2 input').attr('type','password')
</script>
</body>
- class屬性
節(jié)點(diǎn).addclass(值) -- 添加class屬性
//節(jié)點(diǎn).removeclass(值) -- 移除指定的class屬性
<body>
<script type="text/javascript">
$('#h1').addClass('c2')
$('#h1').removeClass('c1')
</script>
</body>
3. 樣式屬性
- 獲取樣式屬性的值
節(jié)點(diǎn).css(樣式屬性名) - 修改樣式屬性的值
節(jié)點(diǎn).css(樣式屬性名, 值)
節(jié)點(diǎn).css(對(duì)象) -- 同時(shí)設(shè)置多種樣式琼娘，就是沒有提示
<body>
<script type="text/javascript">
console.log($('#h1').css('color'))
$('#h1').css('color','pink')
$('#h1').css({
'width':'300px',
'color':'blue'
})
</script>
</body>
4. 事件綁定
- 方式一
節(jié)點(diǎn).on(事件名,函數(shù)) -- (和js中的addEventLinsenner功能一樣)
注意:this是js對(duì)象,evt是jQuery對(duì)象
<body>
<script type="text/javascript">
$('button').on('click', function(evt){
console.log(this)
console.log(evt)
//js
// if(this.innerText == '暫停'){
// this.innerText = '播放'
// }else{
// this.innerText = '暫停'
// }
//jQuery
if($(this).text() == '暫停'){
$(this).text('播放')
}else{
$(this).text('暫停')
}
//evt是事件對(duì)象,不是節(jié)點(diǎn)對(duì)象,所以獲取屬性的時(shí)候以對(duì)象獲取屬性的方式來獲取
console.log(evt.clientX, evt.clientY)
})
</script>
</body>
- 方式二
節(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)的事件
<body>
<script type="text/javascript">
$('box3 input').on('click', function(){
console.log(this)
alert(this.value+'被點(diǎn)擊')
})
$('#box3').append($('<input type="button" value="按鈕3" />'))
</script>
</body>
正確示范：
box3 選擇器
<body>
<script type="text/javascript">
$('#box3').on('click','input',function(){
console.log(this)
alert(this.value+'被點(diǎn)擊')
})
$('#box3').append($('<input type="button" value="按鈕3" />'))
</script>
</body>
Ajax
- 什么是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é)果
})
<body>
<script type="text/javascript">
$.ajax({
type:"get",
url:"https://www.apiopen.top/satinApi?",
data:{type:1,page:1},
async:true,
dataType:'json',
success:function(result){
console.log('成功')
console.log(result)
}
});
</script>
</body>
<body>
<script type="text/javascript">
$.ajax({
type:"get",
url:"https://www.apiopen.top/satinApi?type=1&page=1",
async:true,
dataType:'json',
success:function(result){
console.log('成功')
console.log(result)
}
});
</script>
</body>
