jQuery总结

最新推荐文章于 2024-09-18 09:47:26 发布

kd_myway

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量351

点赞数 1

分类专栏： jquery 文章标签： jquery html javascript

本文链接：https://blog.csdn.net/qq_15797229/article/details/51730766

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1 jQuery快速入门

1) 服务端和客户端有三种方式传递数据

HTML(无需与其它应用程序共享数据的情况下)
XML(需与其它应用程序共享数据，尤其是在不同的系统中，平台中，同时内容较多的情况下)
JSON(需与其它应用程序共享数据，同时内容不多的情况下)

2) 为了将JS代码简化，同时要达到业务需求

3) jQuery的目标是做更多事情，写更少代码

4) jQuery是一个开源，免费的JavaScript库，有不同的版本，真正上线运行时，可以使用min版本

5) jQuery开发步骤

通过script标签导入jquery的js类库
使用$(“#id”)，通过id来定位html元素
通过val()和html()分别取得html元素的值
注意：val()和html()只能由jQuery对象调用，不能由dom对象调用
val()等价于value属性
html()等价于innerHMTL属性

<body>
    <input id="inputID" type="button" value="这就是jQuery框架,写少代码，做多事情"/>
    <div id="divID">哈哈</div>
    <script type="text/javascript">
      /*var inputElement = document.getElementById("inputID");
        var input = inputElement.value;
        alert(input);
        var divElement = document.getElementById("divID")
        var div = divElement.innerHTML;
        alert(div);*/

        //取得<input>标签中的value属性的内容
        //jQuery对象
        var $input = $("#inputID");
        //调用jQuery对象的val()方法，取得value属性的值
        var input = $input.val();
        alert(input);  //这就是jQuery框架,写少代码，做多事情
        //取得<div>标签中的文本内容
        var $div = $("#divID");
        var div = $div.html();
        alert(div);    //哈哈
    </script>
</body>

6) 将dom对象，通过$()转换，就变成了jquery对象，dom对象能做的情况，jquery对象也能，只是方式不一样，反之，jquery对象能做的事情，dom不一定能做

2 DOM对象和jQuery对象相互转换

1) jquery对象是一个数组对象，下标从0开始

2) dom->jquery，通过$(dom对象)->jquery对象

3) jquery->dom，通过

$div[index下标从0开始]
$div.get(index下标从0开始)

<body>
    <input id="inputID" type="button" value="这就是jQuery框架,写少代码，做多事情"/>
    <div id="divID">哈哈</div>
    <script type="text/javascript">
        //取得<input>标签中的value属性的内容[dom对象->jquery对象]
        //dom对象
        var inputElement = document.getElementById("inputID");
        //将dom对象转成jquery对象
        var $input = $(inputElement);
        var input = $input.val();
        alert(input);  //这就是jQuery框架,写少代码，做多事情

        //取得<div>标签中的文本内容[jquery对象->dom对象]
        //jquery对象[数组]
        var $div = $("#divID");
        //将jquery对象转成dom对象
        //var divElement = $div[0];
        var divElement = $div.get(0);
        var div = divElement.innerHTML;
        alert(div);    //哈哈
    </script>
</body>

3 DOM操作与jQuery操作对错误的处理方式比较

1) 使用三种方式定位html中的元素

通过ID
$(“#ID”)
通过标签名
$(“标签名”)
通过样式名
$(“.样式名”)

2) dom中，需要判段查找到的元素是否为null
而jquery中，无需判段，因为jquery本身内置判段器，在查找不到的情况下，返回”undefined”

<style type="text/css">
        .oneClass{
            font-size:44px;
            color:red
        }
</style>
<body>
    <input type="text" id="usernameID" value="这就是jQuery"/>
    <div id="divID" class="oneClass">这是div中的内容</div>
    <script type="text/javascript">
        //通过"#id"定位<input>
        var $input = $("#usernameID");
        alert($input.val());  
        alert($("#usernameID").val());  //这就是jQuery
        //通过"标签名"定位<input><div>
        alert($("div").html());         //这是div中的内容
        alert($("input").val());        //这就是jQuery
        //通过"样式名"定位<div>
        alert($(".oneClass").html());   //这是div中的内容
        //dom错误处理和jquery错误处理
        var $input = $("#usernameID");
        alert($input.val());
        /*var inputElement = document.getElementById("usernameID");
        if(inputElement != null) {
            alert(inputElement.value);
        }else{
            alert("查无此元素");
        }
        */      
    </script>
</body>

4 jQuery九类选择器

1) 基本选择器
#id/标签名/样式名/选择器A,选择器B

<body>
    <div id="div1ID">div1</div>
    <div id="div2ID">div2</div>
    <span class="myClass">span1</span>
    <span class="myClass">span2</span>
    <span class="myClass">span3</span>
    <p>p</p>
    <script type="text/javascript">
        //1)查找ID为"div1ID"的元素
        alert($("#div1ID").html());  //div1
        //2)查找DIV元素的个数[size()方法和length属性]
        alert($("div").size());      //2
        alert($("div").length);
        //3)查找所有样式是"myClass"的元素的个数
        alert($(".myClass").size()); //3
        //4)查找所有DIV,SPAN,P元素的个数
        alert($("div,span,p").length);  //6
        //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
        alert($("#div1ID, .myclass, p").size());  //5
    </script>
</body>

2) 层次选择器
form input：查询form下所有input元素，含有后代关系
form>input：查询form下所有input元素，有有父子关系，没有后代关系
form+input：查询与form同级的第一个input元素，是兄弟关系
form~input：查询与form同级的所有input元素，是兄弟关系

<body>
    <form>
        <input type="text" value="a"/>      
        <table>
            <tr>
                <td>
                    <input type="checkbox" value="b"/>
                </td>
            </tr>           
        </table>
    </form>
    <input type="radio" value="c"/>
    <input type="radio" value="d"/>
    <input type="radio" value="e"/>
    <script type="text/javascript">
        //1)找到表单form下所有的input元素的个数
        alert($("form input").size());    //2
        //2)找到表单form下所有的子级input元素个数
        alert($("form > input").size());  //1
        //3)找到表单form同级第一个input元素的value属性值
        alert($("form+input").val());     //c
        //4)找到所有与表单form同级的input元素个数
        alert($("form~input").size());    //3
    </script>
</body>

3) 增强型基本选择器
:first：查询第一个元素
:last：查询最后一个元素
:checked：查询选中的复选框
:not(:checked)：查询未选中的复选框
:even：偶数
:odd：奇数
:eq()：索引从0开始
:gt()：大于索引号
:lt()：小于索引号
:header：查询所有（h1/h2/h3/h4/h5/h6）标签
.css(“key”,”value”)为查询到的所有标签添加CSS样式

<body>
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>
    <input type="checkbox" checked/>
    <input type="checkbox" checked/>
    <input type="checkbox"/>
    <table border="1">
      <tr><td>line1</td></tr>
      <tr><td>line2</td></tr>
      <tr><td>line3</td></tr>
    </table>    
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <p>p</p>
    <script type="text/javascript">
        //1)查找UL中第一个元素的内容
        alert($("ul li:first").html());
        alert($("ul>li:first").html());   //list item 1
        //2)查找UL中最后个元素的内容
        alert($("ul li:last").html());
        alert($("ul>li:last").html());   //list item 5
        //3)查找所有未选中的input元素个数
        alert($("input:not(:checked)").size());  //1
        //4)查找表格的1、3、5...奇数行个数
        alert($("table tr:even").size());    //2
        //5)查找表格的2、4、6...偶数行个数
        alert($("table tr:odd").size());     //1
        //6)查找表格中第二行的内容，从索引号0开始
        alert($("table tr:eq(1)").html());   //<td>line2</td>
        //7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
        alert($("table tr:gt(0)").size());   //2
        //8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
        alert($("table tr:lt(2)").size());   //2
        //9)给页面内所有标题<h1><h2><h3>加上红色背景色
        $(":header").css("background", "red");
    </script>
</body>

4) 内容选择器
:contains(‘john’)：表示包含指定字符串的标签，字符串大小写敏感
:empty：表示查询空标签的元素
:has(‘p’)：表示查询有子元素的元素
.addClass(“样式名”)：为查询到的所有标签添加样式
:parent：表示查询非空标签

<style type="text/css">
        .myClass{
            font-size:44px;
            color:blue;
        }
</style>
<body>
    <div><p>John Resig</p></div>
    <div><p>George Martin</p></div>
    <div>Malcom John Sinclair</div>
    <div>J. Ohn</div>
    <p></p>
    <p></p>
    <div></div>
    <script type="text/javascript">
        //1)查找所有包含文本"John"的div元素的个数
        alert($("div:contains('John')").size());  //2
        //2)查找所有p元素为空的元素个数
        alert($("p:empty").size());  //2
        //3)给所有包含p元素的div元素添加一个myClass样式 
        $("div:has('p')").addClass("myClass");
        //4)查找所有含有子元素或者文本的p元素个数,即p为父元素
        alert($("p:parent").size()); //2
    </script>
</body>

5) 可见性选择器
:hidden：表示查询所有隐蔽的标签
:visible：表示查询所有显示的标签或:not(:hidden)

<body>
    <table border="1" align="center">
      <tr style="display:none">
        <td>Value 1</td>
      </tr>
      <tr>
        <td>Value 2</td>
      </tr>
      <tr>
        <td>Value 3</td>
      </tr>
    </table>
    <script type="text/javascript">
        //1)查找隐藏的tr元素的个数
        alert($("table tr:hidden").size());  //1
        alert($("tr:hidden").size());
        //2)查找所有可见的tr元素的个数
        alert($("table tr:visible").size()); //2
        alert($("table tr:not(:hidden)").size());
    </script>
</body>

6) 属性选择器
div[id]：表示查询含有id属性的div元素
input[name=’newsletter’]：表示查询含有name属性，且其值是”newsletter”的input元素
input[name!=’newsletter’]：表示查询含有name属性，且其值不是”newsletter”的input元素
input[name^=’newsletter’]：表示查询含有name属性，且其值以”news”开头的input元素
input[name$=’letter’]：表示查询含有name属性，且其值以”letter”结尾的input元素
input[name*=’news’]：：表示查询含有name属性，且其包含”news”的input元素
input[id][name$=’letter’]：表示查询含有id属性，且含有name属性，其值以”letter”字符串结束的input元素

<body>
    <div>
      <p>Hello!</p>
    </div>
    <div id="test2"></div>
    <input type="checkbox" name="newsletter" value="Hot Fuzz" />
    <input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="newsaccept" value="Evil Plans" />
    <script type="text/javascript">
    //1)查找所有含有id属性的div元素个数
    alert($("div[id]").size());  //1
    //2)查找所有name属性是newsletter的input元素
    alert($("input[name='newsletter']").size());  //2
    //3)查找所有name属性不是newsletter的input元素
    alert($("input[name!='newsletter']").size()); //1
    //4)查找所有name以'news'开始的input元素，并将其选中
    $("input[name^='news']").attr("checked", "checked");
    //5)查找所有name 以'letter'结尾的input元素，并将其选中
    $("input[name$='letter']").attr("checked", "checked");
    //6)查找所有name包含'news'的input元素，并将其选中
    $("input[name*='news']").attr("checked", "checked");
    //7)找到所有含有id属性，并且它的name属性是以"letter"结尾的，并将其选中
    $("input[id][name$='letter']").attr("checked", "checked");
    </script>
</body>

7) 子元素选择器
:first-child：表示查询第一个子元素
:last-child：表示查询最后一个子元素
:only-child:表示查询只有一个子元素的元素
:nth-child:(编号从1开始)，表示查询指定编号的元素

<body>
    <ul>
      <li>John</li>
      <li>Karl</li>
      <li>Brandon</li>
    </ul>
    <ul>
      <li>Glen</li>
      <li>Tane</li>
      <li>Ralph</li>
    </ul>
    <ul>
      <li>Jack</li>
    </ul>
    <script type="text/javascript">
    //1)迭代每个ul中第1个li元素中的内容,索引从1开始
    $("ul li:first-child").each(function(){
        alert($(this).html());  //John,Glen,Jack
    });
    //2)迭代每个ul中最后1个li元素中的内容,索引从1开始
    $("ul li:last-child").each(function(){
        alert($(this).html());  //Brandon,Ralph,Jack
    });
    //3)在ul中查找是唯一子元素的li元素的内容
    $("ul li:only-child").each(function(){
        alert($(this).html());  //Jack
    });
    //4)迭代每个ul中第2个li元素中的内容，索引从1开始
    $("ul li:nth-child(2)").each(function() {
        alert($(this).html());  //Karl,Tane
    });
    </script>
</body>

8) 表单选择器
:input：查找所有input元素的个数，注：包含所有input,textarea,select和button元素
:text
:password
:radio
:checkbox
:file
:submit
:reset
:image
:file

<body>
    <form>
        <input type="button" value="Input Button"/><br/>
        <input type="checkbox" /><br/>
        <input type="file" /><br/>
        <input type="hidden" /><br/>
        <input type="image" /><br/>
        <input type="password" /><br/>
        <input type="radio" /><br/>
        <input type="radio" /><br/>
        <input type="reset" /><br/>
        <input type="submit" /><br/>
        <input type="text" /><br/>
        <select><option>Option</option></select><br/>
        <textarea></textarea><br/>
        <button>Button</button><br/>
    </form>
    <script type="text/javascript">
    //1)查找所有input元素的个数,注：包含所有input,textarea,select和button元素
    alert($("input").size());      //11
    alert($(":input").size());     //14
    //2)查找所有文本框的个数
    alert($(":text").size());      //1
    //3)查找所有密码框的个数
    alert($(":password").size());  //1
    //4)查找所有单选按钮的个数
    alert($(":radio").size());     //2
    //5)查找所有复选框的个数
    alert($(":checkbox").size());  //1
    //6)查找所有提交按钮的个数,非IE可能将<button>当作一个提交按钮
    alert($(":submit").size());    //1
    //7)匹配所有图像域的个数
    alert($(":image").size());     //1
    //8)查找所有重置按钮的个数
    alert($(":reset").size());     //1
    //9)查找所有普通按钮的个数
    alert($(":button").size());    //2
    //10)查找所有文件域的个数
    alert($(":file").size());      //1
    //11)查找所有input元素为隐藏域的个数
    alert($(":input:hidden").size());   //1
    </script>
</body>

9) 表单对象属性
:enabled：表示查询可用的元素
:disabled：表示查询不可用的元素
:checked：表示查询选中的复选/单选框的元素
:selected：表示查询选中的下拉框元素

<body>
    <form>
      <input name="email" disabled="disabled" />
      <input name="password" disabled="disabled" />
      <input name="id" />
      <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
      <input type="checkbox" name="newsletter" value="Weekly" />
      <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
      <select>
          <option value="1">Flowers</option>
          <option value="2" selected="selected">Gardens</option>
          <option value="3">Trees</option>
      </select>
    </form>
    <script type="text/javascript">
    //1)查找所有可用的input元素的个数
    alert($(":input:enabled").size());          //5
    alert($("input:enabled").size());           //4
    //2)查找所有不可用的input元素的个数
    alert($(":input:disabled").size());         //2
    //3)查找所有选中的复选框元素的个数
    alert($(":checkbox:checked").size());       //2
    //4)查找所有未选中的复选框元素的个数
    alert($(":checkbox:not(:checked)").size()); //1
    //5)查找所有选中的选项元素的个数
    alert($("select option:selected").size());  //1
    </script>
</body>

5 jQuery中常用方法或属性

1) val()：取得标签中value属性的值
2) html()：取得标签内的内容
3) size()或length：取得数组的长度
4) each()：该方法必须由jQuery对象调用（即数组对象），each(function)方法，会自动将数组中的每个元素自动调用function函数
5) click(function)
6) dblclick(function)

<body>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <script type="text/javascript">
    //定位所有<p>元素
    $("p").each(function() {
        alert($(this).html());
    });
    //单击显示
    $("p").each(function() {
        $(this).click(function() {
            alert($(this).html());
        });
    });
    //双击显示
    $("p").each(function() {
        $(this).dblclick(function() {
            alert($(this).html());
        });
    });
    </script>
</body>

7) 父.append(子)，子元素位于父元素之后，但依然是父子关系
8) 父.prepend(子)，子元素位于父元素之前，但依然是父子关系
9) text()：取得标签的内容，优先考虑html()方法

<body>
    <ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ul>  
    <hr/>   
    <div>这是子元素，要插入到父元素中</div>
    <script type="text/javascript">
        //定位<ul>父元素
        var $ul = $("ul");
        //定位<div>子元素
        var $div = $("div");
        //将子元素<div>,添加到父元素<ul>尾部中,形成父子关系
        $ul.append($div);
        //将子元素<div>,添加到父元素<ul>首部中,形成父子关系
        $ul.prepend($div);
        //jQuery父对象.append(jQuery子对象)
        //dom父元素.appendChild(dom子元素);   
    </script>
</body>

6 jQuery常用操作DOM的API

1) jQuery对象.addClass().addClass();
2) removeClass()
3) toggleClass()
4) hasClass()

<style type="text/css">
        .myClass{
            font-size:30px;
            color:red
        }
</style>
<body>
    <div>无样式</div>
    <div class="myClass">有样式</div>
    <script type="text/javascript">
        //$("div").addClass("myClass");
        //$("div:eq(0)").addClass("myClass");
        //$("div:nth-child(1)").addClass("myClass");
        //$("div").first().addClass("myClass");
        //$("div").last().removeClass("myClass");
        //$("div").first().toggleClass("myClass");
        //$("div").last().toggleClass("myClass");
        alert($("div").first().next().hasClass("myClass"));  //true
    </script>
</body>

5) val()，如果将val()设置给一个select/raido/checkbox元素，内容取决于option元素的value或显示的内容值，value优先
6) text()和html():text()取得是标签之间的内容，html()不仅含有内容，还可能含有标签
7) prev()
8) siblings()：要能产生一个数组

<body>
    <p>Hello</p>
    <div>
        <span>
            Hello Again
            <b>
                Bold
            </b>
        </span>
    </div>
    <p>And Again</p>
    <script type="text/javascript">
        alert($("div").children().first().html());                    
        /*Hello Again
            <b>
                Bold
            </b>*/
        alert($("div").children().first().text());  //Hello Again+Bold
        alert($("div").first().next().text());  //And Again
        $("div").first().siblings().each(function() {
            alert($(this).text());
        });
        /*
        Hello+And Again+//alert($("div").children().first().html());
        //alert($("div").children().first().text());
        //alert($("div").first().next().text());
        $("div").first().siblings().each(function() {
            alert($(this).text());
        });
        */
    </script>
</body>

9) show()和hide()

<body>
    <p style="display:none">
        <img src="../images/LSS4.png"/>
    </p>    
    <div>
        <!-- 加载完毕 -->
    </div>
    <script type="text/javascript">
        $("p").first().show(5000, function() {
            $("div").first().html("<font color='red'>加载完成</font>");
        });

        $("p").first().hide(5000, function() {
            $("div").first().html("<font color='red'>隐藏完成</font>");
        });
    </script>
</body>

10) fadeIn()和fadeOut()

<body>
    <p style="display:none">
        <img src="../images/LSS4.png"></img>
    </p>    
    <div>
    </div>
    <script type="text/javascript">
        //淡入显示图片
        $("p").first().fadeIn(5000, function() {
            $("div").first().html("<font color='green'>淡入显示图片</font>");
        });

        //淡出显示图片
        $("p").first().fadeOut(5000, function() {
            $("div").first().html("<font color='green'>淡出隐藏图片</font>");
        });
    </script>
</body>

11) slideDown()和slideUp()

<body>
    <div style="display:none">
        中国0<br/>    
        中国1<br/>    
        中国2<br/>    
        中国3<br/>    
        中国4<br/>    
        中国5<br/>    
        中国6<br/>    
        中国7<br/>    
        中国8<br/>    
        中国9<br/>    
    </div>      
    <input type="button" value="我的好友"/>
    <script type="text/javascript">
        $(":input").click(function() {
            $("div").slideDown(1000);
        });
        $(":input").click(function() {
            $("div").slideUp(1000);
        });
    </script>
</body>

7 jQuery中常用事件

特殊事件，在面页加载时执行，无需等候所有的html元素加载完毕。
1) ready()

<body>
    <script type="text/javascript">
        /*window.onload = function() {
            alert("传统方式加载");
        }
        */
        /*$(document).ready(function() {
            alert("jQuery方式");
        });
        */
        $(function() {
            alert("最简形式");
        });
    </script>
</body>

2) change()

<body>
  <select>
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="gz">广州</option>
  </select>
  <script type="text/javascript">
        $("select").first().change(function() {
            alert($("select option:selected").val());
        });
  </script>
</body>

3) submit()

<body>
    <form>
        <select>
            <option value="bj">
                北京
            </option>
            <option value="sh">
                上海
            </option>
            <option value="gz">
                广州
            </option>
            <input type="submit" value="表单提交"/>
        </select>
    </form>
    <script type="text/javascript">
        $("form").first().submit(function() {
            alert("哈哈");
            return true;
        });
    </script>
</body>

4) unload()

<body>
    <script type="text/javascript">
        $(document).ready(function() {
            alert("页面加载时触发");
        });
        $(window).unload(function() {
            alert("页面卸载时触发");
        });
    </script>
</body>

8 基于jQuery的Ajax操作

1) load(url/sendData/回调函数)
如果没有发送参数到服务端，load()方法默认以GET方式发达，
如果有发送参数到服务端，load()方法默认以POST方式发达，
注意，发送的参数一定要符合json格式，标志是{},[{},{}]

2) 回调函数有三个方法
backData：以HTML字符串的形式服务端返回的数据
textStatus：服务端返回的信息“success/error/notmodify/timeout”
*xhr：通过他，可以取得xhr.responseXML/xhr.responseText/xhr.readyState/…

<body>
    <input type="button" value="基于jQuery的Ajax体验"/>
    <hr/>
    <span id="spanID"></span>
    <script type="text/javascript">
        $("input").first().click(function() {
            var url="/myday33/AjaxServlet?time="+new Date().getTime();
            var sendData = {username:'jack', gender:'male'};
            //jQuery对象.load(url);
            //$("#spanID").load(url);
            $("span").first().load(url+" font", sendData, function(backData, textStatus, xhr) {
                //alert(backData);
                //alert(textStatus);
                //alert(xhr.readyState+":"+xhr.status);
            });
        });
    </script>
</body>

public class AjaxServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws 
    ServletException, IOException {
        System.out.println("AjaxServlet::doGet()");
        String username = request.getParameter("username");
        String gender = request.getParameter("gender");
        System.out.println("用户名:"+username);
        System.out.println("性别:"+gender);
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write("<font color='red'>"+username+"</font>");

        /*response.getWriter().write("<font color='red'>成功</font>");
        response.getWriter().write("<h1>h1</h1>");
        response.getWriter().write("<h2>h2</h2>");
        */
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws 
    ServletException, IOException {
        System.out.println("AjaxServlet::doPost()");
        request.setCharacterEncoding("UTF-8");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println("用户名:"+username);
        System.out.println("密码:"+password);
        //String jsonString = "{username:'"+username+"', password:'"+password+"'}";
        String tip = null;
        if("jack".equals(username) && "123456".equals(password)) {
            tip = "success";
        }else{
            tip = "fail";
        }
        response.setContentType("text/xml;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write("<root>");
            pw.write("<res>");
                pw.write(tip);
            pw.write("</res>");
        pw.write("</root>");
    }
}

3) $.get(url,sendData,回调方法,回传的类型)
回调函数有二个方法
backData：以HTML字符串的形式服务端返回的数据
textStatus：服务端返回的信息“success/error/notmodify/timeout”
返回值是XMLHttpRequest对象

<body>
    <input type="button" value="基于jQuery的Ajax体验[GET]"/>
    <hr/>
    <span id="spanID"></span>
    <script type="text/javascript">
        $("input").first().click(function() {
            var url="/myday33/AjaxServlet?time="+new Date().getTime();
            var sendData = {username:'jack', gender:'male'};
            var xhr = $.get(url, sendData, function(backData, textStatus) {
                //alert(backData+":"+textStatus);
                var msg = xhr.responseText;
                $("span").first().html(msg);
            });
        });
    </script>
</body>

servlet同上

4) $.post(url,sendData,回调方法,回传的类型)
回调函数有二个方法
backData：以HTML字符串的形式服务端返回的数据
textStatus：服务端返回的信息“success/error/notmodify/timeout”
返回值是XMLHttpRequest对象

5) 使用serialize()能将jQuery对象中的参数自动转成Json格式的字符串参数，注意要为表单元素取一个name属性
var sendData = $(“#formID”).serialize();

<body>
    <form id="formID">
        用户名:<input type="text" name="username" id="usernameID"/><br/><p></p>
        密&nbsp;码:<input type="password" name="password" id="passwordID"/>
    </form>
    <input type="button" value="基于jQuery的Ajax体验[POST]"/>
    <hr/>
    <span id="spanID"></span>
    <script type="text/javascript">
        $("input").last().click(function() {
            var url="/myday33/AjaxServlet?time="+new Date().getTime();
            //var sendData ={username:$("#usernameID").val(),password:$("#passwordID").val()};
            var sendData = $("#formID").serialize();
            var xhr = $.post(url, sendData, function(backData, textStatus) {
                var xmlDocument = xhr.responseXML;
                $("span").first().html($(xmlDocument).find("res").text());
            });
        });
    </script>
</body>

servlet同上

9 JQuery加载并解析XML

1 小实例1：

<html>
  <head>
    <title>load.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.6.js"></script>
  </head>
  <body>
    <script type="text/javascript">
        $(document).ready(function(){
            $.get("test.xml",function(xmlDocument){
                alert($(xmlDocument).find("res").text());
            });
        });
    </script>
  </body>
</html>

xml如下：

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <res>
        成功
    </res>
</root>

2 基于jQuery、Ajax，Json的二级菜单联动

<html>
  <head>
     <script type="text/javascript" src="../js/jquery-1.6.js"></script>
  </head>
  <body>
    <select id="provinceID">
        <option>选择省份</option>
        <option value="gd">广东</option>
        <option value="hn">湖南</option>
    </select>
    <hr>
    <select id="cityID">
        <option>选择城市</option>
        <!-- 动态添加城市 -->
    </select>
    <hr>
    <select id="areaID">
        <option>选择区域</option>
        <!-- 动态添加区域 -->
    </select>
    <hr/>
    <script type="text/javascript">
        //省份->城市
        $("#provinceID").change(function(){
            //删除原"城市"下位框中的内容
            $("#cityID").empty();
            $("#cityID").append($("<option></option>").text("选择城市"));
            //删除原"区域"下位框中的内容        
            $("#areaID").empty();
            $("#areaID").append($("<option></option>").text("选择区域"));
            //取得选中的省份value值 
            var province = $("#provinceID option:selected").val();
            var url = "/day33/DynaServlet?time="+new Date().getTime();
            var sendData = {province:province};
            var xhr = $.post(url,sendData,function(){
                var jsonString = xhr.responseText;
                var json = eval("("+jsonString+")");
                for(var i=0;i<json.city.length;i++){
                    $option = $("<option></option>").text(json.city[i]);
                    $("#cityID").append($option);
                }       
            })
        });
        //城市->区域
        $("#cityID").change(function(){
            //删除原"区域"下位框中的内容        
            $("#areaID").empty();
            $("#areaID").append($("<option></option>").text("选择区域"));
            //取得选中的城市显示值
            var city = $("#cityID option:selected").text();
            var url = "/day33/DynaServlet?time="+new Date().getTime();
            var sendData = {city:city};
            var xhr = $.post(url,sendData,function(){
                var jsonString = xhr.responseText;
                var json = eval("("+jsonString+")");
                for(var i=0;i<json.area.length;i++){
                    $option = $("<option></option>").text(json.area[i]);
                    $("#areaID").append($option);
                }   
            });
        });
    </script>
  </body>
</html>

servlet如下：


public class DynaServlet extends HttpServlet {
    public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        String province = request.getParameter("province");
        String city = request.getParameter("city");
        System.out.println("province="+province);
        System.out.println("city="+city);
        String jsonString = null;
        if(province!=null){
            if("gd".equals(province)){
                jsonString = "{'city':['广州','中山','珠海','佛山']}";
            }else if("hn".equals(province)){
                jsonString = "{'city':['长沙','株洲']}";
            }
        }else if(city!=null){
            if("长沙".equals(city)){
                jsonString = "{'area':['AAA1','AAA2','AAA3','AAA4']}";
            }else if("广州".equals(city)){
                jsonString = "{'area':['BBB1','BBB2','BBB3','BBB4']}";
            }else if("株洲".equals(city)){
                jsonString = "{'area':['CCC1','CCC2','CCC3','CCC4']}";
            }else if("珠海".equals(city)){
                jsonString = "{'area':['DDD1','DDD2','DDD3','DDD4']}";
            }
        }
        System.out.println(jsonString);
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write(jsonString);
    }
}