Python JavaScript1: 变量和操作元素

2019-03-22 本文已影响30人 IIronMan

一、JavaScript 介绍

1.1、JavaScript 是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。
1.2、前端三大块
- HTML：页面结构
- CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
- JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能

1.3、JavaScript嵌入页面的方式

方式一：行间事件（主要用于事件）

<input type="button" name="" onclick="alert('ok！');">

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript的基础介绍</title>
</head>
<body>
     <input type="button" name="" value="点击" onclick="alert('hello world!')">
</body>
</html>

方式二：页面script标签嵌入

 <script type="text/javascript">        
      alert('ok！');
 </script>

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript的基础介绍</title>
    <script type="text/javascript">
        alert('hello world!');
    </script>
</head>
<body>
</body>
</html>

方式三：外部引入

<script type="text/javascript" src="js/index.js"></script>

举例如下：

外部引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript的基础介绍</title>
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
</body>
</html>

二、JavaScript：变量

2.1、JavaScript 是一种弱类型语言，Javascript 的变量类型由它的值来决定。定义变量需要用关键字 'var',如下

var iNum = 100;
var sSTr = 'IronMan';

同时定义多个变量(优点是：性能更高一些),可以用 "," 隔开，共用一个 ‘var’ 关键字，入下

var iNum = 100,var sSTr = 'IronMan',sCount='20';

提示：JS 里面没有严格的缩进
JavaScript 注释的方式如下：单行注释 与 多行注释
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>变量</title>
   <script type="text/javascript">

       var iNum = 100;
       var sStr = "王冲"
       // 单行注释
       alert(iNum)
       /*
          多行注释
        */
       alert(sStr)

    </script>
</head>
<body>
</body>
</html>
一条javascript语句应该以“;”结尾

2.2、变量类型：5种基本数据类型和 1种复合类型
- 5种基本数据类型
  - <1>、number 数字类型
  - <2>、string 字符串类型
  - <3>、boolean 布尔类型 true 或 false
  - <4>、undefined undefined类型，变量声明未初始化，它的值就是undefined
  - <5>、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
- 1种复合类型：object
2.3、变量、函数、属性、函数参数命名规范
- 1、区分大小写
- 2、第一个字符必须是 字母、下划线 _ 或者美元符号 $
- 3、其他字符可以是字母、下划线、美元符或数字
匈牙利命名风格：
对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck

三、获取元素方法

提示：id 是给 JS 来使用的，下面我们会用id与JS结合来获取来获取一个标签对象,可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html(标签对象)对象，然后将它赋值给一个变量，
<script type="text/javascript">

   window.onload = function () {
       var oDiv = document.getElementById('box1')
   }
</script>

3.1、获取元素后操作元素的方法一：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行,比如：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>获取元素</title>
   <script type="text/javascript">
   <!-- 等整个页面加载完之后再去执行下面的语句 -->
       window.onload = function () {
          var oDiv = document.getElementById('box1')
          oDiv.style.color='red';
          oDiv.style.fontSize = '30px';
       }
    </script>
</head>
<body>
   <div id="box1">这是一个div</div>
</body>
</html>

3.2、获取元素后操作元素的方法二：不使用 window.onload,直接把JS代码放到对应标签下面，如下

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>获取元素</title>
</head>
 <body>
    <div id="box1">这是一个div</div>
    <script type="text/javascript">
       var oDiv = document.getElementById('box1')
       oDiv.style.color='red';
       oDiv.style.fontSize = '30px';
    </script>
</body>
</html>

四、操作元素属性
获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括 属性的读和写。操作属性的方法： 1、“.” 操作和2、“[ ]”操作

4.1、属性写法

1、html 的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

通过 “.” 操作属性：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>操作元素属性</title>
   <script type="text/javascript">

        window.onload=function () {
            var oDiv = document.getElementById("div1");
            var oDiv2 = document.getElementById("div2");
            var oA = document.getElementById("link");

            // 读取属性
            var sId = oA.id;
            alert(sId);

            // 写属性
            oDiv.style.color = "green";
            oA.href = "http://www.baidu.com";
            oA.title = "百度";

            oDiv2.className = "box1"
         }

    </script>
    <style type="text/css">
       .box{
           font-size: 20px;
           color: pink;
        }
       .box1{
           color: gold;
       }
     </style>
</head>
<body>
   <div id="div1">这是一个div元素</div>
   <a href="#" id="link">这是一个链接</a>

   <div class="box" id="div2">这是一个div元素</div>
</body>
</html>

通过 “[ ]” 操作属性：

<script type="text/javascript">
    window.onload = function(){
         var oInput1 = document.getElementById('input1');
         var oInput2 = document.getElementById('input2');
         var oA = document.getElementById('link1');
         // 读取属性
         var sVal1 = oInput1.value;
         var sVal2 = oInput2.value;
         // 写(设置)属性
         // oA.style.val1 = val2; 没反应
         oA.style[sVal1] = sVal2;        
    }
</script>
......
<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.baidu.com" id="link1">百度</a>

提示：属性用变量来代替的话需要用 [] 来操作

4.2、innerHTML 可以读取或者写入标签包裹的内容

<script type="text/javascript">
    window.onload = function(){
       var oDiv = document.getElementById('div1');
       //读取
       var sTxt = oDiv.innerHTML;
       alert(sTxt);
       //写入
        oDiv.innerHTML = '<a href="http://www.baidu.com" id="link1">百度</a>';
     }
</script>

......

<div id="div1">这是一个div元素</div>

Python JavaScript1: 变量和操作元素

猜你喜欢

热点阅读