JavaScript

---

var num = 10;

• 分号尽量加上

• 标识符不能数字开头

变量的提升

console.log(100)//日志打印信息

var num;

console.log(num);//即便是没有赋值也可以打印undefined

num = 10;

---

常量

const

• const URL = “http://www.itbaizhan.com”;//常量一旦声明之后就不允许再改

---

什么是CDN

• 网络加速资源(服务器遍布区)，加速用户访问网络速度

<script src="cdn网址"></script>

---

数据类型

1. 数值

2. 字符串

3. 布尔

4. null

   • 空对象

5. undefined

   • 未定义，不赋任何值

6. 对象

   • var obj = { //里面不再用_var_ name = "zhangsan"; age = 10; flag = false; }

---

typeof

检验数据是什么类型

• typeof "1233" //返回String

• console.log(typeof true) //打印boolean

• console.log(typeof undefined) //打印undefined

• console.log(typeof null) //打印object

---

算术运算符

• 非数值的相加

var f1 = true  //计算时 f1 == 1;
var f2 = false //计算时 f2 == 0;

• 字符串相加 s1 + f1 = s1true；

---

== 和 ===

• 双等只比较值内容
• 三等比较值和类型

---

位运算

!= 按位取反后的值为true

console.log(!false);
console.log(!undefined);
console.log(!null);
console.log(!0);
console.log(!NaN);
console.log(!"");

• 其他的取反全部都是false

---

类型的转换(强制转换)

1. Number()
2. String()
3. Boolean()参考上面!=代码

• 强制转换类型

console.log(typeof Number("aaa"); NAN类型，转换成了数字类型，但是不是数字

• 空字符串转换Number(“”)结果为 0

---

String

末尾加 \ 换行

• 转义字符
  • \0 null
  • \b 后退
  • \f 换页
  • \n换行
  • \r 回车
  • \t 制表符
  • \v 垂直制表符

字符串函数

• s1.concat(s2) 连接两个字符串
• s1.slice(0,4) s1.提取字符串子串 slice(4)从第四一直到最后
• s1.indexOf(‘a’) 查看a字符在哪个下标，没有返回-1
• s1.trim() 去除两边的空格
• s1.replace(‘abc’,‘bcd’) 将abc 转换为 bcd
• s1.split(“a”) 以字符a进行分割，若split(“”)则将所有字符分割

---

数组

两种定义

1. var arr=[‘sss’,‘adad’,‘dad’];
2. var arr = []; arr[0] = “sxs”; arr[1] = “sss”;

数组静态方法

• Array.isArray(arr); typeof(arr); 返回的是object
• arr.push();
• arr.pop();
• arr.join(“,”) 将所有元素中间加上","并返回字符串
• arr.concat() 两个数组的合并
• arr.slice(1,2) 子数组的提取 arr.slice(2) 从2一直到最后

---

函数

创建

function print(s){
	console.log(1);
}
返回值
function getName(name){
	return name;
}
var myName = getName(name);

数组去重

function unique(arr){
    if(!Array.isArray(arr)){
        console.log("数据类型不正确");
        return;
    }
    let res = [];
    for(var i = 0;i < arr.length;i++){
        if(res.indexOf(arr[i]) == -1){
            res.push(arr[i]);
        }
    }
    return res;  
}

用集合
function unique1(arr){
return [...new Set(arr)];
}

排序

// ...existing code...
var arr  = [1,1,1,12,2,2,3,3,4,6];
arr.sort(function(a, b) {
    return a - b; // 升序排序
});
console.log('排序后的数组:', arr);
// ...existing code...

---

DOM

1. 元素节点（Element）
   nodeType 值：1
   例如： < div >,< span >

2. 属性节点（Attr）
   nodeType 值：2
   现在已很少直接使用，属性通常作为元素的属性访问

3. 文本节点（Text）
   nodeType 值：3
   例如：元素中的文本内容

4. 注释节点（Comment）
   nodeType 值：8
   例如：

5. 文档节点（Document）
   nodeType 值：9
   例如：document 对象本身

6. 文档类型节点（DocumentType）
   nodeType 值：10
   例如：

7. 文档片段节点（DocumentFragment）
   nodeType 值：11
   用于批量操作 DOM 的临时容器

---

Document

var divs = document.getElementsByTagName("div");// 获取所有div元素,返回一个HTMLCollection
var classes = document.getElementsByClassName("news"); // 获取所有class为news的元素,返回一个HTMLCollection
//console.log(classes);

//<img name="img" src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo">
document.getElementsByName("img"); // 获取所有name为img的元素,返回一个NodeList

//<h3 id="title">我是标题</h3>
var title = document.getElementById("title"); // 获取id为title的元素,返回一个Element,只有一个元素
title.innerHTML = "我是标题"; // 修改元素的内容

//.类名 或者是 #id
 var title2 = document.querySelector("#title");//ES6 新增的API,可以通过CSS选择器获取元素,返回一个Element

 document.querySelectorAll();// 获取所有符合条件的元素,返回一个NodeList

---

Element

Element 对象是 DOM（文档对象模型）中用于表示 HTML 或 XML 文档中的元素节点的对象。它是所有 HTML 元素节点的基础类型，常见的如 div、span、a、img 等。

 element.id = "element"; // 获取id并且修改元素的id
 element.className = "element"; // 获取class并且修改元素的class.建议用add和remove方法
 element.className = "element class1"; // 可以添加多个class,建议用add和remove方法
element.classList.add("class2"); // 添加class,可以添加多个class
element.classList.remove("class2"); // 移除class2
element.innerHTML = "我是标题"; // 修改元素的内容
element.innerText = "我是标题"; // innerText和innerHTML的区别是innerHtml会解析HTML标签,而innerText不会
element.innerHTML = "<a href='#'>新闻</a>"; 

---

Attribute

element.getAttribute("id"); // 获取元素的属性值
element.setAttribute("class", "newClass"); // 设置元素的属性值
element.hasAttribute("class"); // 判断元素是否有class属性
element.removeAttribute("class"); // 移除元素的class属性

---

Node

element.textContent // 获取元素的文本内容,不解析HTML标签
element.textContent = "我是标题"; // 修改元素的文本内容,不解析HTML标签 可读可写

var p = document.createElement("p"); // 创建一个p元素,p标签
element.appendChild(p); // 添加子元素,如果有多个子元素,只能添加一个,如果要添加多个,需要循环添加
//父子关系

---

DOM-CSS

//方式一
element.setAttribute("style", "width:100px;height:100px;background-color:red;"); // 设置元素的属性值

//方式二。获取style
var style = element.style; // 获取元素的style
style.width = "200px"; // 修改style的width属性
style.height = "200px"; // 修改style的height属性

//方式三。整体设置
style.cssTest = "width:200px;height:200px;background-color:red;"; // 整体设置style,可以设置多个属性

---

事件处理

<script>
        var btn = document.getElementById('btn');
        btn.addEventListener('click', function() {
            // 获取按钮的文本内容
            var text = btn.innerText;
            // 弹出提示框显示按钮文本
            alert(text);
        });

        btn.addEventListener('click', clickHander);
        function clickHander(){
            console.log('按钮被点击了');
         
        }
</script>