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

随机推荐

vue-cli 3.0之跨域请求代理配置及axios路径配置
vue-cli 3.0之跨域请求代理配置及axios路径配置问题:在前后端分离的跨域请求中,报跨域问题配置: vue.config.js: module.exports = { runtimeCo ...
安装设置IIS5.1
1.防止不停提示无法复制staxmem.dll: esentutl /p %windir%/security/database/secedit.sdb提示数据库损坏,是否恢复,选是,出现以下提示后退出 ...
Ztree学习(-)简单例子
https://www.cnblogs.com/shinhwazt/p/5828031.html ztree包:https://pan.baidu.com/s/1vOgGm_elF-lF0VowoHw ...
MFC 线程中CWnd对象
尽量不要在MFC线程中将CWnd作为参数传递,会引起crash 正确的做法: 1. 将CWnd对应的handle传进来,通过CWnd::FromHandle()函数转换: 2. 在线程中用SendMe ...
lucene教程--全文检索技术
1 Lucene 示例代码 https://blog.csdn.net/qzqanzc/article/details/80916430 2 Lucene 实例教程(一)初识L ...
Access-Control-Allow-Origin与跨域
文章转载地址: http://freewind.me/blog/20140327/2456.html 问题在某域名下使用Ajax向另一个域名下的页面请求数据,会遇到跨域问题.另一个域名必须在resp ...
iBatis与Hibernate有什么不同?
相同点:屏蔽jdbc api的底层访问细节,使用我们不用与jdbc api打交道,就可以访问数据. jdbc api编程流程固定,还将sql语句与java代码混杂在了一起,经常需要拼凑sql语句,细节 ...
one by one 项目 part 1
今天安装MySQL,我的系统是win8.1,安装包是mysql-5.7.17-winx64.zip,遇到了不少问题,特在此总结,希望能帮到遇到同样情况的人. 1.前面按照网上教程,先解压,然后在cmd ...
机房servlet过滤器
1.源代码 loginform.html <html> <head> <title>使用过滤器改变请求编码</title> <meta http- ...
linux基础命令：
linux基础命令: 显示 echo 输出我写的内容 ls 查看当前目录的文件 pwd 查看当前目录 ifconfig 查看网卡信息 grep 过滤 -v 取反 -n man 查看命令的帮助信息 md ...

前端之JavaScript笔记2

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

随机推荐

热门专题