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里面通过<script>标签插入一大堆js来调用命令了      八）jQuery开发步骤   （1）引用第三方js库文件，<script type="text/javascript" src="js/jquery-1.8.2.js"></script>   （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    var divElement = document.getElementById("divID");        var nameArray = new Array(3);   （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）中的任何标签（1）基本选择器【参见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() );（2）层次选择器【参见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() );（3）增强基本选择器【参见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)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色$(":header").css("background-color","red").css("color","blue");  //3)查找所有未选中的input为checkbox的元素个数alert( $(":checkbox:NOT(:checked)").size() );（4）内容选择器【参见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的API1）掌握jQuery九类选择器及应用2）掌握jQuery常用Method-API3）掌握jQuery常用Event-API一）jQuery九类选择器【参见jQueryAPI.chm手册】    目的：通过九类选择器，能定位web页面（HTML/JSP/XML）中的任何标签   （1）基本选择器【参见01_selector.html】   （2）层次选择器【参见02_selector.html】   （3）增强基本选择器【参见03_selector.html】   （4）内容选择器【参见04_selector.html】   （5）可见性选择器【参见05_selector.html】   （6）属性选择器【参见06_selector.html】   （7）子元素选择器【参见07_selector.html】   （8）表单选择器【参见08_selector.html】   （9）表单对象属性选择器【参见09_selector.html】        注意：项目中，通常是多种选择器一起使用二）jQuery常用Method-API    目的：对web页面（HTML/JSP/XML）中的任何标签，属性，内容进行增删改查   （1）DOM简述与分类       （A）DOM是一种W3C官方标准规则，可访问任何标签语言的页面(HTML/JSP/XML)       （B）DOM是跨平台(window/linux/unix)，跨语言(javascript/java)，跨浏览器(ie/firefox/Chrome)的标准规则       （C）我们只需要按照DOM标准规则，针对主流浏览器(ie/firefox/Chrome)编程       （D）JS/jQuery按照DOM的标准规则，既可以操作HTML/JSP，也能操作CSS       （E）DOM标准规则不是JS的专属，其它语言，也能适用，例如:VBScript，Java语言等   （2）DOM标准规则下的jQuery常用API，注意：以下方法均由jQuery对象调用        each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象    append()：追加到父元素之后        prepend()：追加到父元素之前after()：追加到兄弟元素之后        before()：追加到兄弟元素之前 attr(name)：获取属性值        attr(name,value)：给符合条件的标签添加key-value属性对 $("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本            remove()：删除自已及其后代节点  val()：获取value属性的值    val("")：设置value属性值为""空串，相当于清空    text()：获取HTML或XML标签之间的值    text("")：设置HTML或XML标签之间的值为""空串 clone()：只复制样式，不复制行为        clone(true)：既复制样式，又复制行为replaceWith()：替代原来的节点        removeAttr()：删除已存在的属性addClass()：增加已存在的样式        removeClass()：删除已存在的样式        hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式        toggleClass()：如果标签有样式就删除，否则增加样式offset()：获取对象的left和top坐标        offset({top:100,left:200})：将对象直接定位到指定的left和top坐标width()：获取对象的宽        width(300)：设置对象的宽        height()：获取对象的高        height(500)：设置对象的高children()：只查询子节点，不含后代节点        next()：下一下兄弟节点        prev()：上一下兄弟节点        siblings()：上下兄弟节点show()：显示对象        hide()：隐藏对象fadeIn()：淡入显示对象        fadeOut()：淡出隐藏对象slideUp()：向上滑动        slideDown()：向下滑动        slideToggle()：上下切换滑动，速度快点面试题--find("9类选择器")：查询指定的节点和多重each()迭代        //使用jquery弹出奇数的tr标签下的td里的值var $tr = $("table tr:lt(4):even");$tr.each(function(){//tr中查找td标签,$(this)表示trvar $td = $(this).find("td");$td.each(function(){ //$(this)表示td var txt = $(this).text();alert(txt);});});三）jQuery常用Event-API    目的：对web页面（HTML/JSP）进行事件触发，完成特殊效果的处理    window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者    ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化       ready和onload同时存在时，二者都会触发执行，ready快于onload    change：当内容改变时触发    focus：焦点获取    select：选中所有的文本值    keyup/keydown/keypress：演示在IE和Firefox中获取event对象的不同    mousemove：在指定区域中不断移动触发    mouseover：鼠标移入时触发    mouseout：鼠标移出时触发    submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台    click：单击触发    dblclick：双击触发    blur：焦点失去

1）掌握jQuery常用AJAX-API2）掌握Java调用MySQL / Oracle过程与函数一）jQuery常用AJAX-API     目的：简化客户端与服务端进行局部刷新的异步通讯   （1）取得服务端当前时间    简单形式：jQuery对象.load(url)          返回结果自动添加到jQuery对象代表的标签中间          如果是Servlet的话，采用的是GET方式        复杂形式：jQuery对象.load(url,sendData,function(backData,textStatus,ajax){... ...})          sendData = {"user.name":"jack","user.pass":"123"};           以JSON格式文本方式发送，使用POST方式发送，服务端能收到数据        注意：对于load方法而言，如果请求体无参数发送的话，load方法采用GET方式提交        注意：对于load方法而言，如果请求体有参数发送的话，load方法采用POST方式提交注意：使用load方法时，自动进行编码，无需手工编码<script type="text/javascript">$(":button").click(function(){var url = "${pageContext.request.contextPath}/loadTimeRequest?time"+new Date().getTime();var sendData = null;$.load(url,sendData,function(a,b,ajax){var jsonJAVA = ajax.responseText;var jsonJS = eval("("+jsonJAVA+")");var strTime = jsonJS.strTime;$("span:first").html(strTime).css("color","red");$("span:last").html(strTime).css("color","blue");});//$("span").load(url);});</script>        load()方法参数解释：    参数一：url发送到哪里去    参数二： sendData发送请求体中的数据，符合JSON格式，例如：{key:value,key:value}    参数三：function处理函数，类似于传统方式ajax.onreadystatechange = 处理函数    其中参数三为function处理函数最多可以接收三个参数，含义如下第一个参数：服务端返回的数据，例如：backData第二个参数：服务端状态码的文本描述，例如：success、error、第三个参数：ajax异步对象，即XMLHttpRequest对象        以上所有参数的名字可以任意，但必须按顺序书写，尽量做到见名知意   （2）检查注册用户名和密码是否存在        $.get(url,sendData,function(backData,textStatus,ajax){... ...})        $.post(url,sendData,function(backData,textStatus,ajax){... ...})赵君提倡        注意：使用get或post方法时，自动进行编码，无需手工编码   （3）jQuery对象.serialize()         作用：自动生成JSON格式的文本    注意：为每个jQuery对象设置一个name属性，因为name属性会被认为请求参数名    注意：必须用<form>标签元素    适用：如果属性过多，强烈推荐采用这个API <script type="text/javascript">//定位按钮，同时添加单击事件$(":button").click(function(){//获取用户名和密码var username = $(":text:first").val();var password = $(":text:last").val();//去空格username = $.trim(username);password = $.trim(password);//异步发送到服务端var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime();/*手工书写JSON文本var sendData = {"user.username":username,"user.password":password};*//*工具生成JSON文本*/var sendData = $("form").serialize();$.post(url,sendData,function(backData,textStatus,ajax){//backData是一个JSON文本/对象，你得通过.号访问其属性值var tip = backData.tip;//创建img节点var $img = $("<img src='" + tip + "' height='18px' widht='18px'/>")//清空span节点中的内容$("span").text("");//将img节点添加到span节点中$("span").append( $img );});});</script>        public class RegisterAction extends ActionSupport{private User user;public User getUser() {return user;}public void setUser(User user) {this.user = user;}/** * 检查注册用户名和密码是否存在 */public String checkMethod() throws Exception {tip = "images/MsgSent.gif";if("帅帅".equals(user.getUsername()) && "123".equals(user.getPassword())){tip = "images/MsgError.gif";}return "ok";}private String tip;public String getTip() {return tip;}/** * var backData = { *   "tip":"images/MsgError.gif" *   } */}   （4）jQuery解析XML <?xml version="1.0" encoding="UTF-8"?><root><city>广州</city><city>中山</city><city>深圳</city><city>佛山</city><city>珠海</city></root>        <script type="text/javascript">$(":button").click(function(){var url = "${pageContext.request.contextPath}/03_city.xml";var sendData = null;$.get(url,sendData,function(backData,textStatus,ajax){/*//将xml文件转成jquery对象，目的是用jquery api解析xml文件var $xml = $(backData);var $city = $xml.find("city");$city.each(function(){//获取每一个city节点var city = $(this).text();alert(city);});*/var xml = ajax.responseXML;var $xml = $(xml);var $city = $xml.find("city");$city.each(function(){//获取每一个city节点var city = $(this).text();alert(city);});});});</script>   （5）省份-城市，基于jQuery的AJAX二级联动，用Struts2整合AJAX【非数据库版】         $.ajax(        {      type:"POST",      url:"${pageContext.request.contextPath}/findCityByProvinceRequest?id="+new Date().getTime(),      data:{"province":province},      success:function(backData,textStatus,ajax){}            }        );        注意：这里每个key值不能乱写 <select id="province"><option>选择省份</option><option>广东</option><option>湖南</option></select><select id="city"><option>选择城市</option></select>        <script type="text/javascript">$("#province").change(function(){//删除原城市下拉框中的内容，除第一项外$("#city option:gt(0)").remove();var province = $("#province option:selected").text();if("选择省份" != province){$.ajax({"type":"POST","url":"${pageContext.request.contextPath}/findCityByProvince?time="+new Date().getTime(),"sendData":{"province":province},"success":function(backData,textStatus,ajax){//js对象var city = backData.cityList;//jquery对象var $city = $(city);//each()$city.each(function(){//this表示每个城市var $option = $("<option>" + this + "</option>");$("#city").append( $option );});}});}});</script>        public class ProvinceCityAction extends ActionSupport{private String province;//广东public void setProvince(String province) {this.province = province;}public String findCityByProvince() throws Exception {cityList = new ArrayList<String>();if("广东".equals(province)){cityList.add("湛江");cityList.add("汕头");}else if("湖南".equals(province)){cityList.add("邵阳");cityList.add("浏阳");}return "ok";}private List<String> cityList;public List<String> getCityList() {return cityList;}/** * var backData = { *  "cityList":["邵阳","浏阳"] *   } */}        <struts>   <package name="timePackage" extends="json-default" namespace="/">      <global-results>   <result name="ok" type="json"/>   </global-results><!-- 获取服务端时间 -->   <action    name="loadTimeRequest"    class="cn.itcast.javaee.js.time.TimeAction"    method="loadTimeMethod"/><!-- 检查用户名和密码是否存在 -->   <action    name="checkRequest"    class="cn.itcast.javaee.js.register.RegisterAction"    method="checkMethod"/>      <!-- 根据省份查询城市 -->   <action    name="findCityByProvince"    class="cn.itcast.javaee.js.provincecity.ProvinceCityAction"    method="findCityByProvince"/>   </package></struts>

二）掌握Java调用Oracle过程与函数      写一个计算个人所得税的应用

--定义过程create or replace procedure get_rax(salary in number,rax out number)as    --需要交税的钱    bal number;begin    bal := salary - 3500;    if bal<=1500 then       rax := bal * 0.03 - 0;    elsif bal<=4500 then       rax := bal * 0.1 - 105;    elsif bal<=9000 then       rax := bal * 0.2 - 555;    elsif bal<=35000 then       rax := bal * 0.25 - 1005;    elsif bal<=55000 then       rax := bal * 0.3 - 2755;    elsif bal<=80000 then       rax := bal * 0.35 - 5505;    else       rax := bal * 0.45 - 13505;    end if;end;/--调用过程declare   --交税   rax number;    salary number := &salary;begin   get_rax(salary,rax);    dbms_output.put_line(salary||'元工资需要交'||rax||'元税');end;/     public class TestCallOracleProc {public static void main(String[] args) throws Exception{String sql = "{call get_rax(?,?)}";Connection conn = JdbcUtil.getConnection();CallableStatement cstmt = conn.prepareCall(sql);cstmt.setInt(1,10000);cstmt.registerOutParameter(2,Types.INTEGER);cstmt.execute();Integer rax = cstmt.getInt(2);System.out.println("10000元需要交" + rax + "元税");JdbcUtil.close(cstmt);JdbcUtil.close(conn);}}      查询7788号员工的的姓名，职位，月薪--定义函数create or replace function findEmpNameAndJobAndSal(pempno in number,pjob out varchar2,psal out number) return varchar2as    pename emp.ename%type;begin    select ename,job,sal into pename,pjob,psal from emp where empno = pempno;    return pename;end;/--调用函数declare    pename emp.ename%type;    pjob   emp.job%type;    psal   emp.sal%type;begin    pename := findEmpNameAndJobAndSal(7788,pjob,psal);    dbms_output.put_line('7788'||'--'||pename||'--'||pjob||'--'||psal);end;/     public class TestCallOracleFunc {public static void main(String[] args) throws Exception{String sql = "{?=call findEmpNameAndJobAndSal(?,?,?)}";Connection conn = JdbcUtil.getConnection();CallableStatement cstmt = conn.prepareCall(sql);cstmt.registerOutParameter(1,Types.VARCHAR);cstmt.setInt(2,7788);cstmt.registerOutParameter(3,Types.VARCHAR);cstmt.registerOutParameter(4,Types.INTEGER);cstmt.execute();String ename = cstmt.getString(1);String job = cstmt.getString(3);Integer sal = cstmt.getInt(4);System.out.println(ename+":"+job+":"+sal);JdbcUtil.close(cstmt);JdbcUtil.close(conn);}}