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

随机推荐

leetcode925
public class Solution { public bool IsLongPressedName(string name, string typed) { var list1 = new L ...
indy字符编码
以前是TEncoding.Unicode 现在是IndyTextEncoding_Default
MyEclipse jsp 中文乱码
在最开始加上 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8 ...
springmvc @valid
JSR303是javaEE6中的一个子规范:Bean Validation.官方实现是HibernateValidatior.校验: 使用springmvc 的validate机制,需要引入valid ...
Elasticsearch之启动（前台和后台）
分为两种情况,取决于是否安装了tomat. 一.若安装了tomcat 1.es的前台启动需要先启动tomcat,再启动es,否则会报错! 所以,得 2.es的后台启动 [hadoop@HadoopM ...
sql计算总页数
1 计算总页数方法: public int getTotalCount() { Statement stmt = null; //提交SQL语句对象stmt Resu ...
批量导入数据（Mysql）报MySQL server has gone away 问题的解决方法
问题分析首先度娘:mysql出现ERROR : (2006, 'MySQL server has gone away') 的问题意思就是指client和MySQL server之间的链接断开了. 造 ...
spring AOP 注解配置
applicationContext-resource.xml: <?xml version="1.0" encoding="UTF-8"?>< ...
Mycat入门及简单规则
以下都来自网络: 官网: http://www.mycat.io/ 官网配置文件解析: https://github.com/MyCATApache/Mycat-Server/wiki/9.0-%E6 ...
quartz2.2.1 web配置
首先到http://www.quartz-scheduler.org/downloads/catalog下载工具包将下载包中lib目录下的所有jar包导入到项目中因为quartz依赖log4j,需 ...

前端之JavaScript笔记2

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

随机推荐

热门专题