jQuery复习

1、闭包

在JS中，有三种作用范围：

1、全局的

全局变量。所有函数都可以使用。

var x = 0 ;
  function a(){
   x = 2;
  }
  a();
  a();
  console.log(x)//2

好处：一处定义，全局使用。不需要重复定义。

坏处：很容易造成变量污染。

2、作用域的

在作用域定义。比如函数。注意：如果没有定义var

那么这个变量就是全局的。

var x = 0 ;
  function a(){
   var x = 2;
   console.log(x);//2
  }
  a();
  console.log(x);//0

好处：代码不易被污染。

坏处：代码量增大。

3、闭包

其实就是一个函数使用另一个函数的变量。

特点：

1、嵌套函数

2、内部函数可以使用外部函数的变量。但是反之则不行。

3、垃圾回收机制 不能被立即回收。

//从这个例子可以看出 变量a一直都在。

function echo( dom ){
var a = 10;
function echoA(){ a++; alert( a ); }
return echoA; //重点
}
var tmp = echo(); //重点
tmp(); // 11
tmp(); //12

好处：变量不容易污染。

坏处：常驻内存。

垃圾回收：所谓垃圾回收，就是GC机制。就是当一个变量

或者函数，调用完毕的时候，会被系统回收。在全局或者作用

于局部也不例外。但是闭包例外，闭包一旦定义，就不会被释放。

匿名函数：所谓匿名就是没有名字。匿名有几种表现形式。

第一种表现形式：

function success(){

return function(){

alert( 1 );

}

}

success()();

第二种表现形式：

(function( i ){

alert( i );

var a = 100;

})( 100 );

2、jQuery

所谓框架：就是化繁为简的一种的象征，可以简化很多的操作，并且

提供框架的特性，如果动画，插件等。

jQuery引用：一般在文件的头部。

<script type="text/javascript" src="jquery.min.js"></script>

注意：也许你会有很多的自定义的js文件，但是必须放到jquery文件后面

jQuery工厂函数：$(); 利用该语法可以引用一切对象。

jQuery三大选择器：

1、$("#abc") ID选择器

2、$(".abc") 类选择器 如果多个控件取值，那么取出来的是第一个。

3、$("input") 标签选择器

4、$("input[name=abc]") 标签衍化形式

.val() 取出/设置第一个具有value属性的值。

获取文本框中的值：$("input").val();

设定文本框的值：$("input").val("hello world!");

设定一个select和一个多选的select的值

<select id="single">
<option>Single</option>
<option>Single2</option>
</select>

$("select").change(function(){
console.log($("#single").val()) //Single/Single2
});

.text() 取出/设置所有匹配元素的文字信息。

返回p元素的文本内容。

<p>1</p>
  <p>2</p>
  <p>3</p>
console.log($("p").text())//123

设置所有 p 元素的文本内容 $("p").text("Hello world!");

获取div的显示文本

<div>dfadads</div>
console.log($("div").text())// dfadads

a标签

.html() 取出/设置相关元素的html信息。

html()取得第一个匹配元素的html内容

html(val)设置每一个匹配元素的html内容

.attr()取出/设置第一个相关元素的属性信息。

jQuery点击事件：

$( "input" ).click( function(){

});

定时器：不要频繁写定时器，这会造成页面负担

1、setTimeout( "函数名()" ，毫秒 );//多少秒后执行一次，一次

2、setInterval( "函数名()" , 毫秒 );//每多少秒执行一次，多次

3、clearInterval( 计时器名 ) 清除，停止计时器。

jQuery动画

1、hide() show() toggle()显示/隐藏。 函数可以设置时间参数，用来执行动画，毫秒单位。（位置不存在了）

$( "div" ).hide( 10000 );

$( "div" ).show( 10000 );

$( "div" ).toggle();

2、fadeIn() fadeOut() fadeToggle()淡入/淡出。（位置不变）

3、slideUp() slideDown() slideToggle() 伸出/收起。

4、animate( "执行动画效果", 时间 ，回调的函数 );

5、stop( true, true) 停止动画。

第一个立刻停止。第二个立即完成。

注意： 第二个优先考虑。

注意：所有动画的位置，top,left，bottom，right。如果position设置了relative，就是相对的定位。

$( "div" ).animate({

"height":"300px",

"width": "200",

"left" : "500px"

}, 2000, function(){

alert( "完成了" );

});

jQuery max 3.1

jQuery是js一种框架。jQuery具有跨浏览器的特性。

jQuery比较大的特点，也就是它的链式结构。

jQuery 任何选择器，都是的基于工厂函数。$()

jQuery Bom ： Bom是基于浏览器操作的对象

window是Bom的操作核心。

1、document 对象。

2、frames 对象

3、location 对象。

4、history 对象。

5、screen 对象。

6、navigator 对象。 浏览器本身

1、window.open( URL ) 新窗口打开

2、window.close( URL ) 当前窗口关闭

3、window.location.href = "URL" 跳转

4、window.history.go( -1 ); 返回上一页

5、window.history.go( 1 ); 进入下一页 前提是下一页。

6、window.location.reload(); 刷新页面。

7、window.screen.height; 获取屏幕高度。

8、window.screen.width: 获取屏幕宽度。

9、window.scrollX 横轴位移坐标。

10、window.scrollY 纵轴位移坐标。

11、window.navigator.appVersion 浏览器版本

12、window.navigator.appCodeName 浏览器名称

13、window.frames.moveTo();　移动浏览器

14、window.frames.resizeTo(); 重定义浏览器尺寸

15、window.scrollTo(); 自动让浏览器滚动

16、鼠标事件 pageX/pageY 通常是获取鼠标在页面上位置。

17、鼠标事件 clientX/ClientY 通常是获取鼠标在页面上可视化范围内的位置。

18、鼠标事件 screenX/screenY 通过时获取鼠标在屏幕上位置。

总结：

在BOM对象中，需要经常用到的：

1、window.location.href = "http://www.baidu.com"

2、window.history.go(-1);

3、window.screen.width;

4、window.screen.height;

5、window.scrollX;

6、window.scrollY;

7、window.navigator.appCodeName;

8、鼠标事件 clientX / clientY;

window.onload和document.ready的区别：

两者都是页面加载后响应的处理的动作。

但是：

1、document.ready 控件加载完成之后就会调用。

2、window.onload 一般的是页面所有包括图片完毕以后才会调用。

Dom树：所谓的Dom树，也就是HTML树，也就是遵守XHTML的情况下。

所有的HTML生成出来的树结构。

<div class="A">

<img class="B"></img>

<img class="C"></img>

<img class="D"></img>

</div>

以上HTML代码，如果B需要找到D，要么先找到C再找到D。

要么找父节点A再找到D。

$(this) 可以获取当前触发事件的控件对象。

父节点：该节点父节点。

find( "p" ) 由父节点找子节点。

eq( 0 ) 找到第几个节点，从0开始。

子节点：该节点子节点。

.parent() 找到父亲节点

兄弟节点：同等级的节点。

next()下一个兄弟节点。

prev() 上一个兄弟节点。

jQuery Dom 叫做文档操作结构对象。

1、append() 往相关元素最后位置追加HTML

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

3、remove(); 移除HTML元素

.prop()
获取在匹配的元素集中的第一个元素的属性值。


1、第一种写法
$("input[type='checkbox']").prop("checked");


2、第二种写法
$("input[type='checkbox']").prop({
  disabled: true
});


.each(); 循环遍历控制，可以快捷的获取
当前遍历的控件， $(this)
1、.each( function(){ });


1、live  1.9中已被删除
2、on 号称会动态解决响应事件。
    1、String 事件名称
    2、selector 匹配到元素 可选
    3、参数数据  可选
    4、回调的函数
    $(document).on( "click", ".new", function(){ 
 alert( 1 );
});


3、bind() 事件绑定 、unbind 事件解绑  较老的写法。


$(".new").unbind("click");
$(".new").bind( "click", function(){
alert("1");
});


4、delegate 代理。指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。


$("div").delegate("button","click",function(){
  $("p").slideToggle();
});




$("#zone").click(function(){
alert( 1 );
});


=============== jQuery Ajax ============


1、Get：一般是前端提交给后台的一种提交形式。
      特点：
       1、get的URL是“明文”。
       2、get的URL长度是有限制的。
       3、get相对来说是不安全的。
2、Post
      特点：
       1、post的URL参数没有显示的。
       2、post的URL长度没有限制的。
       3、post的相对来说是安全的。
3、同步
      在同一时间只在做同一个事情。简单的识别方式：判断页面是否刷新，如果刷新，证明在这个时间，正在做页面刷新或者跳转。


4、异步
      在同一个时间可以同时做不同的事情。简单的识别方式。页面上的数据在变化，但是页面并没有刷新或者跳转。可以在firebug下查看(网络)，典型的异步就是ajax。


5、Json 
     一种数据格式。形式为：  {"userName":"jack","userLove":["西瓜","苹果"]}  
优点：体积小，很多语言都内置解析json的形式。同样传输快。
缺点：可读性差。   


6、XML
     一种数据格式。形式为：
<?xml version="1.0" encoding="utf-8" ?>
<root>
    <resultcode>
        200
    </resultcode>
</root> 
优点：可读性强，很多公司在使用。
缺点：体积大，传输速度较慢。


7、关于跨域
 在前端中，跨域是很频繁，但是又基本不被组织所允许。
在json中，如果需要跨域，需要使用jsonp格式返回。
callback({"userName":"jack","userLove":["西瓜","苹果"]});


8、ajax


$("需要装载的控件").load("页面地址"，function(text,status){
   //text 文本
}); 获取页面的文本信息


.getJson("json地址",function(){
});


.get("URL?userName=jabez&userPwd=123456",function(){
});


.post("URL",{参数对象}，function(){


});


.ajax({
   "async" : true, //true：同步 false  异步
   "url": "",   请求链接
   "dataType" : "json",  //返回数据格式
   "type": "get",  //参数数据方式
   "data": {},  //请求的参数
   "success" : function( data ){ //成功返回调用的函数
   },
   "error" : function( data ){ //请求错误调用的函数
   }
});






字符串替换：xx.replace("原字符串","新字符串");


eval函数： eval("JS字符串")
1、eval可以用来把字符串转换成json格式
var str = '{"userName":"jabez","userPwd": "123456" }';
console.log( str );
console.log( eval( "("+ str +")" ) );


2、eval内部执行js字符串操作，包括js操作。
var str = eval( 2+3 );


在Ajax中用来解析success返回后的data数据。
var str = '{"userName":"jabez","userPwd": "123456" }';
 var data = (new Function("", "return "+ str  ))();


Highcharts 目前版本是4.x ，是国内国外非常流行的一种jQuery图表形式。
广泛用于项目中。
Highcharts下载地址：http://www.hcharts.cn/download


Highcharts使用步骤
1、导入jquery.js
2、导入highcharts.js
3、导入额外的图表js，如exporting.js
4、开始在js内部写数据表示文件如：


   $(function () {
          $('#container').highcharts({
       title: {
           text: 'Monthly Average Temperature',
           x: -20 //center
       },
       subtitle: {
           text: 'Source: WorldClimate.com',
           x: -20
       },
       xAxis: {
           categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
               'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
       },
       yAxis: {
           title: {
               text: 'Temperature (°C)'
           },
           plotLines: [{
               value: 0,
               width: 1,
               color: '#808080'
           }]
       },
       tooltip: {
           valueSuffix: '°C'
       },
       legend: {
           layout: 'vertical',
           align: 'right',
           verticalAlign: 'middle',
           borderWidth: 0
       },
       series: [{
           name: 'Tokyo',
           data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
       }]
   });
});




注意：1、如果数据使用有问题，那么可能是X坐标数不等于单条数据个数。
     2、一般series: [{name: '百度',data: [ 200, 300 ]}]是用来表示需要装载显示的数据。
     3、注意series 内部data数据格式一般为 整型。
     4、tooltip 鼠标覆盖，弹出框的提示单位。
     5、yAxis 设置Y轴的显示名称。
     6、xAxis: { categories: ["1月","2月"]}一般对应X轴显示名称