一、 获取想要的元素的格式
注意每条语句都需要”;”
$(“p”).hide(); 获取HTML元素，并隐藏
$(“.class”).hide();获取class=”class”的元素，并隐藏
$(“#id”).hide();获取id=”id”的元素，隐藏
$(this).hide();获取该元素，比如$(“botton”).click(function(){$(this).hide();});隐藏了按钮
二、 jq是解释型语言还是编译型语言？
解释型语言就是在程序运行时，每一次都要通过解释程序（实际上IE也是）把它们解释成为计算机可以识别的二进制语言，asp，php，VbScript等等。而编译型语言则是指程序一次性编译后直接生成二进制可执行文件，则在下次运行时便可直接执行，如asp.net，Ｃ，Ｃ++等等。两者最大的区别是解释型语言在每一次执行时，都要经过解释程序，会额外消耗CPU和内存的。解释语言又分为两种，即客户端脚本语言和服务器端语言，两者之间的区别主要是客户端脚本语言；就是该语言是在客户端运行的，也就是在我们上网的电脑上运行的，如javaScript,VBScript等；而服务器语言则运行在服务器端，即运行在放网站的服务器上，如asp,php,jsp等等。要注意的是，asp与asp.net两者有着本质的区别，asp.net为编译型语言，而asp为解释型语言。
三、 $(“div#intro.head”)选取哪个元素？
Id=”intro”的首个div的class=”head”的所有元素
四、 $(“div.intro”)能够选取的元素是？
Class=”intro”的所有div元素
五、 jquery包括以下特性
1. HTML元素获取
2. HTML元素操作
3. CSS操作
4. HTML事件函数
5. javascrip特效与动画
6. HTML DOM遍历和修改
7. AJAX
8. Utilities
六、 引用jquery，<script>标签应该在<head>里
1. 下载jquery库
<head>
<scriptsrc=”jquery.js”/>
</head>
2. 如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。
谷歌和微软的服务器都存有jQuery 。
//谷歌
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
//微软
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>
七、 文档就绪函数$(document).ready(function(){});
外层是<scripttype=”text/javascript”><script>
$(document).ready(function(){
--- jQueryfunctions go here ----
});
这是防止在文件完全加载之前就运行jquery代码
八、 jQuery选择器
1. jQuery元素选择器，实际是通过CSS选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p")选取 <p> 元素。
$("p.intro")选取所有 class="intro" 的 <p> 元素。
$("p#demo")选取所有 id="demo" 的 <p> 元素。
2. jQuery属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$(“[href=’#’]”)选取属性href=‘#’的元素
$("[href='#']")选取所有带有 href 值等于"#" 的元素。
$("[href!='#']")选取所有带有 href 值不等于"#" 的元素。
$("[href$='.jpg']")选取所有 href 值以".jpg" 结尾的元素。
3. jQueryCSS选择器
jQuery CSS 选择器可用于改变HTML 元素的 CSS 属性。
$("p").css("background-color","red");
九、 jQuery命名冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
十、 jQuery效果
1. 隐藏和显示
Speed和callback可以为空
1.1. hide(speed,callback); speed:”fast”;”slow”;xxxms前两个要双引号fast,slow
2.1. show(speed,callback);
3.1. toggle(speed,callback);
2. 淡入淡出
1.1. $(selector).fadeout(speed,callback)淡出
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法：
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
2.1. fadeIn()
3.1. fadeToggle()
4.1. fadeTo(speed,opacity,callback)
3. 滑动
1.1. slideDown();
2.1. slideUp()
3.1. slideToggle()
4. 动画
1.1. $(selector).animate({params},speed,callback);//向paramsCSS属性渐变的一个过程
实例
$("button").click(function(){
$("div").animate({left:'250px'});//大括号里写CSS样式，单引号（JSP基本都是单引号），CSS样式用（逗号）隔开；
});
2.1. 操作多个样式
实例
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
3.1. 使用队列功能，动画队列排序响应
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
实例 1
隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
5. stop(stopAll,goToEnd)
"开始" 按钮会启动动画。
"停止" 按钮会停止当前活动的动画，但允许已排队的动画向前执行。Stop()
"停止所有" 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。(画面停滞在当前动画),stop(true)
"停止但要完成" 会立即完成当前活动的动画，然后停下来。（画面立即停滞在最后那个动画）stop(true,true)
“Stop(false,true)”会立刻停止当前活动的动画，然后执行下一个动画队列
6. Callback
即是之前很多函数里面的callback,用的时候比如function(){}=callback;即是等待该函数执行完毕再执行callback的方法
当动画 100% 完成后，即调用 Callback 函数。
典型的语法：
$(selector).hide(speed,callback)
callback 参数是一个在 hide 操作完成后被执行的函数。
错误（没有 callback）
$("p").hide(1000);
alert("The paragraph is now hidden");
正确（有 callback）
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
7. Chaining
JQuery允许我们在同一条语句上多个jquery方法（在相同的元素上）
下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
十一、 Jquery HTML
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
提示：DOM = Document ObjectModel（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”
1. jquery获取设置DOM
1. text(“xxx”) 设置或text()返回所选元素的文本内容（不包括标签），注意是所选元素
2. html(“xxx”) 设置或html()返回所选元素的内容，包括该元素里面的HTML标记
3. val(“xxx”) 设置或val()返回所选表单的字段的值
注意1：用text(“xxx”)和html(“xxx”)设置内容，如果内容含有新的标签，如<p></p>，则需要用html(“xxx”)来设置，若用text(“xxx”)，则里面的标签会带有转换字符显示在html页面。
注意2：用text(“xxx”)和html(“xxx”)设置内容都会把该元素所有内容包括标签换成xxx；
4. attr(“href”) 获取属性值
attr(“href”,”xxx”)设置属性值
下面的例子演示如何改变（设置）链接中 href 属性的值：
实例
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性：
实例
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
1. 添加元素
添加新的 HTML 内容，注意这是可以添加HTML的（标签）
我们将学习用于添加新内容的四个 jQuery 方法：
· append() - 在被选元素的结尾插入内容 被选标签里面的结尾，如<p><li>
· prepend() - 在被选元素的开头插入内容 被选标签里面的前面，如<p><li>
· after() - 在被选元素之后插入内容 被选标签外面的结尾，如<img>（不能在标签里面写内容）
· before() - 在被选元素之前插入内容 被选标签外面的前面，如<img>（不能在标签里面写内容）
function afterText()
{
var txt1="<b>I </b>"; // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love "); //通过 jQuery 创建新元素，在$(“xxx”)中创建
var txt3=document.createElement("p"); //通过 DOM 创建新元素，document.createElement(“x”)x是标签名，如p即<p></p>,b即<b></p>
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素
}
2. 删除元素
1. 删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
· remove() - 删除被选元素（及其子元素）
· empty() - 从被选元素中删除子元素
顾名思义，很简单的两个方法
2. 过滤被删除的元素
jQueryremove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素：
实例
$("p").remove(".italic");
3. 获取并设置CSS类
注意：$(“p,div,h1”)如此可选多个元素
1. addClass() 向可选元素添加一个或者多个addClass(“xxx yyy”) css的class样式
2. removeClass() 向可选元素移除一个或者多个类removeClass(“xxx yyy”)(空格隔开)
3. toggleClass() 向可选元素切换该样式
4. css(“propername”)
4.1. 返回被选元素的一个样式属性。（匹配的首个元素）
下面的例子将返回首个匹配元素的 background-color 值：
实例
$("p").css("background-color");
5.1. 设置一个CSS属性（所有匹配元素）
如需设置指定的 CSS 属性，请使用如下语法：
css("propertyname","value");
下面的例子将为所有匹配元素设置 background-color 值：
实例
$("p").css("background-color","yellow");
6.1. 设置多个 CSS 属性（所有匹配元素）
如需设置多个 CSS 属性，请使用如下语法：
css({"propertyname":"value","propertyname":"value",...});
下面的例子将为所有匹配元素设置 background-color 和 font-size：
实例
$("p").css({"background-color":"yellow","font-size":"200%"});
4. jQuery尺寸
jQuery 提供多个处理尺寸的重要方法：
· width()//不包括内外边距和边框宽度
· height()
· innerWidth()//包括内边距，但不包括外边距和边框宽度
· innerHeight()
· outerWidth()//包括内边距，边框宽度，不包括外边距
· outerHeight()
· outerWidth(true)//包括内外边距和边框宽度
· outerHeight(true)
下面的例子设置指定的 <div> 元素的宽度和高度：
实例
$("button").click(function(){
$("#div1").width(500).height(500); });
jQuery- 更多的 width() 和 height()
下面的例子返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：
实例
$("button").click(function(){
var txt="";
txt+="Document width/height: " + $(document).width();
txt+="x" + $(document).height() + "\n";
txt+="Window width/height: " + $(window).width();
txt+="x" + $(window).height();
alert(txt);
});
十二、 jQuery遍历
1. jQuery遍历
遍历父节点，子节点获取元素
十三、 AJAX（Asynchronousjavascript and xml）异步javascript 和 xml
1. XHR创建对象（XMLHttpRequest）
XMLHttpRequest是AJAX的基础
Var xmlhttp=new XMLHttpRequest();//当你是用ie7+,fireFOX,chorme,opera,safari浏览器时
否则，如果你使用ie6,ie5,则需要使用ActiveXObject
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
详细代码:
varxmlhttp;
if(window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera,Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
2. XHR请求
XMLHttpRequest 对象用于和服务器交换数据。
发送请求到服务器，需要用到open(),send()
1. GET请求
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
| 方法 | 描述 |
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。 · method：请求的类型；GET 或 POST · url：文件在服务器上的位置 · async：true（异步）或 false（同步） |
| send(string) | 将请求发送到服务器。 · string：仅用于 POST 请求 |
与post相比，get更简单也更快，然而在以下情况请用post
1. 不想用缓存时（更新服务器上的文件和数据）
2. 向服务器发送大量数据时（post没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
一个简单的 GET 请求：
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
在上面的例子中，您可能得到的是缓存的结果。
为了避免这种情况，请向 URL 添加一个唯一的 ID：
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();
如果您希望通过 GET 方法发送信息，请向 URL 添加信息：
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
2. POST请求
一个简单 POST 请求：
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
3. XHR响应
服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML属性。
| 属性 | 描述 |
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得 XML 形式的响应数据。 |
responseText属性
如果来自服务器的响应并非 XML，请使用responseText 属性。
responseText属性返回字符串形式的响应，因此您可以这样使用：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML属性
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：
请求 books.xml 文件，并解析响应：
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
4. onreadystatechange事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 · 0: 请求未初始化 · 1: 服务器连接已建立 · 2: 请求已接收 · 3: 请求处理中 · 4: 请求已完成，且响应已就绪 |
| status | 200: "OK" 404: 未找到页面 |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
