javascript基础知识和Dom编程学习

更新时间：2022-09-14 08:59:09

JavaScript

Dom编程--->操作html所有的标签（找到html文件，然后操作）

jQuery ---->开源模块（找，操作）

1、导入文件

func()

/*--引用js代码中的函数func */

</script>

2、JavaScript放置位置，一般放在html页面中body标签的底部，css可以放在head标签内，即html页面的头部

<!DOCTYPE html>

<head>

</head>

<body>

func()

/*--引用js代码中的函数func */

</script>

</body>

</html>

3、注释，单行注释用//，多行注释用/* ---- */

4、申明变量

局部变量申明用关键字var开头

例如:

var name="eric"

全局变量申明

例如:

name="alex

5、申明函数传入参数，然后直接调用执行自己

(function(arg){

alert(arg)

})("javascript")

6、字符串常用方法和属性

obj.trim() --->去掉字符串中的空格

obj.charAt(index) ------->通过字符串所以下标获取对应的字母

obj.substring(start,end) ----->截取字符串中的某一段，或者叫切片

obj.indexOf(char) ------->找出字符串中某个字符在字符串中下标的索引值

obj.length ---------->字符串的长度

7、数组

声明，如：

var array = Array() 或 var array = []

添加

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

8、循环

var a = '123456789';

for(var i=0;i<10;i++){

console.log(a[i]);

}<br>

for(var item in a){

console.log(a[item]);

}

9、异常处理

ry{

}catch(e) {

}finally{

}

10、Dom编程

文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。

DOM编程：可以操作html所有的标签，进行找、操作！他也是javascript的一部分

①选择器：

document.getElementById('id')
document.getElementsByName('name')
document.getElementsByTagName('tagname')

document.getElementById('id')查找指定的id，然后定位到id所在的标签对标签里的内容进行操作,

示例代码:

<!DOCTYPE html>

<head>

</head>

<body>

<div id="num01">#定义一个id=num01的div标签

abcdefg

</div>

var i=document.getElementById('num01');#通过该句返回对指定ID（num01）对象的一个引用并赋给变量i

i.innerText=123456789;#通过innerText属性对返回的对象的引用进行修改

</script>

</body>

</html>

代码显示结果:

在不加dom语句的情况下div标签显示的结果为:

对于document.getElementsByName('name')同样有如下代码:

<!DOCTYPE html>

<head>

</head>

<body>

abcdefg

</div>

var i=document.getElementsByName('name01');//查找指定的name,这里和ID不一样name01可以有多个

for(var item in i){

i[item].innerText='name01-456';//innerText修改指定的字符串

};

</script>

</body>

</html>

同样对于document.getElementsByTagName('tagname')代码如下

<!DOCTYPE html>

<head>

</head>

<body>

<div>

12345

</div>

<div>

67890

</div>

var i = document.getElementsByTagName('div'); //查找指定的标签类型,这里同样和ID不一样标签比如<div>标签可以有多个

for (var item in i) {

i[item].innerText = '456'; //innerText修改指定的字符串

};

</script>

</body>

</html>

②注册事件

事件，比如执行一个按钮动作，当单击一下按钮的时候，发生了什么；双击又发生了什么，在dom中类似这样的操作叫做事件。

<!DOCTYPE html>

<head>

<style>

.red {

background-color: red;

}

</style>

</head>

<body>

12345

</div>

//定义一个input标签，按钮名为"button",注册一个事件onclick，将事件与函数edit绑定，当点击"修改"标签，就会完成一个注册事件，因为注册事件的实质与函数edit函数绑定，所以当注册事件其实就是执行函数edit

function edit(){

var i = document.getElementById("id_1")

i.className="red";

}

function rollback(){

var i = document.getElementById("id_1")

i.className="";

}

</script>

</body>

</html>

刷新代码显示如下:

点击"修改"显示效果如下:

出现红色背景，接着点击"恢复"，效果又如下所示:

常见的事件列表如下:

注意:onload和其他事件不太一样，它必须写在JavaScript标签里面

<!DOCTYPE html>

<head>

</head>

<body>

//这里的onload是,当整个页面加载完成之后才执行的,整个页面包含的元素加载完成之后才执行的.

window.onload = function () {

alert("The page Load complete")

};

function edit() {

var i = document.getElementById('id_1');

i.className = 'color_red';

}

function rollback() {

var i = document.getElementById('id_1');

i.className = ''; //这里只要给他设置为空即可

}

</script>

</body>

</html>

③常用函数

获取或者修改样式，修改的例子上面已经写了，再看下面的例子，在标签注册了之后，如果在函数内i.className='color_red'l这样是给它这是值:

function edit() {

var i = document.getElementById('id_1');

i.className = 'color_red';

}

函数edit不设置值呢？

function edit() {

var i = document.getElementById('id_1');

console.log(i.className);

}

函数rollback不设置值呢？

function rollback() {

var i = document.getElementById('id_1');

console.log(i.className)

}

整合上面所有代码如下:

<!DOCTYPE html>

<head>

<title>shuaige_js_file</title>

<style>

.color_red {

background-color: red;

}

</style>

</head>

<body>

</div>

// 这里的onload是,当整个页面加载完成之后才执行的,整个页面包含的元素加载完成之后才执行的.

// window.onload = function () {

// alert("The page Load complete")

// };

function edit() {

var i = document.getElementById('id_1');

i.className = "color_red";

}

function rollback() {

var i = document.getElementById('id_1');

console.log(i.className)

}

</script>

</body>

</html>

运行结果如下:

④获取或设置属性

a、获取属性:

<body>

test 100 hours

</div>

function edit() {

var i = document.getElementById('id_1'); //首先找到这个ID = id_1的标签

var result = i.getAttribute('name'); //获取id_1的标签的属性为name并赋值

console.log(result); //输出结果在console

}

</script>

</body>

b、修改属性：

<body>

100 hours

</div>

function edit() {

var i = document.getElementById('id_1'); //首先找到这个ID = id_1的标签

var result = i.setAttribute('name','ShuaiGe'); //修改属性

var result = i.getAttribute('name'); //获取id_1的标签的属性为name并赋值

console.log(result); //输出结果在console

}

</script>

</body>

⑤获取或修改样式中的属性

a、修改样式中的属性

<body>

test 100hours

</div>

function edit() {

var i = document.getElementById('id_1'); //首先找到这个ID = id_1的标签

i.style.backgroundColor = "red"; //修改样式中的属性还有很多,可以测试

}

</script>

</body>

b、获取和上面一样很简单！提交表单，并不是之前的那种提交表单！

看下面的例子：

<body>

<div>

</div>

</form>

</body>

答案当然是不可以，那怎么可以让他提交呢？在js里可以通过修改属性来让他支持提交，代码如下:

document.getElementById('form_1').submit();

<body>

<div>

</div>

</form>

function go() {

document.getElementById('form_1').submit();//修改属性来支持提交

}

</script>

</body>

c、调转页面函数

<body>

<div>

跳转范例

</div>

<div>

</div>

function jump() {

window.location.href = 'https://www.baidu.com'

}

function jump_new() {

window.open('https://www.baidu.com')

}

</script>

</body>

d、confirm() ，弹出消息提示框，显示“是”或“否”，根据用户的选择返回True 或者 Flase

代码如下:

var result = confirm('是否继续');

console.log(result);

</script>

e、setInterval("alert()",2000);

clearInterval(obj) 可以理解为一个计时器

代码如下：

setInterval("alert()",2000);设置计时器

<body>

function f1() {

console.log("test message print in console")

}

setInterval('f1()',1000);//这里括号内,可以是字符串也可以是函数,我们这个是执行函数,第二个参数为毫秒,

//这里是每隔1秒执行一次,我这里测试发现,如果函数哪里不加引号就只执行一次!

</script>

</body>

f、clearInterval(obj)；关闭计时器

代码如下:

<body>

function f1() {

console.log("test message print in console");

clearInterval(obj); //这里是关闭计时器,他需要个句柄,所以在下面的函数中,这个obj句柄必须是全局的

}

obj = setInterval('f1()',1000);//这里括号内,可以是字符串也可以是函数,我们这个是执行函数,第二个参数为毫秒,

//这里是每隔1秒执行一次,我这里测试发现,如果函数哪里不加引号就只执行一次!

</script>

</body>

setTimeout(); clearTimeout(obj) 也是计时器他和interval的区别就是，他只执行一次

<body>

function f1() {

console.log("test message print in console");

}

obj = setTimeout('f1()',1000);//这里括号内,可以是字符串也可以是函数,我们这个是执行函数,第二个参数为毫秒,

//这里是setTimeout所以他只执行一次

</script>

</body>

⑥js实例

a、跑马灯实例代码:

<!DOCTYPE html>

<head>

<title>js测试页面  </title>

function run_go() { //定义一个函数

var content = document.title; //获取title的内容

var firstChar = content.charAt(0); //获取content第一个元素

var sub = content.substring(1,content.length); //获取content字符串剩余的元素

document.title = sub + firstChar; //对字符串进行新的拼接

}

setInterval('run_go()',1000); //使用interval每秒执行然后达到跑马灯的目的

</script>

</head>

<body>

</body>

</html>

b、搜索框实例，实用性非常高，已用在很多地方！！！

<!DOCTYPE html>

<html>

<head>

<title>js测试页面</title>

<style>

.gray{

color:gray;

}

.black{

color:black;

}

</style>

</head>

<body>

function Enter(){ //函数Enter的作用,当元素获得焦点就把里面的值设置为空并把颜色设置为黑色

var id= document.getElementById("tip"); //找到id为tip的标签并赋值给id

id.className = 'black'; //给id的class设置为black

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

id.value = ''

} //判断找到的标签的value='请输入关键里'或者你输入的内容为空

}

function Leave(){ //函数Leave的作用,当元素失去焦点就把里面的值设置为"请输入关键字"并把颜色设置为灰色

var id= document.getElementById("tip"); //找到id为tip的标签病赋值为id

var val = id.value; //吧id的value属性赋值为val

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

id.value = '请输入关键字';

id.className = 'gray';

}else{

id.className = 'black';

} //判断如果val的长度为0,或者用户输入为空字符,吧id的value设置为"请输入关键字"

//否则吧id.class设置为black

}

</script>

</body>

</html>

展示效果:

鼠标放进去出现元素焦点：

本文转自027ryan 51CTO博客，原文链接：http://blog.51cto.com/ucode/1844234，如需转载请自行联系原作者

上一篇 : ：nginx 502错误下一篇 : 知识点之伪类和伪元素

javascript基础知识和Dom编程学习

相关阅读

推荐文章