zoukankan      html  css  js  c++  java
  • 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 其实就是用$符号
    ​```/
    
  • 相关阅读:
    hdu 5082
    Codeforces Round #265 (Div. 2) E. Substitutes in Number
    Codeforces Round #265 (Div. 2) D. Restore Cube 立方体判断
    机器学习算法概述第五章——CART算法
    机器学习算法代码实现——线性回归
    机器学习算法概述第一章——线性回归
    机器学习之线性回归模板超详注释
    How to create a on-demand AWR snapshot?
    Emptying the buffers cache
    java/groovy 计算时间
  • 原文地址:https://www.cnblogs.com/zhuyuanying123--/p/11308785.html
Copyright © 2011-2022 走看看