01jQuery补充
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js">
</script>
<script type="text/javascript" src="js/tool.js">
</script>
<style type="text/css">
#box div{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<div id="box">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
</div>
</body>
<script type="text/javascript">
//1.jQuery同时选中多个标签
//a.同时处理 - 直接操作选中的jQuery对象，就是同时操作被选中的所有标签
$('p').css('color', 'red') // 同时设置所有p标签的文字颜色
console.log($('p'))
//同时给所有p标签添加点击事件
$('p').on('click', function(){
//注意：函数中的this都是js对象
console.log(this)
//通过js的方式获取内容
console.log(this.innerText)
//通过jQuery的方式获取内容
//js转jQuery： $(js对象) - 将js对象转换成jQuery对象
console.log($(this).text())
})
//因为p标签有多个，pNodes其实是一个容器型的jQuery对象，可以通过下标将每个标签一一取出
//注意：单独取出来的标签都是js对象
pNodes = $('p')
//取指定的标签
console.log(pNodes[0])
console.log(pNodes[1])
//遍历所有标签
for(i=0;i<pNodes.length;i++){
console.log(pNodes[i])
pNode = pNodes[i]
//使用js的方式操作标签
pNode.style.color = 'blue'
//使用jQuery方式操作标签
$(pNode).css('font-size','20px')
}
//2.事件绑定
divNodes = $('#box div')
for(i=0;i<divNodes.length;i++){
$(divNodes[i]).css('background-color',randomColor())
}
//a. 标签.on(事件名，回调函数) - 指定的标签发生指定的事件后，自动调用对应的函数(回调函数)
// $('#box').on('click',function(evt){
// console.log(this)
// alert(this.innerText)
// })
//推荐使用！！！
//b. 标签.on(事件名，选择器，回调函数) - 给父标签添加事件，将事件传递给指定的选择器选中的子标签，函数中的this是子标签
//标签 - 父标签
//选择器 - 在父标签中去选中子标签
$('#box').on('click','div',function(evt){
console.log(this)
alert(this.innerText)
})
</script>
</html>
02Ajax基础
主要是get/post进行网络请求获取数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js">
</script>
</head>
<body>
<button onclick="getData()">图片</button>
<!--<button onclick="getDuanzi">段子</button>-->
</body>
<script type="text/javascript">
//1.什么是Ajax
//A - asynchronous ja - javascript x - xml (异步js+xml)
//Ajax类似于python中的requests第三方库，专门提供js中的网络请求功能(http请求)
//2.使用方法
//1) $.get/post(url,data,fn,type) - 获取url接口提供的数据(get的接口)
//url - 请求地址(字符串)
//data - 参数(对象)
//fn - 回调函数(函数)，请求结束后，会自动调用这个函数;这个函数的参数就是请求结果
//type -返回数据的类型(字符串，例如：json，html，text...)
//http://api.tianapi.com/meinv/?key=772a81a51ae5c780251b1f98ea431b84&num=10
function getData(){
$.get('http://api.tianapi.com/meinv/',{key:'772a81a51ae5c780251b1f98ea431b84',num:10},function(result){
console.log(result)
var newsLists = result['newslist']
for(i=0;i<newsLists.length;i++){
news = newsLists[i]
imgNode = $("<img style='width: 200px;height: 200px;' />")
imgNode.attr('src',news['picUrl'])
$('body').append(imgNode)
}
},'json')
}
//获取profile_image 和 name
//https://www.apiopen.top/satinApi?type=1&page=1
$.get('https://www.apiopen.top/satinApi',{type:1,page:1},function(result){
var datas = result['data']
for(i=0;i<datas.length;i++){
var data = datas[i]
//创建图片标签
var imgNode = $('<img />')
imgNode.attr('src',data['profile_image'])
//创建p标签
var pNode1 = $('<p></p>')
pNode1.text(data['name'])
var pNode2 = $('<p></p>')
pNode2.text(data['text'])
//添加到网页
$('body').append(imgNode)
$('body').append(pNode1)
$('body').append(pNode2)
}
},'json')
//$.ajax({url：请求地址,type：'get'/'post',async:是否异步,success:回调函数,data:参数对象})
$.ajax({
type:"get",
url:"http://api.tianapi.com/meinv/",
data:{key:'772a81a51ae5c780251b1f98ea431b84',num:10},
async:true,
success:function(result){
console.log(result)
}
});
</script>
</html>
03拖动方块移动
注意移动的时候position的位置要怎样改变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
position: absolute;
}
#div1{
background-color: palevioletred;
left: 50px;
top: 20px;
z-index: 0;
}
#div2{
background-color: greenyellow;
top: 50px;
left: 30px;
z-index: 1;
}
#div3{
background-color: dodgerblue;
z-index: 2;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script type="text/javascript" src="js/jquery.min.js">
</script>
<script type="text/javascript">
bodyNode = $('body')
//鼠标按下事件
var z = 3
bodyNode.on('mousedown','div',function(evt){
console.log('鼠标按下')
//鼠标按下，让this处于最上层
z++
$(this).css('z-index',z)
//获取鼠标的位置
var mouseX1 = evt.clientX
var mouseY1 = evt.clientY
//获取this的position的数值
var x = this.offsetLeft
var y = this.offsetTop
//鼠标移动事件
this.onmousemove = function(evt){
//获取鼠标的位置
var mouseX2 = evt.clientX
var mouseY2 = evt.clientY
//鼠标移动的时候修改this的position的值
this.style.left = mouseX2-mouseX1+x+'px'
this.style.top = mouseY2-mouseY1+y+'px'
}
})
//鼠标弹起移动鼠标无效
bodyNode.on('mouseup','div',function(evt){
this.onmousemove = null
console.log('鼠标弹起')
})
</script>
</body>
</html>
网友评论