開始之前
1.什么是jQuery
jQuery本質就是一個用js封裝的庫，里面封裝了很多方法和對象讓網頁開發(fā)更簡單
jQuery是通過jQuery對象來提供功能
2.怎么導入jQuery
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
3.怎么使用jQuery
1) 在jQuery中$可以看成是jQuery類, $()就是jQuery對象;
2) 可以通過: $(節(jié)點) - 將js中的節(jié)點轉換成jQuery對象;
3) jQuery對象的本質就是容器型數據類型的數據，容器中的元素是節(jié)點;
直接操作jQuery對象會作用于這個對象中所有節(jié)點對應的元素
1、節(jié)點操作
1)創(chuàng)建節(jié)點
?$('HTML創(chuàng)建標簽的語法')
2)添加節(jié)點
?節(jié)點對象1.append(節(jié)點對象2)：在節(jié)點對象1的最后添加節(jié)點對象2（對象都是jQuery對象）
?節(jié)點對象1.prepend(節(jié)點對象2)：在節(jié)點對象1的最前面添加節(jié)點對象2
?節(jié)點對象1.before(節(jié)點對象2)：在節(jié)點對象1的前面插入節(jié)點對象2
?節(jié)點對象1.after(節(jié)點對象2)：在節(jié)點對象1的后面插入節(jié)點對象2
3)刪除節(jié)點
?節(jié)點對象.remove()：刪除指定節(jié)點對象
?節(jié)點對象.empty()：刪除節(jié)點對象中所有的子節(jié)點
4)拷貝節(jié)點
節(jié)點對象.clone()
<div id="div1">
<h1>我是標題1</h1>
<h1>我是標題2</h1>
</div>
<!----------1.創(chuàng)建節(jié)點: $('HTML創(chuàng)建標簽的語法')------------>
<script type="text/javascript">
//創(chuàng)建p標簽
var pNodes = $('<p>我是段落1</p>')
console.log(pNodes)
var divNodes = $('<div><a>我是超鏈接1</a><img title="熊" src="img/bear.png"></div>')
</script>
<!---------------2.添加節(jié)點-------------------->
<script type="text/javascript">
//1)節(jié)點對象1.append(節(jié)點對象2) - 在節(jié)點對象1的最后添加節(jié)點對象2（對象都是jQuery對象）
$('#div1').append(pNodes)
//2)節(jié)點對象1.prepend(節(jié)點對象2) - 在節(jié)點對象1的最前面添加節(jié)點對象2
$('#div1').prepend(divNodes)
//3)節(jié)點對象1.before(節(jié)點對象2) - 在節(jié)點對象1的前面插入節(jié)點對象2
$('#div1 h1:last').before($('<input placeholder="請輸入賬號"/>'))
//4)節(jié)點對象1.after(節(jié)點對象2) - 在節(jié)點對象1的后面插入節(jié)點對象2
$('#div1 h1:first').after($('<input id="in1" type="radio" /><label for="in1">男</label>'))
</script>
<!----------------3.刪除節(jié)點-------------------->
<hr />
<div id="div2">
<p>我是段落2</p>
<a href="">我是超鏈接2</a>
<img src="img/hat.png"/>
<p>我是段落3</p>
</div>
<script type="text/javascript">
//1) 節(jié)點對象.remove() - 刪除指定節(jié)點對象
$('#div2 a').remove()
// $('#div2 p').remove()
// $('#div2 p').append($('<input type="color"/>'))
//2)節(jié)點對象.empty() - 刪除節(jié)點對象中所有的子節(jié)點
$('#div2').empty()
</script>
<!-----------------4.拷貝節(jié)點------------------>
<hr />
<div id="div3" style="background-color: seagreen; width: 300px; height: 200px;">
<p>我是段落4</p>
<img src="img/bucket.png"/>
</div>
<script type="text/javascript">
$('#div3').on('click', function(){
alert('你好!')
})
//1）節(jié)點對象.clone()/節(jié)點對象.clone(false) - 標簽深拷貝，jQuery綁定的事件不拷貝
// 節(jié)點對象.clone(true) - 標簽深拷貝，jQuery綁定的事件也拷貝
var newDiv3s = $('#div3').clone()
$('#div3').after(newDiv3s)
//補充: js對象和jQuery對象的相互轉換
//jQuery對象 轉 js對象 - 取出jQuery對象容器中的元素
//js對象 轉 jQuery對象 - $(js對象)
var div3Node = $('#div3')[0].cloneNode()
$('#div3').before($(div3Node))
</script>
2、屬性操作
1)特殊屬性
?text(),html()/text('標簽內容'),html('標簽內容')：獲取/修改標簽內容
?val()/val('屬性值')：獲取/修改value屬性
?addClass(class名)：添加class屬性
?removeClass(class名)：移除class屬性
2)樣式屬性
?css(樣式屬性名)：獲取樣式的指點屬性值
?css(樣式屬性名,樣式屬性值)：設置指定樣式的值
?css(對象)：同時設置多個屬性值 --> 值需要加引號，用逗號隔開(屬性名加引號用css命名方式，不加引號需要駝峰式命名)
3)普通屬性
?attr(屬性名)：獲取指定屬性值
?attr(屬性名, 值)：修改指定屬性的值
<p id="p1">我是段落1</p>
<input type="" name="" id="" value="張三" />
<p id="p2">我是段落2</p>
<p id="p3">我是段落3</p>
<!------------1.特殊屬性-------------->
<script type="text/javascript">
//1)標簽內容: text(), html()
//獲取標簽內容
console.log($('#p1').text(), $('#p1').html())
//修改標簽內容
$('#p1').text('我是jQuery')
$('#p1').html('1.<a href="">我是jQuery</a>')
//2)value屬性: val()
console.log($('input').val())
$('input').val('李四')
//3)class屬性
//addClass(class值) - 添加class
$('input').addClass('c1')
$('input').addClass('c2')
//removeClass(class值) - 移除指定class
$('input').removeClass('c1')
</script>
<!------------2.樣式屬性-------------->
<script type="text/javascript">
//1)css(樣式屬性名) - 獲取樣式指定屬性的值
// css(樣式屬性名,樣式屬性值) - 設置指定樣式屬性的值
//注意: 這兒的屬性名和css屬性名一致
$('#p2').css('color', 'red')
$('#p2').css('font-size', '30px')
console.log($('#p2').css('color'))
//2)css(對象) - 同時設置多個屬性
/*
css({
屬性名1: 值1,
屬性名2: 值2,
屬性名3: 值3,
....
})
注意: 屬性名不加引號是css屬性名采用駝峰式命名； 加引號還是可以用css屬性名
*/
$('#p3').css({
'color':'red',
'font-size': '30px',
'backgroundColor': 'yellow'
})
</script>
<img src="img/anchor.png"/>
<!------------3.普通屬性-------------->
<script type="text/javascript">
//1)attr(屬性名) - 獲取指定屬性值
// attr(屬性名, 值) - 修改指定屬性的值
console.log($('img').attr('src'))
$('img').attr('src', 'img/bear.png')
$('img').attr('title', '熊')
</script>
3、事件綁定
?這兒的this是事件源；但是是js對象
?節(jié)點對象.on(事件名, 事件驅動程序)：直接給指定的節(jié)點綁定對象
?節(jié)點對象.on(事件名, 選擇器, 事件驅動程序)：通過父標簽給選擇器選中的子標簽綁定事件
<div id="div1">
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
</div>
<button id="addBtn">添加</button>
<hr />
<div id="div2" style="background-color: yellow;">
<!--<p>我是段落1</p>-->
<button>按鈕4</button>
<button>按鈕5</button>
<!--<p>我是段落2</p>-->
<button>按鈕6</button>
</div>
<button id="addBtn2">添加</button>
<!---------1.事件綁定-------------->
<script type="text/javascript">
//1)節(jié)點對象.on(事件名,事件驅動程序) - 直接給指定的節(jié)點綁定事件
//注意: 事件名要去掉on
$('#div1>button').on('click', function(evt){
//注意: 這兒的this是事件源，但是是js的對象
console.log(this)
$(this).css('color', 'red')
//事件捕獲：和js一樣
evt.stopPropagation()
})
console.log($('button').text()) // 按鈕1按鈕2按鈕3
$('#addBtn').on('click', function(){
$('#div1').append($('<button>新按鈕</button>'))
})
//2)節(jié)點對象.on(事件名,選擇器,事件驅動程序) - 通過父標簽給選擇器選中的子標簽綁定事件
$('#div2').on('click', 'button',function(){
alert('按鈕點擊')
console.log(this)
})
$('#addBtn2').on('click', function(){
$('#div2').append($('<button>新按鈕</button>'))
})
</script>
4、Ajax基本使用
$.ajax({
url:數據接口地址,
type:請求方式(get/post),
data:請求數據/參數(客戶端傳遞給服務器的數據, 值是對象),
success:請求成功的回調函數(函數),
error:請求失敗的回調函數
})
<div id="box">
</div>
<script type="text/javascript">
//1.ajax
/*
$.ajax({
url:數據接口地址,
type:請求方式(get/post),
data:請求數據/參數(客戶端傳遞給服務器的數據, 值是對象),
success:請求成功的回調函數(函數),
error:請求失敗的回調函數
})
*/
$.ajax({
type:"get",
url:"http://rap2api.taobao.org/app/mock/233723/shopping",
data:{username:'小明', password:'123456'},
success:function(result){
console.log('請求成功！')
console.log(result)
for(var goods of result.data){
var name = goods.name
$('#box').append($('<p>'+name+'</p>'))
$('#box').append($('<img src="'+goods.goods_image+'" />'))
}
},
error: function(){
console.log('請求失敗')
}
});
$.get("http://rap2api.taobao.org/app/mock/233723/shopping", {username:'小明', password:'123456'}, function(result){
console.log('=====:', result)
})
</script>
