JQuery入门

零) js / ajax / json / jQuery

• js: 基于对象, 解释型, 事件驱动, 浏览器交互执行, 弱类型, 必须嵌入到

  五) jQuery简介

  • JQuery是什么?

    • John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作 (参见<<什么是jQuery.JPG>>)

  • 为什么要使用jQuery

    • 1. 写少代码,做多事情【write less do more】
    • 2. 免费，开源且轻量级的js库，容量很小
      • 注意：项目中，提倡引用min版的js库
    • 3. 兼容市面上主流浏览器，例如 IE，Firefox，Chrome
      • 注意：jQuery不是将所有JS全部封装，只是有选择的封装
    • 4. 能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
    • 5. 文档手册很全，很详细
    • 6. 成熟的插件可供选择
    • 7. 提倡对主要的html标签提供一个id属性，但不是必须的
    • 8. 出错后，有一定的提示信息
    • 9. 不用再在html里面通过
    • 2. 查阅并使用api手册，$("#divID").html()/val()/text()/css("color","red")/....

  //var divElement = document.getElementById("divID");
  var $div = $("#divID");
  //var html = divElement.innerHTML;
  var html = $div.html();
  alert(html);
  

  六) js对象和jQuery对象相互转换

  • 1. 什么是js对象及代码规则
    • 就是使用js-API，即Node接口中的API或是传统JS语法定义的对象，叫做js对象
    • js代码规则 -> divElement ``divElement = document.getElementById("divID");
  • 2. 什么是jQuery对象及代码规则
    • 就是使用jQuery-API，返回的对象就叫做jQuery对象
    • jQuery代码规则 -> $div : var $div = $("#divID")
    • 声明：上述代码规则，只是老师个人规则，不代表所有企业都这样做
  • 3. js对象转成jQuery对象【重点】
    • 语法：$(js对象)---->jQuery对象
    • 例如：$(divElement)---->$div
    • 例如：$(this)---->$this
    • 注意：jQuery对象将js对象做了封装，js对象二边无引号

  var inputElement = document.getElementById("inputID");//js对象 
  var $input = $(inputElement);//jquery对象
  var txt = $input.val();
  alert(txt);
  

  • 4. jQuery对象转成js对象
    • 语法1：jQuery对象[下标，从0开始]
    • 语法2：jQuery对象.get(下标，从0开始)
    • 例如：$div[0]---->divElement
    • 注意：不同的对象只能调用对应的api方法，即jQuery对象不能调用js对象的api，反之亦然
    • $div.innerHTML -> 错
    • divElement.html -> 错

  var $div = $("#divID");//jquery对象
  var divElement = $div[0];//js对象(方式一)
  //var divElement = $div.get(0);//js对象(方式二)
  var txt = divElement.innerHTML;       
  alert(txt);
  

  七) js对象和jQuery对象的区别

  • 1. js对象的三种基本定位方式
    • a) 通过ID属性：document.getElementById()
    • b) 通过NAME属性：document.getElementsByName()
    • c) 通过标签名：document.getElementsByTagName()
  • 2. jQuery对象的三种基本定位方式
    • a) 通过ID属性：$("#id属性值")
    • b) 通过标签名：$("标签名")
    • c) 通过CLASS属性：$(".样式名")
  • 3. js对象出错的显示, 没有合理的提示信息
    • 例如：alert(document.getElementById("usernameIDD").value)
  • 4. jQuery对象出错的显示, 有合理的提示信息
    • 例如：undefined
    • 例如：alert($("#usernameIDD").val())

  八) jQuery九类选择器（上）【参见jQueryAPI.chm手册】

  • 选择器的作用：通过选择器可以定位web页面（HTML/JSP/XML）中的任何标签
  • 选择器分类 :
    • 基本选择器【参见selector_1.html】

      //1)查找ID为"div1ID"的元素个数
          alert( $("#div1ID").size() );
          
      //2)查找DIV元素的个数
          alert( $("div").size() );
          
      //3)查找所有样式是"myClass"的元素的个数
          alert( $(".myClass").size() );
      
      //4)查找所有DIV,SPAN,P元素的个数
          alert( $("div,span,p").size() );
          
      //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
          alert( $('#div1ID,.myClass,p').size() );
  

  • 层次选择器【参见selector_2.html】

          //1)找到表单form里所有的input元素的个数
              alert( $("form input").size() );
          
          //2)找到表单form里所有的子级input元素个数
              alert( $("form > input").size() );
          
          //3)找到表单form同级第一个input元素的value属性值
              alert( $("form + input").val() );
          
          //4)找到所有与表单form同级的input元素个数
              alert( $("form ~ input").size() );
  

  • 增强基本选择器【参见selector_3.html】

          //1)查找UL中第一个元素的内容
              alert( $("ul li:first").text() );
  
          //2)查找UL中最后个元素的内容
              alert( $("ul li:last").text() );
  
          //4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始
              alert( $("table tr:odd").size() );
  
          //5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始
              alert( $("table tr:even").size() );
  
          //6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式
              alert( $("table tr td:eq(1)").text() );
  
          //7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
              alert( $("table tr:gt(0)").size() );
  
          //8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
              alert( $("table tr:lt(2)").size() );
  
          //9)给页面内所有标题
  加上红色背景色，且文字加蓝色
              $(":header").css("background-color","red").css("color","blue");
              
          //3)查找所有未选中的input为checkbox的元素个数
              alert( $(":checkbox:NOT(:checked)").size() );
  

  • 内容选择器【参见selector_4.html】

          //1)查找所有包含文本"John"的div元素的个数
              alert( $("div:contains('John')").size() );
              
          //2)查找所有p元素为空的元素个数
              alert( $("p:empty").size() );
          
          //3)给所有包含p元素的div元素添加一个myClass样式
              $("div:has(p)").addClass("myClass");
          
          //4)查找所有含有子元素或者文本的p元素个数,即p为父元素
              alert( $("p:parent").size() );
  

  九) jQuery中常用方法（上）

  • 常用方法的目的: 通过方法，能操作web页面 (HTML/JSP) 中的任何标签
    • 1> val() ：获取标签的value属性值，前提是该标签有value属性
    • 2> html() ：获取标签之间的内容，不能用运于xml文件
    • 3> text() ：获取标签之间的内容，可以用运于html/jsp和xml文件(提倡)
    • 4> css() ：加key-value形成的css样式
    • 5> addClass() ：加已经定义好的一个css样式
    • 6> size() ：获取jQuery对象/数组中元素的个数(提倡)
    • 7> length ：获取jQuery对象/数组中元素的个数

  注意：在写jQuery代码时，不光可以使用jQuery的API，还能使用传统JS的API