ajax03 jquery jquery_ajax

非常流行JS框架： jQuery 、DOJO、EXT、prototype

宗旨 WRITE LESS,DO MORE

主要学习：官方手册

第一部分 jQuery快速入门
1、下载 jQuery的 js文件 ---- 去jQuery 官网下载最新版本 1.8.3
2、开发工具 Aptana 内置 jquery 1.3

3、新建web 工程引入 jquery js
开启 Aptana 对jquery 语法支持提示

4、在html 页面中导入 jquery js ，然后才可以使用jquery 语法

jQuery(document).ready(function(){
alert("Hello,jQuery");
});

jQuery 核心函数的用法
用法一 jQuery(callback) 将回调函数直接传递给 jQuery核心函数 ------- 效果等价于 onload函数
用法二 jQuery(expression) 进行页面元素查找 ---- jQuery 的九种选择器
用法三 jQuery(elements) 该方法将一个dom对象，包装为jQuery 的对象 ----- 例如：jQuery(document)
用法四 jQuery(html) 转换html代码成为jQuery对象

jQuery() 可以直接使用 $() 取代
最简单onload函数：
                        $(function(){
    alert("最简单onload函数");
   });

*********** 与传统js区别，jQuery中所有事件函数都是允许重复注册

第二部分 jQuery对象与 DOM对象

1、jQuery对象 = jQuery(DOM对象);

jQuery对象提供方法，比传统DOM对象更加强大

2、将DOM对象转换为jQuery对象
var $variable = $(variable); // jQuery对象

3、jQuery对象转换 DOM对象
方式一 var variable = $variable[0]; // DOM对象
方式二 var variable = $variable.get(0); // DOM对象

第三部分 jQuery 内置九种选择器
使用 jQuery核心函数中用法二 ------ jQuery(expression)

1、基本选择器
#id ---- ID选择器
.class ---- 类选择器
element ---- HTML选择器（标签名称）

* ---- 选中所有元素
selector1,selector2 ... 组合选择

2、层次选择器
ancestor descendant 获取ancestor元素下边的所有元素 $("form input")
parent > child 获取parent元素下边的所有直接child 子元素 $("form > input")
prev + next 获取紧随pre元素的后一个兄弟元素 $("label + input")
prev ~ siblings 获取pre元素后边的所有兄弟元素 $("form ~ input")

*** jQuery 中忽略文本元素

3、基本过滤选择器
过滤选择器是对基本选择器和层次选择器的结果进行过滤
:first 选取第一个元素 $("tr:first")
:last   选取最后一个元素 $("tr:last")
:not(selector) 去除所有与给定选择器匹配的元素 $("input:not(:checked)")
:even 选取所有元素中偶数索引的元素，从 0 开始计数 $("tr:even")
:odd 选取所有元素中奇数索引的元素，从 0 开始计数 $("tr:odd")
:eq(index) 选取指定索引的元素 $("tr:eq(1)")
:gt(index) 选取索引大于指定index的元素 $("tr:gt(0)")
:lt(index)   选取索引小于指定index的元素 $("tr:lt(2)")
:header 选取所有的标题元素如：h1, h2, h3   $(":header")
:animated 匹配所有正在执行动画效果的元素

4、内容过滤选择器
:contains(text) 选取包含text文本内容的元素 $("div:contains('John')")
:empty 选取不包含子元素或者文本节点的空元素 $("td:empty")
:has(selector) 选取含有选择器所匹配的元素的元素 $("div:has(p)").addClass("test");
:parent 选取含有子元素或文本节点的元素 $("td:parent")

5、可见性过滤选择器
:hidden 选取所有不可见元素 $("tr:hidden")
:visible 选取所有可见的元素 $("tr:visible")

重点：哪些属于不可见 display:none 、input type="hidden" ------ **** 对visibility:hidden 元素无效的

区分 display 和 visibility 区别？ display 不显示元素，同时元素不会占用页面空间，visibility 可以隐藏元素，隐藏的元素会最占用页面空间

*** visibility 隐藏元素，无法使用 :hidden 选择器进行选中的，所以尽量不使用 visibility

6、属性过滤选择器
[attribute] 选取拥有此属性的元素 $("div[id]")
[attribute=value] 选取指定属性值为value的所有元素
[attribute !=value] 选取属性值不为value的所有元素
[attribute ^= value] 选取属性值以value开始的所有元素
[attribute $= value] 选取属性值以value结束的所有元素
[attribute *= value] 选取属性值包含value的所有元素
[selector1] [selector2]…[selectorN] 复合性选择器，先经[selector1]选择返回集合A，集合A再经过[selector2]选择返回集合B，集合B再经过[selectorN]选择返回结果集合

7、子元素过滤选择器
:nth-child(index/even/odd) 选取索引为index的元素、索引为偶数的元素、索引为奇数的元素 ----- index 从1开始区别 eq
:first-child 选取第一个子元素
:last-child 选取最后一个子元素
:only-child 选取唯一子元素，它的父元素只有它这一个子元素

8、表单过滤选择器
:input 选取所有<input>、<textarea>、<select >和<button>元素
:text     选取所有的文本框元素
:password 选取所有的密码框元素
:radio          选取所有的单选框元素
:checkbox 选取所有的多选框元素
:submit       选取所有的提交按钮元素
:image        选取所有的图像按钮元素
:reset          选取所有重置按钮元素
:button       选取所有按钮元素
:file             选取所有文件上传域元素
:hidden       选取所有不可见元素

9、表单对象属性选择器
:enabled 选取所有可用元素
:disabled 选取所有不可用元素
:checked 选取所有被选中的元素，如单选框、复选框
:selected 选取所有被选中项元素，如下拉列表框、列表框

============================================================================================================================
第四部分 jQuery的文档操作（增删改查）

1、查找
步骤一：先使用九种选择器进行选择
步骤二：再使用查找函数 ----- 相对位置查找
children([expr]) 获取指定的子元素
find(expr) 获取指定的后代元素
next([expr]) 获取下一个兄弟元素
parent([expr]) 获取父元素
prev([expr]) 获取前一个兄弟元素
siblings([expr]) 获取所有兄弟元素 siblings = 前面所有兄弟 + 后面所有兄弟

对查找结果进行遍历操作 each(function(){… }) ，在each函数中可以通过this 获得DOM对象，$(this) 获得jQuery对象

2、属性操作
attr(name) 获取指定名称的属性
attr(key, value) 设置指定名称的属性值
attr(properties) 将一个“名/值”形式的对象设置匹配的元素属性
removeAttr(name) 从元素中删除属性

3、CSS样式操作
通过attr属性设置/获取 style属性 attr(“style”,”color:red”);

设置CSS样式属性
css(name) 获取一个CSS样式属性
css(name, value) 设置一个CSS样式属性
css(properties) 传递key-value对象，设置多个CSS样式属性

设置class属性
addClass(class) 添加一个class属性
removeClass([class]) 移除一个class属性
toggleClass(class)如果存在（不存在）就删除（添加）一个类

4、HTML元素内部代码、文本值和 value属性的获取
html() 存取元素内部 HTML源码 ======= 等价于 innerHTML
text() 存取元素内部文本内容

<p><a>link</a><p> 针对 p 对象使用 html() 取值 <a>link</a> ，使用 text()取值 link

val() 文本框、下拉列表框、单选框选中的元素值

5、文档操作 --- 添加节点
1) 创建元素通过核心函数jQuery(html片段)
2) 将元素插入到指定位置
$node.append($newNode) --- 加入节点内部末尾
$node.prepend($newNode) --- 加入节点内部最开始
$node.after($newNode)
$newNode.before($node)

6、文档操作 --- 删除节点
$(“p”).remove() 删除所有 p元素
$(“p”).empty(); 删除p元素中所有子节点及文本内容

jQuery 1.4版本新增 detach 方法，被删除的节点，会保留原有的事件
* detach 删除后保留原有事件，remove 原有事件将一起删除

7、文档操作 --- 复制节点和替换节点
复制节点
$(“p”).clone(); 返回节点克隆后的副本，但不会克隆原节点的事件
$(“p”).clone(true); 克隆节点，保留原有事件
替换节点
$("p").replaceWith("<b>ITCAST</b>"); 将所有p元素，替换为"<b>ITCAST</b>“

案例零：将用户信息添加到自定义的div和从div中删除

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.2.min.js">
        </script>
        <script type="text/javascript">
            $(function(){
                $("#mybutton").click(function(){
                    var username = $("#username").val();
                    var email = $("#email").val();
                    var phone = $("#phone").val();
                    $tr = $("<tr><td>" + username + "</td><td>" + email + "</td><td>" + phone + "</td><td><a href='#'>删除</a></td></tr>")
                    $tr.find("a").each(function(){
                        $(this).click(function(){
                            $(this).parents("tr").remove()
                        })
                    })
                    $("#mytable").append($tr)
                })
                
            })
        </script>
        <style type="text/css">
        </style>
    </head>
    <body>
        姓名 <input type="text" id="username" />邮箱 <input type="text" id="email" />电话 <input type="text" id="phone"/>
        <br/>
        <input type="button" value="提交" id="mybutton" /><hr/>
        <table border="1" width="400" id="mytable">
            <tr>
                <th>
                    姓名
                </th>
                <th>
                    邮箱
                </th>
                <th>
                    电话
                </th>
                <th>
                    删除操作
                </th>
            </tr>
        </table>
    </body>
</html>

案例一：全选全不选反选

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Untitled Document</title>
  <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.2.min.js"></script>
  <script type="text/javascript">
   $(function(){
    $("#checkAllcheckbox").click(function(){
     ischeck=$(this).attr("checked");
     //alert(ischeck)
     $("input[name='hobby']").each(function(){
      if(ischeck=="checked")
      $(this).attr("checked",true);
      else
      $(this).attr("checked",false);
     })
    })
    $("#checkAllBtn").click(function(){
     $("input[name='hobby']").attr("checked",true)
    })
    $("#checkAllNotBtn").click(function(){
     $("input[name='hobby']").attr("checked",false)
    })
    $("#checkOppsiteBtn").click(function(){
     $("input[name='hobby']").each(function(){
      $(this).attr("checked",!$(this).attr("checked"))
     })
    })
   })
  </script>
  <style type="text/css"></style>
 </head>
 <body>
  请选择您的爱好 ：<br>
  <input type="checkbox" id="checkAllcheckbox" /> 全选/全不选<br/>
  <input type="checkbox" name="hobby" value="足球"/>足球
  <input type="checkbox" name="hobby" value="篮球"/>篮球
  <input type="checkbox" name="hobby" value="游泳"/>游泳
  <input type="checkbox" name="hobby" value="唱歌"/>唱歌 <br/>
  <input type="button" value="全选" id="checkAllBtn"/>
  <input type="button" value="全不选" id="checkAllNotBtn" />
  <input type="button" value="反选"  id="checkOppsiteBtn"/>
 </body>
</html>

案例二：两个select 互相移动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Untitled Document</title>
  <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.2.min.js"></script>
  <script type="text/javascript">
   $(function(){   
    $("#selectToRight").click(function(){
     $("#select1>option:selected").each(function(){
      $("#select2").append($(this));
     });
    })
    $("#allToRight").click(function(){
     $("#select2").append($("#select1>option"))
    })
    $("#selectToLeft").click(function(){
     $("#select1").append($("#select2>option:selected"))
    })
    $("#allToLeft").click(function(){
     $("#select1").append($("#select2>option"))
    })
   })
  </script>
  <style type="text/css"></style>
 </head>
 <body>
  <select id="select1" multiple="multiple" size="20">
   <option>北京</option>
   <option>上海</option>
   <option>广州</option>
   <option>深圳</option>
   <option>石家庄</option>
   <option>济南</option>
   <option>太原</option>
  </select>
  <input type="button" value="--> 选中过去" id="selectToRight"/>
  <input type="button" value="==> 全过去" id="allToRight"/>
  <input type="button" value="<-- 选中回来" id="selectToLeft"/>
  <input type="button" value="<== 全回来" id="allToLeft"/>
  <select id="select2" multiple="multiple" size="20">
   <option>沈阳</option>
  </select>
 </body>
</html>

案例三： form 表单数据有效性校验 --------------- jquery validation
引入三个 js文件 jquery-1.3.2.js jquery.validate.js jquery.metadata.js
* class="{}" 必须依赖 jquery.metadata.js

1)、在form中通过class属性编写校验规则
2)、调用validate方法完成form 校验

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Untitled Document</title>
  <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="WEB-INF/lib/jquery.validate.js"></script>
  <script type="text/javascript" src="WEB-INF/lib/jquery.metadata.js"></script>
  <script type="text/javascript" src="WEB-INF/lib/message_cn.js"></script>
  <script type="text/javascript">
   $(function(){
    $("#userForm").validate();
   });
  </script>
 </head>
 <body>
  <form id="userForm" action="http://www.baidu.com">
   真实姓名 <input type="text" id="realname" class="required"/><br/>
   登录名 <input type="text" id="username" class="{required:true,rangelength:[5,8]}"/><br/>
   密码 <input type="password" id="password" class="{required:true,rangelength:[6,12]}"/><br/>
   重复密码 <input type="password" id="repassword" class="{required:true,rangelength:[6,12],equalTo:'#password'}"/><br/>
   性别 <input type="radio" value="男" name="gender" />男 <input type="radio" value="女" name="gender" />女<br/>
   身份证 <input type="text" id="personCardSN" /><br/>
   <input type="submit" value="提交" />
  </form>
 </body>
</html>

===============================================================================================================
第五部分 jQuery中事件机制

传统DOM模式，相同事件只能绑定一次，jQuery 允许同一个事件绑定多次

1、绑定事件
$("#mybutton").click(function(){alert(2)});
$("#mybutton").bind("click",function(){alert(3)});
解除绑定
$(“#mybutton”).unbind(“click”);

2、一次性事件 one(type, [data], fn)
触发事件 trigger(type, [data])

3、事件的切换
hover() 模拟光标悬停时间。当光标移动到元素上时，会触发指定的第一个函数，当光标移出这个元素时，会触发指定的第二个函数
toggle() 用于模拟鼠标连续单击事件。第一次单击元素，触发指定的第一个函数，当再一次单击同一个元素时，则触发指定的第二个函数，如果有更多个函数，则依次触发，直到最后一个

4、事件默认动作的阻止和传播阻止
event.stopPropagation(); 阻止传播
event.preventDefault(); 阻止默认动作

==============================================================================================================================
第六部分 jQuery开发Ajax程序

实现传统AJAX编程 ---- $.ajax(options) , 将服务器端响应内容封装到 XmlHttpRequest对象
* 在企业中通常是不采用 $.ajax 完成AJAX 开发（开发太复杂）

load(url, [data], [callback]) 把远程数据加载到被选的元素中
$.get(url, [data], [callback], [type]) 使用 HTTP GET 来加载数据
$.post(url, [data], [callback], [type]) 使用 HTTP POST 来加载数据

**** load get post 方法都是 $.ajax 方法封装，目的为了简化开发

1、load的使用
load()方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中
* 适用于 AJAX 返回内容是HTML 片段的情形

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="../jquery-1.8.2.min.js">
        </script>
        <script type="text/javascript">
         $(function(){
    $("span").hover(function(){
     $(this).css("background-color","yellow");
     category=$(this).text()
     $("#productinfo").load("/ajax03/searchproduct",{'category':category});
    },function(){
     $(this).css("background-color","");
    })
   })
        </script>
        <style type="text/css">
        </style>
    </head>
    <body>
        <h2>分类信息</h2>
        <span>数码产品</span>
        <span>家用电器</span>
        <span>化妆护肤</span>
        <hr/>
        <div id="productinfo">
        </div>
    </body>
</html>

2、get/post 的使用
如果获得的服务器端数据，进行操作，从中提取部分显示，不能使用load方法

无参数时，可以使用 $.get，携带参数时，可以使用 $.post

*** get/post 方法，从服务器端获取返回数据，会被传递 callback函数中，在回调函数中对返回数据进行处理

案例一：验证用户名是否存在，从服务器端返回 HTML代码片段

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>2.html</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        <script type="text/javascript" src="../jquery-1.8.2.min.js">
        </script>
        <script type="text/javascript">
            $(function(){
                $("#username").blur(function(){
                    $username = $(this).val();
                    $.post("/ajax03/checkusername",{'username':$username},function(date){
      $("#msg").html(date);
     });
                })
            });
        </script>
    </head>
    <body>
        <form>
            用户名 <input type="text" id="username" /><span id="msg"></span>
            <br/>
            密码 <input type="password" id="password" />
            <br/>
            <input type="submit" value="注册"/>
        </form>
    </body>
</html>

案例二：返回商品信息 json格式
* JSON格式字符串不能用 $包

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>3.html</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        <script type="text/javascript" src="../jquery-1.8.2.min.js">
        </script>
        <script type="text/javascript">
            $(function(){
                $("#viewbook").click(function(){
                    $.get("/ajax03/listbook", function(data){
                       var bookss = eval("(" + data + ")");
                        var buffer = "<table border='1' width='400'>";
                        for (var i = 0; i < bookss.length; i++) {
                            buffer += "<tr><td>" + bookss[i].name + "</td><td>" + bookss[i].price + "</td></tr>";
                        }
                        buffer += "</table>";
                        $table=$(buffer);
                        $("#showbooks").append($table)
                    })
                })
            })
        </script>
    </head>
    <body>
        <!--返回图书信息 --><a href="javascript:void(0);" id="viewbook">显示图书信息</a>
        <hr/>
        <div id="showbooks">
            还没有选择图书信息
        </div>
    </body>
</html>

案例三：从服务器端返回 xml

有时候需要获得form中所有元素的值，通过Ajax请求将元素值提交到服务器端 --------- 使用serialize() 序列化 form
* var xmlHpptReq=$.get("base01.jsp",$("#form1").serialize());
* 将form中所有元素转换为 key=value&key=value... 格式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>4.html</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        <script type="text/javascript" src="../jquery-1.8.2.min.js">
        </script>
        <script type="text/javascript">
         var $data;
   $(function(){
    $.get("city.xml",function(data){
     $data=$(data);
     $data.find("province").each(function(){
      $option="<option>"+$(this).attr("name")+"</option>"
      $("#province").append($option);
     });
    })
    $("#province").change(function(){
        var province = $("#province").val();
     $("#city").empty();
     var $option=$("<option>请选择城市</option>");
     $("#city").append($option);
     $("province[name='"+province+"'] > city", $data[0]).each(function(){
      $option2=$("<option>"+$(this).text()+"</option>");
      $("#city").append($option2);
     })
    })
   })        
        </script>
    </head>
    <body>
        <select id="province">
            <option>请选择省份</option>
        </select>
        <select id="city">
            <option>请选择城市</option>
        </select>
    </body>
</html>

=======================================================================
AJAX 跨域问题及JQuery提供解决方案

例如：访问站点 www.itcast.cn，试图通过一个JS 发起AJAX请求去加载 www.baidu.com下数据 -------- www.itcast.cn 域名下JS 想通过AJAX请求去访问该域名之外的资源
* 跨域存在安全问题

通过 load、get、post 函数是无法实现跨域 ------ 405 Not Allowed

getScript 和 getJSON 实现跨域

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
例子中 http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=? 最后存在jsoncallback=? 在jquery 发起请求时，将回调函数function 替换？ ----- 该方式称为 jsonp 调用访问

ajax03 jquery jquery_ajax

猜你喜欢