html和选择器

快捷键：

html:xs
html:xt
html:4s
html:4t
html:5

语义标签

低版本浏览器会认为是用户自定义标签导航头部结尾 ........... (div 没有语义的标签)

低版本必须创建元素:

1. document.createElement("nav");#将元素转换块级元素display:block;

2. 使用插件

3. cc:ie6 只有小于等于ie6引入

多媒体标签

video视频 audio音频
//多个多媒体资源 //播放循序如果第一个能播放就不会播放第二个
autoplay 打开页面自动播放
loop 循环播放
controls 显示控制栏
表单元素及属性
email url number range color date month week time
自动完成(form属性)
autocomplete="off" 关闭
autocomplete="on" 开启默认打开
novalidate 不校验
input属性
autofocus 自动获取焦点
placeholder 占位符提示信息
required 必填项

form 为表单的id (form id ) 实现多选(按着ctrl选) <input type="text" name=""list="test"> 111

获取页面元素及类名操作和自定义属性

document.querySelector('选择器')

备注：

选择器：可以是css中的任意一个选择器
通过该选择器智能选中第一个元素

document.querySelectorAll('选择器')

备注：与document.querySelector区别：querySelectorAll 可以选中所有符号选择器规则的元素，返回的是一个列表，querySelector返回的只是单独的一个元素
Dom.classList.add('类名') 给当前dom元素添加类样式
Dom.classList.remove('类名') 给当前dom元素移除类样式
classList.contains('类名') 检测是否包含类样式
classList.toggle('active') 切换类样式（有就删除，没有就添加）

<div class='one' data-test='123'></div>
<script type='text/javascript'>
    //获取标签的自定义属性值
    var list = document.querySelector('.one').dataset;
    console.log(list.test);
</script>

<input type = 'file' name=''>
<script type='text/javascript'>
    var input = document.querySelector('input')
    input.onchange=function(){
        //获取到文件
        var file = this.files[0]
    }

</script>

文件读取

FileReader 接口有三个用来读取文件方法返回结果在result中
readAsBinaryString 将文件读取为二进制编码
readAsText 将文件读取为文本
readAsDataURL 将文件读取为DataURL

FileReader 提供的事件模型

onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

//开始读取
var reader = new FileReader();
//开始读取
reader.readAsText(file);
//获取读取的结果
//当文件读取完成后，才可以获取文件信息内容
reader.onload = function(){
    console.log(reader.result)
}

获取网络状态

获取当前网络状态

window.navigator.onLine 返回一个布尔值

网络状态事件

window.ononline
window.onoffline

<script type = 'text/javascript'>
    //获取当前网络状态
    var state = window.navigator.onLine;
    if(state){
        alert('处于联网状态')
    }else{
        alert('断网')
    }

</script>

<script type = 'text/javascript'>
    //当前联网的时候触发该事件
    window.ononline = function(){
        alert('在线')
    }
    //当断网的时候触发该事件
    window.onoffline = function(){
        alert('断网')
    }
   

</script>

获取地理位置

获取一次当前位置

window.navigator.geolocation.getCurrentPosition(success,error);

coords.latitude 维度

coords.longitude 经度

实时获取当前位置

window.navigator.geolocation.watchPosition(success,error)

百度地图接口

function suc(position){
    var wd = position.coords.latitude;
    var jd = position.coords.longitude;
    //百度地图API功能
    var map = new BMap.Map('allmap')
    var point = new BMap.Point(jd,wd)
    map.centerAndZoom(point,15)
    //创建小狐狸
    var pt = point;
    var myIcon = new BMapIcon('http://lbsyun.baidu.com/jsdemo/img/fox.gif',new BMap.Size(300,157))
    var marker2 = new BMap.Marker(pt,{icon:myIcon});
    map.addOverlay(marker2)
}

画布不能加css样式应该在标签里加

# html和选择器

# 获取地理位置

html和选择器

获取地理位置