zoukankan      html  css  js  c++  java
  • javascript 学习笔记

    偶尔翻出以前学习JavaScript做的一些笔记,大体是当时觉得有必要留心的一些东西,怕一不留心删了又错过了,就贴在这里,做个纪念。

    javascript手册--同步

    1、doucument.write("");输出里面内容要加双引号或单引号
    2、<a href="javascript:alert('sssss');">点击显示</a> ----双引号里面要使用单引号,使用双引号无法显示。
    3、js区分大小写
    4、数组用中括号[]包起来;
    5、变量定义用var i,其他地方都不用加上var符号,常量定义使用都直接用i;
    6、<条件表达式> ? 第一语句:第二语句 表达式为true执行第一条语句,false执行第二条语句。
    7、注释用//和/* */
    8、js调用类里面的方法是实例化后直接点加方法。var a=new Date(); var b=a.getHour();
    9、js默认对象和方法--直接调用,不用定义和引用。
    (1)日期对象,Date(),日期对象的方法getHour()等等。
    (2)数组对象,Array(),属性:length 方法:join/toString/reverse(反转)/valueOf
    (3)字符串对象, 属性:length 方法bold(),fontsize(),replace();search()等
    (4)布尔对象 方法:toString/valueOf
    (5)数学对象 属性:Math.方法(参数)。ceil/floor/round/min/max/pow/random/sqrt等,例如:document.write(Math.round(3.14));取3.14整数部分--3
    (6)自定义对象

    10、js里面字符串length是属性不是方法,调用的时候后面不用加括号(),length数组调用是计算数组元素个数,字符串调用是计算字符串长度。js调用属性都不用加()如:name,value,type;
    11、默认函数
    (1)非字母、数字字符<---escape()/unescape()--->ASCII码
    (2)eval() 求值函数,可以求出字符串里的确切值,已知的两个地方用得上1.如eval("1+2")--3, 2、如function show(obj){var str=eval("document.form."+obj+".value");alert(str);}---调用函数show("name")若未加eval,输出document.from.name.value,调用eval会输出该表达式document.from.name.value对应的值。即若没有eval,上面str只是一个字符串。
    (3)isNaN() 是否为数值,返回布尔值。
    (4)parseInt(),将其他进制数转化成十进制。parseInt("11",2);2进制转化成10进制,得到3
    (5)parseFloat(),将数值转化成浮点型数据。
    12、所有触发事件,Click/DblClick、KeyDown/KeyPress/KeyUp、Load/Unload、MouseDown/MouseUp/MouseOver/MouseOut/MouseMove、Blur/Focus、Change(适用t/pw/ta/select)、DragDrop/move(适用窗口拖拽/移动)、Reset/Submit(适用表格)、Abort(图像未加载完)、Error(加载图像或文件出现错误)
    13、给font、span文字加上跳转,可以是on事件="location='http://www.baidu.com'"
    14、font、span的属性有 location(链接)、status(文字信息)、color(字体颜色)、face(字体)。
    15、定时器(1)毫秒后执行表达式一次setTimeout("表达式",毫秒); 终止该定时器clearTimeout(对象名);
    (2)每隔毫秒执行表达式一次,无限循环setInterval(); clearInterval(对象名)终止该定时器。
    16、图像对象--- 属性:border complete height hspace lowsrc name src vspace width
    选择器:document.image[i]
    17、navigator对象--浏览器、mime、外挂程序信息 navigator.appName --- navigator.plugins[i].name ---navigator.mimeTypes[i].description
    18、窗口对象-- 方法:alert/confirm/prompt/back/forward/open/focus/blur/stop/close/ 例:open("1.hmtl","窗口名","窗口特点")
    19、历史对象---history.属性:current/length/next/previous 方法:back/forward/go(整数或url)
    20、文件对象---document.属性:lastModified/title/width/forms/images/linkColor/等。方法:write/等。
    21、锚点对象---document.anchors[i] 属性:name/text
    22、链接对象---document.links[i] 属性:hash/href/port/search/text/x/y。 方法:handleEvent()。
    23、表单对象---document.forms[i]或document.表名,属性:action/elements/encoding/length/name/target,方法:reset/submit/handleEvent
    24、表单对象里面文版对象---document.forms[i].elements[i].属性(elements[i]中的i表示在表单中的顺序位置)-或-document.表名.文本名.属性,,方法blue/focus/hangleEvent/select
    25、表单对象里面单选键/复选框对象---多了属性checked
    26、获取option里面的值(非value值)得方法。a=document.forms[i].weekday; b=a.options[a.selectedIndex].text; return b;其中weekday是select里面的name属性。value可以document.form[i].weeked.value;

    js疑问:
    1、document.write("<pre>未满十八岁 不得进入!</pre>"),为毛 放在<pre>里面这样可以另起一行,其他不可以???
    2、var now=new Date(); var hour = now.getHour(); Date()类和getHour()方法并没有定义和引用,是系统默认定义的么。
    3、为什么if (day = 0) dayName = "星期日";else if (day = 1) dayName = "星期一";和if (day == 0) dayName = "星期日";else if (day == 1) dayName = "星期一";的区别=和==???
    4、现在js修改font、span的status为何不生效了,还有什么其他属性???
    5、js选择器--剩余的选择器呢??
    document.form.name.value --- form/name都是name属性
    document.all['news'].style.display --- news是id属性
    xuan.innerHTML --- xuan是id属性
    6、js数值转化---字符串??--数值
    7、onkeyup???什么事件。。。光标转移么??
    8、地区联动做一个简单版的。。。
    9、<script>
    function chuan(){
    jx =["南昌","吉安","赣州"];
    hn = ["长沙","德兴","湖南市"];
    var bb = document.xuan.zhu.value;
    for(var i=0;i<bb.length;i++){
    var cc = new Option(bb[i]);
    document.xuan.fu.options[i]=cc;
    }
    }
    </script>
    1、这里我循环出来是j和x,或h和n,而不是数组里面的元素,为什么?这边赋值给bb的事字符串“jx”或“hn”,怎么把它弄成可识别的数组常量并循环输出里面的元素。
    2、function createOptions(){
    var option = new Option(document.fo.select1.value)
    document.fo.select2.options[2] = option;
    document.fo.select2.options[2].value = eval(option);
    }为什么options[i].value赋值返回[object HTMLOptionElement]

    <form name="xuan">
    <select name="zhu" onchange=chuan()>
    <option value="jx">江西
    <option value="hn">湖南

    </select>
    <input type="button" value="-->" >
    <select name="fu">
    <option>选择项目

    </select>
    </form>

    1、变量
    1.必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。开头不
    能数字和(_$)以外的其他特殊符号,中间不能用(_$)以外的其他特殊符号。
    2.变量名区分大小写,如:A与a是两个不同变量。
    3.不允许使用JavaScript关键字(break else if for 之类的)和保留字
    (int/char/import/public之类的)做变量名。

    2、优先级:
    算术操作符(*/+-) → 比较操作符(><=) → 逻辑操作符(&& ||) → "="赋值符号

    3、定义数组两种方式:
    var newarr = new Array(8);虽然指定长度,超过仍然可以使用。
    var newarr = [1,2,3,4];

    (2)myarray.length; 计算数组元素数量----注意:length是属性、属性,不是方法,不用
    括号。
    案例:var arr=[98,76,54,56,76]; // 包含5个数值的数组
    document.write(arr.length); //显示数组的长度5
    arr[15]=34; //增加元素,使用索引为15,赋值为34
    alert(arr.length); //显示数组的长度16
    (3)创建并输出二维数组
    <script type="text/javascript">

    var myarr = new Array();

    for(var i=0;i<3;i++){

    myarr[i] = new Array();

    for(var j=0;j<6;j++){

    myarr[i][j] = i*j;

    document.write(myarr[i][j]);

    }

    document.write("<br/>");

    }

    </script>

    4、if(){} else if(){}else{} (else if中间间隔)
    5、switch(){case: break; default:}
    6、for()
    7、while()
    8、for(){if(){break;}} break;跳出当前循环
    9、for(){if(){continue;}} break;跳过本次执行,继续执行下次循环

    js对象:
    JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每个对象带有属性和
    方法。
    对象关键词首字母要大写。 如 Array/Date/Math

    (1)如字符串对象:var a = 'abcd';
    属性:length
    方法:
    toUpperCase()/toLowerCase()、charAt(位置是哪个字符)、indexOf(参数1是要查找的字符,
    参数2是开始位置,默认0,首次出现位置)
    split('通过什么区分',多少段) 拆分字符串成数组
    substring(开始,结束) 截取字符串
    substr(开始,长度) 截取字符串

    (2)var d = new Date(); 输出 星期月日时分秒时区年
    日期两种写法,Date(2001,10,1); Date('Oct 1,2001')
    getFullYear/getDay(星期,0-6,0位周日)/getTime(时间戳)

    (3)Math对象
    abs(绝对值) / ceil(上舍入 3.2->4) 、floor(下舍入 3.2->3)、round(四舍五入,注意负
    数时候-3.5->-3)min/max(比较a,b)/ random()

    (4)Array数组对象
    属性:length
    方法:
    concat(连接几个数组);
    join(数组合并成字符串);经常和字符串对象方法split()结合使用。
    reverse(颠倒数组里面元素)
    sort() 默认unicode码,若指定方法另外。

    (5)计时器 setTimeout()执行一次 setInterval() 循环执行
    (6)调用函数 clock
    setInterval("clock()",1000) 或 setInterval(clock,1000)
    setTimeout(sid是先前对应设置好的)要停止要先设置var sid = setInterval();
    (7)history()对象
    属性:length
    方法:back()/go(-1)、forward()/go(1)
    (8)location 对象
    属性:href(链接) 、hostname(域名)/hash/host/pathname/port/protocol/search
    方法:assign()/reload()/replace()
    (9)Navigator对象 浏览器
    属性: appCodeName/appName/appVersion/platform/ userAgent(区别火狐、谷歌、ie 浏览
    器)
    (10)screen对象
    属性:可用宽高availHeigh/availWigth/colorDepth/pixeDepth/宽高height/width


    (11)DOM对象
    选择器:getElementsByName/getElementsByTagName/getElementById(id唯一,element没有
    s) 获取后也有长度属性length. 方法:setAttribute()/getAttribute() 设置、获取属性
    注意:Tag 和 Name方式获取的dom节点可能有多个,若要操作获取后要添加位置如 dom[0],Id
    方式唯一不需要如此。
    案例:
    var hobby = document.getElementsByTagName("input");

    for(var i=0;i<hobby.length;i++){

    if(hobby[i].type=='checkbox'){

    hobby[i].checked='checked';
    //或true选择 / false取消选择
    }

    }

    for(var i=0;i<mychk.length;i++){
    mychk[i].checked = false;
    }

    一、nodeName 属性: 节点的名称,是只读的。

    1. 元素节点的 nodeName 与标签名相同
    2. 属性节点的 nodeName 是属性的名称
    3. 文本节点的 nodeName 永远是 #text
    4. 文档节点的 nodeName 永远是 #document

    二、nodeValue 属性:节点的值

    1. 元素节点的 nodeValue 是 undefined 或 null
    2. 文本节点的 nodeValue 是文本自身
    3. 属性节点的 nodeValue 是属性的值

    三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:

    元素类型 节点类型
    元素 1
    属性 2
    文本 3
    注释 8
    文档 9

    子节点操作childNodes:
    *子节点 document.getElementsByTagName('div')[0].childNodes;
    *首末节点:document.getElementsByTagName('div')[0] --- 1、firstChild 2、lastChild

    *父节点parentNode:上一级节点

    *兄弟节点 sibling: nextSibling / previousSibling (当前上一个、下一个节点)

    *插入节点 appendChild() 在指定节点的最后一个子节点列表之后添加一个新的子节点。
    fu节点.appendChild(zi节点)

    *insertBefore() 方法可在已有的子节点前插入一个新的子节点。fu节点.insertBefore(zi节
    点,指定子节点)

    *removeChild() removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可
    返回被删除的节点,如失败,则返回 NULL。 nodeObject.removeChild(node)

    *replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。 node.replaceChild
    (newnode,oldnew )

    *createElement 创建元素节点 document.createElement(tagName)

    *createTextNode 创建文本节点


    (12)
    浏览器:
    clientHeight / scrollHeight网页内容 /offsetHeight和offsetWidth,获取网页内容高度和
    宽度(包括滚动条等边线,会随窗口的显示大小改变)。

    卷起来的浏览器宽高:
    scrollLeft / scrollTop 常用
    offsetLeft / offsetTop 含上滚动条和左页面空白


    练习:
    1、
    <b id='vv'></b>秒后回到主页
    <a href='' onclick="history.go(-1)">返回</a>


    <script type="text/javascript">

    function jian(){

    var num = 5;

    document.getElementById("vv").innerHTML=num;
    if(num<=0){

    window.location.href = 'https://www.baidu.com';

    }else{
    num--;

    setInterval("jian()",1000);

    }

    }

    jian();

    </script>

    2、
    var j=document.getElementById("wb").value;

    var a = j+1;

    var hobby = document.getElementsByName("hobby");

    hobby[a].checked=true;
    获取不到a个数。。


    疑问:
    如要实现这一点,就必须使用一个排序函数,代码如下:
    sortNum理解:sort是使用冒泡法排序的,每次冒泡都使用这个函数比较相邻的两个数,为真
    则交换位置,为假不动。

    <script type="text/javascript">
    function sortNum(a,b) {
    return a - b;
    //升序,如降序,把“a - b”该成“b - a”
    }
    var myarr = new Array("80","16","50","6","100","1");
    document.write(myarr + "<br>");
    document.write(myarr.sort(sortNum));
    </script>

  • 相关阅读:
    读 Zepto 源码之内部方法
    读Zepto源码之代码结构
    vue-auto-focus: 控制自动聚焦行为的 vue 指令
    vue-lazy-render: 延迟渲染大组件,增强页面切换流畅度
    用vue实现模态框组件
    谷歌插件Image downloader开发之popup
    关于const
    Python线程指南(转自AstralWind)
    PyQt中的图形绘制
    sizeof和strlen之间的区别
  • 原文地址:https://www.cnblogs.com/lola/p/8030333.html
Copyright © 2011-2022 走看看