一. 处理HTML内容
1. 写入HTML输出:
2.对事件做出反应:
3. 改变HTML内容:
JavaScript 能改变 HTML 元素的内容。
4. 改变HTML图像:
点击灯泡来点亮或熄灭这盏灯
5. 改变HTML元素的样式:
x = document.getElementById("demo");
x.style.color = "#ff0000";
通常情况下,我们会把js函数放入
部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
Click to show
6. 写到文档输出
我的第一张网页
但是要注意的是,document.write()
仅仅向文档输出写内容。如果在文档已完成加载后执行该函数,则会覆盖整个HTML页面。
My First Web Page
My First Paragraph.
7. 捕获异常:
8. 验证表单:
二.JavaScript + DOM
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML的DOM模型被构造为对象的树。
通过DOM,JavaScript获得了足够的能力来创建动态的HTML。
- JavaScript能够改变页面中的所有HTML元素
- JavaScript能够改变页面中的所有HTML属性
- JavaScript能够改变页面中的所有CSS样式
- JavaScript能够对页面中的所有事件作出反应
1. 通过id查找HTML元素
var x = document.getElementById("intro");
2. 通过标签名查找HTML元素
查找id="main"的所有
元素:
var x = document.getElementById("main");
var y = x.getElementByTag("p");
3. 改变HTML内容
document.getElementById("id").innerHTML = "New Text";
4. 改变HTML属性
document.getElementById("image").src = "newImage.jpg";
5. 改变HTML样式
document.getElementById("id").style.color = "blue";
文本
也可以通过JavaScript来分配onclick事件
6. onload和onunload事件
这两个事件会在用户进入或者离开页面时被触发。可以用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。可用于处理cookie。
7. onchange事件
当用户改变输入字段的内容时会调用。
8. onmouseover和onmouseout事件
处理用户移至HTML元素上方或移出元素时触发函数。
把鼠标移到上面
注意:在CSS中为background-color: green
,而在JavaScript中为backgroundColor = "green"
。
8. 创建元素
如需向HTML DOM添加新元素,必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
这是一个段落
这是一个段落
9. 删除元素
这是一个段落
这是一个段落
10. 替换元素
这是一个段落
这是一个段落
11. 常用属性
- innerHTML - 节点(元素)的文本值
- parentNode - 节点(元素)的父节点
- childNodes - 节点(元素)的子节点
- attributes - 节点(元素)的属性节点
nodeName属性
- nodeName是只读的
- 元素节点的nodeName与标签名相同
- 属性节点的nodeName与属性名相同
- 文本节点的nodeName始终是#text
- 文档节点的nodeName始终是#document
nodeValue属性
- 元素节点的nodeValue是undefined或者null
- 文本节点的nodeValue是文本本身
- 属性节点的nodeValue是属性值
下面的代码会输出两行Hello World!
Hello World!
三. jQuery
jQuery是一个JavaScript函数库,可以通过一行简单的标记被添加到网页中,包含以下特性:
- HTML元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- HTML DOM遍历和修改
- AJAX
- Utilities
1. 语法
基础语法:$(selector).action()
- 美元符号定义jQuery
- 选择符查询HTML元素
- jQuery的action()执行对元素的操作。
下面的代码是文档就绪函数,所有的jQuery函数都会位于这个document ready函数里面,这是为了防止文档在完全加载之前运行jQuery代码,因为如果在文档没有完全加载之前就运行函数,操作可能失败。如:
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
$(document).ready(function() {
// jQuery function
});
a. 选择器
元素选择器:
$("p") //选取元素
$("p.intro") //选取所有 class = "intro" 的
元素
$("p#demo") //选取所有 id = "demo" 的
元素
属性选择器:
$("[href]") //选取所有带有href属性的元素
$("[href = '#']") //选取所有带有href值等于“#”的元素
$("[href $= '.jpg']") //选取所有href值以".jpg"结尾的元素
CSS选择器:
//把所有p元素的背景颜色更改为红色
$("p").css("background-color", "red");
b. 事件函数
当HTML中发生某些事件时所调用的方法。
heading
I will disappear
I will disappear, too
如果使用toggle()
则可以切换hide()
和show()
方法。两个可选参数speed和callback,分别代表着规定隐藏/显示的速度、toggle()完成后执行的函数名称。
$("button").click(function() {
$("p").toggle(speed, callback);
});
c. 各种效果
jQuery有四种fade方法:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery有三种滑动方法:
- slideDown()
- slideUp()
- slideToggle()
创建自定义动画方法为animate()
$(selector).animate({params}, speed, callback);
如:把
left属性
等于250px为止,也可以设定属性的动画值:
$("button").click(function() {
$("div").animate({left: '250px', height: 'toggle'});
});
如果需要设定多个动画来先后展示的话,也可以使用队列功能:
$("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");
});
d. Callback
Callback函数会在当前动画完全执行之后再执行:
$("p").hide(1000, function() {
alert("The paragraph is now hidden");
});
e. Chaining
可以使用链式语法来运行jQuery命令。
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
2. 获得属性和内容
a.获取内容
三个用于DOM操作的jQuery方法:
text():设置或返回所选元素的文本内容
$("#btn1").click(function() {
alert($("#test").text());
});
html():设置或返回所选元素的内容(包括HTML标记)
$("#btn2").click(function() {
alert($("#test").html());
});
val():设置或返回表单字段的值
$("#btn3").click(function() {
alert($("#test").val());
});
attr():设置或返回属性值
$("#btn4").click(function() {
alert($("#test").attr("href"));
});
b. 改变内容
$("#btn1").click(function() {
$("#test1").text("Hello World!");
});
$("#btn2").click(function() {
$("#test2").html("Hello World!");
});
$("#btn3").click(function() {
$("#test3").val("HHH");
});
$("#btn4").click(function() {
$("#test3").attr("href", "http://www.baidu.com");
});
回调函数:有两个参数,分别是被选元素列表中当前元素的下标,以及原始值。然后以函数新值返回希望使用的字符串:
$("#btn1").click(function() {
$("#test1").text(function(i, origText) {
return "Old text: " + origText + " New text: Hello world! Index: " + i;
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello world!
(index: " + i + ")";
});
});
$("#btn4").click(function() {
$("#test3").attr("href", function(i, origValue) {
return origValue + "/jquery";
});
});
c. 添加元素
function appendText() {
var txt1 = "Text.
"; //以HTML创建新元素
var txt2 = $("").text("Text."); //以jQuery创建新元素
var txt3 = document.createElement("p");
txt3.innerHTML = "Text.";
var txt4 = document.createElement("p");
var text = document.createTextNode("Text.");
txt4.append(text); //以DOM创建新元素
$("body").append(txt1, txt2, txt3, txt4);
}
append():在被选元素的结尾插入内容。
prepend():在被选元素的开头插入内容。
after():在被选元素之后插入内容。
before():在被选元素之前插入内容。
append和after的区别:如果为一个元素
使用这两个函数,则append之后的元素还会在\元素
里面,after之后的元素会在元素
后面。
d. 删除元素
remove():删除被选元素(及其子元素)
empty():从被选元素中删除子元素
remove(selector):过滤被删除的元素
$("p").remove(".italic");
e. 获取并设置CSS类
addClass():向被选元素添加一个或多个类
removeClass():从被选元素删除一个或多个类
toggleClass():切换
css():设置或返回样式属性
标题1
标题2
这是一个段落
这是另一个段落
这是非常重要的文本!
返回CSS属性:
$("p").css("color");
设置CSS属性:
$("p").css("color", "blue");
设置多个CSS属性:
$("p").css({"color": "blue", "font-size": "200%"});
3. jQuery的遍历
a. 向上遍历DOM树
parent():只向上一级DOM树进行遍历
parents():返回被选元素的所有祖先,可以往里面添加过滤参数
parentsUntil():返回介于两个给定元素的所有祖先元素(开区间)
它们的区别如下图所示:
b. 向下遍历DOM树
children():返回所有直接子元素
find():返回被选元素的后代元素,一路向下直到最后一个后代
c. 同胞
siblings():返回被选元素的所有同胞元素
next():返回下一个同胞元素
nextAll():返回所有跟随的同胞元素
nextUntil():返回介于两个给定参数之间的所有跟随同胞元素(开区间)
pre():返回上一个同胞元素
preAll():返回所有前面的同胞元素
preUntil():返回介于两个给定参数之间的所有前面同胞元素(开区间)
d. 过滤
first():首个元素
last():尾元素
eq(index):索引为index的元素
filter():满足filter里面参数条件的元素
not():和filter()相反
四. AJAX
AJAX:异步JavaScript和XML(Asynchronous JavaScript and XML),即不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示。
1. AJAX和XHR
XMLHttpRequest是AJAX的基础,用于在后台与服务器交换数据,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
创建XMLHttpRequest对象:
var xmlhttp;
if (window. XMLHttpRequest) {
xmlhttp = new XMLHttpRequest; //code for IE7+ and other
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //code for IE5, IE6
}
2. XHR请求
open(method, url, async):规定请求的类型、URL以及是否异步处理请求。
method: 请求的类型(GET或者POST)
url:文件在服务器上的位置
async:true(异步)或false(同步)send(string):将请求发送到服务器,加入的string仅用于POST请求。
GET请求实例:
AJAX
POST请求实例如下,如果需要像HTML表单那样POST数据,则使用setRequestHeader()
来添加HTTP头,然后在send()
方法中规定希望发送的数据:
AJAX
3. 服务器响应
responseText:获得字符串形式的响应数据
responseXML:获得XML形式的响应数据,获得之后需要解析
My Book Collection
4. onreadystatechange事件
如果存在着多个AJAX文件需要解析,则需要进行解耦。
Let AJAX change this text
4. jQuery + AJAX
jQuery的load()方法是简单但强大的AJAX方法,它从服务器加载数据,并把返回的数据放入被选元素中。
$(selector).load(URL, data, callback);
data(可选):规定与请求一同发送的查询字符串键值对集合
callback(可选):load()方法完成后执行的函数。
点击按钮
load()里面也可以加入过滤的参数:
$("#test").load("/demo_test.txt #p1"); //选取这个文件里面的id为p1的段落
可选的callback有三个参数:
- responseTxt:包含调用成功时的结果内容
- statusTXT:包含调用的对象
- xhr:包含XMLHttpRequest对象
$("button").click(function() {
$("div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr) {
if (statusTxt == "success") {
alert("外部内容加载成功!");
}
if (statusTxt == "error") {
alert("Error: " + xrh.status + ": " + xhr.statusText);
}
});
});
4. GET 和 POST
GET:
$("button").click(function() {
$.get("demp_test.asp", function(data, status) {
alert("Data: " + data + "\nStatus: " + status);
});
});
POST:
$("button").click(function() {
$.post("demo_test_post.asp",
{
name: "Hoben",
city: "Guangzhou"
},
function(data, status) {
alert("Data: " + data + "\nStatus: " + status);
});
}));
asp文件如下:
<%
dim fname, city
fname = Request.From("name")
city = Request.From("city")
Response.Write("Dear " & fname & ".")
Response.Write("Hope you live well in " & city & ".")
%>
五. noConflict()
考虑到其他框架也会用到$符号进行简写,使用noConflict()
方法可以避免
$.noConflict();
jQuery(document).ready(function() {
jQuery("button").click(function() {
jQuery("p").text("Hi");
});
});