JavaScript、Dom

JavaScript

JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。

1、JavaScript代码存在形式


1

2

3

4

5

6

7

<!-- 方式一 -->

<script type"text/javascript" src="JS文件"></script>

 

<!-- 方式二 -->

<script type"text/javascript">

    Js代码内容

</script>

2、JavaScript代码存在位置

  • HTML的head中
  • HTML的body代码块底部(推荐)

由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

3、变量

  • 全局变量
  • 局部变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量


1

2

var name = "seven"  # 局部变量  （一般用这个）

age = 18            # 全局变量

注：注释 // 或 /* */

4、基本数据类型

数字（Number）


1

2

3

4

5

var page = 111;

var age = Number(18);

var a1 = 1,a2 = 2, a3 = 3;  #一次声明多个变量

parseInt("1.2");            #将字符串变成数字

parseFloat("1.2");          #将字符串变成数字（小数）

字符串(String)


1

2

3

4

5

6

7

8

9

10

var name = "wupeiqi";

var name = String("wupeiqi");

var age_str = String(18);

 

常用方法：

    obj.trim()        #去空格、空白

    obj.charAt(index) #返回指定索引位置的字符

    obj.substring(start,end) #提取字符串中两个指定的索引号之间的字符

    obj.indexOf(char) #返回字符串中检索指定字符第一次出现的位置

    obj.length #返回字符串的长度

布尔(Boolean)


1

2

3

var status = true;

var status = false;

var status = Boolen(1==1) #同样，条件成立为true、不成立为false，1为true、0为false

数组(Array)


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

var names = [‘alex‘, ‘tony‘, ‘eric‘]

var names = Array(‘alex‘, ‘tony‘, ‘eric‘)

 

常用方法：

    添加

        obj.push(ele)                   追加

        obj.unshift(ele)                最前插入

        obj.splice(index,0,‘content‘)   指定索引插入

    移除

        obj.pop()                       数组尾部获取

        obj.shift()                     数组头部获取

        obj.splice(index,count)         数组指定位置后count个字符

      

    切片

        obj.slice(start,end)         

    合并

        newArray ＝ obj1.concat(obj2) 

    翻转

        obj.reverse()

      

    字符串化

        obj.join(‘_‘)

    长度

        obj.length

 

 

字典

var items = {‘k1‘: 123, ‘k2‘: ‘tony‘}

undefined


1

2

undefined表示未定义值

var name;

null


1

null是一个特殊值

5、循环语句


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

var names = ["alex", "tony", "rain"];

 

 

// 数组：方式一

for(var i=0;i<names.length;i++){

    console.log(i);

    console.log(names[i]);

}

 

 

// 数组：方式二

for(var index in names){

    console.log(index);

    console.log(names[index]);

}

 

var names = {"name": "alex", "age": 18};

 

 

// 字典：方式一

for(var index in names){

    console.log(index);

    console.log(names[index]);

}

 

 

// while循环

while(条件){

    // break;

    // continue;

}

6、条件语句


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

//if条件语句

 

    if(条件){

 

    }else if(条件){

         

    }else{

 

    }

 

var name = ‘alex‘;

var age = 1;

 

// switch,case语句

    switch(name){

        case ‘1‘:

            age = 123;

            break;

        case ‘2‘:

            age = 456;

            break;

        default :

            age = 777;

    }

7、异常处理


1

2

3

4

5

6

7

try{

 

}catch(e) {

 

}finally{

 

}

8、函数


1

2

3

4

5

6

7

8

9

10

11

12

13

14

函数的声明

    function func(arg){

        return true;

    }

         

匿名函数

    var func = function(arg){

        return "tony";

    }

 

自执行函数

    (function(arg){

        console.log(arg);

    })(‘123‘)

9、面向对象


1

2

3

4

5

6

7

8

9

10

11

function Foo (name,age) {

    this.Name = name;

    this.Age = age;

    this.Func = function(arg){

        return this.Name + arg;

    }

}

 

var obj = new Foo(‘alex‘, 18);

var ret = obj.Func("sb");

console.log(ret);

Dom

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

注：一般说的JS让页面动起来泛指JavaScript和Dom

1、选择器


1

2

3

document.getElementById(‘id‘);          #按id查询

document.getElementsByName(‘name‘);     #按名字查询

document.getElementsByTagName(‘tagname‘); #按标签名字查询

2、内容


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

innerText

innerHTML

 

var obj = document.getElementById(‘nid‘)

obj.innerText                       # 获取文本内容

obj.innerText = "hello"             # 设置文本内容

obj.innerHTML                       # 获取HTML内容

obj.innerHTML = "<h1>asd</h1>"      # 设置HTML内容

 

 

特殊的：

    input系列

    textarea标签

    select标签

 

    value属性操作用户输入和选择的值

3、创建标签


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

方式一：

    var obj = document.createElement(‘a‘);

    obj.href = "http://www.etiantian.org";

    obj.innerText = "老男孩";

 

    var container = document.getElementById(‘container‘);

    //container.appendChild(obj);

    //container.insertBefore(obj, container.firstChild);

    //container.insertBefore(obj, document.getElementById(‘hhh‘));

 

方式二：

    var container = document.getElementById(‘container‘);

    var obj = "<input  type=‘text‘ />";

    container.innerHTML = obj;

    // ‘beforeBegin‘, ‘afterBegin‘, ‘beforeEnd‘,  ‘afterEnd‘

    //container.insertAdjacentHTML("beforeEnd",obj);

4、标签属性


1

2

3

4

5

6

7

8

9

10

11

var obj = document.getElementById(‘container‘);

固定属性

    obj.id

    obj.id = "nid"

    obj.className

    obj.style.fontSize = "88px";

 

自定义属性

    obj.setAttribute(name,value)

    obj.getAttribute(name)

    obj.removeAttribute(name)

5、提交表单


1

document.geElementById(‘form‘).submit()

6、事件


特殊的：


1

2

3

window.onload = function(){}

        //jQuery：$(document).ready(function(){})

        //onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。图片还么有渲染，就可以进行事件的执行。

特殊参数：this，event

7、其他功能


1

2

3

4

5

6

7

8

9

10

11

12

13

console.log()

alert()

confirm()

 

// URL和刷新

location.href

location.href = "url"  window.location.reload()

 

// 定时器

setInterval("alert()",2000);  

clearInterval(obj)

setTimeout();  

clearTimeout(obj)

实例：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>欢迎xxx莅临指导</title>

</head>

<body>

    <input type="button" value="stop" onclick="Stop();"/>

    <input type="button" value="start" onclick="Start();"/>

    <script>

//        obj1 = setInterval(‘Func();‘,100);

        obj1 = setTimeout(‘Func();‘,5000)

        function Stop(){

            clearInterval(obj1);

        }

        function Start(){

            obj1 = setInterval(‘Func();‘,100);

        }

        function Func(){

            var title = document.title;

            var first_char = title.charAt(0);

            var subchar = title.substring(1,title.length);

            var newchar = subchar + first_char;

            document.title = newchar;

        }

    </script>

</body>

</html>

搜索框：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<!DOCTYPE html>

<html>

    <head>

        <meta charset=‘utf-8‘ />

        <title></title>

        

        <style>

            .gray{

                color:gray;

            }

            .black{

                color:black;

            }

        </style>

        <script type="text/javascript">

            function Enter(){

               var id= document.getElementById("tip")

               id.className = ‘black‘;

               if(id.value==‘请输入关键字‘||id.value.trim()==‘‘){

                    id.value = ‘‘

               }

            }

            function Leave(){

                var id= document.getElementById("tip")

                var val = id.value;

                if(val.length==0||id.value.trim()==‘‘){

                    id.value = ‘请输入关键字‘

                    id.className = ‘gray‘;

                }else{

                    id.className = ‘black‘;

                }

            }

        </script>

    </head>

    <body>

        <input type=‘text‘ class=‘gray‘ id=‘tip‘ value=‘请输入关键字‘ onfocus=‘Enter();‘  onblur=‘Leave();‘/>

    </body>

</html>

来自为知笔记(Wiz)

时间： 2024-10-24 07:25:37

JavaScript、Dom的相关文章

Javascript、Dom、JQuery

1.Javascript JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的. 1.1 存在形式 1 1.文件形式 2 <script src="../jquery-2.2.0.js" type="text/javascript"></script> 3 2.嵌入HTML中 4 &l

JavaScript、Dom和jQuery

1 var obj=document.getElementById('t1') 2 3 obj.innerText 4 5 obj.innerHTML 1.javascript 插入代码如下: 1 <script type="text/javascript"> 2 var name="server"; //#局部变量 3 age=18; /*#全局变量*/ 4 //for 5 var names=['alex','tony','rain']; 6 for

python学习之路 CSS、JavaScript、Dom后续

CSS补充 页面布局 一般我们不知道布局的时候可以使用分割方式把页面分为主要分三个部分 <div class='pg-header'> <div style='width:980px;margin;0 auto;'> 内容居中 </div> </div> <div class='pg-content'></div> <div class='pg-footer'></div> 就像上面一样把页面简单的分为3个部分

Css、javascript、dom

一:Css 1.1:position定义和用法 position 属性规定元素的定位类型. 可能的值 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. fixed 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过 "left", "

3、DOM操作

一.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合,三种常见的DOM节点: 1. 元素节点:上图中<html>.<body>.<p>等都是元素节点,即标签. 2. 文本节点:向用户展示的内容,如<li>...</li>

JavaScript的DOM（文档对象）基础语法总结1

---恢复内容开始--- 前言:HTML文档可以说由节点构成的集合,DOM节点有: 1). 元素节点:上图中<html>.<body>.<p>等都是元素节点,即标签. 2). 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript.DOM.CSS等文本. 3). 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com". 1.节点属性: 2.遍历节点树

javascript操作DOM的方法与属性

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构. 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合,DOM节点有: 1. 元素节点:上图中<html>.<body>.<p>等都是元素节点,即标签. 2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript.DOM.CSS等文本. 3.

JavaScript（三、DOM文档对象模型）

一.什么是DOM DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式." W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对

JavaScript（核心、BOM、DOM）

http://www.flyne.org/article/407 JavaScript(核心.BOM.DOM) JavaScript是基于对象和事件驱动的客户端脚本语言.有如下特点: 交互性 安全性(不可以直接访问本地硬盘) 跨平台性(只要是可以解析js的浏览器都可以执行,和平台无关) 1.JavaScript和Java不同! ①所属:NetScape和Sun ②基于对象和面向对象 ③JS可以直接解析执行,Java需先编译在运行 ④JavaScript是一种弱类型的语言,Java是强类型的语言.