前端之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 ...
随机推荐
- HTML5 Canvas ( 图形变换矩阵 ) transform, setTransform
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- java 项目中类找不到异常解决办法
最后点击Apply and Close就可以了
- remote Request
import java.io.IOException; import java.io.InputStream; import java.io.UnsupportedEncodingException; ...
- SpringMvc Intercetor
对于登录的访问控制以及session的超时控制. 当用户在未登录情况下,直接在地址栏输入url进入某些页面时,会越过登录页,如果不做控制会有安全问题. 因此可添加拦截器处理异常: /** * @Des ...
- 7 python 类的组合
1.组合与重用性 软件重用的重要方式除了继承之外还有另外一种方式,即:组合 组合指的是,在一个类中以另外一个类的对象作为 1.一个类的属性可以是一个类对象,通常情况下在一个类里面很少定义一个对象就是它 ...
- Winform 窗体关闭事件
//窗体关闭前事件 private void FrmMain_FormClosing(object sender, FormClosingEventArgs e) { DialogResult res ...
- linux系统安装中文支持，解决中文乱码问题
怎么设置Linux系统中文语言,这是很多小伙伴在开始使用Linux的时候,都会遇到一个问题,就是终端输入命令回显的时候中文显示乱码.出现这个情况一般是由于没有安装中文语言包,或者设置的默认语言有问题导 ...
- C++ 11 中的 Lambda 表达式的使用
Lambda在C#中使用得非常频繁,并且可以使代码变得简洁,优雅. 在C++11 中也加入了 Lambda. 它是这个样子的 [] () {}... 是的三种括号开会的节奏~ [] 的作用是表示La ...
- 必备 .NET - C# 脚本
作者:Mark Michaelis | 2016 年 1 月 Link: https://msdn.microsoft.com/zh-cn/magazine/mt614271.aspx 随着 Visu ...
- jquery 不选择第一个
参考 https://zhidao.baidu.com/question/174343639.html th:not(':first')