前端之JavaScript笔记2

一数组对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        //var l=[111,222,333];

        //console.log(typeof l);

        //var l2=new Array([1,2,3,4]);  //创建数组

       //join  方法

       <!--var s=['hello','world'].join(" ");-->

       <!--console.log(s)-->

        // 原生类方法toString()： 将对象转化成字符串

        <!--var s1=[12,3,4,32,65];-->

        <!--console.log(s1);-->

        <!--console.log(typeof s1);-->

        <!--console.log(s1.toString());  //"[12,3,4,32,65]"-->

        <!--console.log(typeof s1.toString());-->

/*        //反转 reverse

        var q=[123,46,75,321];

        console.log(q.reverse());

        // sort ： 默认排序，是以最高位的ASCLL码排序的

        console.log(q.sort());

        // 删除方法 splice方法

        q.splice(1,3);

        console.log(q);  */

        // 向数组添加或者删除元素 push pop 后面添加或者删除  shift   unshift  前面添加或者删除

        var w=[11,22,33];

        <!--w.push(44);-->

        <!--console.log(w);   //[11,22,33,44]-->

        <!--console.log(w.pop());  //[44]-->

        console.log(w.shift());

        w.unshift([77,88]);

        console.log(w);

        console.log(w.shift());

    </script>

</head>

<body>

</body>

</html>

二时间对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        var ID;

        function start(){

            if(ID==undefined){

                foo();

                ID=setInterval(foo,1000);

            }

        }

        function foo(){

            var timer=new Date().toString();  //获取当前时间字符串

            var ele=document.getElementById("time");   //获取操作标签对象

            ele.value=timer;   //对操作标签对象进行赋值

        }

        function end(){

            clearInterval(ID);

            ID=undefined;

        }

    </script>

</head>

<body>

<input type="text" id="time" >

<button onclick="start()" >start</button>

<button onclick="end()" >end</button>

</body>

</html>

三显示时间对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        var ID;

        function start(){

            if(ID==undefined){

                foo();

                ID=setInterval(foo,1000);

            }

        }

        function foo(){

            var timer=new Date().toString();  //获取当前时间字符串

            var ele=document.getElementById("time");   //获取操作标签对象

            ele.value=timer;   //对操作标签对象进行赋值

        }

        function end(){

            clearInterval(ID);

            ID=undefined;

        }

    </script>

</head>

<body>

<input type="text" id="time" >

<button onclick="start()" >start</button>

<button onclick="end()" >end</button>

</body>

</html>

四函数对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        //function 函数名(){

        //}

        //直接调用

        /*

        function foo(){

            alert(123)

            }

            foo();

        function add(x,y){

            console.log(arguments);

            var sum=0;

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

                sum+=arguments[i];

                }

            return sum;

        }

        var s=add(1,4,2,6);

        console.log(s)

        */

        // 匿名函数

        (function (){

        })()

    </script>

</head>

<body>

</body>

</html>

# s1='hello'

#

# s2='world'

#

# s3='fang'

#

# s=" ".join([s1,s2,s3])    #join是符号的拼接属性

# print(s)

#

#

# ret=(lambda x,y:x+y)(4,6)  #匿名函数

# print(ret)

五 js 的查找标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function t(){

            var ele=document.getElementsByClassName("c1")[0];

            ele.style.color="green";

            }

    </script>

</head>

<body>

    <div class="c1" onclick="t()">fang</div>

</body>

</html>

六搜索框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function foo(){

            var ele=document.getElementById("search");

            ele.value=" ";

            }

        function bar(){

            var ele=document.getElementById("search");

            if(!ele.value.trim()){

                ele.value="用户名";

                }

            }

    </script>

</head>

<body>

<input type="text" id="search" value="用户名" onfocus="foo()" onblur="bar()">

<div>

    <div>div</div>

    <p>ppp</p>

</div>

</body>

</html>

七 DOM

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        // window.alert(123);

        //var ret=confirm("是否继续...")

        // console.log(ret)

        var ret=prompt("please input a num:")

        console.log(ret)

    </script>

</head>

<body>

</body>

</html>

八导航属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="outer">

    <p>p5</p>

    <p>p4</p>

    <div class="index">

        <p id="p1">p1</p>

    </div>

    <p>p2</p>

</div>

<script>

    var ele_p1=document.getElementById("p1");

    var ele_p1_pa=ele_p1.parentElement;

    console.log(ele_p1_pa.nextElementSibling);

</script>

</body>

</html>

前端之JavaScript笔记2的更多相关文章

前端之JavaScript笔记1
一 JavaScript的引入方式 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
前端之JavaScript笔记4
一按键事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
前端之JavaScript笔记3
一创建添加节点 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
【原】javascript笔记之Array方法forEach&map&filter&some&every&reduce&reduceRight
做前端有多年了,看过不少技术文章,学了新的技术,但更新迭代快的大前端,庞大的知识库,很多学过就忘记了,特别在项目紧急的条件下,哪怕心中隐隐约约有学过一个方法,但会下意识的使用旧的方法去解决,多年前ES ...
前端：jQuery笔记
前端:jQuery笔记此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送摘要: 一.简介在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
spring mvc 及NUI前端框架学习笔记
spring mvc 及NUI前端框架学习笔记页面传值一.同一页面直接通过$J.getbyName("id").setValue(id); Set值即可二.跳转页面(bus ...
前端学习:学习笔记(JS部分）
前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解) JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介新建步骤 <body ...
前端之JavaScript基础
前端之JavaScript基础本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

随机推荐

Spring_JAP_CXF_maven
发送 pom,xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww ...
springsource-tool-suite插件各个历史版本
转自:https://blog.csdn.net/zhen_6137/article/details/79384798 目前spring官网(http://spring.io/tools/sts/al ...
浅谈Matcher和pattern的使用
这两个类位于java.util.regex包下,主要用于实现正则表达式 Pattern类用于创建一个正则表达式,也可以说是创建一个匹配模式两个静态方法创建:compile(String regex) ...
前端-CSS-3-高级选择器
高级选择器总结: <!-- 总结: 基础选择器: 1.标签选择器 div 2.类选择器 .div1 3.id选择器 #box 4.通配符选择器 * 高级选择器: 1.群组选择器中间用, .t ...
Java并发知识(1)
1. 进程和线程之间有什么不同? 一个进程是一个独立(self contained)的运行环境,它可以被看作一个程序或者一个应用.而线程是在进程中执行的一个任务.Java运行环境是一个包含了不同的类和 ...
No matter how hard it is or no matter how bad it gets, I am going to make it!
No matter how hard it is or no matter how bad it gets, I am going to make it! He always had a yearni ...
Haskell语言学习笔记（22）MaybeT
Monad Transformers Monad 转换器用于将两个不同的Monad合成为一个Monad.Monad 转换器本身也是一个 Monad. MaybeT MaybeT 这个 Monad 转换 ...
显示AVI的第一桢
procedure TForm1.Button1Click(Sender: TObject);begin Application.ProcessMessages; MediaPlayer1.Ope ...
Delphi 操作键盘按下和释放操作
Unit Unit1; Interface Uses Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs, ...
MapReduce超时原因（Time out after 300 secs）
目前碰到过三种原因导致 Time out after 300 secs. 1. 死循环这是最常见的原因.显式的死循环很容易定位,隐式的死循环就比较麻烦了,比如正则表达式.曾经用一个网上抄来的邮箱正则 ...

前端之JavaScript笔记2

前端之JavaScript笔记2的更多相关文章

随机推荐

热门专题