前端之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 data jpa 注解
@Data 注解引出的 lombok 小辣椒 今天在看代码的时候, 看到了这个注解, 之前都没有见过, 所以就查了下, 发现还是个不错的注解, 可以让代码更加简洁. 这个注解来自于 lombok, ...
- clip-path的任意元素的碎片拼接动效
看了张大神的这篇文章后自己写的,兼容性不好clip-path要加-webkit- css #test img{position: absolute;} .active .clip{ will-chan ...
- indy字符编码
以前是TEncoding.Unicode 现在是IndyTextEncoding_Default
- 任务调度的方式：Timer、ScheduledExecutorService、spring task、quartz、XXL-JOB、Elastic-Job
任务调度 定时任务调度:基于给定的时间点.给定的时间间隔.给定的执行次数自动执行的任务. Timer 介绍 Timer,简单无门槛,一般也没人用. Timer位于java.util包下,其内部包含且仅 ...
- 关联github, 添加gitignore 规则
1. 新建Maven项目 2. 新建github repository 3. 执行命令 echo "# se" >> README.md git init git ad ...
- 可视化库-seaborn-Facetgrid(第五天)
1. sns.Facetgrid 画一个基本的直方图 import numpy as np import pandas as pd from scipy import stats, integrate ...
- C++ 实现的netstat -an 的功能<转>-目的为获取rtmp推流地址如果是域名的话查看1935的ip
目的可能是为了获取rtmp真正的推流ip 如果rtmp推流地址是域名,往CDN推流的话,需要nslookup 的那种DNS解析,然后获取的几个ip 可以使用netstat -n 等命令查看 1935 ...
- Flex 布局教程:实例
分类: 开发者手册 Flex 布局教程:实例篇 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Fle ...
- tbytes 转 十六进制 string
function Bytes2HexStr(buf: TBytes; len: Integer): AnsiString; begin SetLength(Result, len*2); BinT ...
- session第二篇
二 A.application对象 1.application对象实现了用户间数据的共享,可存放全局变量. 2.application对象开始于服务器的启动,终止于服务器的关闭. 3.在用户的前后连接 ...