1，,jQuery补充
<!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>
<script type="text/javascript" src="js/tool.js"></script>
<style type="text/css">
#box div{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id="box">
<div>div1</div>
<p>我是段落1</p>
<div>div2</div>
<p>我是段落2</p>
<div>div3</div>
<p>我是段落3</p>
<div>div4</div>
<p>我是段落4</p>
</div>
</body>
</html>
<script type="text/javascript">
//1.jQuery同时选中多个标签
//a.同时处理 - 直接操作选中的jQuery对象，就是同时操作被选中的所有标签
$('p').css('color', 'seagreen') // 同时设置所有p标签的文字颜色
console.log($('p'))
//同时给所有p标签添加点击事件
// $('p').on('click', function(evt){
// //注意:函数中是this都是js对象
// console.log(this)
// //通过js的方式获取内容
// console.log(this.innerText)
// //通过jq的方式获取内容
// //js转jq： $(js对象) - 将js对象转换成jq对象
// console.log($(this).text())
// })
//因为p标签有多个,pNodes其实是一个容器型的jq对象， 可以通过下标将每个标签一一取出
//注意: 单独取出来的标签都是js对象
pNodes = $('p')
//取指定的标签
console.log(pNodes[0])
console.log(pNodes[1])
//遍历所有标签
for(i=0;i<pNodes.length;i++){
pNode = pNodes[i]
//使用js的方式操作标签
pNode.style.color = 'red'
//使用jq的方式操作标签
$(pNode).css('font-size', '20px')
}
//2.事件绑定
divNodes = $('#box div')
for(i=0;i<divNodes.length;i++){
$(divNodes[i]).css('background-color', randomColor())
}
//a.标签.on(事件名, 回调函数) - 指定的标签发送指定的事件后，自动调用对应的函数(回调函数)
// divNodes.on('click', function(){
// alert(this.innerText)
// })
//(推荐使用！！)
//b.标签.on(事件名, 选择器, 回调函数) - 给父标签添加事件，将事件传递给选择器选中的子标签,函数中的this是子标签
//标签 - 父标签
//选择器 - 在父标签中去选中子标签
$('#box').on('click', 'div', function(evt){
console.log(this)
alert(this.innerText)
})
</script>
2.简单修改标签的层次
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
position: absolute;
}
.layer1{
background-color: red;
top: 100px;
left: 60px;
/*z-index的值越大就越靠上层, 最大就在最上层*/
/*z-index: 3;*/
}
.layer2{
background-color: yellowgreen;
top: 50px;
left: 130px;
/*z-index: 4;*/
}
.layer3{
background-color: yellow;
/*z-index: 1;*/
}
</style>
</head>
<body>
<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var max = 4
$('body').on('click', 'div', function(){
max++
$(this).css('z-index', max)
})
</script>
</body>
</html>
3.城市选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select name="province" id="province">
</select>
<select name="city" id="city">
</select>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var provinceArray = [
{name:'四川省', citys:['成都市','德阳市', '绵阳市', '巴中市', '宜宾市', '达州市']},
{name:'云南省', citys:['昆明', '漓江', '玉溪', '大理', '西双版纳']},
{name:'辽宁省', citys:['沈阳', '大连', '铁岭', '盘锦']}
]
//省
provinceNode = $('#province')
for(i=0;i<provinceArray.length;i++){
provinceObj = provinceArray[i]
tempNode = $('<option>'+provinceObj.name+'</option>')
provinceNode.append(tempNode)
}
//市
cityNode = $('#city')
cityNode.attr('selected')
//设置默认显示的市
for(i=0;i<provinceArray[0].citys.length;i++){
var cityName = provinceArray[0].citys[i]
var tempNode = $('<option>'+cityName+'</option>')
cityNode.append(tempNode)
}
//注意: 下拉菜单切换不同的选项对应的事件是'onchange',
//通过获取下拉菜单的value来获取最新选中的选项的值
provinceNode.on('change', function(evt){
//获取选中的值
var provinceName = $(this).val()
for(i=0;i<provinceArray.length;i++){
var provinceObj = provinceArray[i]
//获取当前选中的省
if(provinceObj.name == provinceName){
//选中的省对应的城市
var cityArray = provinceObj.citys
//清空原来的内容
cityNode.empty()
//创建新的城市对应的option
for(j=0;j<cityArray.length;j++){
var cityName = cityArray[j]
var tempNode = $('<option>'+cityName+'</option>')
cityNode.append(tempNode)
}
break
}
}
})
</script>
</body>
</html>
4.城市选择2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/city.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<select name="" id="省">
</select>
<select name="" id="市">
</select>
<select name="" id="县">
</select>
<script type="text/javascript">
//获取全局下拉菜单标签
var provinceNode = $('#省')
var cityNode = $('#市')
var countyNode = $('#县')
//=============1.默认显示=============
//创建所有的省对应的标签
for(var provinceName in cities){
console.log(provinceName)
var provinceOptionNode = $('<option>'+provinceName+'</option>')
provinceNode.append(provinceOptionNode)
}
//创建市默认对应的标签
for(var cityName in cities['北京']){
var cityOptionNode = $('<option>'+cityName+'</option>')
cityNode.append(cityOptionNode)
}
//创建县默认对应的标签
for(var index in cities['北京']['北京']){
var countyOptionNode = $('<option>'+cities['北京']['北京'][index]+'</option>')
countyNode.append(countyOptionNode)
}
//==============点击切换=============
//1.省下拉菜单添加事件
provinceNode.on('change', function(){
//获取选中的值
var provinceSelectedValue = $(this).val()
//根据选中的省获取对应的市信息
var cityInfo = cities[provinceSelectedValue]
//1.更新市信息
//清空市下拉菜单
cityNode.empty()
//创建选中的省对应的市的标签
for(var cityName in cityInfo){
var cityOptionNode = $('<option>'+cityName+'</option>')
cityNode.append(cityOptionNode)
}
//2.更新县信息
countyNode.empty()
var countyArray = cityInfo[cityNode.val()]
for(var index in countyArray){
var countyName = countyArray[index]
var countyOptionNode = $('<option>'+countyName+'</option>')
countyNode.append(countyOptionNode)
}
})
//2.市下拉菜单添加事件
cityNode.on('change', function(){
var citySelectedVale = $(this).val()
var countyArray = cities[provinceNode.val()][citySelectedVale]
countyNode.empty()
for(index in countyArray){
var countyName = countyArray[index]
var countyOptionNode = $('<option>'+countyName+'</option>')
countyNode.append(countyOptionNode)
}
})
</script>
</body>
</html>
5.按钮切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
button{
width: 150px;
height: 40px;
background-color: rgba(0,0,0,0);
font-size: 25px;
border: 0;
}
button:focus{
outline: 0;
}
#btn1{
color: red;
}
#imgbtn2{
display: none;
}
</style>
</head>
<body>
<div id="">
</div>
<button id="btn1">扫码登录</button>
<button id="btn2">账号登录</button>
<div id="">
<img id="imgbtn1" src="img/picture-1.jpg"/>
<img id="imgbtn2" src="img/picture-2.jpg"/>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--添加事件-->
<script type="text/javascript">
//保存当前选中的按钮的id值
var seletedId = 'btn1'
//给按钮添加点击事件
$('body').on('click', 'button', function(){
//点击的就是选中的按钮
if(this.id == seletedId){
return
}
//更新当前的状态
$(this).css('color', 'red')
$('#img'+this.id).css('display', 'block')
//恢复之前选中的按钮的状态
$('#'+seletedId).css('color', 'black')
$('#img'+seletedId).css('display', 'none')
//更新seletedId
seletedId = this.id
})
</script>
</body>
</html>
.6.Ajax基础
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="getData()">刷新</button>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<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:30},function(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)
}
})
}
//$.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>
