标签：符号 toolbar 参数 排序 stc ogg 变量命名 日期 sed
1,alert();
alert("提示信息"); 换行 + "\n"
2,prompt(); ----> 得到的是 string 类型, 可能返回 null 和 "" ;
prompt("提示信息");
prompt("提示信息","输入框默认信息");
3,confirm();
confirm("确认信息?") //确定返回TRUE,取消返回FALSE
4,Java 和 JavaScript 变量命名
1,Java有严格的数据类型约束 某数据类型的变量可以重复赋值,但是只能赋相同数据类型的值
2,变量名
5,undefined 类型
未定义 或 定义未赋值 和 null 值相等
如 var num1 = undefined;
var num2;
num3=9;
6,parseInt(): 从前往后将数字转换为 int 类型 (如 99kdjg) ;如第一个位置不是 number 类型,直接舍弃,不转换; 小数部分直接取整
Number() : 强制转换,必须是字符串数字
7,FALSE 情况: "" , 0 , undefined , null , NaN , false
8,一个"="是赋值,两个"="是判断值是否相同(不看数据类型),三个"==="是判断 值和类型 是否相等
!= 判断内容不相等 !==判断内容或类型不相等
JS 中没有单 & 及 | ,如果写了代表位运算
9,JavaScript中没有方法重载的概念,如果有相同方法名的函数,后面的方法会覆盖之前的方法
10,location 的 href 和 replace 都可以实现页面跳转(一个是跳转,一个是替换地址栏,结果一样)
<a href="javascript:location.href=‘http://www.baidu.com‘">百度一下</a>
<a href="javascript:location.replace(‘https://www.baidu.com‘)">百度一下</a>
11, document.title 返回页面的标题
12,窗口的特征属性
window.open( "弹出窗口的URL", "窗口的名称", "窗口特征" );
function openSchedule(){
open("schedule.html","调查表","height=380, width=450, toolbar=0 scrollbars=0, location=0, left=500px, top=100px");
}
height, width 窗口文档显示区的高度,宽度,以像素计
left, top 窗口的X坐标,Y坐标,以像素计
toolbar=yes|no|1|0 是否显示工具栏,默认yes
scrollbars=yes|no|1|0 滚动条
location=yes|no|1|0 地址栏
status=yes|no|1|0 状态栏
menubar=yes|no|1|0 菜单栏
resizable=yes|no|1|0 是否可调节大小
13, setTimeout ( "调用的函数名称", 等待的毫秒数 );
setInterval ( "调用的函数名称", 间隔时间 );
===> 函数名称 加 引号
clearTimeout( timer );
clearInterval( timer );
14, <p id="numArea">数字:0</p>
拿到 p 标签 方法
++> document.getElementById("numArea").innerHTML
document.getElementsByTagName("p")[0].innerHTML
<h1>10</h1>
document.getElementsByTagName("h1")[0].innerHTML ==>返回 10
document.getElementsByTagName("h1")[0].value ==> undefined
document.getElementsByTagName("h1")[0] ===> [object HTMLHeadingElement]
15, var timer = new Date();
toLocaleString() : 2017/4/14 上午10:42:25
toLocaleDateString() : 2017/4/14
toLocaleTimeString() : 上午10:42:25
toDateString() : Fri Apr 14 2017
==>setInterval(showTime, 1000);
16,使用 window.open 和 window.openr 传值
1,父窗口传值给子窗口
function doOpen() {
//找到当前窗口的输入框，拿到里面的值
var txtValue = document.getElementById("txt").value;
alert(txtValue);
//添加打开新窗口的逻辑
var child = open("child.html", null, "top=200,left=200,width=300,height=300");
//找到子窗口
//找到子窗口的输入框 ****===>传值给子窗口需等子窗口加载完毕,才能找到子窗口目标的value值
child.onload = function() {
var childTxt = child.document.getElementById("txt");
console.log(childTxt);
//给输入框赋值
childTxt.value = txtValue;
}
}
2,子窗口传值给父窗口
function doTrans() {
//找到当前窗口的文本框。获取到里面的内容
var txt = document.getElementById("txt");
var txtValue = txt.value;
//找到该窗口的创建者
//找到创建者的文本框
var parentTxt = opener.document.getElementById("txt");
//给文本框赋值
parentTxt.value = txtValue;
//关闭当前窗口
close();
}
17,DOM 操作节点
浏览器不忽略空白文本,需要使用兼容方式来获取 不忽略空格 || 忽略空格
获取第一个节点
oFirst = oParent.firstElementChild || oParent.firstChild ; (顺序不可换)
获取最后一个节点
oLast = oParent.lastElementChild || oParent.lastChild ;
获取上一个节点
oPre = oParent.previousElementSibling || oParent.previousSibling ;
获取下一个节点
oNext = oParent.nextElementSibling || oParent.nextSibling ;
childNodes 也存在空白文档
解决方法:1,去除空格
2,拿到父元素,用父元素.getElementsByTagName("标签名")[index] 拿到
nodeName 节点名称
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
nodeValue 节点值
对应文本节点, nodeValue 属性包含文本
对应属性节点, nodeValue 属性包含属性值
nodeType 节点类型
元素 1, 属性 2, 文本 3, 注释 8, 文档 9
举个例子:
<p id="pro">helloworld</p> --->注意:helloworld不是 <p>的节点值,是<p>的子节点,文本节点的值
==> nodeName : p
nodeType : 1
nodeValue : null
==>firstChild (文本节点)
nodeName : #text
nodeType : 3
nodeValue : helloworld
18,创建新节点,使用 document
19,String 支持对字符串的处理
length 属性,字符串对象长度
方法
charAt(index) 返回在指定位置的字符
indexOf(str, index) 查找某个指定的字符串在字符串中首次出现的位置
substring(index1, index2) 返回位于指定索引index1 和 index2之间的字符串,并且包括索引index1对应的字符不包括索引index2d对应的字符
split(str) 将字符串分割为字符串数组
toLowerCase() 把字符串转换为小写
toUpperCase() 把字符串转换为大写
20,Date 操作日期和时间
//使用数组来显示 星期几
var weekdays = new Array(7);
weekdays[0] = "星期日" ;
weekdays[1] = "星期一" ;
weekdays[2] = "星期二" ;
weekdays[3] = "星期三" ;
weekdays[4] = "星期四" ;
weekdays[5] = "星期五" ;
weekdays[6] = "星期六" ;
var weekday = weekdays[ date.getDay() ];
另: var month = (date.getMonth()+1) < 10 ? ( "0"+ (date.getMonth()+1) ) : (date.getMonth()+1);
var hours = (date.getHours()%12) < 10 ? ("0" + date.getHours()%12 ) : (date.getHours()%12 ); //12小时制
var apm = date.getHours() < 12 ? "AM" : "PM";
21,Array 用于在单独变量中存储一系列的值
var 数组名称 = new Array(); //创建空数组
var 数组名称 = new Array(size); //创建size个undefined成员的数组
var 数组名称 = new Array( element0, element1, ... );
循环读取 for-in
var weekdays = new Array(7); weekdays[0] = "星期日" ; weekdays[1] = "星期一" ; weekdays[2] = "星期二" ; weekdays[3] = "星期三" ; weekdays[4] = "星期四" ; weekdays[5] = "星期五" ; weekdays[6] = "星期六" ; for (var str in weekdays ){ document.write(weekdays[str] + "<br />" ); }
二维数组
数组属性: length
数组方法: join() 把数组的所有元素通过分割符进行分割连接,拼接成一个字符串
sort() 排序,默认按照字符的顺序排序,*对数字进行排序,不能直接调用,数字排序需传参,如 nums.sort( function(a, b){ return a-b; } );
push() 向数组末尾添加一个或更多的元素,并返回新的长度
22,Math 数学操作
ceil() 对数进行上舍入 如: Math.ceil(25.3); ==>26
floor() 对数进行下舍入 如: Math.flor(25.6); ==>25
round() 四舍五入
random() 返回0~1之间的随机数 Math.random();
==> Math.ceil( Math.random()*100 ); //1~100整数
var num =2.446242342;
num = num.toFixed(2); // 输出结果为 2.45
Math.round(total*100)/100; //保留小数点后两位
==>保留小数点两位,两种方法
23,动态改变页面元素
1,使用 getElement系列方法获取元素
2,通过属性改变样式
1): DOM元素.style.样式属性 = "值"; 注意: 两个单词的中间杠去掉,第二个单词大写,如 backgroundColor = "red";
DOM元素.style.display = "none" | "block";
2): DOM元素.className = "类名称"; (设置一个类样式,赋值给DOM元素)
====>只能获得行内样式的style
获得内部或外嵌样式
IE浏览器使用:currentStyle
Firefox浏览器:getComputedStyle()
24,表单验证
1):获取表单元素的值
2):根据业务规则
利用String对象
利用正则表达式
所有表单元素通过后,才能提交表单
25,文本框对象
属性 id
value
方法 blur() 移开焦点
focus() 设置焦点,获得鼠标的光标
select() 选取文本域中的内容
事件 onblur 失去焦点,当光标离开某个文本框时触发
onfocus 获得焦点,当光标进入某个文本框时触发
onkeypress 某个键盘按键被按下时触发
**表单提交验证
把每一个验证的方法放入数组,遍历数组每一个元素
funtion checkForm(){ var arrs = [ "checkUserName()", "checkPwd()", "checkEmail()" ]; var sum = 0; for ( var i=0; i<arrs.length; i++ ){ if ( eval( arrs[i] ) ){ //eval( arrs[i] ) 把 arrs[i] 转成JS代码去执行,即遍历每一个验证的方法 sum++ } } return ( sum == arrs.length ) ? true : false ; }
***** 获得指定table里 td 里 input 的 value.
for (var i=1; i<rowNums; i++){ var input = tab.rows[i].cells[4].getElementsByTagName("input")[0].value; } //循环行数固定某一列input的值
26,正则表达式
创建语法
1):直接量
/pattern/attributes
如在字符串中对 ‘is‘ 进行全局搜索:
var str = "Is this all there is?";
var patt1 = /is/g ;
2):实例化 RegExp对象
new RegExp(pattern,attributes);
如在字符串中对 ‘is‘ 进行全局搜索:
var str = "Is this all there is?";
var patt1 = new RegExp("is", "g");
修饰符:
i 对大小写不敏感
g 执行全居匹配
m 执行多行匹配
举个例子:
方法一:var str = "Is this all there is?";
str.replace( /is/gi,‘at‘ );
方法二:var str = "Is this all there is?";
var pa = new RegExp("is","gi");
str.replace(pa,"at");
方括号
[abc] 查找方括号之间的任何字符
[^abc] 查找任何不在方括号之间的字符
[0-9] 查找任何从0-9的数字
[a-z] 查找任何从小写 a 到 小写 z 的字符
[A-Z] 查找任何从大写 A 到 大写 Z 的字符
[a-zA-Z] 查找任何字母 或[A-z]推荐[a-zA-Z],因为Z和a之间还有其他符号*
[red|blue|green] 查找任何指定的选项
常用符号
/.../ 代表一个模式的开始和结束
^ 匹配字符串的开始
$ 匹配字符串的结束
\s 任何空白字符
\S 任何非空白字符
\d 匹配一个数字字符,等价于[0-9]
\D 除了数字之外的任何字符,等价于[^0-9]
\w 匹配一个数字,下划线或字母符号,等价于[A-Za-z0-9_]
. 除了换行符之外的任意符号
重复字符
{n} 匹配前一项n次
{n,} 匹配前一项n次,或者多余n次
{n,m} 匹配前一项至少n次, 但是不能超过m次
* 匹配前一项0次或多次,等价于{0,}
+ 匹配前一项1次或多次,等价于{1,}
? 匹配前一项0次或1次,也就是说前一项是可选的,等价于{0,1}
示例
^-?[1-9]\\d*$ //整数
^?[1-9]\\d*$ //正整数
^-[1-9]\\d*$ //负整数
^([+-]?)\\d*\\.?\\d+$ //数字
^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$ //邮件
/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/ //邮件
^\\d{6}$ //邮编
^(1)[0-9]{10}$ //手机
[\u4E00-\u9FA5] //验证中文
绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。
<tr>的父标签是<tbody>
27,addEventListener() 方法
在用户点击按钮时触发监听事件：
document.getElementById("myBtn").addEventListener("click", displayDate);
语法:
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
28,window.onload=productCount;
window.onload 后直接接函数,不要括号
29,文本框选中事件要放在 改变样式前面
如:emailEle.select();
showInfo("email", "register_input_Blur", "register_prompt_error", "电子邮件格式不正确，请重新输入");
点击切换
$("div.top").toggle(
function (){
$(this).find(".iocn").removeClass("jia").addClass("jian");
$(this).siblings(".content").show();
},
function (){
$(this).find(".iocn").removeClass("jian").addClass("jia");
$(this).siblings(".content").hide();
});
===> $(this).find(".iocn") 子元素 Class 为 iocn 的
$(this).siblings(".content") 兄弟元素 Class 为 content 的
jQuery tab页切换
$("#tab-top ul li").click(function (){
$(this).addClass("on");
$(this).siblings("li").removeClass("on");
$("div.content").hide();
$("div.content").eq($(this).index()).show();
});
//左右两边添加移除操作
$("#add").click(function (){
var $selected = $("#left option:selected");
if ($selected.length != 0){
$selected.appendTo($("#right"));
}
});
$("#remove").click(function (){
var $selected = $("#right option:selected");
if ($selected.length != 0){
$selected.appendTo($("#left"));
}
});
//左右两边全部移动
$("#allAdd").click(function (){
var $selected = $("#left option");
$selected.appendTo($("#right"));
});
$("#allRemove").click(function (){
var $selected = $("#right option");
$selected.appendTo($("#left"));
});
jQuery全选 HTML代码 <table border="0" cellpadding="10" cellspacing="0"> <tr><td><input type="checkbox" id="all"/ <tr><td><input type="checkbox" name="member"/> <tr><td><input type="checkbox" name="member"/> <tr><td><input type="checkbox" name="member"/> </table> ------------------------------------------------------ //全选 $("#all").click(function() { $("input[name=‘member‘]").attr("checked",this.checked); ==>this.checked }); var $members = $("input[name=‘member‘]"); $members.click(function() { $("#all").attr("checked", $members.length == $("input[name=‘member‘]:checked").length ? true : false); }); ===>如果全部选中的长度和总长度一致则全选的勾自动勾上,或者自动去除 ---JS全选代码 var products=document.getElementsByName("product"); for(var i=0;i<products.length;i++){ products[i].checked=document.getElementById("all").checked; }
标签：符号 toolbar 参数 排序 stc ogg 变量命名 日期 sed
原文地址：http://www.cnblogs.com/sjmbug/p/7051097.html
