博客

jQuery

  • Post author:
  • Post category:其他


jQuery



一、基本概念



1. 导入

// 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 代码。 
$(document).ready(function(){
--- jQuery functions go here ----
});



2. 选择器

（1）元素选择器 

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

（2）属性选择器 

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

（3）CSS选择器 

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) 触发或将函数绑定到被选元素的鼠标悬停事件
  • 隐藏和显示 
$(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() – 设置或返回表单字段的值 
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
  • 获取属性

    attr() 方法用于获取属性值。 
$("button").click(function(){
  alert($("#w3s").attr("href"));
});



2. jQuery设置内容和属性

  • 设置内容

    text()、html() 以及 val() 
$("#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

函数新值。 

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

    attr() 方法也用于设置/改变属性值，可以同时设置多个属性。 
$("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() 的回调函数。参数跟返回值同上。 

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



3. jQuery 添加

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

通用的格式，以下以

append()

为例，只是显示的效果不同。 

// 增加文本
$("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 删除

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

用法如下： 

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

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



5. 获取并设置 CSS 类

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

前三者的用法如下，其中

blue

和

important

为写好的CSS样式。 

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

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

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

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



6. 尺寸

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

用法如下： 

// 获取宽度和高度
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. 祖先（向上遍历）

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

用法如下： 

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



2. 后代（向下遍历）

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

用法如下： 

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

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



3. 同胞（水平遍历）

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

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

用法如下： 

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



4. 过滤

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

用法如下： 

$(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 
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： 
1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可
  • 避免得到缓存结果： 
xmlhttp.open("GET", "{url}?t=" + Math.random(), true);
xmlhttp.send();
  • 需要像HTML表单那样POST数据：


    setRequestHeader()
     
// setRequestHeader(header,value)：向请求添加 HTTP 头，header: 规定头的名称，value: 规定头的值
xmlhttp.open("POST", "{url}", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();
  • Async不同情况的逻辑函数位置：


    onreadystatechange()
     
// 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() 方法从服务器加载数据，并把返回的数据放入被选元素中。 

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



2. Get/Post

get() 和 post() 方法用于通过 HTTP GET（从指定的资源请求数据，

注意缓存数据

）或 POST（向指定的资源提交要处理的数据）请求从服务器请求数据。 

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


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



3. 服务器响应

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。 
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 事件。 

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

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



5. 关于callback

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


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 数据库实例
 

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;
    }
  }


测试


版权声明：本文为Papaya_shun原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。