JavaScript(一)

时间：2019-03-30 17:58:30 阅读：109 评论：0 收藏：0 [点我收藏+]

本文转载自：https://blog.csdn.net/xiaogeldx/article/details/85390757

注

在pycharm中快速注释HTML的方法（用于注释方法不正确时）：
- File--Settings--Languages&Frameworks--Python Template Languages--Template Languages改为None，HTML和JavaScript注释方法就都正确了
  
  JavaScript基础知识
网页三要素：HTML，css，js
JavaScript和Java没有任何关系，最多语法看起来有点像
JavaScript原名ivescript，是一门动态类型，弱类型基于原型的脚本语言
和HTML复合使用，不能单独使用
大部分浏览器都支持

JavaScript作用：
页面特效
前后交互
后台开发（node）

JavaScript写在哪里
写在script标签里

外部js文件引入

写在script标签里

  1.
  <head>
  <meta charset="UTF-8">
  <title>try</title>
  <script>
      alert("wer");
  </script>
  </head>
  <body>
  <div>
      <input type="button" value="点我" onclick="alert('bug')">
  </div>
  2.
  <head>
  <meta charset="UTF-8">
  <title>try</title>
  </head>
  <body>
  <div>
      <input type="button" value="点我" onclick="alert('bug')">
  </div>
  <script>
      alert("wer");
  </script>

技术分享图片

外部的js文件内，然后引入

  <head>
  <meta charset="UTF-8">
  <title>try</title>
  <script src="js/a.js"></script>
  </head>
  <body>
  <div>
      <input type="button" value="点我" onclick="alert('bug')">
  </div>

a.js的代码:
```
  alert("wer");
```
JS一些注意事项
严格区分大小写
每一行完整语句后面加分号
变量名不能使用关键字和保留字
代码要缩进，保持可读性
注释用//

JS修改元素内容
首先获取id为xxx的元素 document.getElementByld(" ")
var 是js定义变量的关键字,创建（声明变量），如果不加为全局变量
innerHTML和innerText可以修改/获取

JS获取元素
通过id获取元素:id
```
  document.getElementById(" ");
```
通过class名字获取元素:class
```
  document getElementsByClassName(" ");
```
通过标签名获取元素:tagName
```
  document.getElementsByTagName(" ");
```
通过name的属性获取元素，一般用于input:name
```
  document.getElementsByName(" ");
```
通过css选择器获取一个
```
  document.querySelector(" ");
```

通过css选择器获取所有

  document.querySelectorAll(" ");

案例

          <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
      <div id="div1">
          <p id="p1"><span>111</span></p>
          <p class="c1">2222</p>
          <span name="span1">3333</span>
      </div>
      <div class="div2">
          <p class="c1">5555</p>
          <span name="span1">6666</span>
          <p name="span1">7777</p>
          <span class="c1">8888</span>
      </div>
      <div>
          <p>9999</p>
          <span>0000</span>
      </div>
      <script type="text/javascript">
          //通过id获取元素,一个网页中一个id命名使用一次,所以不用加索引
          var a = document.getElementById('p1');
          a.onclick = function () {
              alert('bug');
          };
          //通过标签名获取元素,需要加索引
          var b = document.getElementsByTagName('span')[0];
          b.onclick = function () {
              alert('bug');
          };
          // 通过name获取元素,需要加索引
          var c = document.getElementsByName('span1')[1];
          c.onclick = function () {
              alert('bug');
          }
          // 通过classname获取元素,需要加索引
          var d = document.getElementsByClassName('c1')[1];
          d.onclick = function () {
              alert('bug');
          };
          // 通过css选择器获取一个元素
          // 单独的标签获取第一个,如果选择器里还嵌套标签,第一个选择器里面的所有标签都能获取,不能索引
          // 选div时,第一个div标签里的标签都能获取
          var e = document.querySelector('div');
          e.onclick = function(){
              alert('bug');
          };
          // 通过class标签获取所有
          // 此时获取的是id为div1下的所有的span标签
          // div标签里嵌套其他标签时需要索引,表示第几个div里的所有标签都可以获取
          // 单独的标签可以直接索引获取
          // #div1或者.div2加上里面的标签需要索引获取
          var f = document.querySelectorAll('div')[0];
          f.onclick = function () {
              alert('bug');
          };
      </script>
  </body>
  </html>

JavaScript简单事件

JS的基础事件

单击事件：onclick
双击事件:ondblclick
鼠标划入:onmouseenter
鼠标划出:onmouseleave

窗口变化:onresize

  // 浏览器窗口有变化时就会出现
  window.onresize = function () {
     alert("3245");
  };

改变下拉框:onchange

  <select>
      <option value="1">苹果</option>
      <option value="1">橘子</option>
      <option value="1">橙子</option>
  </select>
  <script type="text/javascript">
      var h = document.getElementsByTagName('select')[0];
      //改变下拉框里的值就会弹出
      h.onchange = function () {
          alert('改变了');
          };
  </script>

操作标签属性

合法属性的增删改查

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>try</title>
  </head>
  <body>
  <div>
      <p id="p1" class="s1">我是一句话</p>
  </div>
  <script type="text/javascript">
     var a = document.getElementById("p1");
     // 增/改：无则增，有则改
     a.className="hahaha";
     // 查
     console.log(a.className);
     // 删除
     a.removeAttribute("class");
     console.log(a);
  </script>
  </body>
  </html>

自定义属性的增删改查

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>try</title>
  </head>
  <body>
  <di
      <p id="p1" class="s1">我是一句话</p>
  </div>
  <script type="text/javascript">
     var a = document.getElementById("p1");
     // 增/改　无则增，有则改
     a.setAttribute("age","m");
     // 查，查到返回true，没查到返回false
     console.log(a.hasAttribute("age"));
     // 删除
     a.removeAttribute("age");
     console.log(a);
  </script>
  </body>
  </html>

JS修改样式

Obj.style.变量=变量值

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>try</title>
  </head>
  <body>
  <div id="div2" style="width: 100px;height: 100px;color: red;border:1px solid blue">
      <p id="p1" class="s1">我是一句话</p>
  </div>
  <script type="text/javascript">
     var b = document.getElementById("div2");
     b.style.width = "50px";
     b.style.height = "50px";
     console.log(b)
  </Script>
  </body>
  </html>

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>try</title>
  </head>
  <body>
  <div id="div2" style="width: 100px;height: 100px;color: red;border:1px solid blue">
      <p id="p1" class="s1">我是一句话</p>
  </div>
  <script type="text/javascript">
     var a = document.getElementById("div2");
     var b = document.getElementById("div2");
     b.onclick=function() {
             a.style.width = "50px";
             a.style.height = "50px";
         }
     console.log(b)
  </Script>
  </body>
  </html>

数据类型

js提供了一种检测当前变量的数据类型的方法，也就是typeof关键字

JS的数据类型
五种基本类型＋object（复杂型）

Number类型
Number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）两种值
```
  var a = 123;
  console.log(typeof a);
```
NaN:非数字类型
isNaN() 函数用于检查其参数是否是非数字值
```
  isNaN(123)  //false   
  isNaN("hello")  //true
```
String类型
字符串有length属性
字符串转换：转型函数String(),适用于任何数据类型（null,undefined 转换后为null和undefined）；toString()方法（null,defined没有toString()方法）

字符串要用引号

  var a = "123";
  console.log(typeof a);

Boolean类型

该类型只有两个值，true和false
```
  var a = true;
  console.log(typeof a);
```
Undefined类型
只有一个值，即undefined值。使用var声明了变量，但未给变量初始化值，那么这个变量的值就是undefined
```
  var a;
  console.log(typeof a);
```
Null类型
null类型被看做空对象指针，前文说到null类型也是空的对象引用
```
  var a = null;       //object
  console.log(typeof a);
```
null类型进行typeof操作符后，结果是object，原因在于null类型被当做一个空对象引用

Object类型
js中对象是一组属性与方法的集合,这里就要说到引用类型了，引用类型是一种数据结构，用于将数据和功能组织在一起,引用类型有时候也被称为对象定义，因为它们描述的是一类对象所具有的属性和方法

引用类型

Object类型
我们看到的大多数类型值都是Object类型的实例
创建Object实例的方式有两种
- 第一种是使用new操作符后跟Object构造函数，如下所示
```
  var person = new Object();
  person.name = "Micheal";
  person.age = 24;
```
- 第二种方式是使用对象字面量表示法，如下所示
```
  var person = {
  　　name : "Micheal",
  　　age : 24
  };
```
  Array类型
数组的每一项可以用来保存任何类型的数据，也就是说，可以用数组的第一个位置来保存字符串，第二个位置保存数值，第三个位置保存对象等等
数组的大小是可以动态调整的
创建数组的基本方式有两种
- 第一种是使用Array构造函数，如下所示
```
  var colors = new Array("red","blue","yellow");
```
- 第二种是使用数组字面量表示法，如下所示
```
  var colors = ["red","blue","yellow"];
```
  Function类型
每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法，函数通常是使用函数声明语法定义的，如下所示
```
  function sum(num1,num2){
  　　return num1 + num2;
  };
```

这和使用函数表达式定义函数的方式相差无几

  var sun = function (){
  　　return sum1 + sum2;
  };

案例

  var name = 'xiaoge';
  alert(typeof name);//string
  var age = 15;
  alert(typeof age);//number
  var flag = true;
  alert(typeof flag);//boolean
  var a;//undefined
  alert(typeof a);
  var b = null;
  alert(typeof b);//object
  var arr = [1,2,3];//object
  alert(typeof arr);
  var user = {
      name:'xiaoge',
      age:18
  };
  alert(typeof user);//object
  alert(typeof console.log());//undefined
  var say = function () {
      alert(name+'很帅');
  };
  alert(typeof say);//function
  alert(say())//xiaoge很帅//undefined

练习

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <link rel="stylesheet" href="css/reset.css">
      <link rel="stylesheet" href="css/test.css">
      <script src="js/test.js"></script>
  </head>
  <body>
  <div class="d1">
      属性名：<input type="text" class="an"><br>
      属性值：<input type="text" class="av"><br>
      <input type="button" value="设置" class="set1">
  </div>
  <div class="d2" style="width: 200px; height: 200px; background-color: yellow; line-height: 200px; text-align: center;">我就是我</div>
  <script type="text/javascript">
      var moumov = document.getElementsByClassName('d2')[0];
      moumov.onmouseenter = function () {
          moumov.innerText = '是我还是我';
          moumov.style.background = 'blue';
      };
      moumov.onmouseleave = function () {
          moumov.innerText = '我就是我';
          moumov.style.background = 'yellow';
      };
      var inp = document.getElementsByTagName('input');
      inp[2].onclick = function () {
          var attr = inp[0].value;
          var attrs = inp[1].value;
          moumov.style[attr] = attrs;
      };
  </script>
  </body>
  </html>

技术分享图片

JavaScript(一)

原文：https://www.cnblogs.com/xiaogeldx/p/10628227.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

JavaScript(一)

注

JavaScript基础知识

JavaScript作用：

JavaScript写在哪里

写在script标签里

外部的js文件内，然后引入

JS一些注意事项

JS修改元素内容

JS获取元素

案例

JavaScript简单事件

JS的基础事件

操作标签属性

JS修改样式

数据类型

JS的数据类型

Number类型

String类型

Boolean类型

Undefined类型

Null类型

Object类型

引用类型

Object类型

Array类型

Function类型

案例

练习