一、基础
1、在firbug调试器的控制台输出内容。
  1. function(){
  2. console.log()
  3. }
2、argument。没有形参也可表示传进来的参数,用数组表示,如argument[0],argument[1]
3、函数自调用。
  1. function get(){
  2. if(n==1)
  3. return 1;
  4. return n*arguments.callee(n-1);
  5. }
4、匿名函数执行。
  1. (function(){
  2. console.log(“hello”);
  3. })();
  4. //它还可以传形参,如:(function(title){ console.log(“hello”+title); })(“我是形参”);
  5. //这相当于
  6. var get = function(){
  7. console.log(“hello”);
  8. };
  9. get();
匿名函数好处:程序代码没有停顿,立即执行,可以避免变量污染,比如jquery框架,就是个很大的匿名函数自调用。
5、全局变量。
  1. function f1(){
  2. subject =”hello”; //函数内部也能声明全局变量,但需要调用一下函数才管用
  3. }
  4. f1();
  5. console.log(subject);

6、数组赋值。

比如:animal[‘mm’] = “apple”; animal.north = “wolf”;

7、数组遍历。

  1. for(var 下标变量 in 数组/对象) 如:
  2. for (var k in animal){
  3. console.log( animal [k] );
  4. }
8、eval(“字符串”)。
运行字符串里的js代码,字符串内容必须符合js语法规则。eval()主要用于把其他用户传递过来的字符串信息转变为js的实体(对象、数组等),比如把接口返回的内容转为对象。
 
二、DOM
1、获取节点属性。
如:获取一个input标签的节点属性值
  1. var nm = document.getElementsByTagName(‘input’)[0];
  2. function f1(){
  3. console.log(nm.type);
  4. console.log(nm.name);
  5. console.log(nm.value);
  6. console.log(nm.class); //class是js的关键字,需要变形为className操作:nm.className
  7. }
2、attributes。
console.log(nm.attributes); //以类似json格式返回对应节点内部的全部属性节点信息
如:[type=”text”,class=”orange”,weight=”130”]
当然也可获取单个节点的值。如 nm.attributes.value
3、nodeType。不同值代表不同节点类型,1为元素节点 ,2为属性节点 等等
4、节点复制。被复制节点.cloneNode(true/false);  true是深层复制,复制本身节点和内部节点;false是浅层复制,只复制本身节点。如:
  1. <ul id=”ning”> <li> aaa</li> </ul>
  2. var ning = document.getElementById(‘ning’);
  3. var fu = ning.cloneNode(true); //深层复制,连ul里li的aaa也都复制了
  4. var south = document.getElementById(“south”);
  5. south.appendChild(fu);
5、dom操作css样式
获取css样式: 元素节点.style.css样式名称; 如 divnode.style.width;
设置css样式: 如 divnode.style.width = ‘500px’ ;
注意:dom操作css样式只能操作行内样式,且样式有则改之,无则新增,复合样式font-size要变为fontSize。
6、dom2级事件。
  6.1主流浏览器方式(ie9以上):
    itnode.addEventListener(事件类型,事件处理[,事件流]);  //设置 事件流可以不设置
    itnode.removeEventListener(事件类型,事件处理[,事件流]);  //取消
  6.2Ie浏览器方式(ie6/7/8):
    itnode.attachEvent(事件类型,事件处理);  //设置
    itnode.detachEvent(事件类型,事件处理);  //取消
事件类型:主流浏览器没有on,如addEventListener(‘click’,……);ie浏览器有on
事件处理:一个有名或匿名函数,如addEventListener(‘click’,function(){})
事件流:
  true捕捉型:事件从内部往外部依次执行,
  [false冒泡型]:事件从外部往内部依次执行(默认),如div里有p,p里有span,他仨都有onclick事件
事件取消(removeEventListener/detachEvent)操作具体要求:
  ①事件处理 必须是有名函数,不可以是匿名函数
  ②事件取消的参数与绑定的参数完全一致(数量/内容)
7、return false只针对dom1级事件起作用,event.preventDefault(); dom1和dom2都起作用。(比如这次方法能阻断post请求的浏览器跳转)
8、加载事件:文档加载完成后,执行js
两种设置方式:
  1. window.onload = 有名函数 //这中dom1级事件只能设一个,多了会覆盖
  2. Window.onload = function(){
  3. 有名函数;
  4. 有名函数
  5. } //这种匿名函数的方式就能写很多有名函数

快速上手系列:JavaScript进阶的更多相关文章

  1. 快速上手系列-C语言之指针篇(一)

    快速上手系列-C语言之指针篇(一) 浊酒敬风尘 发布时间:18-06-2108:29 指针的灵活运用使得c语言更加强大,指针是C语言中十分重要的部分,可以说指针是C语言的灵魂.当然指针不是万能的,但没 ...

  2. JS快速上手-基础Javascript

    1.1背景 1.1.1 ECMAScript与javascript ECMAScript是javascript的官方命名.因为java已经是一个商标.如今,一些早前收到过授权的公司,如Moailla, ...

  3. 使用 mongodb 的 Docker Image 快速上手系列 lab

    Docker 主要的概念 Dockerfile => 用來產生 docker image 用的(介紹) Image => 可以用來產生 docker container Container ...

  4. SpringBoot快速上手系列01:入门

    1.环境准备 1.1.Maven安装配置 Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的项目管理工具软件. 下载Maven可执行文件 cd /usr/local ...

  5. 快速入门系列--WebAPI--01基础

    ASP.NET MVC和WebAPI已经是.NET Web部分的主流,刚开始时两个公用同一个管道,之后为了更加的轻量化(WebAPI是对WCF Restful的轻量化),WebAPI使用了新的管道,因 ...

  6. 快速入门系列--WebAPI--03框架你值得拥有

    接下来进入的是俺在ASP.NET学习中最重要的WebAPI部分,在现在流行的互联网场景下,WebAPI可以和HTML5.单页应用程序SPA等技术和理念很好的结合在一起.所谓ASP.NET WebAPI ...

  7. [转]快速入门系列--WebAPI--01基础

    本文转自:http://www.cnblogs.com/wanliwang01/p/aspnet_webapi_base01.html ASP.NET MVC和WebAPI已经是.NET Web部分的 ...

  8. 快速入门系列--WebAPI--04在老版本MVC4下的调整

    WebAPI是建立在MVC和WCF的基础上的,原来微软老是喜欢封装的很多,这次终于愿意将http编程模型的相关细节暴露给我们了.在之前的介绍中,基本上都基于.NET 4.5之后版本,其System.N ...

  9. JavaScript进阶系列07,鼠标事件

    鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...

  10. JavaScript进阶系列06,事件委托

    在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制.现在需要使用这个 ...

随机推荐

  1. Swoole从入门到入土(13)——HTTP服务器[配置]

    开篇之前,先复习一下如何为一个server进行配置的设置: $server->set(array( 'key' => 'value' )); 配置说明: upload_tmp_dir:设置 ...

  2. dp题单——区间dp

    一.基本概念 1.链式区间dp for(int len = 2; len <= n; len++){ //枚举区间长度 for(int i = 1; i + len - 1 <= n; i ...

  3. 之前练手使用基于gin的go web项目

    目录结构: `-- demo |-- cmd | |-- api.go | `-- root.go |-- common | `-- consts | `-- consts.go |-- config ...

  4. Qt实用技巧:Qt从QtCreator更换为VS开发Qt所需要注意的坑

    前言   基本都是使用QtCreator开发,使用vs进行一下开发,记录从QtCreator换成VS所遇到的注意的坑.   VS装对应的Qt版本助手配置Qt版本        VS装番茄助手   这里 ...

  5. urllib模块常用方法

    import urllib.parse ## urlparse() 对url进行解析,并对url按照一定格式进行拆分,返回一个包含6个字符串的元组(协议,位置,路径,参数,查询,判断), 可以将获得的 ...

  6. 如何将 IPhone 的文件导入 Linux

    如何将 IPhone 的文件导入 Linux 完全免费方案. 方法一: 使用 Koder 的 Local File Access 功能 这方法不需要在 Linux 端做任何配置. IPhone 端 安 ...

  7. 【Azure 微服务】Service fabric升级结构版本失败问题

    问题描述 Service fabric升级结构版本失败,Service Fabric的可靠性层是白银层,持久性层为青铜层,当把节点从6个直接在虚拟规模集(VMSS)中缩放成了3个.从而引起了Servi ...

  8. Java开发者的Python快速进修指南:掌握T检验

    前言 T检验是一种用于比较两个独立样本均值差异的统计方法.它通过计算T值和P值来判断样本之间是否存在显著性差异.通常情况下,我们会有两组数据,例如一组实验组和一组对照组. T检验的原假设是两组样本的均 ...

  9. Sealos 是企业节省成本的终极武器

    本文通过多维度,多场景对比来阐述 Sealos 为企业节省大量成本,结合一些现有客户具体的实际情况全面分析成本模型,企业可以根据自己的实际情况来对号入座,看是否适合使用 Sealos. 云操作系统节省 ...

  10. nginx Host值设置

    $server_port :nigix监听的端口 $proxy_port : 服务器真正访问的端口 #设置请求头"Host"值(为入口域名和端口) proxy_set_header ...