第028篇：jQuery
2019-12-12 本文已影响0人
yydafx
开始之前
1.什么是jQuery
jQuery本质就是一个用js封装的库，里面封装了很多方法和对象让网页开发更简单
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) 可以通过: $(节点) - 将js中的节点转换成jQuery对象;
3) jQuery对象的本质就是容器型数据类型的数据，容器中的元素是节点;
直接操作jQuery对象会作用于这个对象中所有节点对应的元素
1、节点操作
1)创建节点
$('HTML创建标签的语法')
2)添加节点
节点对象1.append(节点对象2)：在节点对象1的最后添加节点对象2（对象都是jQuery对象）
节点对象1.prepend(节点对象2)：在节点对象1的最前面添加节点对象2
节点对象1.before(节点对象2)：在节点对象1的前面插入节点对象2
节点对象1.after(节点对象2)：在节点对象1的后面插入节点对象2
3)删除节点
节点对象.remove()：删除指定节点对象
节点对象.empty()：删除节点对象中所有的子节点
4)拷贝节点
节点对象.clone()
<div id="div1">
<h1>我是标题1</h1>
<h1>我是标题2</h1>
</div>
<!----------1.创建节点: $('HTML创建标签的语法')------------>
<script type="text/javascript">
//创建p标签
var pNodes = $('<p>我是段落1</p>')
console.log(pNodes)
var divNodes = $('<div><a>我是超链接1</a><img title="熊" src="img/bear.png"></div>')
</script>
<!---------------2.添加节点-------------------->
<script type="text/javascript">
//1)节点对象1.append(节点对象2) - 在节点对象1的最后添加节点对象2（对象都是jQuery对象）
$('#div1').append(pNodes)
//2)节点对象1.prepend(节点对象2) - 在节点对象1的最前面添加节点对象2
$('#div1').prepend(divNodes)
//3)节点对象1.before(节点对象2) - 在节点对象1的前面插入节点对象2
$('#div1 h1:last').before($('<input placeholder="请输入账号"/>'))
//4)节点对象1.after(节点对象2) - 在节点对象1的后面插入节点对象2
$('#div1 h1:first').after($('<input id="in1" type="radio" /><label for="in1">男</label>'))
</script>
<!----------------3.删除节点-------------------->
<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) 节点对象.remove() - 删除指定节点对象
$('#div2 a').remove()
// $('#div2 p').remove()
// $('#div2 p').append($('<input type="color"/>'))
//2)节点对象.empty() - 删除节点对象中所有的子节点
$('#div2').empty()
</script>
<!-----------------4.拷贝节点------------------>
<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）节点对象.clone()/节点对象.clone(false) - 标签深拷贝，jQuery绑定的事件不拷贝
// 节点对象.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对象
节点对象.on(事件名, 事件驱动程序)：直接给指定的节点绑定对象
节点对象.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)节点对象.on(事件名,事件驱动程序) - 直接给指定的节点绑定事件
//注意: 事件名要去掉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)节点对象.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>
