前端开发 --初始JavaScript

前言

html 种script主要包括内联script和引用外部JavaScript文件两张方式

1.内联script的用法

复制代码

内联script指的是将JavaScript代码直接写在html文档中某个部位
<!-- 内嵌 -->
<script>
        alert(1)
</script> 
<script>
        window onload=function(){
            var aa=document.getElementById("aa")
            console.log(aa)
        }
</script> 

2.引用外部JavaScript文件

复制代码

<!-- 使用<script> 标签的src属性引用外部JavaScript文件-->    
<!-- defer表示延迟加载 只能用于外引 -->
    <script src="JavaScript.js" defer></script>

既有外引又有内嵌,内嵌被完全覆盖掉

 

JavaScript 语法

控制台打印

复制代码

console.log()

对象{} key:value key:事务的特征项 value:事务的特征值 value可以是任意类型

对象.属性

复制代码

var obj={
     name:'',
     age:1,
     marry:false,
     play=['','',''],
     friend:{
         name:"",
         age:2
     }
 }
console.log(obj)
console.log(obj.name)
console.log(obj.age)
console.log(obj.play)
console.log(obj.play[0])
console.log(obj.friend.age)

函数

复制代码

function声明函数的关键字,f函数名 (a,b)参数列表{}函数体
 var cc =function f(a,b){
     console.log(a)
     console.lob(b)
     console.log("test")
 }
 var dd="aaa"

f()
f(10,"aaa")
cc()

匿名函数

复制代码

var aa=function(a,b){
     console.log(a)
     console.log(b)
     console.log("test")
 }

aa(5,500)


console.log(cc)
console.log(aa)
console.log(f)

复制代码

元素调用和交互相关

复制代码

oncclick点击
condblclick双击
onmouseenter鼠标放上去触发

 console.log(document)
 console.dir(document)
 document.onclick=function(){
     alert(1)
 }

 dom操作

复制代码

document object model 
 var aa =document.getElementById('')
 查找
 根据id值获取元素getElementById() 返回符合条件的第一个对象
 var aa=document.getElementById("aa")
 console.log(aa)
 console.dir(aa)
 aa.pnclick=function(){
     alert(1)
 }
    // 根据class值获取元素 getElementsByClassName 返回符合条件的所有对象组成的数组
    var aa=document.getElementsByClassName("aa")
     console.log(aa)
     console.dir(aa)
     for(var i=0;i<aa.length;i++){
      aa[i].onclick=function(){
         console.log(this)
         this.style.background="red"
     this.StylePropertyMap.display="none"
     }


    根据元素名称获取元素
     var aa=document.getElementsByTagName("div")
     console.log(aa)
     根据元素选择器
     document.querySelector()返回符合条件的第一个对象
     document.querySelectorAll()返回符合条件的所有对象组成的数组
     var aa=document.querySelector(".aa")
     console.log(aa)

     var h1=document.querySelector("h1")
     console.log(h1)
     document在整个文件,也可以在某个标签
    
     var h1=h1.querySelector("h1")
     console.log(h1)

    // 通过关系查找
    // 找父亲 parentNode parentElement
    // 找孩子 childNodes children
    // 第一个孩子  firstChild firstElementChild
    // 最后一个孩子 lastChild lastElementChild
    // 找上一个孩子 previousSibling previousElementSibling
    // 下一个元素nextSibling nextElementSibling
     var aa=document.querySelector()
     console.log(aa)
     console.log(aa.nextSibling)
     console.log(aa.nextElementSibling)


    // 获取|修改
    // 获取|改内容 innerHTML 把修改的内容
    // 获取|改属性
    // 原生属性 对象.属性 获取 对象.属性=值 设置
    // 自定义属性 getAttribute()获取 setAttribute()设置
    // 获取|改样式 对象.style.属性=值 对象.style0cssText="css样式"

    var aa=document.getElementById("aa")
     console.log(aa)
     console.dir(aa)