JavaScript 笔记

Posted 2020-09-23 好奇害死猫+1

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]+$ //邮件
　　/^\[email protected]\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;
    }