前端之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 ...

随机推荐

5. Java中序列化的serialVersionUID作用
Java序列化是将一个对象编码成一个字节流,反序列化将字节流编码转换成一个对象. 序列化是Java中实现持久化存储的一种方法:为数据传输提供了线路级对象表示法. Java的序列化机制是通过在运行时判断 ...
VSS SVN GIT SVN 加锁签出
VSS TFS SVN GIT VSS 两大功能: 1.签出后加锁,别人不能签出,独占签出. 2.在服务端可以查看哪些用户签出了哪些文件. 3.查看所有签出未签入的文件列表,SVN未发现此功能. 缺点 ...
php解析url并得到url中的参数
<?php $url = 'http://www.baidu.com/index.php?m=content&c=index&a=lists&catid=6&ar ...
AES 加密256位错误 java.security.InvalidKeyException: Illegal key size or default parameters
Java发布的运行环境包中的加解密有一定的限制.比如默认不允许256位密钥的AES加解密,解决方法就是修改策略文件. 官方网站提供了JCE无限制权限策略文件的下载: JDK8的下载地址: http:/ ...
requireJS-初识
浅谈requireJS 2016-04-26 21:44 by 猴子猿, 726 阅读, 0 评论, 收藏, 编辑项目中大都使用模块化开发,requireJS作为AMD模块开发的典范,所以有必要学习 ...
edgeR
1)简介 edgeR作用对象是count文件,rows 代表基因,行代表文库,count代表的是比对到每个基因的reads数目.它主要关注的是差异表达分析,而不是定量基因表达水平. edgeR wor ...
InnoDB FULLTEXT
1.概要 InnoDB引擎对FULLTEXT索引的支持是MySQL5.6新引入的特性,之前只有MyISAM引擎支持FULLTEXT索引.对于FULLTEXT索引的内容可以使用MATCH()…AGAIN ...
vmstat工具
vmstat vmstat是Virtual Meomory Statistics(虚拟内存统计)的缩写, 是实时系统监控工具.该命令通过使用knlist子程序和/dev/kmen伪设备驱动器访问这些数 ...
chrome input去除黄色背景色
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; border: 1px solid #CCC!impo ...
Openvpn 日常问题解决
一.Openven的在windows系统下的使用: 1.Openven客户端2.2.0:http://pan.baidu.com/s/1sjJij4T 安装好客户端软件后,将服务器下发的证书和配置文件 ...

前端之JavaScript笔记2

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

随机推荐

热门专题