javascript操作
js操作页面三步骤:
1、获取页面标签
2、设置操作的激活条件 - 事件
3、具体的操作方式 - 内容 | 样式 | 事件 | 文档结构
1.选择器
首先两种方式 一个是getelement 和queryselector
建议在选择器中使用 let获取标签
getelement 使用方法,不管结果十几个,都用中括号存放查询结果
其中queryselector 的使用方法比前者方便,且方法是+css选择器语法
可以是交叉选择器,也可以是兄弟选择器
js事件
鼠标事件-文档事件-键盘事件-表单事件-事件对象
1鼠标:
单机 onclick
双击 ondbclick
右键 oncontextmenu 其中有些事件是系统默认的动作,取消默认动作可以返回false
悬浮 onmouseover
移开 onmouseout
移动 onmousemove
按下 onmousedown
抬起 onmouseup
2.文档:
首先先页面加载--->window.onload
主要就是操作页面滚动 document.onscroll
3.键盘:
按下 onkeydown
抬起 onkeyup
4.表单:
如果没有类名 获取标签的话 可以获取类型 []加
表单提交的默认就是提交数据的动作,可以取消加false
涉及的功能就是
获取焦点 onfocus
失去焦点 onblur
5.事件对象
涉及的就是 按下鼠标获取 evert事件的keycode
同时可以设置得就是 ctrlkey && keycode
鼠标点击-
document.onclick =function(ev){
console.log(ev);
console.log(ev.clientX,ev.clientY)
}
反扒处理
js操作内容
内容操作:value | innerText | innerHTML
先给一个内存变量赋值输入框的内容
接下来改的就是内存变量
清空的操作就是 赋值‘’
将内容赋值的话就是 innertext 和innerhtml
文本中的标签会被解析
js操作样式
涉及到的一个this
这个this代表当前的标签类名
如果操作这个this.style 只能获取和设置行间式
在内联式和外联中书写的样式称之为计算后的样式
getcomptedstyle(标签,伪类)
它能获取计算后的样式,也能获取行间式 ,但是条件是只读模式
用的应用就是 操作计算后样式,提取写好的计算后样式,通过类名将js与css建立关联
页面转跳
涉及到的window.location.href =" 代表页面链接"
当前页面链接也就是刷新 location.reload()
转跳 window.location.href
ctrl+新开页面 window.open()
其中open内容是转跳路径,默认是_blank 新开 不是新开的就是_self
屏幕下滚动条两种宽度
1.去除滚动条剩余的全部宽度
获取html标签
html.clientwidth
2.不去除滚动条的剩余的全部宽度
涉及到的内容获取宽度 parseint 转宽度字符串为整型
jq
jQuery就是js的工具库 - 一系列功能的集合体
jq内部语法采用的就是原生js
jq环境如何搭建 - 在需要使用jq的html中引入jquery.js即可
jq就是优化了原生js与页面进行交互的逻辑</h2>
cdn链接 外部资源
javaquery 其实就是用$符号
```/
程序的道路上一去不复返