【嘉兴东臣php】JS，Jquery,Ajax学习周总结

一. 第一天JS

   1.闭包： 

        特性：

    1、嵌套函数
    2、外部函数变量可以在内部使用。
    3、垃圾回收机制

   闭包其实就是在一个函数可以使用另一个函数的变量。 比如：
    function abc(){
        var i = 10;
        function bc(){
            ++i;
            alert( i );
        }
        return bc;
    }
    var bc = abc();
    bc();
 

  2.垃圾回收机制：
    JS的垃圾回收机制：所有的内存分配以及回收都会由垃圾回收器自动完成，执行环境会对执行过程中占有的内存负责。其原理就是找出那些不在被使用的变量，然后释放其所占有的内存
function a(){
var i = 1（1就是*对象*）;
function ac(){
//var i = 1;
i++;
return i;
}
return ac;
}
var c = a();
alert( c() );
alert(a()())
这么理解：函数a赋值给C因此用C代替a（）的时候相当于c仍然持续着对对象的链接关系，因此内存未被释放。【注意】看等号（如同链接关系的线）

function test1(){
var i ={name:’nyf’};
}
function test2(){
var i ={name:’nyf’};
return i;
}
var m1 = test1();
var m2 = test2();
test1调用时，进入 test1 的环境，那么内存中会开辟存放 {name:’nyf’} 对象的内存，当调用结束后，出了 test1 的环境，那么该内存会被JS引擎中的垃圾回收器自动释放其内存。
第一个函数没有返回值，所以m1不存在和test1对象的链接关系（三者的链接关系，还有函数有无返回值很关键）

3.匿名函数：
    写法：（function(){

            }）()       【可以传入参数】

4.函数三种写法：
    //基本的全局写法
var abc = 10;
function a(){
    alert( abc );
}
function b(){
    alert( abc );
}
//作用域写法
var abc;
function c(){
    var abc = 200;
    alert(abc);
}
function a(){
    alert( abc );
}

//闭包的写法
function abc(){
    var score = 0;
    function play(){
        score = 10;    
    }
    function hit(){
        score = 20;
    }

}

二. 第二天Jquery

Jquery是JS的一个简单好用的框架
jquery，使用$()来表示对象，有三大选择器

    1、$("#xxx") ID选择器
    2、$(".xxx") Class选择器
    3、$("input") 标签选择器
    4、$("[href='xxxx']") 属性选择器

动画函数:
    1、show 显示
    2、hide 隐藏
    3、toggle 显示和隐藏
    4、fadeIn 淡入
    5、fadeOut 淡出
    6、fadeToggle 淡入和淡出
    7、slideUp 向上滑动
    8、slideDown 向下滑动
          函数里面可加入时间参数还有回调函数，
    9.animate("执行的动画操作"，时间，可选(回调函数))
    如： $("").animate（{"height":"300px;"}, 1500）;
    注意：需要定位，可以加入position属性！
    10.stop() 停止动画 【一个true时，直接停止当前的动画，清空后续动画。两个true时，情况后续所有动画，直接完成当前动画】

        stop()函数用于停止当前匹配元素上正在运行的动画。默认情况下，stop()函数只会停止当前正在运行的动画。如果你使用animate()函数为当前元素设置了A、B、C这3段动画，如果当前正在执行的动画是A，则只会停止动画A的执行，不会阻止动画B和C的执行。当然，你也可以通过指定可选的选项参数来停止所有的动画。

停 止动画并不是恢复到该动画执行前的状况，而是直接停止，当前动画执行到什么状态，就停留在什么状态。例如：执行一个元素高度从100px到200px的过 渡动画，当高度为150px时停止了该动画，则当前高度仍然保持150px的现状。如果该动画设置了执行完毕后的回调函数，则不会执行该回调函数。

三.  第三天JS DOM

      1.节点：
         1.parent(), parents()找到父节点。【parents找到所有的祖先元素  】
         2.children(),find()找到子节点。【children 默认不加参数的时候为找所有节点，加了找参数里的节点。如children("div.select")就是找div里的select的class类，find()可以找所有子孙代，但是从上到下，先上取完再取下】
         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() 设置属性 、返回属性
   2.获取节点例子：
    console.log($("p"))
    console.log($("p").parent())//找单个父辈
    console.log($("p").parents())//可以一直找父辈直到找到整个HTML
    console.log($("#p2").parents())
    console.log($("#p2").parent())
    console.log($(".d1").children("p.p4"))//找class为p4的儿子p
    console.log($(".d1").children("p"))//所有的P子辈
    console.log($(".d1").find(".d2"))//找所有符合条件的儿子，孙子
    console.log($("div.d2").next("div"))//【下一个同辈元素,如果next()加上参数，即next("div")，如果下一个相邻元素不是div，则为空，即一定是相邻的】
    console.log($(".ddd").prev("div"))//上一个同辈元素，同next
    console.log($(".p1").siblings())//找所以的同辈
    console.log($(".d2").first())//找到class为d2的第一个元素，last为找最后一个
    console.log($("div").eq(1))//找到元素中的某个索引，注意是从0开始的
    console.log($("div").get())//【不是Jquery对象，是DOM对象,什么对象就用什么方法获取】
    console.log($(".d1").children("div").eq(0));
    console.log($(".d1").children("div").eq(0));
    console.log($(".d1").children("div:eq(0)"));


四.  第四.五天 Ajax

is() 判断标签 或者 选中的效果
hasClass()//判断是否有该类

$(".abc").unbind();//如果unbind内部没有加入参数的话，移除所有的事件。
$(".abc").unbind("click")//如果unbind内部加了参数的话，移除就是当前参数的事件

1.Json:

简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构
    JSON 语法是 JavaScript 对象表示语法的子集。
    数据在键值对中
    数据由逗号分隔
    花括号保存对象
    方括号保存数组
  

2.Ajax:

        注意：get,post请求返回的是Json字符串，不是Json格式的对象【如果post最后参数设置为“json”那么返回的就是json格式的对象】

  ajax,getJson请求返回的都是json格式的对象【有指定类型】

       1.load()函数:
函数介绍：load(url, [data], [callback]) 返回值:jQuery
参数说明：
url:待装入 HTML 网页网址。
data:（可选参数）发送至服务器的 key/value 数据。
callback:（可选参数）载入成功时回调函数。
        2..get()
        3..post()【get()函数和post函数区别：get用字典或直接写网址里都是明文，post只在网址里才是明文】
        4.getJSON:通过Get请求方式，请求数据并返回的是json数据文件，注意请求json文件！  
        5.ajax()函数：
  $(".btn_4").click(function(){
          $.ajax({
               type:"post",
               url:"http://120.26.196.152/come.php",
               data:{"name":"lin","age":"21"},
               anysc:true
               dataType:"json",
               success:function(data){
                  console.log(data)   
               },
               error:function(req){//请求错误的时候的处理 
               }            
               })
      })

      Jquery的each()方法详细解释

【网址：http://www.cnblogs.com/xiaojinhe2/archive/2011/10/12/2208740.html】

     

记忆：

HTTP STATUS CODE  HTTP协议里的返回状态码。
200 ：请求成功
302 ：请求被跳转
404 ：页面找不到，请求错误
403 ：该访问请求没有权限
500 ：服务器程序错误

attr() 方法设置或返回被选元素的属性值

appendTo如果选取已有的元素，等于剪切效果，否则和append差不多
empty:会删除文本，不会删除匹配到的元素
remove:会删除所有匹配到的元素和文本
first:一组对象的第一个
获取表格行数：var rows = document.getElementById("example_table").rows.length;
return阻止onsubmit提交
return在函数里优先执行该函数的意思
return false 阻止
JS找不到id等属性时:null

Math.random()    Math对象的方法--取0-1随机数

Math.floor()         Math对象的方法--取比当前数值小的最大整数（下取整）。

Math.ceil()           Math对象的方法--取比当前数值大的最小整数（上取整）。

Math.round()       Math对象的方法--四舍五入

border-collapse： 用于表格属性, 表示表格的两边框合并为一条
如果unbind内部没有加入参数的话，移除所有的事件。

总结

       又是一周过去了。自从来到这边学习，发现时间被偷了一样，不知不觉就三个星期过去了。这周学习了JS中Jquery的很多知识点。给我一种在上政治课的感觉，到处是记的，背的。这周的模拟音乐均衡器的玩意让我觉得很有趣。之后的贪吃蛇让我明白了什么叫做精简的，规范的代码。Ajax的学习更是让我体会到信息的重要性，体会到Ajax的重大作用。最后一天的游戏才是大家最开心的时刻。教室充满了欢笑声，这样的氛围挺好的。唯一遗憾的就是飞机没打成，毕竟能力有限，只能接受能力范围里的知识。我相信持之以恒才是success的催化剂。

转载于:https://my.oschina.net/u/2545470/blog/551290