|
1. jQuery 对HTML的设置与捕获
?? ?jQuery 中非常重要的部分，就是操作 DOM 的能力。
?? ?jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
?? ?1.1 Html()
?? ??? ?html() - 设置或返回所选元素的内容（包括 HTML 标记）。
?? ??? ?$("#btn2").click(function(){
?? ??? ? alert("HTML: " + $("#test").html());
?? ??? ?});
?? ??? ?$("#btn2").click(function(){
?? ??? ?$("#test2").html("<b>Hello world!</b>");
?? ??? ?});
?? ?1.2 text()
?? ??? ?text() - 设置或返回所选元素的文本内容
?? ??? ?$("#btn1").click(function(){
?? ??? ?alert("Text: " + $("#test").text());
?? ??? ?});
?? ??? ?$("#btn1").click(function(){
?? ??? ?$("#test1").text("Hello world!");
?? ??? ?});
?? ?1.3 val()
?? ??? ?val() - 设置或返回表单字段的值
?? ??? ?$("#btn1").click(function(){
?? ??? ?alert("值为: " + $("#test").val());
?? ??? ?});
?? ??? ?$("#btn3").click(function(){
?? ??? ?$("#test3").val("RUNOOB");
?? ??? ?});
?? ?1.4 text()、html() 以及 val() 的回调函数
?? ??? ?上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
?? ??? ?$("#btn1").click(function(){
?? ??? ?$("#test1").text(function(i,origText){
?? ??? ?return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
?? ??? ?});
?? ??? ?});
?? ?1.5 attr()、prop()
?? ??? ?$("button").click(function(){ alert($("#runoob").attr("href")); });
?? ??? ?$("button").click(function(){ $("#runoob").attr("href","http://www.runoob.com/jquery"); });
?? ??? ?具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()；.attr不仅可以返回（设置）元素的原生属性，还可以返回（设置）自定义属性。
2. jQuery 对HTML的页面尺寸操作
?? ?2.1 width() 和 height() 方法
?? ??? ?width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
?? ??? ?height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
?? ??? ?$("button").click(function(){
?? ??? ?"div 的宽度是: " + $("#div1").width() + "</br>";
?? ??? ??? ?"div 的高度是: " + $("#div1").height(20);
?? ??? ?});
?? ?2.2 innerWidth() 和 innerHeight() 方法
?? ??? ?innerWidth() 方法返回元素的宽度（包括内边距）。
?? ??? ?innerHeight() 方法返回元素的高度（包括内边距）。?? ?
?? ??? ?$("button").click(function(){
?? ??? ?"div 宽度，包含内边距: " + $("#div1").innerWidth();
?? ??? ?"div 高度，包含内边距: " + $("#div1").innerHeight();
?? ??? ?});
?? ?2.3 outerWidth() 和 outerHeight() 方法
?? ??? ?outerWidth() 方法返回元素的宽度（包括内边距和边框）。
?? ??? ?outerHeight() 方法返回元素的高度（包括内边距和边框）。
?? ??? ?$("button").click(function(){
?? ??? ?txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth()
?? ??? ??? ??? ?txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
?? ??? ??? ?});
?? ?2.4 scrollTop() 和 scrollLeft() 方法
?? ??? ?scrollTop() 方法设置或者返回滚动条被卷去的元素的高度
?? ??? ?scrollLeft() 方法设置或者返回滚动条被卷去的元素的宽度
?? ??? ?$("button").click(function(){ alert($("div").scrollTop()); });
3. jQuery添加元素和删除元素
?? ?3.1 append()方法
?? ??? ?append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）? ?
?? ??? ??? ?$("ol").append("<li>追加列表项</li>");
?? ?3.2 prepend()方法
?? ??? ? prepend() 方法在被选元素的开头插入内容。
?? ??? ??? ?$("ol").prepend("<li>追加列表项</li>");
?? ?3.3 after() 和 before() 方法
?? ??? ?jQuery after() 方法在被选元素之后插入内容。
?? ??? ?jQuery before() 方法在被选元素之前插入内容。
?? ??? ??? ?$("img").before("<b>之前</b>");
?? ??? ??? ?$("img").after("<i>之后</i>");
?? ?3.4 删除元素/内容
?? ??? ?remove() - 删除被选元素（及其子元素）
?? ??? ?empty() - 从被选元素中删除子元素
4.jquery插件的认识
?? ?4.1 插件
?? ?jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。
?? ?jquery有着丰富的插件，使用这些插件能给jquery提供一些额外的功能。
?? ?4.2 拖动
?? ?允许鼠标拖动元素，在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。
?? ? $(function() {
?? ??? ?$( "#draggable" ).draggable();
?? ?? });
5. Ajax基础
?? ?5.1 Ajax 语法
?? ??? ?1. XHR创建对象
?? ??? ??? ?var xmlhttp;
?? ??? ??? ?if (window.XMLHttpRequest) {
?? ??? ??? ?// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
?? ??? ??? ? xmlhttp=new XMLHttpRequest();
?? ??? ??? ?} else {
?? ??? ??? ??? ?// IE6, IE5 浏览器执行代码
?? ??? ??? ??? ?xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
?? ??? ??? ?}
?? ??? ?2. 向服务器发送请求
?? ??? ??? ?如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
?? ??? ??? ?xmlhttp.open("GET","ajax_info.txt",true);
?? ??? ??? ?xmlhttp.send();
?? ??? ??? ?open(method,url,async)?? ?规定请求的类型、URL 以及是否异步处理请求。
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?method：请求的类型；GET 或 POST
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?url：文件在服务器上的位置
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?async：true（异步）或 false（同步）
?? ??? ??? ?send(string)?? ??? ??? ??? ?将请求发送到服务器。
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?string：仅用于 POST 请求
?? ??? ??? ?GET 还是 POST？
?? ??? ??? ??? ?与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
?? ??? ??? ??? ?然而，在以下情况中，请使用 POST 请求：
?? ??? ??? ??? ?（1）、无法使用缓存文件（更新服务器上的文件或数据库）
?? ??? ??? ??? ?（2）、向服务器发送大量数据（POST 没有数据量限制）
?? ??? ??? ??? ?（3）、发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
?? ??? ?3. 服务器响应
?? ??? ??? ?如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
?? ??? ??? ??? ?responseText：获得字符串形式的响应数据。
?? ??? ??? ??? ?responseXML：获得 XML 形式的响应数据。
?? ??? ??? ?document.getElementById("myDiv").innerHTML=xmlhttp.responseText
?? ??? ?4. Ajax的onreadystatechange 事件
?? ??? ??? ?什么是onreadystatechange事件
?? ??? ??? ??? ?1、当请求被发送到服务器时，我们需要执行一些基于响应的任务。。
?? ??? ??? ??? ?2、每当 readyState 改变时，就会触发 onreadystatechange 事件。
?? ??? ??? ??? ?3、readyState 属性存有 XMLHttpRequest 的状态信息。
?? ??? ??? ?onreadystatechange?? ?存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
?? ??? ??? ?Xmlhttp.readyState?? ?存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
?? ??? ??? ???? ?0: 请求未初始化
?? ??? ??? ???? ?1: 服务器连接已建立
?? ??? ??? ???? ?2: 请求已接收
?? ??? ??? ???? ?3: 请求处理中
?? ??? ??? ???? ?4: 请求已完成，且响应已就绪
?? ??? ??? ?Xmlhttp.status?? ?200: "OK"
?? ??? ??? ?404: 未找到页面
6. JQuery Ajax?? ?
?? ?1. jQuery $.get() 方法
?? ??? ?$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
?? ??? ?GET 基本上用于从服务器获得（取回）数据。
?? ??? ?$("button").click(function(){
?? ??? ? $.get("demo_test.php",function(data,status){
?? ??? ??? ?alert("数据: " + data + "\n状态: " + status);
?? ??? ?});
?? ??? ?})
?? ?2.? jQuery $.post() 方法
?? ??? ?$.post() 方法通过 HTTP POST 请求向服务器提交数据。
?? ??? ?POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
?? ??? ?$("button").click(function(){
?? ??? ?$.post("/try/ajax/demo_test_post.php", { name:"菜鸟教程", url:"http://www.runoob.com" }, function(data,status){
?? ??? ??? ?? alert("数据: \n" + data + "\n状态: " + status);
?? ??? ??? ? });
?? ??? ?});
?? ?3. $.ajax
?? ??? ?ajax() 方法用于执行 AJAX（异步 HTTP）请求。
?? ??? ?所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
?? ??? ?使用 AJAX 请求改变 <div> 元素的文本：
?? ??? ?$("button").click(function(){
?? ??? ?$.ajax({url:"demo_test.txt",success:function(result){
?? ??? ?$("#div1").html(result);
?? ??? ?}});
?? ??? ?});+
7. JSON
?? ?1.什么是JSON
?? ??? ?JSON: JavaScript Object Notation(JavaScript 对象表示法)
?? ??? ?JSON 是存储和交换文本信息的语法。类似 XML。
?? ??? ?JSON 比 XML 更小、更快，更易解析。
?? ??? ?JSON 是轻量级的文本数据交换格式
?? ?<h2>JavaScript 创建 JSON 对象</h2>
?? ?<p> 网站名称: <span id="jname"></span><br />
?? ?网站地址: <span id="jurl"></span><br />
?? ?网站 slogan: <span id="jslogan"></span><br />
?? ?</p> <script>
?? ?var JSONObject= {
?? ?"name":"菜鸟教程",
?? ?"url":"www.runoob.com",
?? ?"slogan":"学的不仅是技术，更是梦想！"
?? ? };
?? ?document.getElementById("jname").innerHTML=JSONObject.name
?? ?document.getElementById("jurl").innerHTML=JSONObject.url
?? ?document.getElementById("jslogan").innerHTML=JSONObject.slogan
?? ?2. JSON语法
?? ??? ?JSON.parse()
?? ??? ?JSON 通常用于与服务端交换数据。
?? ??? ?在接收服务器数据时一般是字符串。
?? ??? ?我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
?? ??? ?JSON.stringify()
?? ??? ?在向服务器发送数据时一般是字符串。
?? ??? ?我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
?? ??? ??? ????
|