• 1. 第一章jQuery入门
  • 2. 本章任务学习jQuery的基本使用,能够 学会jQuery中基本选择器的使用 使用jQuery发送XMLHttpRequest请求和接收响应
  • 3. 什么是jQueryjQuery是JavaScript语言的一个新的资源库(框架) jQuery的特点 jQuery能快速,简洁的使用HTML documents(文档对象) handle events(处理事件) perform animations(播放动画) 与Ajax交互应用到网页 jQuery能够改变你书写JavaScript的方式
  • 4. 示例1使用jQuery改写检查用户名是否存在 步骤: 1. 引入jQuery的js文件 2. 发送 Ajax请求和处理响应function checkUserExist(name) { $.get('userServlet', {'name':name}, function(data){ alert('_'+data+'_'); }); }服务器目标页面参数回调函数jQuery提供的方法
  • 5. 示例1上例中存在的问题 返回值是文本,难于处理。最好是一种标准的格式 两种常用的格式:XML 与 JSON 如何使用jQuery来处理XML,假设响应的格式为 truefunction checkUserExist(name) { $.get('userServlet', {'name':name}, function(data){ var s = $(data); alert(s.text()); }); }将返回的xml字符串转变为jquery对象现在的s对应着节点,text()方法则对应其中文本节点的值
  • 6. 使用jQuery处理XML参照bookstore2.xmlvar xmlObj = $(data); alert('查找所有的图书,显示它们的标题'); var bs = xmlObj.find('book'); bs.each(function(){ // alert(this.getElementsByTagName('title').item(0).firstChild.nodeValue); alert($(this).find('title').eq(0).text()); });使用标准DOM方法解析使用jQuery方法解析将返回的xml字符串转变为jQuery对象this代表DOM对象,$(this)代表jQuery对象(这里是book)
  • 7. 使用jQuery处理XML参照bookstore2.xmlvar xmlObj = $(data); alert('查找所有category为WEB的图书,并显示它们的作者'); var bs = xmlObj.find('book[@category="WEB"]'); bs.each(function(){ $(this).find('author').each(function(i){ alert('第'+i+'本书的作者:' + $(this).text()); }); });因为会有多个作者,用each方法遍历 根据属性值查询,这里的表达式实际是Xpath形式 $(this)代表是author$(this)代表是book
  • 8. 如何使用jQuery动态填充表格第一步,设计好表格
    标题 作者 出版年代 价格
    先写好一个空的tr便于复制,避免手动使用createElement和createTextNode
  • 9. 如何使用jQuery动态填充表格第二步,初始化$(document).ready(function(){ $('#tbody').children(':first').hide(); });将第一个tr隐藏起来,$(document).ready()用于在页面加载完之后执行初始化操作,类似于使用
  • 10. 如何使用jQuery动态填充表格第三步,从服务器取得XML数据$.ajax({ type:'get', url:'bookstore2.xml', dataType:'xml', success:function(data){ … } });这里没有用$.get()是因为它只能处理最基本——响应正确返回时的结果,如果需要更细致的控制,用$.ajax现在的data是xml数据的DOM表示,如果希望使用jQuery的一些便捷方法使用$(data)包装一下
  • 11. 如何使用jQuery动态填充表格第四步,添加新行var tbody = $('#tbody'); var firstRow = tbody.children(':first'); // 添加新tr $(data).find('book').each(function(i){ var book = $(this); var newRow = firstRow.clone(); $('td',newRow).eq(0).text(book.find('title').eq(0).text()); $('td',newRow).eq(1).text(book.find('author').eq(0).text()); $('td',newRow).eq(2).text(book.find('year').eq(0).text()); $('td',newRow).eq(3).text(book.find('price').eq(0).text()); newRow.appendTo(tbody).show(); });获得id为tbody的jQuery对象,注意#的用法获得第一行tr用于克隆xml数据html数据,注意$('td',newRow)是代表差询newRow下的所有tdeq用于按照下标从集合里获得jQuery对象text()用于设置和获取文本添加新行并显示,原来是隐藏的
  • 12. 如何使用jQuery动态填充表格第五步,美化表格,添加效果$('tr:even',tbody).addClass('even'); $('tr',tbody).hover( function(){ $(this).addClass('alt'); },function(){ $(this).removeClass('alt'); } );hover()接收两个函数作为参数,addClass()和removeClass()用于添加和移除css样式找到偶数行tr,如果是奇数行用:odd
  • 13. 什么是JSONJSON是一种用于替代XML实现数据交换的格式,是Javascript的一个子集 基本写法: 对象 例如: var user = {'name':'张三', 'age':35};
  • 14. 数组 例如:var favorites = ['足球','音乐','游戏']; var users= [ {'name':'张三', 'age':35}, {'name':'李四', 'age':12} ]; // 得到第一个用户的姓名 alert(users[0].name);
  • 15. 值
  • 16. 数据分析JSON可以较(XML)容易的获得想要的数据var books = {bookstore:[ {category:'COOKING',title:'Everyday Italian', author:['Giada De Laurentiis'],year:2005,price:30.00}, {category:'CHILDREN',title:'Harry Potter', author:['J K. Rowling'],year:2005,price:29.99}, {category:'WEB',title:'XQuery Kick Start', author:['James McGovern','Erik T. Ray'],year:2003,price:49.99}, {category:'WEB2',title:'Learning XML', author:['Erik T. Ray'],year:2003,price:39.95} ]} //获得第3本书的价格 alert(books.bookstore[2].price);
  • 17. 使用jQuery处理JSON$.ajax({ type:'get', url:'bookstore2json.jsp', dataType:'json', … success:function(data){ … // 添加新tr var books = data.bookstore; for(var i = 0; i < books.length; i++){ var newRow = firstRow.clone(); $('td',newRow).eq(0).text(books[i].title); $('td',newRow).eq(1).text(books[i].author.join(',')); $('td',newRow).eq(2).text(books[i].year); $('td',newRow).eq(3).text(books[i].price); newRow.appendTo(tbody).show(); }获得第i本书的title等属性12返回的已经是JSON格式的数据