01-javascript 变量和操作元素

JavaScript

嵌入页面的方式：

1、行间事件（主要用于事件）

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

2、页面script标签嵌入：

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

3、外部引入

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

注释：
1、单行注释：//单行内容
2、多行注释：/*
多行内容
*/

每条js语句以分号结尾;

变量声明和类型：
JavaScript是一种弱类型语言，变量类型由它的值来决定。定义变量用关键字var：

var iNum = 123
var sTr = "abc"

同时定义多个变量：
var iNum = 23,sTr = "www",sCount = "77";

变量类型：
5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true或false
4、undefined undefined类型，变量声明但没赋值，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null，在页面上获取不到对象，返回的值就是null

1种复合类型：object

变量、函数、属性、参数命名规则：
1、区分大小写
2、第一个字符必须是字符、下划线或者$
3、其它字符可以是字母、下划线、$或者数字

匈牙利命名风格：

对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemName
布尔值 Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck

操作元素属性

获取页面元素，就可以对页面元素属性进行操作，包括属性的读和写

操作属性的方法：
1、.
2 、[]

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

.操作属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        //window.onload = function(){}表示整个页面加载完之后再执行花括号中的语句。如果不加这个，直接写花括号中的语句“document.getElementById("div1").style.color = "red";”会发生错误，因为执行这句js代码时，下面的“div1”还没有加载，会找不到它。
        window.onload = function(){

        document.getElementById("div1").style.color = "red";

        // 这句是错误的，因为font-size需要写成：fontSize,凡是有-的都改成这种驼峰式
        //document.getElementById("div1").style.font-size = "30px";
        document.getElementById("div1").style.fontSize = "30px";


        var oDiv = document.getElementById("div1");
        oDiv.style.backgroundColor="green";


    }
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>

</body>
</html>

[]操作属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById("div1");

            var sMystyle = "color";
            var sValue = "red";

            // 属性用变量代替的话，这样用.不行，因为js会把style.后面的变量当做一个style的属性，所以这个地方不能用.
            // oDiv.style.sMystyle = sValue;
            // 可以这样：用中括号，这样js就知道里面是一个变量了
            oDiv.style[sMystyle] = sValue;

        }
    </script>
</head>
<body>
    <div id="div1">this is a div</div>
</body>
</html>

innerHTML

innerHTML可以读取或写入标签包裹的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML</title>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById("div1");

            // 读取
            var sTxt = oDiv.innerHTML
            alert(sTxt)

            // 写入
            oDiv.innerHTML = "hahahaahhh"
            // 甚至可以塞进去标签：
            oDiv.innerHTML = "<a href='www.baidu'>baidu</a>"
        }
    </script>
</head>
<body>
    <div id="div1">this is a div</div>
</body>
</html>

posted @ 2019-03-16 00:33 greenfan 阅读(114) 评论(0) 收藏举报

刷新页面返回顶部

greenfan

01-javascript 变量和操作元素

公告