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 其实就是用$符号
​```/
posted @ 2019-08-06 14:39  enazede  阅读(197)  评论(0编辑  收藏  举报