• Python web前端 05 JavaScript


    Python web前端 05 JavaScript

    一、获取元素

      1、初识JavaScript

    /* ..  */ #这是多行注释
    //          #这是单行注释
    
    #JavaScript是一种脚本语言,是一种动态类型、弱类型
    #JavaScript通常是用来操作HTML语言的 :HTML骨架(页面结构),css样式(元素大小、颜色、位置、隐藏或显示等),js是行为(部分动画效果、页面与用户交互等)
    
    #js标签写在哪
    #1、script标签里面;
    #2、卸载外部.js后缀文件里面,通过script标签引入(script src="外部js文件");注意:在引入js文件里面的script里面,一定不能在写js代码
    #3、写在标签里面(<div onclick="alert(1)"></div>);标签里面写js代码一般情况下不推荐
    
    
    #script标签的位置
    #head或者body里面 ; 要注意是否需要加上window.onload=function() (表示最后再执行) ; 如果没说什么特殊的要求,一般script标签放在body结束之前
    
    alert(1);#弹窗效果,可用来调试代码
    console.log(1);#打印到控制台,用来调试代码

      2、定义变量

    #定义变量规则: var let const
    #1、不能使用关键字或者保留字(结束里面已经赋予其有意义的词,留着备用的词)
    #2、只能包含数字、字母、$ 、_ ,并且不能以数字开头
    #3、颜色保区分大小写
    #4、尽量见名知意
    
    #用","号可以是一个var定义多个变量,var变量并不要求立马赋值

      3、获取元素

    #js如何操作页面呢
    #要操作页面,就是操作标签,js要操作标签,就要先获取标签
    
    #如何获取独有标签
    document.title
    document.head
    document.body
    
    document.title="我要改标题"
    
    document.body.innerHEML="<b>我很好啊</b>"#修改body里面的内容必须加上innerHTML,这个=号表示覆盖
    document.body.innerHEML=document.body.innerHEML+"<b>我很好啊</b>"#+号表示添加
    #可以简写为document.body.innerHEML+="<b>我很好啊</b>"
    
    document.body.innerText="<b>我很好啊</b>"#如果加上innerText的话,会把文本内所有内容全部修改(出现的是"<b>我很好啊</b>")
    
    #其他元素的获取,id前面必须是document,其他的漆面可以是某个元素(id document),但不能是集合
    document.getElementById() #通过id获取元素
    .getElementsByClassName()  #通过ClassName获取元素
    .getElementsByTagName()     #通过标签名获取元素
    .querySelector()
    .querySelectorAll() #通过选择器的写法获取元素
    document.getElementsByName() #通过name值回去元素
    #获取id 
    var oBox = document.getElementById("box") #获取上面id名为box的id
    oBox.innerHTML="<b>ahhh</b>"
    
    #获取classname
    var oBox1 = document.getElementsByClassName("box")
    oBox1.innerHTML="hahahaha"#没有下标是显示不出来的
    #获取一堆原色的集合,设置操作的时候要通过下标(索引、序号)拿到对于的某一个
    oBox[0].innerHTML="hahahah"
    
    #获取标签名
    var oP = document.getElementsByTagName("p")
    alert(oP.length);#获取长度
    oP[0].innerHTML+="<b>ahh</b>" #给的第一个元素添加ahh,跟上面的classname一样需要添加下标
    
    #通过选择器获取元素
    var oI = document.querySelctor("#box1 .warp2 .warp3");
    oI.innerHTML+="11111"#如果是多个元素,自动获取的就是第一个
    var oI1=document.querySelectorAll("#box i");
    oI1[0].innerHTML+="1111"#同样要加下标
    <div id="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <p>0001</p>
    <p>0002</p>
    <p>0003</p>
    <p>0004</p>
    <script>
        var oP = document.getElementsByTagName("p");
        alert(oP.length);#所有的p,8个
    
        var oBox = document.getElementById("box"),
            oP1=oBox.getElenmentByTagName("p");
        alert(oP1.length);#id下面的p,4个
    
        var oP2=document.querySelectorAll("#box p");
        alert(oP2.length);#id下面的p,4个
    </script>

      4.write

    document.body.innerHTML+="5555"
    #也可以用这种形式
    document.write("5555")
    
    write
    #在文档流关闭之前,给body部分新增内容
    #在文档流关闭之后,修改整个HTML的内容,用window.onload()写

      5、js里面的事件

    #事件
    #就是js捕捉用户的操作,并作出正确的响应。在事件函数里面,有一个关键字this,代表当前触发事件的这个元素事件,用户的操作
    #元素.事件=函数
    #鼠标事件:左键单击 onclick ;左键双击 ondblclick ; 鼠标移入 onmouseover/onmouseenter ;鼠标移出 onmouseout/onmouseleave
    
    <div id = "box"></div>
    <script>
        var oBox=document.getElementById("box")
        oBox.onclick=function(){
          console.log("我被点击了") ; 
          oBox.innerHTML+="我被点击了"; 
          this.innerHTML+="我被点击了"#用这个this就是相当于上面的oBox   
        }

    二、操作属性

    #js操作元素的标签属性
    #规范的标签属性:.符号直接操作(可读可写)
    #不规范(自定义)的标签属性
    #获取.getAttribute ; 设置 .setAttribute ; 移除 .removeAttribute 
    
    #注意:
    #所有的路径、颜色、获取的结果不一定是你写的内容
    #通过id获取的元素赋值给变量后,假设修改了id,这个变量还是这个元素
    #自定义标签属性的操作方式,同样可以操作符合规范的标签属性
    <a href="http://www.baidu.com" targert="_blank" class="box" id ="box" tz="xp">去百度</a>
    <script>
        var oA=document.getElementById("box");
        alert(oA.target);#可读性
        oA.id="box1";#修改id,当然一般没人去改id,一般操作class
        oA.href="http://www.taobao.com";#修改路径
        oA.tz="hahh" #无效,不规范的不能用.操作来修改
        alert(oA.getAttribute("tz"));#获取tz
        alert(oA.className);#如果要获取class必须要使用className
        oA.setAttribute("target","_self");#修改tz属性
        oA.setAttribute("py","web");#原来没有的属性也可以添加上
        oA.removeAttribute("class");#移除属性
    </script>
    <div id ="box" class="box"></div>
    <script>
        var oBox=document.getElementById("box")
        oBox.style.height="300px";
        oBox.style.weight="300px";
        oBox.style.background="red";#修改样式  
        oBox.style.cssText="300px;height:300px;background:red";#可以用这种方法来修改多个属性    
        oBox.style.marginLift="100px";#如果书写复合属性要注意驼峰命名(去掉-号,-号后面的第一个单词大写)
        oBox.style["margin-top"]="100px";#也可以用这种方法
    </script>
  • 相关阅读:
    使用命令行管理virtualBox
    springboot activiti 整合项目框架源码 shiro 安全框架 druid 数据库连接池
    activiti工作流的web流程设计器整合视频教程 SSM 和 独立部署
    java springMVC SSM 操作日志 4级别联动 文件管理 头像编辑 shiro redis
    MVC、MVP、MVVM 模式对比
    GoBelieve IM 消息推送的方案
    Token生成(转载)
    ios的framework合并
    Gobelieve 架构(转载)
    xcode10不兼容问题解决方法,framework编译脚本
  • 原文地址:https://www.cnblogs.com/xuchengcheng1215/p/8669518.html
Copyright © 2020-2023  润新知