js复习(二)
一、window.document对象
(一)找元素
docunment.getElementById("id");根据id找,最多找一个;
docunment.getElementsByClassName("name") 根据classname找,找出来的是数组;
docunment.getElementsByName("name");根据name找,找出来的是数组;
docunment.getElementsByTagName("name");根据标签名找,找出来的是数组;
(二)操作内容
1. 非表单元素:
1)获取内容:
alert(a.innerHTML);//获取标签里的html代码和文字。
alert(a.innerText);//只取里面的文字
2)设置内容:
a.innerHTML = "<font color=red >hello world </font>" //如果内容有元素,编译后实现
a.innerText //会将赋的东西原样呈现
2.表单元素
取值:var t = document.f1.t1——form表单ID为f1里面的ID为t1的input;
var t = document.getElementById("id")—— 直接用ID获取。
alert(t.value)——获取input中的value值;
赋值: t.value="内容改变";
注:所有表单元素取值赋值都用value
(三)操作属性
a.setAttribute("属性名","属性值"); 设置一个属性,添加或更改都可以;
a.getAttribute("属性名");获取属性的值;
a.removeAttribute("属性名");移除一个属性。
(四)操作样式
1、添加、修改样式
对象.style.样式名称=值
2、获取样式
var ....=对象.style.样式名称
对象.offsetLeft 获取元素到可视区域左边的距离
对象.offsetTop 获取元素到可视区域顶部的距离
对象.offsetWidth 获取元素的宽度
对象.offsetHeight 获取元素的高度
(五)相关元素操作
var a = document.getElementById("id");找到a;
var b = a.nextSibling——找a的下一个同辈元素,注意包含空格;
var b = a.previousSibling——找a的上一个同辈元素,注意包含空格;
var b = a.parentNode——找a的上一级父级元素;
var b = a.childNodes——找出来的是数组,找a的下一级子元素;
var b = a.firstChild——第一个子元素,lastChild最后一个,childNodes[n]找第几个;
alert(nodes[i] instanceof Text);——判断是不是文本,是返回true,不是返回flase,用if判断它的值是不是false,可以去除空格。
二、正则表达式
用符号来描述书写规则:/ 中间写正则表达式 /
^ :匹配开头,$:匹配结尾 ; /^ve/以ve开头的 /ve$/以ve结尾
\d:一个任意的数字
\w:一个任意的数字或字母
\s:一个任意的字符串
{n}:把左边的表达式重复n遍
{m,n}:把左边的表达式重复至少m遍,至多n遍
{m, }:把左边的表达式重复至少m遍,,至多不限
+:左边的表达式,至少出现一次,至多不限,相当于{1,}
*:左边的表达式,至少出现0次,至多不限,相当于{0,}
?:左边的表达式,至少出现0次,至多出现1次,相当于{0,1}
[a,b,c]:只能取方括号中内容之一
[a-z]或[1-9]:在范围中取其一
|:代表或者; ():优先级; \:转义--“\( \)”这个才是要出现的小括号,需要转义
基本语句:/ 中间写正则表达式 /.test(要验证的字符串) 返回true或false
三、事件
1、onclick:鼠标单击触发
ondblclick:双击触发
2、onmouseover:鼠标移动上面触发
onmouseout:鼠标离开时触发
3、onblur:失去焦点时触发
onfocus:获得焦点是触发
4、onkeyup:按键抬起来的时候触发
常用正则表达式:
匹配国内电话号码:d{3}-d{8}|d{4}-d{7}
评注:匹配形式如 0511-4405222 或 021-87888822
匹配腾讯QQ号:[1-9][0-9]{4,}
评注:腾讯QQ号从10000开始
匹配中国邮政编码:[1-9]d{5}(?!d)
评注:中国邮政编码为6位数字
匹配身份证:d{15}|d{18}
评注:中国的身份证为15位或18位
匹配ip地址:d+.d+.d+.d+
评注:提取ip地址时有用
匹配特定数字:
^[1-9]d*$ //匹配正整数
^-[1-9]d*$ //匹配负整数
^-?[1-9]d*$ //匹配整数
^[1-9]d*|0$ //匹配非负整数(正整数 + 0)
^-[1-9]d*|0$ //匹配非正整数(负整数 + 0)
^[1-9]d*.d*|0.d*[1-9]d*$ //匹配正浮点数
^-([1-9]d*.d*|0.d*[1-9]d*)$ //匹配负浮点数
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$ //匹配浮点数
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$ //匹配非负浮点数(正浮点数 + 0)
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$ //匹配非正浮点数(负浮点数 + 0)
评注:处理大量数据时有用,具体应用时注意修正
匹配特定字符串:
^[A-Za-z]+$ //匹配由26个英文字母组成的字符串
^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串
^[a-z]+$ //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串
^w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:
只能输入数字:“^[0-9]*$”
只能输入n位的数字:“^d{n}$”
只能输入至少n位数字:“^d{n,}$”
只能输入m-n位的数字:“^d{m,n}$”
只能输入零和非零开头的数字:“^(0|[1-9][0-9]*)$”
只能输入有两位小数的正实数:“^[0-9]+(.[0-9]{2})?$”
只能输入有1-3位小数的正实数:“^[0-9]+(.[0-9]{1,3})?$”
只能输入非零的正整数:“^+?[1-9][0-9]*$”
只能输入非零的负整数:“^-[1-9][0-9]*$”
只能输入长度为3的字符:“^.{3}$”
只能输入由26个英文字母组成的字符串:“^[A-Za-z]+$”
只能输入由26个大写英文字母组成的字符串:“^[A-Z]+$”
只能输入由26个小写英文字母组成的字符串:“^[a-z]+$”
只能输入由数字和26个英文字母组成的字符串:“^[A-Za-z0-9]+$”
只能输入由数字、26个英文字母或者下划线组成的字符串:“^w+$”
验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为:以字母开头,长度在6-18之间,
只能包含字符、数字和下划线。
验证是否含有^%&'',;=?$"等字符:“[^%&'',;=?$x22]+”
只能输入汉字:“^[u4e00-u9fa5],{0,}$”
验证Email地址:“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”
验证InternetURL:“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”
验证电话号码:“^((d{3,4})|d{3,4}-)?d{7,8}$”
正确格式为:“XXXX-XXXXXXX”,“XXXX-XXXXXXXX”,“XXX-XXXXXXX”,
“XXX-XXXXXXXX”,“XXXXXXX”,“XXXXXXXX”。
验证身份证号(15位或18位数字):“^d{15}|d{}18$”
验证一年的12个月:“^(0?[1-9]|1[0-2])$”正确格式为:“01”-“09”和“1”“12”
验证一个月的31天:“^((0?[1-9])|((1|2)[0-9])|30|31)$”
正确格式为:“01”“09”和“1”“31”。
匹配中文字符的正则表达式: [u4e00-u9fa5]
匹配双字节字符(包括汉字在内):[^x00-xff]
匹配空行的正则表达式:n[s| ]*r
匹配HTML标记的正则表达式:/<(.*)>.*|<(.*) />/
匹配首尾空格的正则表达式:(^s*)|(s*$)
匹配Email地址的正则表达式:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配网址URL的正则表达式:http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
js复习(二)的更多相关文章
- JS复习--更新结束
js复习-01---03 一 JS简介 1,文档对象模型 2,浏览器对象模型 二 在HTML中使用JS 1,在html中使用<script></script>标签 2,引入外部 ...
- 前端总结·基础篇·JS(二)数组深拷贝、去重以及字符串反序和数组(Array)
目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...
- 使用jquery.qrcode.js生成二维码
通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...
- 网站开发进阶(十四)JS实现二维码生成
JS实现二维码生成 绪 项目开发原语:已然花费半天的时间,仍旧未能将二维码显示在订单中.但是可以在单个页面中显示二维码,结合到angularjs的控制器中就失效了,自己是真的找不到其中的原因了.费解! ...
- 调用 js 生成图片二维码
一.js 生成二维码: 首先,需要引用 jQuery 和 jquery.qrcode.js.然后: //生产二维码 $("#qrcodeCanvas").qrcode({ rend ...
- js生成二维码 qrcode
js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...
- QRCode.js生成二维码
QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...
- js复习--基础
最近工作遇到了一些小困难,基础真的很重要,漫天高楼起于地. 一,script元素 包括type=“text/Javascript”,defer延迟到html加载完解析,src=“../../test. ...
- JS--我发现,原来你是这样的JS(二)(基础概念--躯壳篇--不妨从中文角度看js)
一.介绍 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第二篇(基础概念--躯壳篇),有着部分第三章的知识内容,当然其中还有我个人的理解. 红宝书这本书可以说是难啃的,要看完不容易,挺 ...
- js生成二维码以及点击下载二维码
js生成二维码 jquery.qrcode.js可以快速使用页面生成二维码.但改项目有两个小问题:1.不支持中文:2.不支持二维码中间生成图片. 支持中文的jquery-qrcode jquery.q ...
随机推荐
- Vue.js相关知识2-组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 要将serviceLocator注入到任何类中
如果想要在任何类中都用到zf2的serviceLocator, 在类中实现serviceLocatorAwareInterface,然后getServiceConfig 方法中注册成服务即可直接使用该 ...
- 一些基本的C/C++数据类型
size_t size_t. A basic unsigned integer C/C++ type. It is the type of the result returned by sizeof ...
- Anroid 异常:is not valid; is your activity running?
本文转载于:http://blog.csdn.net/biangren/article/details/7514722 是由于有activity时依附于另一个activity的,当被依附的activi ...
- linux下shell显示-bash-4.1#不显示路径解决方法
在linux shell中不显示路径了,显示为-bash-4.1#用起来很不方便. 如何改为显示路径的shell呢? 步骤如下: vim ~/.bash_profile (不用管.bash_profi ...
- jQuery Ajax请求提交 后台getParameter接收不到数据
今天遇到的问题,总结一下 jQuery的$ajax({ contentType:"application/json", //发送信息至服务器时内容编码类型. }) 这样的方式提交 ...
- 如何在Windows 下安装Python
1. 安装源程序的选择 官网:https://www.python.org/downloads/ 选择版本下载,根据实际计算机位数(64位),下载的为: Python-2.7.10.amd64.ms ...
- Response.Redirect在新窗口打开网页
来自:http://www.woosky.net/show.asp?id=761 Respose.Write("<script language='javascript'>win ...
- 关于IE10出现LinkButton点击无效的解决方案
关于IE10出现LinkButton点击无效的情况: 一般高配置的系统如Win7旗舰版SP1系统不会出现这种情况,针对家庭普通版和专业版的用户通过测试都有这种情况,对于开发人员要解决不同系统和IE的兼 ...
- SMO序列最小最优化算法
SMO例子: 1 from numpy import * 2 import matplotlib 3 import matplotlib.pyplot as plt 4 5 def loadDataS ...