JS核心DOM和BOM操作，Jquery核心
2022-03-19 21:21:20 0 举报AI智能生成
js学习笔记，前端必须掌握js核心dom,bom操作，jquery语法应用
作者其他创作
大纲/内容
js核心dom,bom操作
DOM操作
获取元素
Id-getElementById()
直接识别-querSelectorAll()
获取body元素-document.body
获取HTML元素-document.documentElement
操作元素
改变元素内容
element.innerText
element.innerHTML
获取元素属性
element.属性（获取内置属性）
element.getAttribute（‘属性’）（可获取自定义属性）
设置属性值
element.属性=‘值’（设置内置属性）
element.setAttribute('属性’，‘值’）（主要针对自定义属性）
H5自定义属性
dataset为一个集合，存放了所有以data开头的属性
节点操作
获取节点
children 获取所有子元素节点
childNodes 得到所有子节点，包括文本节点
parentNode 提取父节点，返回最近一个父级
firstchild 获取第一个子节点（包含所有类型）
firstElementchild 返回第一个子元素节点
创建节点元素
creatElement('要创建的元素’)
添加节点元素
node.appenchild(child) 从后面追加元素，类似于数组中的push
node.inserBefore(child,指定元素）向指定元素之前添加
删除节点元素
node.removechild(child) 从dom中删除一个子节点，返回删除的节点
复制节点
node.cloneNode(); 复制之后只存在，没有默认位置
classList
classlist.add('classname') 添加类名，在后面追加
classlist.remove('classname') 清除类名
classlist.toggle('bg') 切换类 （有"bg"就去掉，没有就添加）
事件
事件基础
事件源：事件被触发的对象
事件类型：如何触发事件 例如（键盘按下）
事件处理程序：通过一个函数赋值的形式
事件侦听注册事件
addEventListenter 事件类型是字符串，必定加引号
解绑事件
例：divs[0].onclick=null;
例：divs[1].addEventListener('click',fn) 里面fn不加（），移除在注册事件里面
事件流
捕获阶段 document 到 html 到 body 到 元素
冒泡阶段 元素 到 body 到 html 到 document
事件冒泡的应用--事件委托
事件对象
常规事件对象
e.target返回触发事件的对象（元素） this返回的时绑定事件的元素
e.type返回事件类型（不带on)
e.preventdafault(); 阻止默认行为，方法 类似链接不跳转，按钮不提交
e.stopPropagation(); 阻止冒泡，只阻止当前事件
e.clientX e.clientY 鼠标点击 距离上和左的距离 只能得到可视区坐标
e.pageX e.pageY 相对于页面的距离 最常用
键盘事件对象 e.keycode返回按下键的Ascll值
移动端触摸事件对象touchevent
touches 正在触摸屏幕的所有手指列表
targetTouches 正在触摸当前DOM元素的所有手指列表
changedTouches 手指状态发生改变的列表
常用键盘事件
keyup 弹起触发
keydown 按下键触发 比keypress先执行
keypress 按键按下时触发 功能键不识别（不识别ctrl shift等等） 区分大小写
鼠标事件
mousedown 鼠标按下
mouseup 鼠标按下起来
mouseover 鼠标经过自身盒子触发，经过子盒子还会触发
mouseenter 只经过自身盒子触发 不会冒泡
移动端触屏事件
touchstart 开始触摸
touchmove 拖动
touchend 触摸结束
监听过渡完成的事件
transitionend
BOM操作
window
window.onload 窗口页面加载事件
window.addEventListener 没有限制
window.onresize=function(){} 窗口尺寸变化触发事件
window.innerwidth 当前屏幕的宽度
定时器
设置定时器
window.setTimeout(调用函数，延时时间）
window.setInterval(调用函数，间隔时间）
停止定时器 window.clearTimeout(定时器名字） window可省略
同步和异步
异步
普通事件 如click
资源加载 如load error
定时器 如setInterval setTimeout
同步
除了以上任务，均属于异步任务
location对象
location.herf 获取或者设置整个url
location.host 返回主机（域名）例：www.itheima.com
location.port 返回端口号，如果未写返回，空字符串
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段，#后面内容，常见于链接
location.assign('http://www.itcast.cn')；记录历史页面
location.replace('') 跳转页面，不记录历史，不后退
location.reload()重新加载页面，相当于刷新
navigator对象
包含有关浏览器的信息，有很多属性，最常用userAgent，可以返回由客户机发送服务器的user-agent头部的值
history对象
history.forward() 前进
history.back() 后退
history.go() 前往
三大系列
offset系列 获取元素位置（有定位父元素）
获得元素距离带有定位元素的位置
获得元素自身大小，例如宽，高（包含padding,border的盒子大小）
返回数值都不带单位
client系列
element.clientTop 返回元素上边框的大小
element.clientLeft 返回元素左边框的大小
element.clientWidth 返回自身包括padding，内容区的宽度，不含边框，返回数值不带单位
element.clientHeight 返回自身包括padding，内容区的高度不含边框，返回数值不带单位
scroll系列
element.scrollTop 返回被卷上去的距离（不带单位）
element.scrollLeft 返回被卷上去的左侧的距离（不带单位）
element.scrollWidth 返回自身实际宽度，不含边框（不带单位）
element.scrollHeight 返回自身实际的高度，不含边框（不带单位）
flexible.js分析
立即执行函数
devicePixelRatio 物理像素比
DOMcontentLoaded 等待页面主要标签加载完
resize 事件 重新加载页面触发事件
pageshow 事件 重新加载页面触发事件
触发load
a标签链接
F5刷新
前进或后退
回调函数 给函数里面传函数类型的参数
节流阀
利用回调函数，添加一个变量来控制，锁住函数和解锁函数
本地存储
window.sessionStorage
存储数据 sessionStorage.setltem(key,value)
获取数据 sessionStorage.getltem(key)
删除数据 sessionStorage.removeltem(key)
删除所有 sessionStorage.clear( )
window.localStorage
存储数据 localStorage.setltem(key,value)
获取数据 localStorage.getltem(key)
删除数据 localStorage.removeltem(key)
删除所有 localStorage.clear( )
jquery
$为jquery别称，也是jquery顶级对象
等页面加载完毕再去执行js
$(document).ready(function() { 执行内容 })
$(function() { 执行内容 }）更推荐使用
DOM对象和jquery对象之间可以相互转换
DOM转换为jquery
$(DOM对象) $('元素')
jquery转换为DOM
1. $('div')[index] index为索引号
2. $('div').get(index)
jquery设置样式
$('选择器').css('属性','值')
$(this).css('color') 只写属性名，返回属性值
$(this).css('color','red')
$(this).css('width',300) $(this).css('width','300px') 两种写法
可以是对象形式，方便设置多种样式，属性可以不加引号，数字也可以不加引号
jquery隐式迭代
遍历内部DOM元素（因为jquery获取过来的对象是伪数组形式存储的DOM对象）的过程叫做隐式迭代
jquery筛选
jquery筛选器 $('选择器')
$('li:first') 选出第一个li
$('li:last') 选出最后一个li
$('li:eq(2)') 选出序号为2的li（序号从0开始）
$('li:odd') 选出奇数li
$('li:even') 选出偶数li
:checked 选择器 查找被选中的表单元素
jquery筛选方法
$('li').parent() 查找li的父级
$('ul').children(selector) 例：$('ul').children('li')
$('ul').find(selector) 例：$('ul').find('li')
$('.first').siblings(selector) 例：$('.first').siblings('li')
$('.first').nextAll([expr])
$('.last').prevtAll([expr])
$('div').hasClass("protectrd") 不用写“.”
$('li').eq(2) 相当于$('li:eq(2)') 索引从0开始
parents('选择器') 可以返回指定的父级元素
jquery事件封装成方法
显示元素show() $('li').show()
隐藏元素hide() $('li').hide()
jquery得到当前元素索引号 $(this).index();
保留小数位数可用 toFixed(位数）方法
jquery排他思想
隐式迭代，给所有元素绑定事件（这里用btn举例）
当前元素变化
其余兄弟迭代
jquery设置类操作
添加类 $(this).addClass("current") 不写”.“ 相当于追加类名
删除类 $(this).removeClass("current") 删除括号里面的类名，括号为空删除全部
切换类 $(this).toggleClass("current") 有该类名就移除掉，没有就添加
jquery效果
例：show([speed,[easing],[fn]]); easing为切换效果 fn为回调函数 具体可以查阅API手册
事件切换
例：hover([over,out])
over:鼠标移到元素上面要触发的函数，相当于mouseover
out:鼠标移出元素要触发的函数，相当于mouseout
动画队列及停止排队方法
动画效果一旦触发就会执行，多次触发会造成排队效果
停止排队 stop()
stop()方法用于停止动画或效果
stop()写到动画或效果的前面相当于停止结束上一次的动画
自定义动画 必须是元素做动画
animate(params,[speed],[easing],[fn])
params:想要更改的样式属性，以对象形式传递
设置或获取元素属性值
获取属性语法
prop("属性") 获取元素固有属性
attr("属性") 类似getAttribute() 可获取自定义属性
设置属性语法
prop("属性","属性值")
attr("属性","属性值") 类似SetAttribute 可设置自定义属性
数据缓存
data("name","value") 向被选元素加数据
data("name") 向被选元素获取数据
获取设置元素内容
html() 相当于innerHTML
text() 相当于innerText
表单值 val()
jquery 遍历 each()
each()方法遍历元素
$.each()方法遍历元素
遍历对象
创建，添加，删除元素
$('<li></li>'); 动态创建一个li
添加元素
element.append(); 内部添加，加到内容最后面
element.prepend(li); 内部添加，加到最前面
element.after() 外部添加，加到最后面
element.before() 外部添加，加到最前面
删除元素
删除自己 $('ul').remove();
删除所有子节点 $('ul').empty();
删除可匹配的子节点
var $li = $("ul li:eq(1)").detach();
var $li = $("ul li:eq(1)").detach();
jquery位置
获取距离文档(document)的位置，与父级无关
获取带有定位父级(position) 相对位置
获取被卷去位置
scrollTop() 被卷去的头部 用法和上面类似
scrollLeft() 被卷去的左侧
jquery事件
事件处理 on()方法
on()方法匹配元素上绑定一个或多个事件的事件处理函数
on()方法可以给事件委派操作
on()方法可以给动态创建的元素绑定事件
解绑事件 off()
$('div').off() 解绑div身上的所有事件
$('div').off('click') 解绑点击事件
$('ul').off('click','li') 解除绑定在ul身上委派给li的事件
自动触发事件
元素.事件（） 例：$('div').click()
元素.trigger('事件') 例：$('div').triggle('click');
元素.triggerHandler("事件") 不会触发元素的默认行为
事件对象
事件被触发就会有事件对象的产生
与js类似，可参考以上
jquery对象拷贝
$,extend([deep],target,object1,[objectN])
深拷贝：deep参数为true，完全克隆拷贝的对象（新开辟空间，不是拷贝地址）
浅拷贝：把拷贝的对象中复杂数据类型的地址拷贝给目标对象
jquery插件
例如：jquery插件之家
0 条评论
下一页
