侧边栏壁纸
博主头像
LYMTICS

海纳百川,有容乃大

  • 累计撰写 45 篇文章
  • 累计创建 37 个标签
  • 累计收到 19 条评论

目 录CONTENT

文章目录

Javascript 学习

LYMTICS
2020-06-20 / 0 评论 / 0 点赞 / 28 阅读 / 4,537 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-12,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

Javascript 学习

总框架

  1. HTML+CSS
  2. Javascript
  3. 框架

Javascript 基础语法

三种添加方式

<script>
	alert('内嵌');
</script>

<button onclick = "alert('行内js')">按钮</button>


<script src = "pop.js">这里的不会被执行</script>

基本语法

变量

//变量
var age = 25;
//输出变量
console.log(age);
//声明多个变量
var age=25, id="Hello";

数据类型

数据类型 说明
number 整数 32位整数, 64为浮点数
字符串 \u4e00 \u9fa5
boolean 布尔 true false
null 未附值
undefined 未定义
typeof()
typeof 
  • NaN not a number
  • isNaN 判断数据是否为非数字 结果是boolean

强制转换

变量.toString(); //字符串

parseInt(数据); //获取整数部分, 如果第一个就是非整数, 结果为NaN

parseFloat();

Number(); //将一个字符解析为number, 如果包含非法字符, 则NaN

运算符和表达式

/* 算数运算符 */
1+1;	//也可用于字符串相连
1-1;
1*1;
1/1;
1%1;
n++;	++n;
n--;	--n;

/* 关系运算符 */
>, >=, <, <=, ==, !=;
===;	//全等, 比较类型
!==;	//不全等

/* 逻辑运算符 */
&&; ||; !;

/* 三目运算符 */
表达式1? 操作1 : 操作2;

函数

/* 声明 */
function name(){
    语句;
    return 值;
}

/* 调用 */
name();


函数作用域, 全局作用域

不加var也是全局变量

数组

索引数组
var arr1 = [];
var arr2 = [1,2];
var arr3 = new Array();
var arr4 = new Array(1,2);

访问: 下标

console.log(arr4[1]);	//1
arr4[2] = 3;			//新加一个元素
arr1.length				//获得其长度
  • 不限制数组元素的个数: 长度可变
  • 不限制下标越界
  • 不限制元素类型
关联数组
for(var key in hash)	//遍历
    ;					

length失效

数组API
  1. String(arr)将arr中每个元素转换为字符串,用逗号分隔

    可以鉴别是否被修改

  2. arr.join(“连接符”)将arr中每个圆度转为字符串,用自定义的连接符分割

    可以将字符组成单词, 将单词组成句子

    chars.join("");
    

    判断其是不是空数组

  3. concat() 拼接两个或更多的数组并返回结果

    A1 = A2.concat(A3, A4, 50);	//A2不会被修改
    
  4. slice()返回现有数组的一个子数组,不会修改原来的数组

    ar2 = ar.slice(1,2);
    ar2 = ar.slice(2);		//从2到结尾
    ar2 = ar.slice();		//复制数组
    

    含头不含尾

  5. 删除, 插入, 替换

    ar.splice(starti, n , 要插入的ar)
    ar.splice(2, 1);
    ar.splice(2, 0, 3);
    ar.splice(2,1,1);
    

ECMA5

DOM

DOM查找

var elem = document.getElementById("id");
  • 效率高
  • 强调: 只能用在document上
  • 何时: 精确查找一个元素
  • 问题: 不是所有元素都有id
var elem = parent.getElementByTagName("tag");
var list = ul.getElementByTagName("li");
  • 查找指定parent节点下的所有标签为tag的子代节点
  • 强调
    • 可用在任意父元素上
    • 不仅查直接子节点,而且查所有子代节点
    • 返回-个动态集合.即使只找到一个元素,也返回集合必须用[0],取出唯一元素
  • 问题: 不但找直接, 而且找所有的子代.
doucument.getElementByName('boy');
  • 可以返回DOM树中具有指定name属性值的所有子元素集合。
var ar = parent.getElementByClassName("class");
  • 查找父元素下指定class属性的元素
  • 有兼容性问题IE9+

CSS选择器

var ar = parent.querySelector("selector");
  • selector支持一切css中的选择器
  • 如果选择器匹配的有多个, 只返回第一个
var el = parent.qureySelectorAll("selector");

DOM修改

DOM核心DOMHTML_DOM
核心DOM HTML DOM
万能 不是万能
繁琐 简单
  • 核心DOM: 4个操作

    1. 读取属性值

      1. 先获得属性节点对象, 再获得节点对象的值

        var attrNode = elem.attributes[下标/属性值];
        var attrNode = elem.getAttributeNode(属性名);
        
      2. 直接获得属性名

        var value = elem.getAttribute("属性名");
        
    2. 修改属性值

      var h1 = document.getElementById("a1");
      h1.setAttributeNode("Name" , zhangji);
      
    3. 判断是否包含指定属性

      val bool = elem.hasAttribute("属性名");	//true or false
      
    4. 移除属性

      var a = document.getElementById("alink");
      a.removeAttribute("class");
      

修改样式

elem.style.属性名

属性名: 去横线, 变驼峰

0

评论区