Jquery 的一些林林总总

最近看了一本《精妙绝伦JQuery》，里面讲的比较细致，自己都快没耐心啃完了，记下来了一些自己能用到的东西，希望以后可以有所帮助

首先 - - 最近面试的时候问到的：

1
2
3
4
$(document).ready 与JavaScript里onload方法的区别：
$(document).ready(function(){}) 代表的是在DOM加载之前完成代码内加载
onload 事件会在页面或图像加载完成后立即发生。

这是jQuery的一些常用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1.			.load()	预加载图片
2.			.ready()	事件监测DOM是否完全加载
3.			.unload()	在离开页面时或用户单机一个新连接是触发
4.			.resize()	改变浏览器大小时触发
5.			.scroll()	用户滚动窗口时触发
6.			.error()	当http请求遇到错误是触发	可以用来显示备用图片，也就是
      网页上的图挂了之后，可以用别的图替代图挂了- - 表达不能2333


7.		.bind()	绑定事件函数

8.		.live()	提供一个灵活的捕获事件的方式
    	.live(event type,event handler);

9.		.delegate()	三个参数：1.选择器		2.事件类型		3.响应函数

捕获鼠标事件

1
2
3
4
5
6
7
8
9
click	单击鼠标并释放
dbclick	双击触发
mousedown	鼠标被按下触发
mouseup		鼠标松开后触发
mouseenter	鼠标进入某易元素区域时触发
mouseleave	..离开时触发
mousemove	鼠标在区域内移动时触发
mouseout	离开该区域及父元素时触发
mouseover	鼠标进入某一元素及父元素时触发

捕获表单事件

1
2
3
4
5
6
7
8
9
10
11

change()	表单值改变时触发
focus()		敲TAB键触发
focusin()	元素或子元素得到焦点时触发
focusout()	元素或子元素失去焦点时触发
blur()		文本域/文本框失去焦点时触发
select()	元素内文本被选中时触发
submit()	表单提交时触发
reset()		重置


关于网站特效

1
2
3
4
5
6
7
8
9
show()
hide()
toggle()	根据当前状态显示/隐藏 切换状态
slideDown()	以向下滑动展开的方式显示元素
fadeIn()	元素以淡入的方式显示
fadeout()	元素以淡入淡出的方式消失
fadeTo()	淡入淡出至某个透明度


关于cookie（这可是他娘的重点）

1
2
3
4
5
6
7
8
9
1.如何种cookie
		function  startCookie(){
		var expirDate = new Date();
		expirDate.setDate(expirDate.getDate+30);	cookie过期时间
		document.cookie = "name=hideCookie;expires="+expirDate.toUTCString
		}


	(可以使用jQuery的cookie插件拿到具体cookie)

注：当没有指明 cookie有效时间时，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为
“会话cookie（session cookie）”。

1
2
3
4
5
6
7

$.cookie('cookName')
$.cookie('key','value')
$.cookie('key','value',{ expires: 7 });//意思是创建一个7天有效期的cookie

$.cookie('key','value',{ expires: 7,path:'/'});
//意思是创建一个7天有效期的cookie,且存储路径为/

读取cookie：

1
2
3
4
5
6
7
8
$.cookie('the_cookie'); // cookie存在 => 'the_value'

$.cookie('not_existing'); // cookie不存在 => null

5.删除cookie，通过传递null作为cookie的值即可：

$.cookie('the_cookie', null);

Ajax

传说中的，标志着人类互联网历史的一大步，就连名字也很后现代化的Ajax

** Ajax指在不需要刷新页面的情况下，允许客户端应用程序传递数据给服务器并获取数据的一组模式和技术 **

1
2
3
4
5
6
7
8
9
10
11

1.$(selector).load(URL,回调函数{  })
   $('#content').load('Class5.html',function(responseText,textStatus,XMLHttpRequest){

           //检查不同的响应码

           if(XMLHttpRequest.status == 404||XMLHttpRequest.status == 500){
               $('#content').html('There has been an error,please try angin later');
           }
       });

关于响应码

响应码 对应解释
200 成功
301 永久跳转
302 临时跳转
400 错误请求
401 未授权
403 禁止访问
404 未找到
500 服务器错误 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

  2.载入过程的动画

  在.load() 之前 $('#content').html('<img...>');


  3.载入部分内容
  $('#content').load(URL class or id or tag name )
  如：	$('#content').load('class1.html.specal')------意味着该html里只有class="specal" 的标签才可以被加载


  4.get/post 提交表单

  Get:服务器在URL中拾取键值对

  Post:
    $.ajax({
    type:'post',
    url:url,
    data:data,
    success:success,
    dataType:dataType
    });


  post 请求提交数据：
      两种方式：标准\快捷

        标准：$.post(url,[data],[success],dataType);

        快捷：$.ajax({
        url:url,
        data:data,
        success:success,
        dataType:dataType
        });


  5.操作XML数据

  a.XML是跨平台的标准
    如何得到xml并解读，展示在html上
      $.ajax({
    type:'GET',
    url:"xx.xml",
    dataType:"XML",
    success:parseXML ---回调函数
    });

生成html
  function parseXML(xml){
    $(xml).find("Book").each(function(){
    var author = $(this).attr('author');
    $('<li></li>').html('<b>Author</b>:'+author).appendTo('#books');;
    };
  }


6.操作JSon数据

  json是JavaScript的表示法，它允许以键值对的形式创建自己的数据结构

  a.获取json并生成html

    $.getJSON();或$.ajax


    function processJson(data){
    $.each(data.books,function(i,item));
    }
    接下来要做的跟xml类似，你只需要获取item中的键值来生成html

本文采用CC-BY-SA-3.0协议，转载请注明出处
Author: dadonggua