前端之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 ...
随机推荐
- 【原】解决Debug JDK source 无法查看局部变量的问题方案（重新编译rt.jar包）
一.问题阐述 首先我们要明白JDK source为什么在debug的时候无法观察局部变量,因为在jdk中,sun对rt.jar中的类编译时,去除了调试信息,这样在eclipse中就不能看到局部变量的值 ...
- 11.使用ForwardAction实现页面屏蔽。
转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html 我们在jsp页面之间写链接总会是.../xxx.jsp,而如果我们想屏蔽掉具 ...
- eclipse包层级显示和工作空间显示
本文两件事:设置包层级显示.设置工程的工作空间显示 一.各package包分层显示 平铺显示,实在不方便开发!也不方便查看工程包的层级结构,如下: 更换成层级显示: 二.工作空间显示 包用来区分类,工 ...
- start 调用外部程序
批处理中调用外部程序的命令(该外部程序在新窗口中运行,批处理程序继续往下执行,不理会外部程序的运行状况),如果直接运行外部程序则必须等外部程序完成后才继续执行剩下的指令 例:start explore ...
- as3 声明变量
var a:int=0, b, c:Number=2; trace(a,b,c) /* 0 undefined 2 */ var a:int, b:uint, c:Number; var d:Stri ...
- Error 2503 and 2502 when installing/uninstalling on Windows 10
1. Hold Ctrl+Shift and press Esc. 2. Locate “Windows Explorer” under “Windows processes”, now right ...
- jdk下载--操作系统
不同的操作系统需要下载不同的jdk. 查看操作系统的命令: Window系统下:>winver Linux和Unix系统下: >uname -a 根据系统不同选用不同的jdk: 下载地址: ...
- 代码报错记录-MAVEN
报错: COMPILATION ERROR : 程序包不存在. 说是找不到程序包,我的JUNIT是父项目中的,子项目是从JAVA项目转为MAVEN项目的,难道在转成MAVEN项目时对POM文件的修改有 ...
- xStream转换XML、JSON
一. 简介 xStream可以很容易实现Java对象和xml文档互相转换, 可以修改某个特定的属性和节点名称,xStream提供annotation注解, 可以在JavaBean中完成对xml ...
- mahout版本兼容问题
运行mahout in action上的cluster示例时报错:Error: Found interface org.apache.hadoop.mapreduce.Counter, but cla ...