javaWeb |
您所在的位置：网站首页 › java和javaweb和javascript狗狗人体 › javaWeb |
javaWeb
|
JavaScript
前言一、JavaScript的引用1.在head标签内在线编写2.在head标签内外部引入
二、JavaScript的变量1.变量类型2.JavaScript的特殊值3.js定义变量
三、JavaScript的数组1.定义2.特殊点
四、函数五、JavaScript的自定义对象1.Object形式的自定义对象2.{}形式
六、JavaScript的事件1.常用事件2.事件的注册(绑定)
七、DOM模型1.获取标签id2.获取指定名称名3.获取标签名
八、节点1.常用属性2.常用方法
前言
提示：这里可以添加本文要记录的大概内容： 一、JavaScript的引用 1.在head标签内在线编写 ... 2.在head标签内外部引入示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、JavaScript的变量 1.变量类型数值类型：number 字符串类型：string 对象类型：object 布尔类型：boolean 函数类型：function 2.JavaScript的特殊值undefined：未定义，是js变量未初始化的默认值 null：空值 NAN：表示非数字 3.js定义变量 var variableName; var variableName = value; 三、JavaScript的数组 1.定义 var arrayName = []; var arrayName = [1, 'a', "abc", true]; arrayName[0] = 12; arrayName[2] = "abc"; alter(arrayName); 2.特殊点数组内可多种类型，可以定义空数组再通过索引下标进行自动扩容 四、函数JavaScript的函数不允许重载，一旦重名则按照html访问代码的先后顺序覆盖 function functionName(a, b){ return c; //a、b为形参不需要指定类型，c为一个具体的变量类型 } var functionName = function(a, b){ ... } 五、JavaScript的自定义对象 1.Object形式的自定义对象特点：可以直接调用Object类型的属性和方法 var obj = new Object(); obj.name = "lemon"; obj.age = 18; obj.fun = function(){ alert(this.name + "：" + this.age) } obj.fun() 2.{}形式 var obj = { name : "lemon"; age : 18; fun : function(){ alert(this.name + "：" + this.age) } } obj.fun() 六、JavaScript的事件 1.常用事件加载完成事件onload 在页面加载完成之后执行，常用于页面js初始化 ... //静态写法 function onloadFun(){ alert('静态注册onload事件，所有代码'); } //动态写法 window.onload = function () { alert('动态注册onload事件，所有代码'); }单击事件onclick 常用于按钮响应的操作 按钮1 按钮2 //静态写法 function onclickFun(){ alert('静态注册onclick事件，所有代码'); } //动态写法 window.onload = function () { var btn2Obj = document.getElementById("bt2"); btn2Obj.onclick = function(){ alert("动态注册onclick事件，所有代码"); } }失去焦点事件onblur 常用于输入框失去焦点的操作、鼠标悬停后移动的操作 用户名： 邮箱： //静态写法 function onblurFun(){ alert('静态注册onblur事件，所有代码'); } //动态写法 window.onload = function () { var mailObj = document.getElementById("mail"); mailObj.onblur = function () { alert('动态注册onblur事件，所有代码'); } }内容发生改变事件onchange 常用于下拉列表和输入框内容变化后的操作 1 2 3 4 //静态写法 function onchangeFun(){ alert('静态注册onchange事件，所有代码'); } //动态写法 window.onload = function () { var selectObj = document.getElementById("select-01"); selectObj.onchange = function () { alert('动态注册onchange事件，所有代码'); } }表单提交事件onsubmit 常用于表单提交前，验证表单项内容是否合法 用户名： 密码： //静态写法 function onsubmitFun(){ alert('静态注册onsubmit事件，所有代码'); //如果发现表单内容不合法，则需要阻止表单提交(return false即可) return false; } //动态写法 window.onload = function () { var formObj = document.getElementById("form-01"); formObj.onsubmit = function () { alert('动态注册onsubmit事件，所有代码'); //如果发现表单内容不合法，则需要阻止表单提交(return false即可) return false; } } 2.事件的注册(绑定)事件要想有响应，必须要先注册事件(如上例) 静态注册事件 通过html标签的事件直接赋予事件的响应代码 动态注册事件 通过js代码得到标签的dom对象，再通过dom对象.事件=function(){…}的形式 七、DOM模型全称：文档对象模型(document object model) 即把html页面中的标签、属性、文本转化为对象来管理 document.getElementById，因为id属性唯一，所以仅返回一个元素。例子：验证用户名是否合法 常用正则表达式 Email地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)$ 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.? InternetURL：[a-zA-z]+://[^\s] 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=])?$ 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$ 身份证号(15位、18位数字)：^\d{15}|\d{18}$ 短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$ 帐号是否合法(字母开头，允许5-16个字符，允许字母数字下划线)：^ [a-zA-Z][a-zA-Z0-9_]{4,15}$ 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^ [a-zA-Z]\w{5,17}$ 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.\d)(?=.[a-z])(?=.[A-Z]).{8,10}$ 用户名： 验证 function onclickFun() { //获得标签元素 var usernameObj = document.getElementById("username"); var usernameSpanObj = document.getElementById("username-span"); //获得标签元素内容 var userText = usernameObj.value; //进行标签元素内容的合法性验证(正则表达式) var pattern = /^\w{3,12}$/; if (pattern.test(userText)){ alert("用户名合法"); //innerHTML表示：获取userText的内容，并插入该dom标签对象中 usernameSpanObj.innerHTML = userText; } else alert("用户名不合法，请重新输入") } 2.获取指定名称名document.getElementByName，根据name属性来查，返回一个集合 兴趣爱好: C++ Java JavaScript 全选 全不选 反选 //全选 function checkAll() { var hobbyAll = document.getElementsByName("hobby"); for (var i = 0; i var hobbyReverse = document.getElementsByName("hobby"); for (var i = 0; i var hobbyAll = document.getElementsByTagName("input"); for (var i = 0; i window.onload = function(){ var divObj = document.createElemt("div"); divObj.innerHTML = "hello world"; document.body.appendChild(divObj); } |
【本文地址】