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

随机推荐

使用three.js开发3d地图初探
three是图形引擎,而web二维三维地图都是基于图形引擎的,所以拿three来开发需求简单的三维地图应用是没什么问题的. 1.坐标转换实际地理坐标为经度.纬度.高度,而three.js使用的是右手 ...
VisualSVN:强制必须填写日志信息
上回将到怎么修改已提交的版本日志信息,而开发项目过程中团队中总是有人忘记添加日志信息注释直接提交,这样会后期维护带来不便. 现在先演示一下效果当直接提交一个空白日志信息时有填写日志信息时那怎么实 ...
tab form
procedure TForm2.ToolButton1Click(Sender: TObject); var frm: TForm; begin frm := TForm.Create(Applic ...
VBA 连接文本的自定义函数（可用于数组公式）
Function ConTxt(ParamArray args() As Variant) As VariantDim tmptext As Variant, i As Variant, cellv ...
前端开发-5-HTML-总结
1.总体资源:https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c html head标签 title 显示网站的标题 meta ...
22 网络编程--TCP和UDP实现聊天例子
1.TCP简单的一次对话,单通信客户端: import socket HOST = 'localhost' PORT = 50006 client = socket.socket(socket.AF ...
SVM支持向量机推导，工具介绍及python实现
支持向量机整理参考: Alexandre KOWALCZYK大神的SVM Tutorial http://blog.csdn.net/alvine008/article/details/909711 ...
substring_index 用法
substring_index http://blog.csdn.net/wolinxuebin/article/details/7845917 1.substring_index(str,delim ...
webdriver屏幕截图（python）
webdriver对当前页面进行截图,截取的是当前页面的全图,不论页面有多长,有两种截图方法 1.get_screenshot_as_file(XXX) 2.save_screenshot(XXX) ...
Interface, 接口的实现初解
百度是这么说的: Java接口是一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法的实现,因此这些方法可以在不同的地方被不同的类实现,而这些实现可以具有不同的行为(功能). 两种含 ...

前端之JavaScript笔记2

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

随机推荐

热门专题