JS-第一节课程

一、JavaScript（JS）定义：

• JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。

• JavaScript通常用来操作HTML页面，响应用户操作，验证传输数据等。

• jQuery和JavaScript有什么关系？jQuery是由JS编写的一个js库。

二、JS代码写在哪里？

1 JavaScript代码可以写在页面的

• 内嵌 js，
• 外链 js文件里面，利用src属性引入

• 标签属性里面（不推荐）；

  1. script标签中的属性type="text/javascript"或language=”javascript”，HTML5新规则下可以什么都不用加；

  2. script标签可以放置于任何位置，不同的位置要注意加载顺序，通常放在head或body结束之前；

三、 写JS代码需要注意什么

1、严格区分大小写；

2、语句字符都是半角字符；（字符串里面可以使任意字符）；

3、某些完整语句后面要写分号 (;)；

4、代码要缩进，缩进要对齐；

四、 JS调试

五、变量

当我们重复使用某个元素或者某个数据时，内容可能太长或者数据要进行改变，这时就需要定义变量来代替他们。

　　语法：`var` + `变量名`

• • • var 声明
    • 变量命名规则：

　　可以使用`$` , `_` ,`字母`， `数字`，[ 不能以数字开头 ] ,[字母严格区分大小写], [见名知意]

　　　　　　　　1.var abc; //申明不赋值
　　　　　　　　2.var obj = 123;//申明立即赋值

　　一个var可以声明多个变量，变量不一定要马上赋值

　　　　　　　　1. var a,b,c,d;//一次声明多个变量
　　　　　　　　2. var a = 1,b = 2, c = 3,d = 4;//一次声明多个申明即赋值的变量

六 、Js中的注释

• 单行 //
• 多行 /* */

七、获取元素

1. 获取元素 
• 特殊的标签 
  
  • document.body
  • document.head
  • document.title
• 一般标签 
• document.getElementById() 匹配ID名称…
• ele.getElementsByTagName() 匹配标签名是…的集合动态方法         //类数组　　多个
  • ele.getElementsByTagName("*")    通配符使用；
• document.getElementsByName() 匹配name是…的集合 动态方法        //类数组　　多个       
• ele.getElementsByClassName() 匹配class名称…的集合 动态方法          //类数组　　多个
• ele.querySelector(); 匹配css选择器的第一个
• ele.querySelectorAll(); 匹配css选择器匹配的所有集合     //类数组　　多个
  . 及[]的运用
• 例子：
• getElementById和getElementByTagName结合使用。

  • • var obj=document.getElementById('main');

    • var o = obj.getElementsByTagName("*");

    • alert(o.length);

• 查找有多个类名的节点

  • • //查找同时带有类名“tag”和“header”的节点，将类名用空格隔开，与顺序无关　　

    • var objs = document.getElementsByClassName("tag header");

    • console.log("类名为header的元素的个数为："+objs.length);

• getElementById和getElementsByClassName

  • • • var obj = document.getElementById("container");
      • var objs = obj.getElementsByClassName("header");
      • console.log("id为container的div中类名为header的节点的个数为："+objs.length);　

• querySelector()的使用（匹配css选择器的第一个）

  • • • var obj=document.querySelector('#container #main ul li');
      • alert(obj.textContent);====>“getElementById111”　　　　　
• ele.querySelectorAll()的使用（匹配css选择器匹配的所有集合--多个）

  • • • var obj=document.querySelectorAll('#container #main ul li');

      • alert(obj.length);====>3
      • for (var i = 0; i < obj.length; i++) {
      • console.log(obj[i]);====>getElementById111，getElementsByClassName222，getElementsByTagName333
      • }　　　　　　　

八、获取和修改元素HTML

• 元素HTML内容 
  ele.innerHTML 获取元素HTML 
  ele.innerHTML = ‘字符串’; 修改元素HTML

  • 套路：“用于修改元素的HTML内容(innerHTML)的JS代码，被修改元素必须在JS代码之前”；

• 元素文本内容 
  标准 
  ele.textContent 获取元素文本 
  ele.textContent = ‘字符串’; 修改元素文本 
  非标准(ie低版本) 
  ele.innerText 获取元素文本 
  ele.innerText = ‘字符串’; 修改元素文本

九、HTML代码

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有