• 1. jQuery是一套Javascript脚本库.使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮. 同类JS库:Dojo Extjs 什么是JQuery
  • 2. 提供了强大的功能函数 解决浏览器兼容问题 实现丰富的UI 丰富的插件 VS中智能感知JQuery的优势
  • 3. JQuery简介jQuery基本语法 jQuery(“选择器”)或者$(“选择器”) 其中: jQuery 是JQuery中的核心对象 $是jQuery的简写形式,二者是等价的 “选择器” 是我们本章讲解的重点
  • 4. JQuery简介页面加载事件 $(document).ready(function(){   // 在这里写你的代码... }) $(function() {   //在这里写你的代码... });和onload的区别 window.onload 方法是在整个页面完全加载之后执行语句。及资源显示完毕之后调用、而jQuery的ready方式仅仅是在DOM对象加载完成后就调用。并且jQuery的ready方法可以指定多次
  • 5. 传统的javascript var div = document.getElementById("testDiv"); var divs = document.getElementsByTagName("div"); 获取的Dom对象 JQuery包装集 Dom对象和JQuery包装集jQuery包装集var jQueryObject = $("#testDiv");
  • 6. JQuery概念 jQuery包装集可以说是Dom对象的扩充. 所有的对象, 无论是一个还是一组, 都封装成一个jQuery包装集 ,并且具有丰富的属性和方法 Dom对象和JQuery包装集
  • 7. Dom转Jquery包装集 1.使用选择器直接构建jquery包装集$(“#testDiv”); //只含有一个id是testDiv的元素的包装集. Dom对象与JQuery对象的转换 2.转换var div = document.getElementById(“testDiv”); // DOM对象 var domToJQueryObject = $(div); // Jquery包装集对象如果要使用jQuery提供的函数,  就要首先构造jQuery包装集
  • 8. Jquery包装集转DOM对象 jQuery对象是一个数组对象,可以通过[index]的方法,来得到相应的DOM对象 2. jQuery本身提供,通过.get(index)方法,得到相应的DOM对象Dom对象与JQuery对象的转换
  • 9. 类似于CSS中的选择器,但比CSS选择器提供了更灵活的选择方式,但JQuery选择返回的结果为包装集 选择器分类 选择 从整个页面中选择 过滤 从前面匹配的内容中筛选,也可以单独使用,格式为 “ *:条件 ”什么是JQuery选择器
  • 10. JQuery选择器
  • 11. JQuery选择器
  • 12. JQuery选择器
  • 13. JQuery选择器
  • 14. JQuery选择器
  • 15. JQuery选择器
  • 16. JQuery选择器
  • 17. JQuery选择器
  • 18. JQuery选择器
  • 19. JQuery选择器
  • 20. JQuery选择器
  • 21. JQuery选择器
  • 22. 总结JQuery 的优势 Dom对象和JQuery包装集的区别 DOM对象和JQuery包装集的相互转换 常用的JQuery选择器
  • 23. $(html) @return jQuery包装集 动态创建有jQuery对象包装的元素、想当于DOM里的createElement(“div”)、用法是 $(“
    ”)或者$(“
    ”)、但不推荐$(“
    ”) $(elements) @return jQuery包装集 将一个或多个DOM元素转化为jQuery对象、例如: var div = document.getElementById(“div2”); var jqueryDiv = $(div); $(expression) @return jQuery包装集 这个函数接受一个选择器的字符串,得到jQuery包装集 $(fn) 参数是一个函数,如: $(function(){ alert(‘欢迎使用JQuery’);}); JQuery核心函数
  • 24. html() 取得第一个匹配元素的html内容 html(val) 设置每一个匹配元素的html内容 Html
  • 25. TextText 和html用法一样,但text()获取的是内容
  • 26. ValVal Val() 获得第一个匹配元素的当前值 Val(val) 设置每一个匹配元素的值 Val(array) check,select,radio等都能使用为之赋值
  • 27. 属性 attr(name) 取得第一个匹配元素的属性值 attr(properties) 将一个“名/值”形式的对象设置为所有匹配元素的属性 attr(key,value) 为所有匹配的元素设置一个属性值属性
  • 28. CSS css(properties) 把一个“名/值对”对象设置为所有匹配元素的样式属性 属性名包含 "-"的话,必须使用引号 css(name,value) 在所有匹配的元素中,设置一个样式属性的值 css(name) 访问第一个匹配元素的样式属性 CSS
  • 29. addClass(class) 为每个匹配的元素添加指定的类名 removeClass(class) 从所有匹配的元素中删除全部或者指定的类 toggleClass(class) 如果存在(不存在)就删除(添加)一个类 toggleClass(class,switch) 如果开关switch参数为true则加上对应的class,否则就删除动态操作样式
  • 30. 内部插入 append(content), appendTo(content), prepend(content), prependTo(content) 外部插入 after(content), before(content), insertAfter(content), insertBefore(content)文档处理
  • 31. 文档处理 包裹 Wrap(html|elem|fn)、unwrap()、 wrapAll(html|elem)、wrapInner(html|elem|fn) 替换 replaceWith(content)、replaceAll(selector) 删除 Empty()、remove([expr])、detach([expr]) 复制 Clone()、clone(true)
  • 32. 位置 Offset()、offset(coordinates)、position()、scrollTop()、scrollTop(val)、scrollLeft()、scrollLeft(val) 尺寸 Height()、height(val) 、width() 、width(val) 、innerHeight() 、innerWidth() 、outerHeight(options) 、outerWidth(options) 文档处理
  • 33. 文档处理
  • 34. 形式一: 形式二: DOM中的事件$(function () { $("#Button1")[0].onclick = a; }); function a() { alert(" Hello World "); } $(function () { $("#Button1")[0].onclick = function () { alert("Hello World"); } });Dom对象 匿名函数
  • 35. bind JQuery中的事件 $(function () { $("#Button1").bind("click", a); }); function a() { alert(" Hello World "); } $(function () { $("#Button1").bind("click", function () { alert("Hello World"); }); });
  • 36. Bind的优势添加的是多播事件委托.  也就是为click事件又添加了一个方法, 不会覆盖对象的click事件原有的事件处理函数. $("#Button1").bind("click", function(event) { alert("one"); }); $("# Button1 ").bind("click", function(event) { alert("two"); });
  • 37. ValVal Val() 获得第一个匹配元素的当前值 Val(val) 设置每一个匹配元素的值 Val(array) check,select,radio等都能使用为之赋值
  • 38. Bind的优势统一了事件名称.  ie中是事件名称前面有“on”. 但是使用bind()函数我们不用区分ie和dom。 可以将对象行为全部用脚本控制. 让HTML代码部分只注意"显示"逻辑. 现在的趋势是将HTML的行为, 内容与样式切分干净. 其中用脚本控制元素行为, 用HTML标签控制元素内容, 用CSS控制元素样式. 使用jQuery事件处理函数可以避免在HTML标签上直接添加事件.
  • 39. 事件 JQuery中的事件clickchangeblurdbclickfocuekeydownkeyupkeypressmousedownmouseovermouseoutmouseleavemouseentermouseupscrollselectsubmitunload
  • 40. One 用法和bind相同,只是该事件只执行一次,执行完之后处理程序就会自动删除 one
  • 41. trigger和triggerHandler 用来触发一个事件,不同之处在于trigger触发完之后再执行浏览器本身事件,triggerHandler不触发 trigger和triggerHandler
  • 42. Unbind 删除绑定事件unbind $(“#Button1”).unbind(); //取消所有事件 $(“# Button1 ”).unbind(“click”); //取消click事件
  • 43. toggle toggle 每次点击后依次调用函数 $("td").toggle(   function () {     $(this).addClass("selected");   },   function () {     $(this).removeClass("selected");   } );
  • 44. 基本动画 $(“div”).hide(); //隐藏 $(“div”). hide(1000); //隐藏,历时1秒 $(“div”).show(); //显示 $(“div”). show(1000); //显示,历时1秒 $(“div”). toggle(); //切换 $(“div”). toggle(1000);//切换动画
  • 45. 滑动动画 $("#divPop").slideDown(200); $("#divPop").slideUp("fast"); $("#divPop").slideToggle("slow"); 用法和基本动画相同 动画
  • 46. 淡入淡出动画 $(“#divPop”).fadein(200); $(“#divPop”).fadeout(1000); $(“#divPop”).fadeto(1000,0.7); //第二参数透明度 用法和基本动画相同 动画
  • 47. 自定义动画 animate $(“#divPop”).animate({width:”200px”},2000); Stop 停止动画 $(“#div”).stop(); jQuery.fx.off 禁止动画 动画
  • 48. XMLHttpRequest对象 Open方法 Send方法 onreadystatechange事件 readyState属性 Stautes属性 回顾原始AJAX
  • 49. 语法 其中: url :请求的地址 data:可选,发送的数据 callback: 可选 ,回调函数 JQuery中的load方法$(选择器).load(url,[data],[callback])
  • 50. load方法能够载入远程 HTML 文件代码并插入至 DOM 中。 默认使用 GET 方式, 如果传递了data参数则使用Post方式 它主要用于直接返回HTML的Ajax接口 load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中, 即使设置了回调函数也还是会加载 JQuery中的load方法
  • 51. 示例JQuery中的load方法$(function() { $("#btnAjax").click(function() { $("#divResult").load(“ajaxHandler.ashx? timestamp=" + (new Date()).getTime()); }); 时间戳,防止缓存
  • 52. JQuery中的get()方法语法 使用GET方式发送数据,其中: url :请求的地址 data:可选,发送的数据 callback: 可选 ,回调函数 type:可选,返回结果的类型(xml,html,json,script),默认为html $.get(url,[data],[callback],[type])
  • 53. Get()方法示例基本示例 --------简单类型不传送数据 $(function() { $("#btnAjax").click(function() { $.get(“ajaxHandler.ashx?Method=checkName”,null, funtion(data){ $("#divResult").html(data) ; }); }); 调用成功后返回的结果
  • 54. Get()方法示例基本示例 --------传送数据 $(function() { $("#btnAjax").click(function() { var username={“name”:$(“#txtName”).val()}; $.get(“ajaxHandler.ashx?Method=checkName”,username, funtion(data){ $("#divResult").html(data) ; }); }); Json格式
  • 55. 什么是json JavaScript Object Notation 轻量级javascript数据交换形式 Json对象是一个无序的“‘名称/值’对”集合,以“{”开始,以“}”结束 Json简介
  • 56. Json简介示例{ "firstName": "Brett" } { "firstName": "Brett", "lastName":"McLaughlin", “age": “18" } Var stu= { "firstName": "Brett", "lastName":"McLaughlin", “age": “18" } ; $(“#div”).append(“姓名:“+stu.firstName+stu.lastName); $(“#div”).append(“年龄:“+stu.age);
  • 57. Json的复杂形式 -----嵌套 Json简介Var stus={“t58 “:[ {“name”:”张三”,”age”:”29”}, {“name”:” 李四”,”age”:”20”}, ], “t59”:[ {“name”:”王五”,”age”:”19”}, {“name”:” 赵六”,”age”:”17”}, ]}; Var zs=stus.t58[0].name //访问T58班张三的姓名
  • 58. JavaScriptSerializer 命名空间: System.Web.Script.Serialization; 位于 System.Data.DataSetExtensions.dll中 ASP.NET对json的支持
  • 59. 示例 ASP.NET对json的支持 User user = new User() { ID=1, LoginName=“admin”, Name=“管理员" }; JavaScriptSerializer seri = new JavaScriptSerializer(); string json = seri.Serialize(user); //序列化 //反序列化 // User user1=(User)seri.Deserialize(json, typeof(User)); context.Response.Write(json);
  • 60. 完整示例javascript处理返回的json $(function () { $("#Button2").bind("click", function () { $.get("ajaxhandler.ashx?ajax=username&ab=" + Math.random(), name, function (data) { $.each(data, function (key, value) { $(“#div1”).append(value+"
    "); //$("#div1").append(data.name+"
    "); }) }, "json"); }) });Key:json的键,value:json的值 ”json“表示返回数据的类型为json,如何不加此参数,则需要做转换: var json=eval(data);
  • 61. getJSON() $.getJSON(“ajaxhandler”,null,function(){alert(“”);}); 等同于: $.get(“ajaxhandler”,null,function(){alert(“”);},”json”); getJSON方法
  • 62. Post() 使用方法同get()相同,区别在于post方法提交数据方式使用“POST”Post方法
  • 63. AJAX方法ajax() 可以精确控制ajax的调用,是get()和post()的底层形式。 $.ajax({ type: "GET", url: “ajax.axsh", dataType: “json“, success: function(html){ $("#results").append(html); });