JavaScript脚本基础教程 |
您所在的位置：网站首页 › 猫咪咕噜咕噜的时候流口水是为什么呢 › JavaScript脚本基础教程 |
JavaScript脚本基础教程
|
1、JavaScript简单介绍
Javascript（简称js） 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码。 JS 是 Netscape 网景公司的产品，最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript。 JS 是弱类型，Java 是强类型。 js的特点： 交互性（它可以做的就是信息的动态交互）安全性（不允许直接访问本地硬盘）跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关） 2、js和html结合的使用方式1、在html页面除了title标签之外任何地方写上 // alert 是 JavaScript 语言提供的一个警告框函数。 // 它可以接收任意类型的参数，这个参数就是警告框的提示信息 alert("hello javaScript!");2、在外部定义js单独引入 src =“js文件的路径” 3、js变量js的常见变量类型如下五种： 数值类型： number 字符串类型： string 对象类型： object 布尔类型： boolean 函数类型： function js当中特殊的值： undefined 未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined. null 空值 NaN 全称是：Not a Number。非数字。非数值 js定义变量的语法：var 变量名 = 值； 4、js关系比较运算和逻辑比较运算关系运算 等于： == 比较值 全等于： === 除了做字面值的比较之外，还会比较两个变的数据类型 var i = "11"; var j = 11; document.write( i == j); document.write("") document.write(i === j)
0 、null、 undefined、””(空串) 都认为是 false； && 且运算。 第一种：当表达式全为真的时候。返回最后一个表达式的值。 第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值 || 或运算 第一种情况：当表达式全为假时，返回最后一个表达式的值 第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值 5、js当中的数组js数组的定义： var 数组名 = []; // 空数组 var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素 arr[0] = 12; // alert( arr[0] );//12 // alert( arr.length ); // 0 // javaScript 语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。 arr[2] = "abc"; alert(arr.length); //3 // alert(arr[1]);// undefined // 数组的遍历 for (var i = 0; i 函数体 } function fun() { document.write("我是无参函数fun"); } function sum(num1, num2) { document.write("我是有参函数：") var result = num1 + num2; return result; } document.write(fun()); document.write("") document.write(sum(100, 50));
第二种定义函数的方法 var 函数名 = function(形参列表) { 函数体 } var fun = function() { document.write("我是无参函数fun"); } var sum = function (num1, num2) { document.write("我是有参函数：") var result = num1 + num2; return result; } document.write(fun()); document.write("") document.write(sum(100, 50));
Object 形式的自定义对象 对象的定义： var 变量名 = new Object(); // 对象实例（空对象） 变量名.属性名 = 值; // 定义一个属性 变量名.函数名 = function(){} // 定义一个函数 对象的访问： 变量名.属性 / 函数名(); //创建对象 var dog = new Object(); //创建属性 dog.color = "白色"; dog.age = 2; //创建函数 dog.fun = function () { document.write("颜色："+this.color+"狗狗年龄："+this.age); } dog.fun();
什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。 常用的几种事件如下：
当用户移到某个位置或者移出某个位置做出响应。 onmouseenter：鼠标移入响应 onmouseout：鼠标移出响应 javascript var p1 = function(){ document.getElementById("pp").style.background = "red"; } var p2 = function(){ document.getElementById("pp").style.background = "none"; }
onfocus 获得焦点 响应 onblur失去焦点 响应 var p1 = function(){ document.getElementById("text").style.borderColor = "red"; } var p2 = function(){ document.getElementById("text").style.borderColor="white"; }点击文本框的时候边框会变色，移开文本框的时候边框会变没。 onchange 改变后触发。 红色 蓝色 黑色 var color_select = function() { co = document.getElementById("ss").value; document.bgColor = co; }当选择下拉框进行背景颜色改变 onload 事件是浏览器解析完页面之后就会自动触发的事件 function onloadFun() { alert('静态注册 onload 事件，所有代码'); }浏览器解析完页面之后，触发该事件
对表单里填写的信息进行验证。 密码： 确认密码： function checkForm() { var pwd1 = document.getElementById("pwd1").value; var pwd2 = document.getElementById("pwd2").value; if(pwd1 != "" && pwd2 != "") { return true; } else { alert('密码不能为空！'); return false; } } function onkeyups(obj){ var len = obj.value.length; if(len document.getElementById("spans").innerHTML="你长度够了！"; } } function checkpassword(obj){ var pwd2 = obj.value; var pwd1= document.getElementById("pwd1").value; if(pwd1 != pwd2){ document.getElementById("spans1").innerHTML="密码不一致！"; }else{ document.getElementById("spans1").innerHTML="密码一致！"; } }
keydown：当用户按下键盘上的任意按键时触发，如果按住不放，会重复触发此事件。 document.onkeydown = function (){ document.getElementById("text1").style.color="red"; }按下键盘任意内容输入在文本框文本框里面的值会变成红色。 DOM 全称是 Document Object Model 文档对象模型 简单来说就是把文档中的标签，属性，文本，转换成为对象来管理。 Document 对象的理解： 第一点：Document 它管理了所有的 HTML 文档内容。 第二点：document 它是一种树结构的文档。有层级关系。 第三点：它让我们把所有的标签 都 对象化 第四点：我们可以通过 document 访问所有的标签对象。 9.1Document对象中的方法介绍document.getElementById(elementId) 通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值 document.getElementsByName(elementName) 通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值 document.getElementsByTagName(tagname) 通过标签名查找标签 dom 对象。 tagname 是标签名 document.createElement( tagName) 方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名 document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询 如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询 如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName 以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。 当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。 * 验证的规则是：必须由字母，数字。下划线组成。并且长度是 5 到 12 位。 用户名： 较验 function onclickFun(){ //首先获得文本标签对象 var name = document.getElementById("username"); //Element 是一个dom对象 var nametext= name.value; // 如何 验证 字符串，符合某个规则 ，需要使用正则表达式技术 var patt = /^\w{5,12}$/; //得到sapn标签对象 var spans=document.getElementById("usernameSpan"); //test()方法用于测试某个字符串，是不是匹配我的规则 ，匹配返回true，不匹配返回false if(patt.test(nametext)){ //如果合法 spans.innerHTML = "你好啊,名字合法！"; }else{ spans.innerHTML = "不合法的名字！"; } }
点击全选、反选的时候复选框全部被选中，当单独把复选框一个个点满了全选会自动勾上。
DOM操作思维导图 创建div标签向div添加内容 window.onload = function () { // 创建一个html标签对象 var divObj = document.createElement("div"); //divobj的内容为 divObj.innerHTML = "我是一个div"; //将divobj作为子节点添加到body document.body.appendChild(divObj); }效果图：
浏览器对象模型（Browser Object Model, BOM）被广泛应用于 Web 开发之中，主要用于操作浏览器。 10.1全局对象window所有浏览器都支持 window 对象。它表示浏览器窗口。 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。 全局函数是 window 对象的方法。 window.onload = function (){ alert('window.......'); }
location 对象存储了当前文档位置（URL）相关的信息，简单地说就是网页地址字符串。使用 window 对象的 location 属性可以访问。 点击上面的图片跳转至“春天”页面 点击上面的图片跳转至“夏天”页面 点击上面的图片跳转至“秋天”页面 点击上面的图片跳转至“冬天”页面使用window.location.href = '路径’可以跳转页面
location.reload()也可以刷新页面 春天 刷新本页 10.3history对象history 对象存储了库互动浏览器的浏览历史，通过 window 对象的 history 属性可以访问该对象，实际上 history 属性仅存储最近访问的、有限条目的 URL 信息。 history.reload() 从主页面进入到新的页面，可以返回上一个页面 history.forward(1) 从主页面进入到新的页面,可以去去下一个页面 history.go(1) 从主页面进入到新的页面,可以去去下一个页面 返回上一个页面 去下一个页面 去下一个页面 10.4定时器setTimeout计时器 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 提示： 1000 毫秒= 1 秒。 提示： 使用 clearTimeout() 方法来阻止函数的执行。 //定义变量用来接收计时器 var timer = null; window.onload = function (){ timer=setTimeout(function(){ alert("javascript"); },2000); } /*停止计时器*/ window.clearTimeout(timer);
下面的例子是使用settiumeout轮播图 .box{ width: 400px; height: 400px; } .box img { width: 300px; height: 300px; position: absolute; } .active{ z-index: 1; } /*找到页面中的图片*/ var imgs = document.getElementsByTagName("img"); var num = 0; setInterval(function(){ for (var i = 0; i num = 0; } imgs[num].className= "active"; },500);
当毫秒数大于1000秒数会+1，当秒数大于等于60的时候分钟会加+1；
|
逻辑运算 且运算： && 或运算： || 取反运算： !
注意：在 Java 中函数允许重载。但是在 JS 中函数的重载会直接覆盖掉上一次的定义。
{}花括号形式的自定义对象 对象的定义： var 变量名 = { // 空对象 属性名：值, // 定义一个属性 属性名：值, // 定义一个属性 函数名：function(){} // 定义一个函数 }; 对象的访问： 变量名.属性 / 函数名();
删除替换克隆标签
加粗样式
**setTimeout() ** 在指定的毫秒数后重复调用函数或计算表达式。
【本文地址】