前端之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 ...
随机推荐
- 转发 DDoS攻防战 （一） ： 概述
岁寒 然后知松柏之后凋也 岁寒 然后知松柏之后凋也 ——论语·子罕 (此图摘自<Web脚本攻击与防御技术核心剖析>一书,作者:郝永清先生) DDoS,即 Distributed ...
- python之函数嵌套与闭包
一:函数的嵌套:在函数内部在定义一个函数,一层套一层 def father(name): print("from father %s" %name) def son(): prin ...
- String类的intern()方法
0.引言 什么都先不说,先看下面这个引入的例子: String str1 = new String("SEU")+ new String("Calvin"); ...
- js登录弹出框插件
第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...
- getattr()函数详解
setattr(object,name,value): 作用:设置object的名称为name(type:string)的属性的属性值为value,属性name可以是已存在属性也可以是新属性. get ...
- C++ 11 中的 Lambda 表达式的使用
Lambda在C#中使用得非常频繁,并且可以使代码变得简洁,优雅. 在C++11 中也加入了 Lambda. 它是这个样子的 [] () {}... 是的三种括号开会的节奏~ [] 的作用是表示La ...
- Android图形动画
一.动画基础 本质 每帧绘制不同的内容. 基本过程 开始动画后,调用View的invalidate触发重绘.重绘后检查动画是否停止,若未停止则继续调用invalidate触发下一帧(下一次重绘),直到 ...
- 虚拟机安装Centos6.5服务器系统
前言: 工作需要,研究Linux数日,写下此教程,意在给其他初学者参考学习,亦是给自己留作备用.好记性不如烂笔头,毕竟只是偶尔使用,留下教程,以备不时之需. 对于学习研究Linux的新手,个人推荐VM ...
- ios8 UITableView section不显示
ios8 如果UITableView只设置viewForHeaderInSection,则可能section不能显示,iOS7及以下版本显示正常. 解决方案: 设置heightForHeaderInS ...
- springboot自定义消息转换器HttpMessageConverter
在SpringMVC中,可以使用@RequestBody和@ResponseBody两个注解,分别完成请求报文到对象和对象到响应报文的转换,底层这种灵活的消息转换机制就是利用HttpMessageCo ...