js day01 变量, 引入, 属性操作, 样式操作

一, javascript引入

1、行内 不建议使用

是在开始标签内 写入js的代码

注意:我们一般不使用行内，因为会降低服务器或者浏览器的性能，增加维护的难度

<!-- 需求：在开始标签内写入一个点击事件，然后弹出一个框 -->
onclick：单击事件名称
alert（）：他是js自带的弹窗，带有一个确定按钮，具有阻塞（如果我不点击确定，后面的代码不会执行）作用,只是用来测试使用不能用于实际开发
<div onclick="alert('我是行内js')"></div>

2、内部（内嵌）

• 在使用内部的js的时候，需要使用script双标签，所有的js代码必须放在这个script双标签之间
• 这个script双标签可以放在页面的任何位置，但是建议放在head和body的结束标签之前

<script>
alert('我是内部的js使用');

</script>

3、外部

使用外部js需要在外部建立一个外部的js文件，扩展名.js

在页面中使用script双标签，使用属性src链接外部js的路径

可以放在页面的任何位置，但是建议放在head和body的结束标签之前

 <script src="./index.js"></script>

4、伪协议

这个伪协议是针对超链接 只要用到js操作超链接

就需要在超链接的属性href写入javascript:;

<a href="javascript:;"></a>

// document:文档
// get：获取
// set:设置
// Element：元素
// By:通过
// Id:id

// 通过id获取这个元素

document.getElementById('a').onclick = function(){
alert('123')
}

放置位置的问题

window.onload :

原因：代码的加载顺序是从上到下，从左到右，找不到元素的

window.onload就是先去加载页面的资源（标签，文本，图片等等）在去加载window.onload里面的js代码

注意：一个页面中，只能有一个window.onload，如果有多个，后面的会覆盖前面的

// 使用window.onload
window.onload = function () {
    document.getElementById('box').onclick = function () {
        // 事件触发后，元素执行的动作代码块
        alert(123);

    }
}

二,注释

单行： // 只能注释一行代码 ctrl+/

块注释：/*注释的代码*/ 可以注释多行代码 ctrl+ /

文件 - 首先项 - 键盘快捷方式

引号

单引号和双引号的作用是一样的

使用：不管是单引号还是双引号必须成对出现，不能交叉使用

// 如果外面是双引号，里面必须使用单引号  反之亦然

alert("我是单引号'和'双引号结合使用");

三,javascript入门三部曲

// 需求：单击span，弹出“我被点击了”
// 1、谁发生事件   找元素 获取到
// document.getElementById('span')

// 2、确定发生什么事件
// 单击事件  onclick   

// 3、干什么事   弹出“我被点击了”

document.getElementById('span').onclick = function(){
    alert('我被点击了');
}

1,事件

onclick  单击事件
onmouseover 鼠标经过事件
onmouseout  鼠标离开的事件

onmouseleave 鼠标离开的事件
onmouseenter  鼠标经过事件

onmousedown 鼠标按下事件
onmouseup  鼠标抬起事件

onmousemove 鼠标的移动的事件
oncontextmenu 鼠标右键事件

2,变量

变量就是用来存储值得一个容器

我们在声明变量的时候，要使用关键字 var

注意：先声明后使用

// 在js里面，一个变量的数据类型，是有等号右边的值来决定的
var a = 10;
var b = 0.2;  

变量的声明规则

1、使用字母、下划线、$开头

2、使用字母、下划线、$、数字组成

3、不能使用关键字和保留字（就是现在不是关键字，但是将来会成为关键字的字）

4、遵循驼峰命名法(当变量名由两个单词或者两个以上的代词构成的时候，从第二个单词开始，首字母要大写)

5、有语义化

// 变量的声明规则
var userName= '张三';
var passWord = '123';

变量的声明方式

• 声明一个变量，并赋值

var a = 10;

• 同时声明多个变量并赋值，多个变量之间用逗号隔开

 var a = 10, b = 20, c = 30, d = 40;

• 同时声明多个变量，并分开赋值

var sum,num,str,start;
sum=10;
num=20;
str=30;
start=40;

3,元素属性操作

原有属性：也就是元素本身自带的属性

<img src="路径"> 
<a href=''></a>

非原有属性：是我们通过外部的方式给重新起名，并且重新赋值

<div abvc="123"></div>

• 使用点.的方式操作属性 只能拿原有属性
  • 获取属性 元素.属性名
  • 设置属性 元素.属性名 = '新的属性值’

// 获取属性
// 元素.属性名  
var box = document.getElementById('box');
alert(box.id);
alert(box.class); // undefined  
alert(box.title);

// 设置属性
// 元素.属性名='新属性值'
box.id = 'box1';
alert(box.id);

注意：class是一个保留字，和其他的属性操作方式不一样，必须使用className

// // 获取元素
// var box = document.getElementById('box');
// 获取属性
// alert(box.className);

// 需求：点击按钮，给div元素添加类名'active'

// 1、谁发生事件  button  获取这个按钮  
// 2、发生什么事件  onclick  点击事件  
// 3、干什么事  把active这个类，添加给div这个元素 

var btn = document.getElementById('btn');
var box = document.getElementById('box');
btn.onclick = function(){
    // 设置类名
    // box.className = 'active';
    box.className = '';

}

4,使用中括号的方式操作属性

// 获取元素
var aDiv = document.getElementById('box');

// 把属性名赋值给一个变量  就不可以使用点的方式了，需要使用中括号[]
var d = 'id';
// alert(aDiv[d]);
alert(aDiv['id']);  // return返回值的时候，会用到这个

5,样式 通过js操作的样式,全部属于行内样式

操作样式

元素.className

 box.className = 'active';

元素.style.样式名 = '样式值’

aDiv.style.width = '100px';
aDiv.style.height = '100px';
aDiv.style.background = 'blue';

// 注意：在js中，不承认 - ; 把横线删除掉，第二个单词开始，首字母大写
aDiv.style.backgroundColor = 'blue';

6,cssText

语法:元素.style.cssText = '样式名：样式值；..............'

覆盖的问题，当使用多个的时候，后面的会覆盖前面的

// 语法:元素.style.cssText = '样式名：样式值；..............'
// 获取元素
var aDiv = document.getElementById('box');

aDiv.style.cssText = 'width: 100px; height: 100px; border:2px solid blue';

// 解决方式：使用原来的样式 + 新的样式
aDiv.style.cssText = aDiv.style.cssText + 'background:red';

// 不兼容ie 6 7 8
aDiv.style.cssText +='background:red'; 

// 解决兼容:在样式的前面，引号的里面加 分号 ;
aDiv.style.cssText +=';background:red'; 

7,测试语句

alert()他是js自带的弹窗，带有一个确定按钮，具有阻塞（如果我不点击确定，后面的代码不会执行）作用,只是用来测试使用 不能用于实际开发

alert(1,2)
    // 在控制台打印，可以一次性打印多个
    console.log('我是在控制台打印的测试语句',1);

    // 对话框
    // 有一个输入内容的input框，有一个确定和取消按钮
    var a =  prompt('请输入内容');
    console.log(a)

8,获取标签内容

单标签是没有内容，input标签除外 双标签也是有内容的

单标签input

获取内容：元素.value

设置内容：元素.value = '新内容'

// 获取元素
var pt = document.getElementById('pt');
// 获取内容  元素.value
console.log(pt.value);
// 设置内容   元素.value = '新内容'
pt.value = '我是改变后的内容';

双标签内容

获取内容:元素.innerHTML / 元素.innerText

设置内容:元素.innerHTML = '新内容' / 元素.innerText = '新内容'

// 获取元素
var box = document.getElementById('box');

// 获取内容  元素.innerHTML / 元素.inerText 
console.log(box.innerHTML);
console.log(box.innerText)

// 设置内容 元素.innerHTML = '新内容'/ 元素.inerText  = '新内容'

box.innerHTML = '我是改变后的新内容1233'
box.innerText= '我是改变后的新内容1233888888'

区别：

​innerHTML可以识别标签

​ innerText 不可以识别标签

box.innerHTML = '<h2>我是改变后的新内容1233</h2>'
box.innerText= '<h2>我是改变后的新内容1233</h2>'

案例- 留言板

<div id="box"></div>
<input type="text" name="" id="pt"><button id="btn">按钮</button>
<script>
// 需求：在输入框内输入内容，点击按钮，把内容发送到上面的内容区域

// 1、是发生事件  button  获取这个元素 
// 2、发生什么事件   onclick 单击事件  
// 3、干什么事  
//     1、获取input的内容  元素.value
//     2、给div设置内容  元素.innerHTML = '新内容'（元素.value）

// 获取元素  
var btn = document.getElementById('btn');
var pt = document.getElementById('pt');
var box = document.getElementById('box');
// 添加事件
btn.onclick = function () {
    var ptrValue = pt.value;
    box.innerHTML += ptrValue + '<br />';
    pt.value = '';
}
</script>