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