jQuery_ 字节宝

jQuery

一、基本概念
- 1. 导入
- 2. 选择器
- 3. jQuery 事件
二、jQuery HTML
- 1. jQuery 获取
- 2. jQuery设置内容和属性
- 3. jQuery 添加
- 4. jQuery 删除
- 5. 获取并设置 CSS 类
- 6. 尺寸
三、 jQuery 遍历
- 1. 祖先（向上遍历）
- 2. 后代（向下遍历）
- 3. 同胞（水平遍历）
- 4. 过滤
四、jQuery AJAX
- 0. 原理
- 1. 加载
- 2. Get/Post
- 3. 服务器响应
- 4. onreadystatechange 事件
- 5. 关于callback
- 6. AJAX & ASP/PHP/DB/XML

一、基本概念

1. 导入

代码语言：javascript复制

// Google CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

// Microsoft CDN
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

// Download file and add to src
// https://jquery.com/download/，其中Production version为生产版本，Development version为测试和开发版本。

基本语法 $(selector).action()
文档就绪函数所有 jQuery 函数位于一个 document ready 函数中，为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

代码语言：javascript复制

$(document).ready(function(){
--- jQuery functions go here ----
});

2. 选择器

（1）元素选择器

代码语言：javascript复制

jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
$("div#intro .head") 选取id="intro" 的 <div> 元素中的所有 class="head" 的元素

（2）属性选择器

代码语言：javascript复制

jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

（3）CSS选择器

代码语言：javascript复制

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
例如：$("p").css("background-color","red");

3. jQuery 事件

通常会把 jQuery代码放到<head>部分的事件处理方法中。

当Jquery名称冲突时，可以利用var jq = jQuery.noConflict()来使用jq代替表示Jquery。

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件（被选中）
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

隐藏和显示

代码语言：javascript复制

$(selector).hide();
$(selector).hide(speed,callback);

$(selector).show();
$(selector).show(speed,callback);

// 切换hide()和show()方法
$(selector).toggle();
$(selector).toggle(speed,callback);

待添加

二、jQuery HTML

1. jQuery 获取

DOM：Document Object Model（文档对象模型）

获得内容 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值

代码语言：javascript复制

$("#btn1").click(function(){
  alert("Text: "   $("#test").text());
});

获取属性 attr() 方法用于获取属性值。

代码语言：javascript复制

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

2. jQuery设置内容和属性

设置内容 text()、html() 以及 val()

代码语言：javascript复制

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

text()、html() 以及 val() 的回调函数。回调函数由两个参数：被选元素列表中当前元素的下标i，以及原始（旧的）值origText，返回return函数新值。

代码语言：javascript复制

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: "   origText   " New text: Hello world!
    (index: "   i   ")";
  });
});

设置属性 attr() 方法也用于设置/改变属性值，可以同时设置多个属性。

代码语言：javascript复制

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

attr() 的回调函数。参数跟返回值同上。

代码语言：javascript复制

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue   "/jquery";
  });
});

3. jQuery 添加

代码语言：javascript复制

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

通用的格式，以下以append()为例，只是显示的效果不同。

代码语言：javascript复制

// 增加文本
$("p").append("<b>Some appended text.</b>");

// 增加表单
$("p").append("<li>Appended item</li>");

// 增加多个
var txt1 = ...; var txt2 = ...; var txt3 = ...;
$("body").append(txt1,txt2,txt3);

4. jQuery 删除

代码语言：javascript复制

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除“子元素”

用法如下：

代码语言：javascript复制

$("#div1").remove();

// 增加删除中的过滤，删除 class="italic" 的所有 <p> 元素：
$("p").remove(".italic");

5. 获取并设置 CSS 类

代码语言：javascript复制

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

前三者的用法如下，其中blue和important为写好的CSS样式。

代码语言：javascript复制

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

css() 方法设置或返回被选元素的一个或多个样式属性。

代码语言：javascript复制

// 返回CSS属性
$("p").css("background-color");

// 设置CSS属性
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});

6. 尺寸

代码语言：javascript复制

width() - 设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() - 设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() - 返回元素的宽度（包括内边距）
innerHeight() - 返回元素的高度（包括内边距）。
outerWidth() - 返回元素的宽度（包括内边距和边框）。
outerHeight() - 返回元素的高度（包括内边距和边框）。

用法如下：

代码语言：javascript复制

// 获取宽度和高度
var txt="";
txt ="Width of div: "   $("#div1").width()   "</br>";
txt ="Height of div: "   $("#div1").height();
$("#div1").html(txt);

// 设置宽度和高度
$("button").click(function(){
  $("#div1").width(500).height(500);
});

三、 jQuery 遍历

通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。可通过$("h2").siblings().css({"color":"red","border":"2px solid red"});和.css("background-color","yellow")来高亮显示DOM。

1. 祖先（向上遍历）

代码语言：javascript复制

parent() - 返回被选元素的直接父元素。
parents() - 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil() - 返回介于两个给定元素之间的所有祖先元素。

用法如下：

代码语言：javascript复制

$(document).ready(function(){
  $("span").parents();
  $("span").parents("ul"); // 可以指定祖先符合的条件
});
// parentsUntil()用法
$(document).ready(function(){
  $("span").parentsUntil("div");
});

2. 后代（向下遍历）

代码语言：javascript复制

children() - 返回被选元素的所有直接子元素。
find() - 返回被选元素的后代元素，一路向下直到最后一个后代。

用法如下：

代码语言：javascript复制

$(document).ready(function(){
  $("div").children();
  $("div").children("p.1");
});

// 返回属于 <div> 后代的所有 <span> 元素：
$(document).ready(function(){
  $("div").find("span");
  $("div").find("*");  // 返回所有后代，注意是“*”
});

3. 同胞（水平遍历）

代码语言：javascript复制

siblings() - 返回被选元素的所有同胞元素。
next() - 返回被选元素的下一个同胞元素。
nextAll() - 返回被选元素的所有跟随的同胞元素。
nextUntil() - 返回介于两个给定参数之间的所有跟随的同胞元素。

// 以下三者，与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
prev()
prevAll()
prevUntil()

用法如下：

代码语言：javascript复制

$(document).ready(function(){
  $("h2").nextAll();
  $("h2").nextUntil("h6");
});

4. 过滤

代码语言：javascript复制

first() - 返回被选元素的首个元素。
last() - 返回被选元素的最后一个元素。
eq() - 返回被选元素中带有指定索引号的元素。
filter() - 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() - 与filter()相反。

用法如下：

代码语言：javascript复制

$(document).ready(function(){
  $("div p").first();  // 选择第一个<div><p></p></div>标签元素
  $("p").eq(2);  // 选择第二个p标签元素
});

$(document).ready(function(){
  $("p").filter(".intro");  // 选择所有class="intro" 的元素
});

四、jQuery AJAX

AJAX：异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

0. 原理

XMLHttpRequest 用于在后台与服务器交换数据（老版本使用 ActiveX 对象）。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

方法	描述
open(method, url, async)	规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步，使用Ajax时必须）或 false（同步）
send(string)	将请求发送到服务器。string：仅用于 POST 请求

不同版本HTML

代码语言：javascript复制

var xmlhttp;
if (window.XMLHttpRequest) {
	// code for IE7 , Firefox, Chrome, Opera, Safari
  	xmlhttp = new XMLHttpRequest();
} else {
	// code for IE6, IE5
  	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.open("GET", url, ture);
xmlhttp.send();

以下情况使用POST：

代码语言：javascript复制

1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可

避免得到缓存结果：

代码语言：javascript复制

xmlhttp.open("GET", "{url}?t="   Math.random(), true);
xmlhttp.send();

需要像HTML表单那样POST数据： setRequestHeader()

代码语言：javascript复制

// setRequestHeader(header,value)：向请求添加 HTTP 头，header: 规定头的名称，value: 规定头的值
xmlhttp.open("POST", "{url}", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();

Async不同情况的逻辑函数位置： onreadystatechange()

代码语言：javascript复制

// Async = true
// 规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

// Async = false
// 不要编写 onreadystatechange 函数，把代码放到 send() 语句后面即可
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

1. 加载

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

代码语言：javascript复制

// 必需的，URL，参数规定您希望加载的 URL
// 可选的，data，参数规定与请求一同发送的查询字符串键/值对集合
// 可选的，callback()，参数是load()方法完成后所执行的函数名称
//                responseTxt - 包含调用成功时的结果内容
//                statusTXT - 包含调用的状态
//                xhr - 包含XMLHttpRequest对象
$(selector).load(URL, data, callback());

2. Get/Post

get() 和 post() 方法用于通过 HTTP GET（从指定的资源请求数据，注意缓存数据）或 POST（向指定的资源提交要处理的数据）请求从服务器请求数据。

代码语言：javascript复制

// 必需的，URL，参数规定您希望请求的 URL
// 可选的，callback()，参数是请求成功后所执行的函数名
//                 data - 存有被请求页面的内容
//                 status - 存有请求的状态
$.get(URL, function(data, status){
	// TODO...
});


// 必需的，URL，参数规定您希望请求的 URL
// 可选的，data，参数规定连同请求发送的数据
// 可选的，callback()，参数是请求成功后所执行的函数
$.post(URL, data, status){
	// TODO...
});

3. 服务器响应

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

代码语言：javascript复制

xmlhttp.onreadystatechange=function() {
  	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
	    xmlDoc=xmlhttp.responseXML;
	    // 直接显示XML内容
    	document.getElementById("myDiv2").innerText=(new XMLSerializer()).serializeToString(xmlDoc);
    	// 显示XML中全部title标签的内容
    	txt="";
    	x=xmlDoc.getElementsByTagName("title");
    	for (i=0;i<x.length;i  ) {
      		txt=txt   x[i].childNodes[0].nodeValue   "<br />";
      	}
    	document.getElementById("myDiv").innerHTML=txt;
    	}
  	}
	xmlhttp.open("GET","/example/xmle/books.xml",true);
	xmlhttp.send();
}

4. onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState （XMLHttpRequest 的状态，0~4）改变时，就会触发 onreadystatechange 事件。

代码语言：javascript复制

readyState 中存储的 XMLHttpRequest 的状态：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

当 readyState 等于 4 且状态为 200 时，表示响应已就绪。

5. 关于callback

如果存在多个 AJAX 任务，那么应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

代码语言：javascript复制

function myFunction() {
	loadXMLDoc("ajax_info.txt",function() {
	  	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
	   		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	    }
  	});
}

onkeyup 事件会在键盘按键被松开时发生。 onchange事件会在值发生改变时发生。支持 input/select/textarea。

6. AJAX & ASP/PHP/DB/XML

通过标签绑定事件，绑定函数在服务器响应就绪时调用函数，发送HTTP请求，访问asp/php文件，文件中对数据库进行查询。 PHP 和 AJAX MySQL 数据库实例

代码语言：javascript复制

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
    for (i=0;i<x.length;i  )
      {
      txt=txt   "<tr>";
      // 第一列：Title
      xx=x[i].getElementsByTagName("TITLE");
        {
        try
          {
          txt=txt   "<td>"   xx[0].firstChild.nodeValue   "</td>";
          }
        catch (er)
          {
          txt=txt   "<td> </td>";
          }
        }
        // 第二列：Artist
    xx=x[i].getElementsByTagName("ARTIST");
      {
        try
          {
          txt=txt   "<td>"   xx[0].firstChild.nodeValue   "</td>";
          }
        catch (er)
          {
          txt=txt   "<td> </td>";
          }
        }
      txt=txt   "</tr>";
      }
    txt=txt   "</table>";
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
  }

测试

jquery ajax function post selector

0 人点赞