js学习笔记
dom的概念
document就是html页面的文档对象，在控制台输出的样子就是这样
获取元素的方法
document.getElementById("id的值")
document.getElementsByTagName("标签的名字")
document.getElementsByName("标签的name值")
document.getElementsByClassName("标签的类属性值")
//根据选择器获取元素
document.querySelector("选择器") //获取满足选择器的单个元素
document.querySelectorAll("选择器") //获取所有满足选择器的所有元素
//补充：选择器包括 标签选择器、属性选择器、类型选择器、类选择器...
输出元素的方法
document.write("aaaaaa")
console.log("bbbbbb")
window.alert("ccccccc")
向元素添加值的方法
var tags = document.getElementsByTagName("标签的名字")
tags[0].innerHTML = "hello world"
//tags[0].innerText = "hello world"
//这两个属性都可以改变标签的值，但是innerHTML可以解析文本中包含的标签，innerText则不行
//比如 tags[0].innerHTML = "helloworld
"，这样解析出来会将"hellowordl"的样式改成
//h1，而innerText不会有这样的效果，它会直接将文本中的标签当作文本显示
函数
函数分类
有名函数
function coke(){
console.log("我从海上来...")
}
coke() //调用函数
函数表达式
var coke = function(){
console.log("我回海上去...")
}
coke()
匿名函数
顾名思义：没有名字的函数
function(){
console.log("我从云中来...")
}
//此时，这里控制台是会报错的，因为匿名函数不能单独存在
//要匿名函数执行，需要函数自执行,如下：
(function(){
console.log("我回云中去...")
})()
函数自执行
函数自执行的两种方式
(function(){
console.log("我从风中来...")
})()
(function(){
console.log("我回风中去...")
}())
函数的基本应用
函数中的return关键字
函数中的形参、实参
函数中的arguments参数：参数的集合
操作元素的属性
元素的自有属性
var oimg = document.querySelector("img")
oimg.src = "aaa.jpg"
var oa = document.querySelector("a")
oa.href = "http://www.baidu.com"
//此种方式可以操控大部分的元素属性，但是还有一部分不能操控，比如：div的name属性
//要操控这类属性，可以参看下方的通用属性操作方法
元素属性的通用设置
getAttribute("属性名")
setAttribute("属性名","新的属性值")
var oimg = document.querySelector("img")
var osrc = oimg.getAttribute("src")
var oa = document.querySelector("a")
var ohref = oa.getAttribbute("href")
console.log("=======================")
oimg.setAttribute("src","bbb.jpg")
自定义属性
<div name="zhangsna" id= "a" hhhh = "hhhh"> xxx</div>
//上面的hhhh就是自定义属性，因为它是我自定义的，跟div本身的属性没有关系，html原生并不支持
var odiv = document.querySelector("div")
odiv.setAttribute("hhhh","hhhh") //设置自定义属性
操作元素的css样式
行内样式操作
var odiv = document.querySelector(".box");
odiv.style.width = 500+ "px"
console.log(odiv.style.width)
odiv.style.cssText = "width:500px;height=300px;background-color=black"
内部样式获取
<html>
<head>
<style>
.box{
width:500px;
height:300px;
background-color:blue;
}
style>
head>
<body>
<div class="box"> box>
body>
html>
var obox = document.getElementsByTagName("div")[0]
console.log(getComputedStyle(obox,null)["width"])
//getComputedStyle(obox,null)这个方法的第二个参数指的是尾元素
外部样式获取
<html>
<head>
<link rel="sheetstyle" href="demo.css" />
<style>
.box{
width:500px;
height:300px;
background-color:blue;
}
style>
head>
<body>
<div class="box"> box>
body>
html>
.box{
width:800px;
background-color:green;
}
var odiv = document.getElementByTagName("div")[0]
console.log(getComputedStyle(odiv,null)["width"])
浏览器的事件
事件就是用户在浏览器中作出的一些操作。
dom事件
<script>
var odiv = document.querySelector(".box")
odiv.onclick= function(){
odiv.style.cssText="width:500px;height:600px;background-color:pink"
}
odiv.onmousemove = function(){
odiv.style.cssText = "width:600px;height:600px;background-color:brown"
}
</script>
bom事件
//onload事件
//onerror事件
//onresize事件 窗口改变事件
//onscroll 滚动跳滚动事件
window.onload = function(){
console.log("窗口加载完毕...")
}
window.onresize = function(){
console.log("页面视口发生变化...")
}
window.onscroll = function(){
console.log("窗口滚动条滚动...")
}