前言
这里我们直接开始学习WebApi，至于js语法基础部分就不做讲解了。
正文
原生
各种选择器
<p class='clsP' id='idP2'></p>
<script>
// id选择器
let idP1 = document.getElementById("idP1")
// class选择器 返回是个数组
let clsPs = document.getElementsByClassName('clsP')
// 标签选择器 返回数组
let pEls = ul.getElementsByTagName("p")
// 返回第一个匹配到的第一个元素 id选择 标签
let firstclsP = document.querySelector('.clsP')
// 返回所有
let allP = document.querySelectorAll(".clsP")
</script>
原生点击事件
<script>
let btn = document.getElementById('btn')
btn.onclick = function () {
console.log('点击了')
}
btn.addEventListener('click',function () {
console.log('addEventListener')
})
</script>
innerHtml和innerText
<div></div>
<p>
123
<spn>456</spn>
</p>
<div id="divId"></div>
<script>
// innerHtml可以解析出来文本标签 innerText当成文本显示
let div = document.querySelector('div')
div.innerHTML = '<del>123</del>'
let textDiv = document.getElementById('divId')
textDiv.innerText = '<del>123</del>'
</script>
</body>
操作元素属性
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button>
<br/>
<img src="images/ldh.jpg" alt="" width="100" height="100">
<script>
let ldh = document.getElementById('ldh')
let zxy = document.getElementById('zxy')
let img = document.querySelector('img')
ldh.onclick = function () {
img.src = 'images/ldh.jpg'
}
zxy.onclick = function () {
img.src = 'images/zxy.jpg'
}
</script>
</body>
操作样式
<div></div>
<script>
let div = document.querySelector('div')
div.onclick = function () {
div.style.backgroundColor = 'red'
div.style.width = '100px'
div.style.height = '100px'
}
</script>
</body>
修改class样式
<div class="first">
</div>
<script>
let div = document.querySelector('.first')
div.onclick = function () {
this.className = 'first second'
}
</script>
</body>
自定义属性
<div class="demo1" index="1" id="nav"></div>
<script>
let div = document.querySelector('div')
console.log(div.getAttribute('class'))
console.log(div.getAttribute('index'))
div.setAttribute('index',2)
console.log(div.getAttribute('index'))
</script>
</body>
父节点
<body>
<div class="demo">
<div class="box">
<span class="erweima">x</span>
</div>
</div>
<script>
let span = document.querySelector('.erweima')
// 这个找到的是自己的直接父元素
console.log( span.parentElement)
</script>
</body>
子节点
<!-- 节点的优点 -->
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<ol>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ol>
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// DOM 提供的方法（API）获取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等 包含那种换行空格 ，所以是9个。
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 获取所有的子元素节点 也是我们实际开发常用的
console.log(ul.children);
</script>
</body>
兄弟节点
<div>我是div</div>
<span>我是span</span>
<script>
let divEle = document.querySelector('div')
// 这个包含空格和换行符的节点
console.log(divEle.previousSibling)
console.log(divEle.nextSibling)
// 这个就是元素，开发用这个
console.log(divEle.previousElementSibling)
console.log(divEle.nextElementSibling)
</script>
</body>
删除节点
<button>删除</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
let button = document.querySelector('button')
let ulEle = document.querySelector('ul')
button.onclick = function () {
if(ulEle.children.length === 0) {
this.disabled = true
} else {
ulEle.removeChild(ulEle.children[0])
}
}
</script>
</body>
创建节点
</body>
<script>
// 这个效率高于innerHtml
let nowDate = new Date()
let bodyEl = document.querySelector('body')
for (let i = 0; i < 1000; i++) {
let div = document.createElement('div')
div.style.width = '100px'
div.style.height = '2px'
div.style.border = '1px solid red'
bodyEl.append(div)
}
console.log(new Date()-nowDate)
</script>
移除监听事件
<button>监听1</button>
<button>监听2</button>
<script>
let buttons = document.querySelectorAll('button')
buttons[0].onclick = function () {
alert('123')
buttons[0].onclick = null
}
// 下面这种同个元素可以注册多个点击事件。
buttons[1].addEventListener('click',fn)
function fn() {
alert(222)
buttons[1].removeEventListener('click',fn)
}
</script>
</body>
事件对象
<div>123</div>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
<script>
let divEl = document.querySelector('div')
let ulEl = document.querySelector('ul')
divEl.addEventListener('click',function (e) {
console.log(this)
console.log(e.target)
})
// e.target指的是点击的哪个元素，this,e.currentTarget指的是绑定事件的元素
ulEl.addEventListener('click',function (e) {
console.log(this)
console.log(e.currentTarget)
console.log(e.target)
})
</script>
</body>
阻止事件冒泡
<div class="father">
<div class="son"></div>
</div>
<script>
let divFather = document.querySelector('.father')
let divSon = document.querySelector('.son')
divSon.addEventListener('click',function (e) {
e.stopPropagation() //阻止事件冒泡
console.log('son')
})
divFather.addEventListener('click',function (e) {
console.log('father')
})
</script>
</body>
坐标
<script>
document.addEventListener('click',function (e) {
console.log(e.clientX)
console.log(e.clientY)
console.log('--------')
console.log(e.pageX)
console.log(e.pageY)
console.log('--------')
console.log(e.screenX)
console.log(e.screenY)
})
</script>
</body>
screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。
clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。
pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动
鼠标事件
<script>
document.addEventListener('keyup',function (e) {
console.log('键盘抬起')
})
document.addEventListener('keypress',function (e) {
console.log('按键按下，不识别功能键如ctrl shift等')
})
document.addEventListener('keydown',function (e) {
console.log('按键按下，识别功能键如ctrl shift等')
})
</script>
</body>
Window对象
<body>
<script>
window.onload = function () {
console.log('页面元素加载完成，img css等执行')
}
</script>
</body>
// 监听浏览器窗口大小改变
<body>
<div></div>
<script>
window.onload = function () {
let divEl = document.querySelector('div')
window.addEventListener('resize',function () {
console.log(window.innerWidth)
if(window.innerWidth < 800){
divEl.style.display = 'none'
}
})
}
</script>
</body>
// 延迟器
<body>
<script>
function callback() {
console.log('1111')
}
window.setTimeout(callback,3000)
</script>
</body>
// 定时器
<body>
<script>
setInterval(function () {
console.log('111')
},100)
</script>
</body>
// window.location
<body>
<button>点击</button>
<script>
let buttonEl = document.querySelector('button')
buttonEl.addEventListener('click',function () {
// 没有历史后退
// location.replace('https://www.baidu.com')
// location.reload()
// 记录历史后退
// location.assign('https://www.baidu.com')
})
</script>
</body>
offset系列
<div class="father">
<div class="son"></div>
</div>
<div class="w"></div>
<script>
let fatherDiv = document.querySelector('.father')
let sonDiv = document.querySelector('.son')
console.log(fatherDiv.offsetTop)
console.log(fatherDiv.offsetLeft)
// 找到有定位的父元素位0点开始计算，如果没有找到body
console.log(sonDiv.offsetLeft)
let wDiv = document.querySelector('.w')
console.log(wDiv.offsetWidth)
console.log(wDiv.offsetHeight)
// 返回带有定位的父元素
console.log(sonDiv.offsetParent)
// 返回父亲是最近的父亲，没有一级一级往上找
console.log(sonDiv.parentNode)
</script>
</body>
这里的offsetlet等就是自己左边框的外边距到父元素左边框内边距的距离
offsetWidth和style.width前者不带单位或者带px单位
clien系列
<div></div>
<script>
// 最大的区别是clientWidth不包含border
let divEl = document.querySelector('div')
console.log(divEl.offsetWidth)
console.log(divEl.clientWidth)
</script>
</body>
立即执行函数
<script>
(function (a,b) {
console.log(a+b)
})(1,2)
</script>
</body>
Scroll系列
<div>
我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
</div>
<script>
let divEl = document.querySelector('div')
// 显示滚动条，内容总共需要的高高度
console.log(divEl.scrollHeight)
// 这个不包含borde盒子的高度
console.log(divEl.clientHeight)
divEl.addEventListener('scroll',function (e) {
// 内容需要的高度-clientHeight就是可以滚动的高度
console.log(this.scrollTop)
})
</script>
</body>
鼠标进入离开事件
<div class="father">
<div class="son"></div>
</div>
<script>
let fatherEl = document.querySelector('.father')
let sonEl = document.querySelector('.son')
// mouseenter不会事件冒泡，移动到字元素身上不触发 对用的还有mouseleave
fatherEl.addEventListener('mouseenter',function (e) {
console.log('fatherElmouseenter')
})
fatherEl.addEventListener('mouseover',function (e) {
console.log('fatherElmouseover')
})
</script>
</body>
移动端touch事件
<div></div>
<script>
let divEl = document.querySelector('div')
let startx = 0
let starty = 0
// 原来盒子的位置
let x = 0
let y = 0
divEl.addEventListener('touchstart', function (e) {
console.log(e.targetTouches[0].pageX)
console.log(e.targetTouches[0].pageY)
startx = e.targetTouches[0].pageX
starty = e.targetTouches[0].pageY
x = this.offsetLeft
y = this.offsetTop
})
divEl.addEventListener('touchend', function (e) {
console.log(e)
})
divEl.addEventListener('touchmove', function (e) {
let moveX = e.targetTouches[0].pageX-startx
let moveY = e.targetTouches[0].pageY - starty
divEl.style.left = x +moveX + 'px'
divEl.style.top = y+ moveY+ 'px'
e.preventDefault()
})
</script>
</body>
存储
<input id="name" type="text" placeholder="用户名">
<input id="password" type="text" placeholder="密码">
<input type="radio" class="storage" name="storage" checked="true" value="1">localStorage
<input type="radio" class="storage" name="storage" value="2">sessionStorage
<button>保存</button>
<script>
let radioEls = document.querySelectorAll('.storage')
let inputName = document.getElementById('name')
let inputPassword = document.getElementById('password')
let buttonEl = document.querySelector('button')
let storageType = 1
for (let i = 0; i < radioEls.length; i++) {
radioEls[i].addEventListener('change', function (e) {
storageType = this.value
})
}
// 区别sessionStorage关闭页面数据丢失 localStorage关闭数据丢失，除非自己手动清理
buttonEl.addEventListener('click', function () {
let name = inputName.value
let password = inputPassword.value
if (storageType === 1) {
localStorage.setItem('name',name)
localStorage.setItem('password',password)
} else {
sessionStorage.setItem('name',name)
sessionStorage.setItem('password',password)
}
})
</script>
</body>
Jquery（移动web建议使用zepto）
各种选择器
$(function () {
$('.nav')
$('ul li')
$('ul li:first')
$('ul li:eq(2)')
$('ol li:even')
$('ol li:odd')
// 兄弟元素
$('ol .item').siblings('li')
console.log($('.son').parent())
// 亲儿子
$('.nav').children('p').css('color','red')
// 所有的p标签 类似于后代选择器
$('.nav').find('p').css('color','orange')
// 链式编程
$(this).css('background-color','').siblings('button').css('background-color','red')
})
</script>
Css样式
$('div').css({
width:400,
height:400,
backgroundColor:'blue'
})
$(this).css('background-color','')
$(this).toggleClass('current')
$(this).addClass('current').siblings('li').removeClass('current')
let indexs = $(this).index()
$('.item').eq(indexs).show().siblings('.item').hide()
})
动画
$('button').click(function () {
$('div').animate({
left:500,
top:300,
width:400,
opacity:.4
},3000)
})
$('.back').fadeIn()
$('.back').fadeOut()
</script>
属性操作
$('a').prop('title','我们都挺好')
// 获取自定义属性
console.log($('div').attr('index'))
文本内容
console.log($('div').html())
console.log($('div').text())
console.log($('input').val())
$('input').val('123')
</script>
返回祖先元素
<div class="one">
<div class="two">
<div class="three">
<div class="four">我不容易</div>
</div>
</div>
</div>
<script>
console.log($('.four').parent().parent().parent())
console.log($('.four').parents())
console.log($('.four').parents('.two'))
</script>
</body>
遍历元素
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function () {
let sum = 0;
let arr = ['red','orange','blue']
$('div').each(function (i,el) {
$(el).css('color',arr[i])
sum+=parseInt($(el).text())
})
console.log(sum)
})
</script>
</body>
删除添加元素
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function () {
let li = $('<li>我是后来创建的</li>')
$('ul').append(li)
let lis = $('<li>我在上面</li>')
$('ul').prepend(lis)
let div = $('<div>我是后妈生的</div>')
$('.test').before(div)
// 删除元素
// 找到的都删除
// $('ul').remove()
// 删除子元素
$('ul').empty()
})
</script>
</body>
获取元素大小
<div></div>
<script>
$(function () {
// 1. width() / height() 获取设置元素 width和height大小
console.log($('div').width())
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($('div').innerWidth())
// 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($('div').outerWidth())
// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($('div').outerWidth(true))
})
</script>
</body>
元素位置
<div class="father">
<div class="son"></div>
</div>
<script>
$(function () {
// 获取设置距离文档流的偏移位置
console.log($('.son').offset())
// 获取距离定位元素的位置
console.log($('.son').position())
})
</script>
</body>
事件
$(function () {
$('div').on('mouseenter mouseleave',function () {
$(this).toggleClass('current')
})
// on可以实现事件委托,动态添加的也可以设置点击事件
$('ul').on('click','li',function () {
alert(11)
})
let li = $('<li>我是动态添加的</li>')
$('ul').append(li)
})
</script>
事件解绑
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<p>我是屁</p>
<script>
$(function () {
$('div').on({
click:function () {
console.log(111)
},
mouseenter:function () {
console.log(222)
}
})
$('div').off('click')
})
</script>
</body>
自动触发事件
<div></div>
<input type="text">
<script>
$(function () {
$('div').on('click',function () {
alert(11)
})
// 这里自己认为最主要的区别是triggerHandler阻止事件冒泡，trigger会触发浏览器的默认事件
$('div').trigger('click')
$('div').triggerHandler('click')
})
</script>
</body>
事件对象
$(function() {
$(document).on("click", function() {
console.log("点击了document");
})
$("div").on("click", function(event) {
// console.log(event);
console.log("点击了div");
// 阻止事件冒泡
event.stopPropagation();
})
})
</script>
结语
打完收工，下一篇vue基础！！！
