js入门、JQuery初步

布满荆棘的人生 2022-08-05 00:47 183阅读 0赞

*  声明
    
     *  1符号说明
 *  1js基础
    
     *  1script标签及js加载
        
         *  10Hello world 
         *  11script标签和js加载顺序
         *  12参考文档
         *  13可能会遇到的问题
     *  2弱类型变量全局变量生存期
        
         *  21弱类型下typeof的使用
         *  22全局变量的唯一性脏读写
         *  23作用域
     *  3闭包
     *  4特殊变量类型数组对象
     *  5操作DOM
     *  6BOM及js操作页面大小
     *  7DateStringArrayMath
     *  8property
     *  2JQuery初步
        
         *  0Hello world 
         *  1语法方法链接
         *  2选择器寻找元素this的使用
         *  3 事件绑定触发冒泡监听
         *  4 操作DOM与原生js对象的转换
         *  5 CSS尺寸
         *  6 AJAX
     *  代码整洁的几点建议
        
         *  js代码风格
         *  单一权责原则
         *  js与css位置
            
             *  参考文献
         *  js和css压缩
     *  JSON
     *  DataTables

# 声明 #

## 0.1、符号说明 ##

0.1.1、*为后文有单独小节列出；
    0.1.2、#为小节含有关键概念，不再赘述，避免误导。

# 1、js基础 #

## 1.1、script标签及js加载 ##

### 1.1.0、Hello world ~ ###

document.write("Hello world ~");

### 1.1.1、script标签和js加载顺序 ###

Browser js引擎 运行script标签内js代码顺序
    step 1.  读入第一个代码块。
    step 2.  做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5。
    step 3.  对var变量和function定义做“预编译处理”（永远不会报错的，因为只解析正确的声明）。
    step 4.  执行代码段，有错则报错（比如变量未定义）。
    step 5.  如果还有下一个代码段，则读入下一个代码段，重复step2。
    step 6.  结束。

### 1.1.2、参考文档 ###

[《a:javascript运行机制之执行顺序详解》][a_javascript]  
[《a:浏览器的JavaScript引擎》][a_JavaScript]  
[《a:js加载顺序的加载实例》][a_js]  
[《a:朴灵评注的Javascript运行机制》][a_Javascript]，原文在：[《a:阮一峰：JavaScript 运行机制详解：再谈Event Loop》][a_JavaScript _Event Loop]

### 1.1.3、可能会遇到的问题 ###

当遇到“①dom加载-②ajax操作dom-③事件执行”顺序执行的事件时，因js加载的顺序不对，导致应该执行的②会因为无法找到对应的dom内容而报错，此时，②应该生成的对应的dom信息在③中执行的事件因无法捕获而导致③也失败。诸如页面初始化（即dom加载）时现在onloading信息，ajax获取服务器数据拼装对应的页面，然后③中绑定事件或执行另一个操作dom的function。因js执行顺序错误导致的连锁反应使页面无法展示应用的效果。

## 1.2、弱类型变量、全局变量、生存期 ##

### 1.2.1、弱类型下”+”、”==”、”===”、typeof的使用 ###

因js的数据类型是一种弱类型，定义变量时不需要特别的指明确定的类型，在对变量赋值时js会自动的转换该变量的类型。

var a="dd";
    console.info("1————"+typeof a);
    a=55;
    console.info("2————"+typeof a);

以上代码的执行结果：  
![代码执行结果][20150529150730784]

那么问题来了，弱类型导致“+”在用时有很多种含义，因为a+b的a和b的类型不同会导致大量的情况出现，而这些情况中有很多可能是你需要尽可能避免的。

console.info(1+2,typeof (1+2));
    console.info(1+2+3,typeof (1+2+3));
    console.info(1+2+"3",typeof (1+2+"3"));
    console.info(1+"2"+3,typeof (1+"2"+3));
    console.info("1"+2+3,typeof("1"+2+3));
    console.info(true,typeof true);
    console.info(true+false,typeof(true+false));
    console.info(true+1,typeof(true+1));
    console.info(false+1,typeof(false+1));
    console.info(true+"1",typeof(true+"1"));

以上代码的执行结果：  
![\+导致结果不同][20150529152821719]

最可能出现的情况的莫过于【"1"+1】，尤其是在js获取input值，然后+1，若无法保证从input获取的value的类型是int/number时，则计算后填充到input中的数据很有可能出错。此时，应使用parseInt()、parseFloat()来强制转换数据类型。

有关js的数据类型转换可参见[《a:js之类型转换与引用类型(Boolean/Number/String)》][a_js_Boolean_Number_String]

### 1.2.2、全局变量的唯一性（脏读写） ###

在开发时，不可避免的是可能是定义多个全局变量来存储多个函数需要公用的值，但当共有变量较多时，极有可能出现“全局变量污染”。即你在function a()写了x的读写，在function b()中又写了a的读写，这就会导致x的数据污染，你需要提取a()中x时，由于b()中对x读写，你实际得到的是b()中的x值，而导致程序出错。

此问题在[《Javascript语言精粹》-减少全局变量污染][Javascript_-]中有提及，解决方法是提供一个全局变量的应用容器，将所有的全局变量放入容器中，所有的读写通过容器实现。

### 1.2.3、作用域 ###

Javascript中变量的作用域是【函数作用域】，而不是\[块级作用域\]，所以，请不要再像java、c++那样在”for(var i=0;i<10;i++)”中定义或声明变量，尤其是同一个function()\{\}内有两个for或者其他循环时，为避免变量污染，尽量使用两个参数来指定循环。具体可参考[《a:js作用域与块级作用域》][a_js 1]

## 1.3\#、闭包（！！！） ##

一个相当关键的概念，不敢在此赘述，以免造成误导。

推荐文章，1、[《阮一峰：学习Javascript闭包（Closure）》][Javascript_Closure]2、[详解js闭包][js]

## 1.4\*、特殊变量类型：数组、对象 ##

主要是对象或者数组的读取、声明、赋值，操作JSON，单独列出。

## 1.5\*、操作DOM ##

原生js操作DOM比较复杂，在JQuery操作DOM处详解。

## 1.6、BOM及js操作页面大小 ##

BOM，Browser Object Model，浏览器对象模型。由名可知，主要是js用来操作browser的利器，包含各种对浏览器或者浏览器页面的操作。比较零碎，了解性，用时可知。

1.  使用window能够获知、改变浏览器尺寸，操作浏览器完成打开新窗口、关闭当前窗口、调整当前窗口尺寸、移动当前窗口的动作。[《a:w3c中对window的阐述》][a_w3c_window]
2.  使用Screen操作当前屏幕有关的动作，包括下拉和滚动条等，尤其在wap端。
3.  使用Location操作有关当前地址的信息，或者重定向当前页面到另一个地址，更为重要的是当页面发生变化时拼装url中的get参数。类似于滚动监听的效果。当然还有刷新效果。
4.  使用History操作浏览器历史，主要是实现前进、后退效果。
5.  使用Navigator来判断用户浏览器信息。
6.  使用Timeng来实现事件的延迟或者等待、循环事件等。setTimeOut还可以用来解决js异步IO的坑。

## 1.7、Date、String、Array、Math ##

使用Date()来获取系统时间有关的信息。年月日时分秒毫秒，时间戳等。
    使用String()来完成对字符串的操作。拼接、截取、是否包含某个子串等。
    使用Math()来完成一些常用的数学计算，取绝对值，平方，四舍五入，生成随机数等。
    使用Array()来完成数组的一些常用操作，合并数组，数组简单排序等。

## 1.8\#、property ##

又一个关键的概念，不再赘述。

## 2、JQuery初步 ##

### 2.0、Hello world ~ ###

需要先引入Jquery的Jquery.js或者

$(document).ready(function(){ 
        $("body").append("Hello world ~");
    });

或者

$(function(){ 
        $("body").append("Hello world ~");
    });

### 2.1、语法、方法链接、$ ###

通过 jQuery，可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。

`$(selector).action()`

*  美元符号定义 jQuery
 *  选择符（selector）“查询”和“查找” HTML 元素
 *  jQuery 的 action() 执行对元素的操作
    
        特别说明的，方法链接。

### 2.2、选择器、寻找元素、this的使用 ###

### 2.3. 事件：绑定、触发、冒泡、监听 ###

### 2.4. 操作DOM，与原生js对象的转换 ###

### 2.5. CSS、尺寸 ###

### 2.6. AJAX ###

## 代码整洁的几点建议 ##

### js代码风格 ###

[阮一峰的《Javascript编程风格》](http://javascript.ruanyifeng.com/grammar/style.html)

### 单一权责原则 ###

一个函数只做一件事

### js与css位置 ###

因js加载的特性，可能会导致dom在加载时中断，还有可能js在对应的dom未生成之前进行的加载并运行。导致dom未按照理想的情况进行重构或者填充。
    与此相反，如果css放在后边加载，用户在加载dom时看到的页面可能会很原始。一些隐藏的内容也可能暴露出来。
    因此约定加载/书写顺序如下：
    1、特殊的js，需要在dom加载前直接运行的。
    2、在html的head部分加载css，即在body/dom结构加载前预置css。
    2.1、通用样式表，bootstrap等。
    2.2、本页样式表。
    3、在html的body部分的尾部加载Javascript，即在dom结构加载后加载js。
    3.1、基础库，JQuery等。
    3.2、本页js文件。
    4、需要在整个dom生成后执行的事件使用onload或者setTimeOut()来调用。

#### 【参考文献】： ####

1、[阿里大神-玉伯的《JS 和 CSS 的位置对其他资源加载顺序的影响》，需要翻墙][-_JS _ CSS]  
2、[js和css的顺序关系][js_css]  
3、[知乎问答《网页 head 标签中的 JS 和 CSS，哪种文件放在前面，哪种放在后面比较好？》][head _ JS _ CSS]

### js和css压缩 ###

JQuery.min.js与JQuery.js的区别

## JSON ##

## DataTables ##

[a_javascript]: http://blog.csdn.net/chen_zw/article/details/18502937#comments
[a_JavaScript]: http://javascript.ruanyifeng.com/bom/engine.html#
[a_js]: http://runjs.cn/code/2qtdfjak
[a_Javascript]: http://www.360doc.com/content/14/1011/13/15077656_416048738.shtml
[a_JavaScript _Event Loop]: http://www.ruanyifeng.com/blog/2014/10/event-loop.html
[20150529150730784]: /images/20220805/2acc71e302a749fbb201664d0927e5e6.png
[20150529152821719]: /images/20220805/b9e5780d62b84d5d9e2ee25315b26c60.png
[a_js_Boolean_Number_String]: http://log-cd.iteye.com/blog/314231
[Javascript_-]: http://blog.csdn.net/peterpeng881003/article/details/7014923
[a_js 1]: http://blog.csdn.net/huli870715/article/details/6531664
[Javascript_Closure]: http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
[js]: http://segmentfault.com/a/1190000000652891
[a_w3c_window]: http://www.w3school.com.cn/js/js_window.asp
[-_JS _ CSS]: https://lifesinger.wordpress.com/2012/02/03/performance-impact-of-js-css-loading-order/
[js_css]: http://hikejun.com/blog/2012/02/02/js%E5%92%8Ccss%E7%9A%84%E9%A1%BA%E5%BA%8F%E5%85%B3%E7%B3%BB/
[head _ JS _ CSS]: http://www.zhihu.com/question/20357435/answer/14878013