网页学习笔记（六）

阅读：评论：0

网页学习笔记（六）

(三十二)Js简介

<script>// js代码写在script标签下// js是一种弱类型// 定义变量var a=1;var b = true;var str = 'hello world!';console.log(str);if(b){console.log('if enter')}var sum =0;for(var i=0;i<100;i++){sum += 100;}console.log(sum)// 数组var arr = [1,2,3,4,5];for(var i=0;i<arr.length;i++){console.log(arr[i])}// 使用api 遍历 数组arr.forEach(function(v,i){console.log(v)console.log(i)})// 定义函数function f1(){console.log('f1')}function f2(a,b){return a+b;}console.log(f2(1,2))// 在js中 函数也是一个对象 所以可以函数嵌套函数function f3(){var a =1 ;function b(){console.log(a)}}</script>

(三十三)Js对象

1.定义对象-字面量的方式

// 字面量的方式 定义一个对象var obj = {name:"悟空",age:1500,address:'花果山',nick:'美猴王',wife:{name:'紫霞仙子',address:'西方极乐世界'},skill:function(){console.log('72变！！')},// 方法简写 es6say(){console.log('俺老孙来也！！')},son:{name:'孙悟饭',age:12,address:'日本'},brother:{name:'八戒',wife:{address:'address',name:'高小姐'}}}

2.遍历对象

for(key in obj){console.log(obj[key])
}

3.调用对象中的方法

// 调用对象中的方法
obj.say();

4.增删改查

// 添加新的
obj.master ={name:'三藏法师',address:'长安'
}
// 修改
obj.name = "孙行者";
// 查询
console.log(obj.name)
console.log(obj['name'])
// 删除
delete obj.wifi

(三十四)Dom简介

如何用dom操作 style、css、获取键盘输入？

<style>.green{background-color: green;}
</style><div id="box">hello</div>
<button id="btn">button</button>

用dom操作 style、css、获取键盘输入：

<script>//js 操作  元素需要通过 DOM// DOM document object model 文档对象模型//浏览器会将 网页解析成一个一个对象//获取元素var box =  ElementById('box');// 通过style设置box.style = "color : red;width:100px;border: 1px solid black;height:100px"//通过class 来设置样式box.classList.add('green');console.log(box)var btn = ElementById('btn');lick = function(){alert('click!')}// 键盘时间// 系统会自动传入一个事件对象keydown = function(e){console.log(e.keyCode)}//dir 将对象的目录结构打印出来console.dir(document)
</script>

(三十五)jQuery模拟请求

$.get 请求web数据

//参数1请求的url路径
// 参数2 请求成功后的回掉函数（成功后回掉）

<div id="box">mycontent
</div><!-- 从外部引入 js -->
<!-- 引入的script里面不要写代码  会忽略！ -->
<script src="./zepton.js"></script>
<script>// jQuery 随用随找//jQuery 可以链式调用（返回的也是一个jQuery对象）console.log($)console.log( $('#box'))$('#box').css({'color':'red','font-size':'22px'})var obj ={name:"孙悟空",age:1500}// 发送 ajax Asynchronous Javascript And XML// 现在使用的都是 jsonvar res1 = JSON.stringify(obj);console.log(res1)// get  请求  //参数1请求的url路径// 参数2 请求成功后 的回掉函数（成功后回掉）// ``  反撇号 字符串模版（可以在字符串中插入变量）$.get(`=1&area=96&initial=b`,function(res){console.log(res)})
</script>

网易云音乐案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网易云 音乐搜索</title><style>.header{width: 300px;margin:0 auto;}img{width: 100px;height: 100px;}.item{text-align: center;width: 150px;height: 150px;padding-top: 10px;border-radius: 10px;box-shadow:0 0 10px black;}.box{width: 1000px;margin: 20px auto;border: 1px solid black;/* 弹性布局 */display: flex;justify-content: space-around;/* 默认不会折行 */flex-wrap: wrap;}</style>
</head>
<body><div class="header"><button type="-1">全部歌手</button><button type="1">男歌手</button><button type="2">女歌手</button><button type="3">组合</button></div><div class="box"></div>
</body>
<script src="./zepton.js"></script>
<script>//当点击按钮  更具type类型请求$('button').live('click',function(){console.log($(this))   //.get(0) 返回的是dom对象//attr 获取属性值var type = $(this).attr("type");console.log(type)$.get(`=${type}&area=96&initial=b`,function(res){console.log(res)var arr = res.artists// 将数据渲染到页面中// 使用字符串模板拼接var str = '';for(let i=0;i<arr.length;i++){str += `<div class="item"><img src=${arr[i].picUrl}><p>${arr[i].name}</p></div>`;$('.box').html(str)}})})
</script>
</html>