• 1. jQuery技术简介2012-1-9
  • 2. 目录jQuery简介与优势jQuery选择器12jQuery的DOM操作3jQuery事件与动画4jQuery的Ajax操作5jQuery插件实例6
  • 3. jQuery简介与优势 jQuery是一个轻量级的JavaScript库,拥有强大的选择器,出色的DOM操作,可靠的事件处理、完善的兼容性和链式操作等功能。 强大的选择器 出色的DOM操作的封装 可靠的事件处理机制 完善的Ajax 出色的浏览器兼容性 链式操作方式 丰富的插件支持
  • 4. jQuery选择器 基本选择器 ID选择器、类选择器、标记选择器 层次选择器 通过DOM元素之间的层次关系来获取特定的元素,如后代元 素、子元素、相邻元素、兄弟元素等。 过滤选择器 基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性 过滤选择器、表单对象属性过滤选择器 表单选择器 文本框、单选框、多选框、按钮、图像等
  • 5. jQuery的DOM操作 创建节点 $(html)创建新元素;将元素插入到文档中 插入节点 append()、prepend()、after()、before() 删除节点 remove() 、empty() 属性操作 attr()、removeAttr() 样式操作 attr()、addClass()、removeClass() 设置和获取HTML、文本和值 html()、text()、val() 遍历节点 children()、next()、prev()、siblings()、closest() CSS-DOM操作 css()、height()、width()
  • 6. jQuery的事件与动画 加载DOM $(document).ready(function(){ }); window.onload=function(){}; 事件绑定 $(“#id”).bind(“type”, function(){ }); $(“#id”).click(function(){ }); 合成事件 hover(function(){ },function(){ }); toggle(function(){ },function(){ }); 模拟操作 trigger(“myClick”); //可用于触发常用或者自定义事件 jQuery动画 show(); //显示元素 hide(); //隐藏元素
  • 7. jQuery的Ajax操作 $.get(url,data,function(data,textStatus){},type); //使用GET方式异步请求 url:请求的URL地址 data:传递的参数,以key:value的对象形式 可选 function:回调函数 可选 type:服务器端返回内容的格式。html、json、text等 可选 $.post(url,data,function(data,textStatus){},type); //使用POST方式异步请求 $.ajax(options); url:请求的地址 type:请求的类型 data:传递的参数 dataType:返回的数据类型 success:请求成功后调用的回调函数 error:请求失败后被调用的函数 jQuery对Ajax操作进行了封装,提供了开发中常用的方法,get、post、ajax等,直接进行业务和用户体验的开发,不需要理会XMLHttpRequest对象。
  • 8. jQuery插件实例 validation表单验证插件 livequery动态绑定事件插件 实时的将整个DOM范围内的元素持久化 jstree树形结构插件 jqGrid分页插件 ajaxUpload异步上传插件 jQuery的易扩展性,开发者可以共同编写jQuery插件便于使用。
  • 9. 感谢您的关注!刘洋洋