• js基础笔录


    1.页面中获取对象
    document.getElementById("demo")

    2.在页面加载时向 HTML 的 <body> 写文本
    document.write("<h1>This is a heading</h1>");
    如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:

    3.改变 HTML 元素的样式
    x=document.getElementById("demo") // 找到元素
    x.style.color="#ff0000"; // 改变样式

    4.获取HTML 元素的值(一般input使用)
    var x=document.getElementById("demo").value;

    5.更改图片
    <img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">

    <script>
    function changeImage()
    {
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
    element.src="/i/eg_bulboff.gif";
    }
    else
    {
    element.src="/i/eg_bulbon.gif";
    }
    }
    </script>


    6.向 id="demo" 的 HTML 元素输出文本 "Hello World":
    document.getElementById("demo").innerHTML="Hello World";

    7.变量声明
    var name="Gates", age=56, job="CEO";

    8.未使用值来声明的变量,其值实际上是 undefined。
    重新声明 JavaScript 变量,该变量的值不会丢失:
    在以下两条语句执行后,变量 carname 的值依然是 "Volvo":
    var carname="Volvo";
    var carname;


    9.变量声明
    极大或极小的数字可以通过科学(指数)计数法来书写:
    var y=123e5; // 12300000
    var z=123e-5; // 0.00123


    数组的声明
    var cars=new Array();
    cars[0]="Audi";
    cars[1]="BMW";
    cars[2]="Volvo";
    或者:
    var cars=new Array("Audi","BMW","Volvo");
    var cars=["Audi","BMW","Volvo"];


    对象的创建
    var person={firstname:"Bill", lastname:"Gates", id:5566};

    var person={
    firstname : "Bill",
    lastname : "Gates",
    id : 5566
    };
    对象属性访问的两种方式:
    name=person.lastname;
    name=person["lastname"];

    10.Undefined 这个值表示变量不含有值。
    可以通过将变量的值设置为 null 来清空变量。
    cars=null;
    person=null;

    11.函数(变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。)

    function functionname()
    {
    这里是要执行的代码
    }

    ①有时,我们会希望函数将值返回调用它的地方。
    function myFunction()
    {
    var x=5;
    return x;
    }

    var myVar=myFunction();

    ②返回值的使用:
    document.getElementById("demo").innerHTML=myFunction();

    计算两个数字的乘积,并返回结果:
    function myFunction(a,b)
    {
    return a*b;
    }

    document.getElementById("demo").innerHTML=myFunction(4,3);

    ③在您仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:
    function myFunction(a,b)
    {
    if (a>b)
    {
    return;
    }
    x=a+b
    }
    如果 a 大于 b,则上面的代码将退出函数,并不会计算 a 和 b 的总和。

    13.JavaScript 变量的生存期
    JavaScript 变量的生命期从它们被声明的时间开始。
    局部变量会在函数运行以后被删除。
    全局变量会在页面关闭后被删除。

    把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。

    carname="Volvo";


    14.如果把数字与字符串相加,结果将成为字符串。
    x=5+5;
    document.write(x);

    x="5"+"5";
    document.write(x);

    x=5+"5";
    document.write(x);

    x="5"+5;
    document.write(x);

    15.给定 x=5,下面的表格解释了比较运算符:
    == 等于 x==8 为 false
    === 全等(值和类型) x===5 为 true;x==="5" 为 false

    16.三元运算符
    variablename=(condition)?value1:value2

    17.switch 语句用于基于不同的条件来执行不同的动作
    var day=new Date().getDay();
    switch (day)
    {
    case 6:
    x="Today it's Saturday";
    break;
    case 0:
    x="Today it's Sunday";
    break;
    default:
    x="Looking forward to the Weekend";
    }

    18.For/In 循环
    JavaScript for/in 语句循环遍历对象的属性:

    var person={fname:"John",lname:"Doe",age:25};

    for (x in person)
    {
    txt=txt + person[x];
    }

    19.do/while 循环
    do
    {
    x=x + "The number is " + i + "<br>";
    i++;
    }
    while (i<5);

    20.for 语句实例
    cars=["BMW","Volvo","Saab","Ford"];
    var i=0;
    for (;cars[i];)
    {
    document.write(cars[i] + "<br>");
    i++;
    }

    21.while 语句实例
    cars=["BMW","Volvo","Saab","Ford"];
    var i=0;
    while (cars[i])
    {
    document.write(cars[i] + "<br>");
    i++;
    }

    22.
    Break 语句
    for (i=0;i<10;i++)
    {
    if (i==3)
    {
    break;
    }
    x=x + "The number is " + i + "<br>";
    }

    Continue 语句
    for (i=0;i<=10;i++)
    {
    if (i==3) continue;
    x=x + "The number is " + i + "<br>";
    }


    23.JavaScript 标签
    cars=["BMW","Volvo","Saab","Ford"];
    list:
    {
    document.write(cars[0] + "<br>");
    document.write(cars[1] + "<br>");
    document.write(cars[2] + "<br>");
    break list;
    document.write(cars[3] + "<br>");
    document.write(cars[4] + "<br>");
    document.write(cars[5] + "<br>");
    }

    24.查找 HTML 元素

    通过 id 找到 HTML 元素
    var x=document.getElementById("intro");
    var x=document.getElementById("main");
    var y=x.getElementsByTagName("p");
    通过标签名找到 HTML 元素
    通过类名找到 HTML 元素


    25.改变 HTML 属性
    语法:document.getElementById(id).attribute=new value
    document.getElementById("image").src="landscape.jpg";

    26.改变 HTML 样式
    语法:document.getElementById(id).style.property=new style
    document.getElementById("p2").style.color="blue";
    <button type="button" onclick="document.getElementById('id1').style.color='red'">


    27.隐藏文本
    <input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />


    29.点击事件
    <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

    <script>
    function changetext(id)
    {
    id.innerHTML="谢谢!";
    }
    </script>
    </head>
    <body>
    <h1 onclick="changetext(this)">请点击该文本</h1>


    30.HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件:
    document.getElementById("myBtn").onclick=function(){displayDate()};

    31.onload 和 onunload 事件会在用户进入或离开页面时被触发。

    32.onchange 事件常结合对输入字段的验证来使用。
    当用户改变输入字段的内容时,会调用 upperCase() 函数。


    33.onmouseover 和 onmouseout 事件

    34.onmousedown、onmouseup 以及 onclick 事件
    onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。


    35.向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
    <div id="div1">
    <p id="p1">这是一个段落</p>
    <p id="p2">这是另一个段落</p>
    </div>
    <script>
    这段代码创建新的 <p> 元素:
    var para=document.createElement("p");
    向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:
    var node=document.createTextNode("这是新段落。");
    向 <p> 元素追加这个文本节点:
    para.appendChild(node);
    向一个已有的元素追加这个新元素。
    var element=document.getElementById("div1");
    element.appendChild(para);
    </script>

    36.删除已有的 HTML 元素
    <div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
    </div>

    <script>
    var parent=document.getElementById("div1");
    var child=document.getElementById("p1");
    parent.removeChild(child);
    </script>

    37.创建对象的方法:

    person=new Object();
    person.firstname="Bill";
    person.lastname="Gates";
    person.age=56;
    person.eyecolor="blue";


    person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

    ③使用函数来构造对象
    function person(firstname,lastname,age,eyecolor)
    {
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    }
    var myFather=new person("Bill","Gates",56,"blue");
    ④对象属性的赋值
    function person(firstname,lastname,age,eyecolor)
    {
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;

    this.changeName=changeName;
    function changeName(name)
    {
    this.lastname=name;
    }
    }
    changeName() 函数 name 的值赋给 person 的 lastname 属性。
    myMother.changeName("Ballmer");


    ⑤对象属性的遍历


    38.字符串(String)对象
    计算字符串的长度
    txt.length

    为字符串添加样式
    txt.fontcolor("Red")
    txt.fontsize(16)
    txt.link("http://www.w3school.com.cn")

    indexOf() 方法
    if(str.indexOf("World")!=-1){}

    match() 方法
    if (element.src.match("bulbon")){}

    如何替换字符串中的字符 - replace()
    document.write(str.replace(/Microsoft/,"W3School"))


    39.时间:
    返回当日的日期和时间
    如何使用 Date() 方法获得当日的日期。

    getTime()
    getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
    var d=new Date();
    document.write("从 1970/01/01 至今已过去 " + d.getTime() + " 毫秒");

    setFullYear()
    如何使用 setFullYear() 设置具体的日期。
    var d = new Date()
    d.setFullYear(1992,10,3)
    document.write(d)

    toUTCString()
    如何使用 toUTCString() 将当日的日期(根据 UTC)转换为字符串。
    var d = new Date()
    document.write (d.toUTCString())

    getDay()
    如何使用 getDay() 和数组来显示星期,而不仅仅是数字。
    <script type="text/javascript">

    var d=new Date()
    var weekday=new Array(7)
    weekday[0]="星期日"
    weekday[1]="星期一"
    weekday[2]="星期二"
    weekday[3]="星期三"
    weekday[4]="星期四"
    weekday[5]="星期五"
    weekday[6]="星期六"

    document.write("今天是" + weekday[d.getDay()])

    </script>


    显示一个钟表
    如何在网页上显示一个钟表。


    40.
    ①数组的遍历:
    var x
    var mycars = new Array()
    mycars[0] = "Saab"
    mycars[1] = "Volvo"
    mycars[2] = "BMW"

    for (x in mycars)
    {
    document.write(mycars[x] + "<br />")
    }

    ②合并两个数组 - concat()
    var arr = new Array(3)
    arr[0] = "George"
    arr[1] = "John"
    arr[2] = "Thomas"

    var arr2 = new Array(3)
    arr2[0] = "James"
    arr2[1] = "Adrew"
    arr2[2] = "Martin"

    document.write(arr.concat(arr2))

    ③用数组的元素组成字符串 - join()
    <script type="text/javascript">

    var arr = new Array(3);
    arr[0] = "George"
    arr[1] = "John"
    arr[2] = "Thomas"

    document.write(arr.join());

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

    document.write(arr.join("."));

    </script>

    ④文字数组 - sort()
    如何使用 sort() 方法从字面上对数组进行排序。
    <script type="text/javascript">

    var arr = new Array(6)
    arr[0] = "George"
    arr[1] = "John"
    arr[2] = "Thomas"
    arr[3] = "James"
    arr[4] = "Adrew"
    arr[5] = "Martin"

    document.write(arr + "<br />")
    document.write(arr.sort())

    </script>
    数字数组 - sort()
    如何使用 sort() 方法从数值上对数组进行排序。
    <script type="text/javascript">

    function sortNumber(a, b)
    {
    return a - b
    }

    var arr = new Array(6)
    arr[0] = "10"
    arr[1] = "5"
    arr[2] = "40"
    arr[3] = "25"
    arr[4] = "1000"
    arr[5] = "1"

    document.write(arr + "<br />")
    document.write(arr.sort(sortNumber))

    </script>

    ⑤数组的定义
    var mycars=new Array()
    mycars[0]="Saab"
    mycars[1]="Volvo"
    mycars[2]="BMW"


    var mycars=new Array(3)
    mycars[0]="Saab"
    mycars[1]="Volvo"
    mycars[2]="BMW"


    var mycars=new Array("Saab","Volvo","BMW")

    41.Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)。

    var b1=new Boolean( 0)
    var b2=new Boolean(1)
    var b3=new Boolean("")
    var b4=new Boolean(null)
    var b5=new Boolean(NaN)
    var b6=new Boolean("false")

    0 是逻辑的 false
    1 是逻辑的 true
    空字符串是逻辑的 false
    null 是逻辑的 false
    NaN 是逻辑的 false
    字符串 'false' 是逻辑的 true

    如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!


    41.Math(算数)对象的作用是:执行常见的算数任务。
    round()
    如何使用 round()。
    random()
    如何使用 random() 来返回 0 到 1 之间的随机数。
    max()
    如何使用 max() 来返回两个给定的数中的较大的数。(在 ECMASCript v3 之前,该方法只有两个参数。)
    min()
    如何使用 min() 来返回两个给定的数中的较小的数。(在 ECMASCript v3 之前,该方法只有两个参数。)


    算数值
    JavaScript 提供 8 种可被 Math 对象访问的算数值:
    常数
    圆周率
    2 的平方根
    1/2 的平方根
    2 的自然对数
    10 的自然对数
    以 2 为底的 e 的对数
    以 10 为底的 e 的对数
    这是在 Javascript 中使用这些值的方法:(与上面的算数值一一对应)
    Math.E
    Math.PI
    Math.SQRT2
    Math.SQRT1_2
    Math.LN2
    Math.LN10
    Math.LOG2E
    Math.LOG10E


    使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数:
    document.write(Math.floor(Math.random()*11))

    42.RegExp 对象用于规定在文本中检索的内容。

    RegExp 对象的方法
    RegExp 对象有 3 个方法:test()、exec() 以及 compile()。

    test()
    test() 方法检索字符串中的指定值。返回值是 true 或 false。
    var patt1=new RegExp("e");
    document.write(patt1.test("The best things in life are free"));
    由于该字符串中存在字母 "e",以上代码的输出将是: true


    exec()
    exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。
    var patt1=new RegExp("e");
    document.write(patt1.exec("The best things in life are free"));
    由于该字符串中存在字母 "e",以上代码的输出将是:e


    在使用 "g" 参数时,exec() 的工作原理如下:
    找到第一个 "e",并存储其位置
    如果再次运行 exec(),则从存储的位置开始检索,并找到下一个 "e",并存储其位置
    var patt1=new RegExp("e","g");
    do
    {
    result=patt1.exec("The best things in life are free");
    document.write(result);
    }
    while (result!=null)
    由于这个字符串中 6 个 "e" 字母,代码的输出将是:
    eeeeeenull

    ③compile()
    compile() 方法用于改变 RegExp。
    compile() 既可以改变检索模式,也可以添加或删除第二个参数。
    例子:
    var patt1=new RegExp("e");

    document.write(patt1.test("The best things in life are free"));

    patt1.compile("d");

    document.write(patt1.test("The best things in life are free"));
    由于字符串中存在 "e",而没有 "d",以上代码的输出是:
    truefalse


    42.Window Screen
    window.screen 对象在编写时可以不使用 window 这个前缀。
    一些属性:
    screen.availWidth - 可用的屏幕宽度
    screen.availHeight - 可用的屏幕高度


    43.Window Location
    window.location 对象在编写时可不使用 window 这个前缀。
    一些例子:
    location.hostname 返回 web 主机的域名
    location.pathname 返回当前页面的路径和文件名
    location.port 返回 web 主机的端口 (80 或 443)
    location.protocol 返回所使用的 web 协议(http:// 或 https://)

    location.href 属性返回当前页面的 URL。
    location.assign() 方法加载新的文档。
    history.back() - 与在浏览器点击后退按钮相同
    history.forward() - 与在浏览器中点击按钮向前相同

    window.navigator 对象包含有关访问者浏览器的信息。
    txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
    txt+= "<p>Browser Name: " + navigator.appName + "</p>";
    txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
    txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
    txt+= "<p>Platform: " + navigator.platform + "</p>";
    txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
    txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

    document.getElementById("example").innerHTML=txt;


    44.可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。
    ①警告框
    alert("再次向您问好!在这里,我们向您演示" + ' ' + "如何向警告框添加折行。")

    ②确认框
    <script type="text/javascript">
    function show_confirm()
    {
    var r=confirm("Press a button!");
    if (r==true)
    {
    alert("You pressed OK!");
    }
    else
    {
    alert("You pressed Cancel!");
    }
    }
    </script>
    </head>
    <body>

    <input type="button" onclick="show_confirm()" value="Show a confirm box" />

    ③提示框
    <script type="text/javascript">
    function disp_prompt()
    {
    var name=prompt("请输入您的名字","Bill Gates")
    if (name!=null && name!="")
    {
    document.write("你好!" + name + " 今天过得怎么样?")
    }
    }
    </script>
    </head>
    <body>

    <input type="button" onclick="disp_prompt()" value="显示提示框" />


    45.JavaScript 计时

    ①简单的计时
    单击本例中的按钮后,会在 5 秒后弹出一个警告框。
    var t=setTimeout("alert('5 秒!')",5000)

    ②另一个简单的计时
    本例中的程序会执行 2 秒、4 秒和 6 秒的计时。
    var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)

    ③在一个无穷循环中的计时事件
    在本例中,单击开始计时按钮后,程序开始从 0 以秒计时。
    <script type="text/javascript">
    var c=0
    var t
    function timedCount()
    {
    document.getElementById('txt').value=c
    c=c+1
    t=setTimeout("timedCount()",1000)
    }
    </script>

    ④带有停止按钮的无穷循环中的计时事件
    在本例中,点击计数按钮后根据用户输入的数值开始倒计时,点击停止按钮停止计时。
    <script type="text/javascript">
    var c=0
    var t
    function timedCount()
    {
    document.getElementById('txt').value=c
    c=c+1
    t=setTimeout("timedCount()",1000)
    }

    function stopCount()
    {
    c=0;
    setTimeout("document.getElementById('txt').value=0",0);
    clearTimeout(t);
    }
    </script>

    ⑤使用计时事件制作的钟表
    一个 JavaScript 小时钟
    <script type="text/javascript">
    function startTime()
    {
    var today=new Date()
    var h=today.getHours()
    var m=today.getMinutes()
    var s=today.getSeconds()
    // add a zero in front of numbers<10
    m=checkTime(m)
    s=checkTime(s)
    document.getElementById('txt').innerHTML=h+":"+m+":"+s
    t=setTimeout('startTime()',500)
    }

    function checkTime(i)
    {
    if (i<10)
    {i="0" + i}
    return i
    }
    </script>


    46.cookie 用来识别用户。

  • 相关阅读:
    使用rem来开发你的移动端网站
    在网页布局中合理使用inline formating context(IFC)
    构建OLAP CDP平台 Maven父子项目
    2014世界杯决赛观后感
    2013岁末总结
    11月11日上班杂谈
    这一年
    湖南联通发福利了C#为你月赚150M流量回家过年不再愁
    C# 实现对接电信交费易自动缴费 续(winio/winring0 自动填密码)
    C# 实现对接电信交费易自动缴费
  • 原文地址:https://www.cnblogs.com/songjn/p/8510835.html
Copyright © 2020-2023  润新知