【嘉兴东臣php】DOM、BOM、Ajax-CSDN博客

一周又过去了，这周主要学习了JS和Ajax等内容，中间老黄还带着我们做了贪吃蛇小游戏，虽然只是半成品，但主要是学里面的部分JS内容，教会我们该怎么看、怎么用，总体而言，相对于上周，这周不是特别难，主要是学知识。很期待下礼拜的HTML5，听说超级炫超级酷。

1、闭包：其实就是一个函数使用另一个函数的变量。
闭包特点：
  1、嵌套函数
  2、外部函数的变量可以被内部函数使用。
  3、垃圾回收机制

闭包优点和缺点：
  优点：模块化思想，不会造成全局污染(基本没有全局变量)。
  为什么全局变量会造成污染：
   1、如果变量名重复的话，很容易造成覆盖
   2、从内存的角度上看，全局变量不容易被释放。

  在JS中，变量什么时候被释放？
  1、在JS中，一旦某个函数调用完毕，那么这个函数内部的变量全部被释放。
  2、在JS中，就算某个函数调用完毕，这个全局变量也不见得会被释放，因为可能还有下一个函数。

闭包的缺点：
  1、最大的缺点就是变量不会被回收！

  因为这个变量，被函数一直使用着。


function abc(){
  var i = 1;
  function bc(){
   i++;
   alert( i );
  }

return bc;
}

abc()();

所谓的匿名函数，就是没有具体名称的函数，如：

(function(){

})(); 后面的()可以看做调用前面的表达式或函数，当然()中可以传入参数，给前面的表达式或函数进行运算。

(function(i){
alert( i );
})( 10 ); // 10

1、基本的写法
尽量包含全局变量，优点：快！代码量稍微少。
缺点：全局污染严重！

2、作用域的写法
尽量把变量放在局部。优点：代码污染小。
缺点：局部的变量无法再其他函数中使用。理解困难，代码量稍微大。

3、闭包的写法
尽量把变量放在局部且嵌套使用。优点：函数内部都可以使用。污染小。缺点：内存较大！

JQuery : JS 中伟大的框架。使用简单。
如：<script type="text/javascript" scr="jquery文件"></script>

注意：使用jquery必须在引用jquery文件后面。

jquery，使用$()来表示对象，有三大选择器
1、$("#xxx") ID选择器
2、$(".xxx") Class选择器
3、$("input") 标签选择器
4、$("[href='xxxx']") 属性选择器

几个常用的jquery案例：
//input 标签点击事件
$("input").click( function(){
});

动画函数:
1、show 显示
2、hidden 隐藏
3、toggle 显示和隐藏
4、fadeIn 淡入
5、fadeOut 淡出
6、fadeToggle 淡入和淡出
7、slideUp 向上滑动
8、slideDown 向下滑动

注意：函数里面都可以加入时间参数，单位为毫秒，函数里面都可以加入回调callback参数。
如：
show( 1000, function(){
//回调所执行的函数
});

9、animate("执行的动画操作"，时间，可选(回调函数))
如：
$("").animate（{"height":"300px;"}, 1500）;

注意：加入position属性！

10、stop 停止动画
参数一：clearQueue:如果设置成true，则清空队列。可以立即结束动画。

参数二：jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。

如：stop(true, true);

JS Dom：节点、表单、定时器、事件

Jquery Dom:

节点：
1、parent() 找到父节点
2、children() find() 找到子节点

   注意：children 默认不加参数的时候为找到所有的节点，加了找参数里的节点。如children("div.select")就是找div里的select的class类   find，一般用于找子节点的某个元素标签，如：find("div");

  3、next() 找到下一个节点
                   prev()找到上一个节点
   4、siblings 找到并获取所有的兄弟节点

  5、eq(索引)找到元素中的某个索引，注意是从0开始的。
  6、get(索引)匹配元素中的某个索引，注意不返回元素。
  7、first() 通过自定义的找到，找到第一个元素。如：$(".a").first();就是找到class为a的第一个元素。

8、last() 同上，不过找到的是最后一个元素。

9、append() 追加HTML内容

10、appendTo() 把所有匹配的元素追加到另一个指定的元素集合中。

11、remove() 移除，不会删除，不会占用位置

12、empty() 清空

13、attr() 设置属性、返回属性

  扩展：.css("属性","属性值")
  .html(设置一个节点的HTML代码)
  .text(设置一个节点的文本)

同步：就是在发出一个功能调用时，在没有得到结果之前，该调用就不返回。也就是必须一件一件事做,等前一件做完了才能做下一件事.

异步：和同步相对。发出一个异步指令以后，可以不用去管它的执行情况，完成后服务端会自动告诉你结果。

XML为一种数据传输格式：
<rows>
<abc>1</abc>
<bd>2</bd>
</rows>

JSON也为一种数据传输格式:
{"row":["abc":1 , "bc":2]}

提供了主要四种的解决方法：

.load()
通过载入一个远程页面，用来放入到某个Dom中。
load 默认会返回2个参数，第一个是load页面的内容，第二个参数是返回状态 success为成功

.get()
通过Get请求方式，请求数据。

.getJson()
通过Get请求方式，请求数据并返回的是json数据文件，注意请求json文件！

.post()
通过Post请求方式，请求数据。
.ajax()
通过自定义请求方式，请求数据。
$.ajax({
url: “地址”
   dataType: "json", //数据格式
   async: true, //是否为异步
   data: { "name": "ajax","age":"20" },    //参数值
   type: "GET",   //请求方式
   success: function(req) {//请求成功时处理
      console.log( req );
   $("#message").text( req.name + "-" + req.age );
},
error: function(req){ //请求错误的时候的处理

}
});