Python+大数据-Python进阶(三)
1.JavaScript
1.1JavaScript的介绍
-
前端开发三大块
1、HTML：负责网页结构
2、CSS：负责网页样式
3、JavaScript：负责网页行为， 比如:网页与用户的交互效果
-
JavaScript的使用方式有三种，分别是:
- 行内式
- 内嵌式
- 外链式
- js中有六种数据类型，分别是:
- number
- string
- boolean
- undefined
- null
- object
1.2 函数的定义及使用
- 函数的定义
function 函数名(参数[参数可选]){
// 函数的代码实现
...
}
2.函数的调用
函数名(参数[参数可选])
- 局部变量只能在函数内部使用
- 全局变量可以在不同函数内使用
| 比较运算符 | 描述 | 例子 |
|---|---|---|
| == | 等于 | x == 8 为 false |
| === | 全等(值和类型) | x === 5 为 true; x === “5” 为 false |
| != | 不等于 | x != 8 为 true |
| > | 大于 | x > 8 为 false |
| < | 小于 | x < 8 为 true |
| >= | 大于或等于 | x >= 8 为 false |
| <= | 小于或等于 | x <= 8 为 true |
| 比较运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x5 || y5) 为 false |
| ! | not | !(x==y) 为 true |
- 条件语句三种写法
- if 语句 适用于单条件判断
- if else 语句 适用于两种条件的判断(成立和不成立条件判断)。
- if else if else 语句 适用于多条件判断
1.3 数组及其操作方法
- 数组的定义使用一对中括号
- 获取数组的长度使用length属性
- 从数组最后添加元素使用push方法
- 从数组最后删除元素使用pop方法
- 根据下标添加和删除元素使用splice方法
- js中循环语句有:
-
for
-
while
-
“+” 运算符能够实现字符串的拼接操作
<!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>Document</title>
<!--使用内嵌式-->
<script>
//编写js代码
alert('内嵌式引入')
//变量的使用
var a=10
var b='python'
var c=true
//undefind 表示该变量未定义 null 表示为空
var d=undefined,e=null
//数据对象 key:value
var f ={name:'python',age:20}
//typeof 判断类型后弹窗类型数据
// alert(typeof a)
// alert(typeof b)
// alert(typeof c)
// alert(typeof a+b)
// alert(f.name)
//函数function关键字
function addNum(num1,num2){
//编写函数业务逻辑
alert('函数定义')
//加法计算
var data =num1+num2
//将计算结果返回
return data
}
//函数执行
// var res_data=addNum(2,3)
// alert(res_data)
//变量作用域范围
function myFun(){
var local_data='内部变量'
//函数使用外部变量
alert(b)
return local_data
}
//var data=myFun()
//alert(data)
function myFun2(data){
//if条件判断 ==判等会进行隐式转换 会转化为同一类型后进行比较
//=== 判等要完全一样
if(data==1){
alert('条件成立')
}
else{
alert('条件不成立')
}
多条件
if(data==1){
alert('数据为1')
}
else if(data==2){
alert('数据为2')
}
else{
alert('其他数据')
}
//与或非
if(data==1 && data>0){
alert('逻辑与--多个条件都成立')
}else{
alert('逻辑与 条件不成立')
}
if(data==1 || data>0){
alert('逻辑或--多个条件都成立')
}else{
alert('逻辑或条件不成立')
}
if(!(data==1)){
alert('逻辑非条件成立')
}else{
alert('逻辑非条件不成立')
}
}
// myFun2(2)
//数组操作
function myArrFunc(){
//定义数组
var arrData =[1,2,3,'a','b',c]
//计算数组长度length
alert(arrData.length)
//数据去取值，根据下标
alert(arrData[3])
//写入数据
arrData.push('daidai')
alert(arrData)
//弹出数据 ，从最后一位取值，将去除的值从数组中删除
alert(arrData.pop())
alert(arrData)
//数组的删除，第一个参数：指定起始位置下标 第二个参数：删除的数量 第三个参数：删除指定替换
arrData.splice(0,2,'wan','er')
alert(arrData)
}
// myArrFunc()
//循环语句
function myXunhuan(){
var dataArr=['zhangsan','lisi','daidai','giao']
//for 循环 指定循环开始的起始位置，指定循环结束条件 起始数量累加
// for(var index =0; index<dataArr.length;index++){
// alert(dataArr[index])
// }
var index=0
//结束条件
while(index<dataArr.length){
alert(dataArr[index])
index++
}
}
//myXunhuan()
//字符串拼接
var host='http://www.baidu.com/'
var path='s?wd="python"'
var url=host+path
alert(url)
</script>
<!--外链引入js scr 指定文件的路径-->
<script src="./wailian.js"></script>
</head>
<body>
<!--行内使用js-->
<!--tyoe 指定为按钮类型value,指定按钮显示的名字 onclick点击事件 alert()当点击后触发方法，方法会出现弹窗-->
<input type="button" value="按钮" onclick='alert("按钮事件")'>
</body>
</html>
2.jQuery
2.1 jQuery介绍
1. jQuery的定义
jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery 极大地简化了 JavaScript 编程。
2. jQuery的作用
jQuery和JavaScript它们的作用一样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了JavaScript编程，jQuery实现交互效果更简单。
3. jQuery的优点
jQuery兼容了现在主流的浏览器，增加了程序员的开发效率。
jQuery简化了 JavaScript 编程，代码编写更加简单。
2.2 jQuery的用法
-
引入jQuery
<script src="js/jquery-1.12.4.min.js"></script> # 本地引入 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script> # 线上引入 -
获取标签元素需要在入口函数来完成，它的速度比原生的 window.onload 更快
-
jQuery入口函数有两种写法:
// 完整写法
$(document).ready(function(){
...
});
// 简化写法
$(function(){
...
});
2.3jQuery选择器
- 选择器的种类
- jQuery选择器就是选择标签的
- 标签选择器是根据标签名来选择标签
- 类选择器是根据类名来选择标签
- id选择器是根据id来选择标签
- 层级选择器是根据层级关系来选择标签
- 属性选择器是根据属性名来选择标签
$('#myId') //选择id为myId的标签
$('.myClass') // 选择class为myClass的标签
$('li') //选择所有的li标签
$('#ul1 li span') //选择id为ul1标签下的所有li标签下的span标签
$('input[name=first]') // 选择name属性等于first的input标签
- 选择集过滤
选择集过滤可以使用has方法和eq方法来完成
jquery给标签设置样式使用css方法
- 获取和设置元素内容
获取和设置元素的内容使用: html方法
给指定元素追加html内容使用: append方法
- 获取和设置元素属性
获取和设置元素属性的操作可以通过prop方法来完成
获取和设置元素的value属性可以通过val方法来完成，更加简单和方便
-
jQuery常用事件
click() 鼠标单击 blur() 元素失去焦点 -
JavaScript对象
创建自定义javascript对象有两种方式:
Object
字面量
2.4json
json是 JavaScript Object Notation 的首字母缩写，翻译过来就是javascript对象表示法，这里说的json就是类似于javascript对象的字符串，它同时是一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。
json就是一个javascript对象表示法，json本质上是一个字符串。
json有两种格式：
对象格式
数组格式
<!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>Jquery的使用</title>
<!-- 引入jquery 线上引入需要联网 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
// 使用jquery方法
// window.onload = function(){
// // 编写jquery
// var str_data = 'hello jquery'
// // 选中要写入数据的标签 html将数据写入页面
// $('div').html('<p>'+str_data+'</p>')
// }
// 简写调用jquery方法 $(function(){})
$(function(){
//写jquery方法 css方法可以对选中的标签进行样式控制
$('p').css({color:'red'})
// jquery的类选择器
$('.box1').html('<h1>'+'第一个div' +'</h1>')
$('.box2').html('<h2>'+'第二个div' +'</h2>')
// jquery的id选择器
$('#box3').html('<h3>'+'第三个div' +'</h3>')
// 层级选择
$('div span').html('<span> 内嵌文本行标签 </span>')
// 过滤选择
// 选择div标签 $('div')选中所有的div标签 has方法过滤出需要选中的div标签
// 选择一个div标签，里面包含p标签
$('div').has('p').html('通过has方法选中div标签')
// 通eq方法选择第几个标签 $('div') [div1,div2,div3,div4,div5]
// eq中的数字代表选中的所有标签的下标
$('div').eq(1).html('通过eq方法选中div标签')
// 数据写入
// html 写入的数据会覆盖原有的数据内容
// $('#box5').html('新写入的div数据')
//append方法会将新数据写入原有数据后面
$('#box5').append('新写入的div数据')
// 标签属性值操作
// 获取方法prop
// var href_data = $('a').prop('href')
// alert(href_data)
// 修改和添加属性值
$('a').prop({href:'https://www.jd.com'})
// 用户事件处理
// 点击事件
// 定义一个处理事件的方法（函数）
function myfunc(){
alert('点击事件被触发')
}
function myfunc2(){
alert('失去焦点事件被触发')
// val方法获取input输入框中的数据
var data = $('.ip2').val()
alert(data)
}
// 选择需要触发点击事件的标签
// input标签被点击时执行myfunc方法
$('.ip1').click(myfunc)
// 失去焦点事件
$('.ip2').blur(myfunc2)
// js的数据对象
var a = {
name:'python',
age:20,
// 在js数据对象中定义函数
myfunc3:function(){
alert('myfunc3方法被执行')
}
}
// alert(a.name)
a.myfunc3()
// 修改数据
a.name = 'itcast'
// 添加数据
a.gender = 'boy'
// json数据类型 是对js数据对象转为字符串 方便前端js的数据和其他语言数据进行交互
// 可以将python的字典数据转化json字符串交给前端进行使用
var b = '{"name":"itcast"}' // json数据
// 将json字符串转化为javascript的数据对象
var b_obj = JSON.parse(b)
alert(b_obj.name)
})
</script>
</head>
<body>
<div class='box1'></div>
<p> 段落标签 </p>
<!-- jquery选择器 -->
<div class='box2'> </div>
<div id='box3'> </div>
<div>
<span> 文本行标签 </span>
</div>
<!-- 过滤选择 -->
<div>
<p> 段落标签 </p>
</div>
<!-- 数据写入 -->
<div id='box5'>
原始的div数据
</div>
<!-- 标签属性值操作 -->
<!-- <a href="http://www.baidu.com">链接</a> -->
<a ></a>
<!-- 事件处理 -->
<!-- 按钮触发点击事件 -->
<input type="button" value='按钮' class='ip1'>
<!-- 输入框触发失去焦点事件 -->
<input type="text" class='ip2'>
</body>
</html>
2.5 ajax
ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了。
ajax方法的参数说明:
url 请求地址
type 请求方式，默认是'GET'，常用的还有'POST'
dataType 设置返回的数据格式，常用的是'json'格式
data 设置发送给服务器的数据，没有参数不需要设置
success 设置请求成功后的回调函数
error 设置请求失败后的回调函数
async 设置是否异步，默认值是'true'，表示异步，一般不用写
同步和异步说明
同步是一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步。
异步是多个ajax同时请求，不需要等待其它ajax请求完成， 好比线程异步。
ajax的简写方式:
$.ajax按照请求方式可以简写成$.get或者$.post方式
<script>
$.ajax({
// 1.url 请求地址
url:'https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=3bHuMQ58fc3165eac0273bb4ab3925d90e9a37700099738&area=北京',
// 2.type 请求方式，默认是'GET'，常用的还有'POST'
type:'GET',
// 3.dataType 设置返回的数据格式，常用的是'json'格式
dataType:'JSON',
// 4.data 设置发送给服务器的数据, 没有参数不需要设置
// 5.success 设置请求成功后的回调函数
success:function (response) {
console.log(response);
},
// 6.error 设置请求失败后的回调函数
error:function () {
alert("请求失败,请稍后再试!");
},
// 7.async 设置是否异步，默认值是'true'，表示异步，一般不用写
async:true
});
</script>
. g e t 和 .get和 .get和.post方法的参数说明:
$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)
- url 请求地址
- data 设置发送给服务器的数据，没有参数不需要设置
- success 设置请求成功后的回调函数
- data 请求的结果数据
- status 请求的状态信息, 比如: “success”
- xhr 底层发送http请求XMLHttpRequest对象
- dataType 设置返回的数据格式
- “xml”
- “html”
- “text”
- “json”
- error 表示错误异常处理
- func 错误异常回调函数
<!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>Ajax请求三方服务获取数据</title>
<!-- 引入jquery 线上引入需要联网 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
// 使用jquery方法
$(function(){
// 发送get请求
// 第一个参数 请求的地址
// 第二个参数处理请求成功的方法
$.get('http://api-toutiao-web.itheima.net/app/v1_1/articles?timestamp=1556789000001&channel_id=0&with_top=1',function(response,status){
// data 和status
// data 是返回的数据内容
// status 返回的状态
// 输出终端打印 在浏览器的console中显示输出信息
console.log('输出终端')
console.log(response)
console.log(status)
console.log('从返回结果中取值')
// response = {data: {results: [ {title:'aaa'}, {title:'bbb'},{title:'ccccc'} ] } }
console.log(response.data.results)
var data_arr = response.data.results
// 遍历数据数据
for(var index=0;index<data_arr.length;index++){
data_arr[index]
// 取出数组中的值
console.log('取出数组中的值')
console.log(data_arr[index])
// 取出title值
console.log(data_arr[index].title)
var title = data_arr[index].title
var aut_name = data_arr[index].aut_name
//将取出的title值写入页面
$('ul').append('<li>'+title+'----'+aut_name+'</li>')
// $('ul').append('<li>'+aut_name+'</li>')
}
}).error(function(data){
// 如果请求失败，会执行err方法中的业务
console.log(data)
})
})
</script>
</head>
<body>
<!-- 无序号列表展示 -->
<ul>
</ul>
</body>
</html>
974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
