Javascript 笔记汇总
零散知识点
1) Js的执行顺序是从上到下执行的,所以有时将javascript写到body后面(一般是写到head标签中)
2) Javascript中既可以使用双引号也可以使用单引号声明字符串,主要是为了方便和html继承,避免转义符的麻烦
3) 事件在<body>标签中写 <a href=”javascript:alert(‘hello,这也是事件,注意是分号’)”
<a href=”http://www.baidu.com” onclick=”alert(‘hello world !’)”></a>
4) javascript中不像C#中那样要求所有路径都有返回值
5) 分割: name.join(“|”); //默认是逗号
<a href="javascript:window.history.back()">上一页,后退,返回</a><br/>
<a href="javascript:window.history.go(-1)">上一页,后退,返回</a><br/>
<a href="javascript:window.history.forward()">下一页,前进</a><br />
<a href="javascript:window.history.go(1)">下一页,前进</a><br />
6) 打印本页 <a href="#" onclick="if (window.print) window.print();return true">打印本页</a>
7) 设为首页: <a onclick="this.style.behavior='url(#default#homepage)';
this.sethomepage('http://baidu.com');"href="#">设为首页</a>
8) 在js脚本内写个简单的方法
Function 方法名(){
alert(“这是弹出一个提示框”);
confirm("这是弹出一个选择对话框"); //这个是有返回值的(true/false)
prompt("请输入一个值", "aa"); //不管输入什么值,都返回字符串类型
document.write("写入网页中"+"<br/>");
}
9) innerHTML 标签中的HTML代码,outerHTML,包含标签对的HTML 代码
innerTEXT 标签内的文本,outerTEXT包含标签对的标签文本
10) Var 是万能数据类型
11)
// var num = 123.7;
// alert(num.toFixed(2)); //代表小数点后占 2 个位数
// document.write(num.toPrecision(8)); //设置整数部分和小数部分总共占几
12)控件的隐藏与显示: onload 事件要在body标签里面写
document.getElementById("btn_showOrvisible").style.display = "none";
document.getElementById("btn_showOrvisible").style.display = "inline";
document.getElementById("btn_showOrvisible").style.visibility = "hidden";
document.getElementById("btn_showOrvisible").style.visibility = "visible";
以上两种要配套对应使用
13) 失去焦点: onblur()
14) 设置js字体字号,字体大小
<h1 onclick="this.style.fontSize='16px';" >点击设置字体大小(字号)</h1>
15)通过方法设置字体的大小颜色的改变,记得 fontSize 的S要大写
kj.style.color="red";
kj.style.fontSize = "24px";
16)<!--onload 和直接在javascript根部写代码直接在javascript写代码从上到下依次执行,而在onload中写是先将html代码执行完再执行onload事件-->
17)event.srcElement; //这个是获取事件在哪个控件上执行,返回一个控件(实体)
18) js前台调用后台方法 (但是有个问题,前台调用后台时,已启动程序就自动执行了调用的方法了)
"<%methodName(); %>" //js 调用无返回值后台方法
var bl = "<% methodName() %>"; //js调用有返回值的后台方法
19) form1.submit(); 提交表单
20)
Js变量
Javascript中既可以使用双引号也可以使用单引号声明字符串,主要是为了方便和html继承,避免转义符的麻烦
Javascript中null,undefined两种,null表示变量值为空,undefined则表示变量还没有指向任何的对象,不占空间.未初始化
Javascript是弱类型,声明变量的时候无法int I =0;只能通过var i=0;声明变量,和C#中得var不一样,不是C#总那样的类型推断
Javascript中也可以不用var 声明变量,直接用,直接用这样的变量是”全局变量”因此除非却是想用全局变量,否则使用的时候最好加上var,也就是说var是万能类型
Js是动态类型的,因此var i=0;i=”abc”;是合法的
Js排错与调试
如果js中有错误的代码,浏览器会弹出报错信息,查看报错信息就能帮助排查错误
注意: internet的调试选项要打开,internet选项—高级,去除”禁用脚本调试”前的勾选
以调试方式运行网页
设置断点,监视变量等操作和C#一样
判断变量初始化(判断是否为空)
Var x;
If(x==null) alert(“null”);
If(typeof(x)==”undefined”) alert(“undefined”;
If(!x) {alert(‘不x’);} //推荐用这种方法
If(x){} //变量被初始化了或者变量不为空或者变量不为0
匿名函数
var f1= function(i1,i2) { return (i1+i2 ); }
alert( f1( 5, 6) );
面相对象初步(当成类用)
Javascript中没有类的语法,是用函数闭包(closure)模拟出来的,下面讲解的时候,还是用C#中的类,构造函数的概念,javascript中string,data等类不被叫做”对象”
不严谨,javascript中声明类(类不是类,是对象)
Function Person(name,age){ //声明一个函数,当成类用
this.Name =name;
this.Age=age;
this.SayHello=function(){ alert( this.Name+this.Age ); }
}
下面的person可以用object代替
Var p1 = new Person( “ tom ” ,30 ); //不要忘了new 否则就变成调用函数了
this.gender =”男”; //动态增加属性
P1.SayHello();
Array,dictionary对象数组
Array对象就是数组,首先是一个动态数组,而且是一个像C#中数组,ArrayList, Hashtable等得超强综合体
Var name = new Array();
name[0]=”tom”;
name[1]=”ctom”;
name[2]=”btom”;
name[3]=”atom”;
for(var i=0;i<name.length;i++){ alert( name[i] ); }
Js中的dictionary
Js中的array是一个宝贝,不仅是一个数组,还是一个Dictionary,还是一个Stack
var pinyins = new Array();
pinyins[“ren”]=”人”;
pinyins[“kou”]=”口”;
pinyins[“shou”]=”手”;
alert(pinyins[“ren”]; ); //或者
alert(pinyins.ren; );
for(var k in pinyins){ //遍历 js中得foreach语法 ,这里的for是foreach的变形
alert(k ); //在有索引值的数组中,用foreach遍历出来的是数组的key
}
Array的简化声明
var arr = [3,4,5,6,7]; //普通数组的初始化
//这种数组可以看做是pinyins[“ren”]=”人”; 特别,也就是key为 0,1,2….
字典风格的简化创建方式
Var arr = {“tom”:20,”jim”:23}; //注意是冒号
emp = new Array(3); //3代表数组最小占三位元素的地儿
emp[0]=123;
emp[1] = "123";
emp[2] = true;
emp[3]="这个已经超出数组界限了,但它可以自动扩容";
//document.write(emp.join("--")); //间隔符,默认为逗号
document.write(emp);
emp = new Array(3); //3代表数组最小占三位元素的地儿
emp["zhao"] = 123;
emp["wang"] = "123";
emp["liu"] = true;
emp["li"] = "这个已经超出数组界限了,但它可以自动扩容";
document.write(emp["zhao"]); //这时就不能用间隔符了
document.write(emp[0]); //这时是不能用索引的,会打印出undefined
var arrData = { //定义一个数组保存相关数据
厂商1: { 品牌1_1: "型号1_1_1,型号1_1_2", 品牌1_2: "型号1_2_1,型号1_2_2" },
厂商2: { 品牌2_1: "型号2_1_1,型号2_1_2", 品牌2_2: "型号2_2_1,型号2_2_2" },
厂商3: { 品牌3_1: "型号3_1_1,型号3_1_2", 品牌3_2: "型号3_2_1,型号3_2_2" }
};
数组,for 及其它
对于数组风格的array来说,可以使用join方法拼接为字符串
for循环还可以获得一个对象所有的成员
for(var e in document){
alert(e);
}
//多个方法共用一个对象名
var date1 = new Date();
with (date1) {
document.write("获取一个全的年份 " + getFullYear() + "年");
document.write((parseInt(getMonth()) + "月");
document.write(getDate() + "日");
document.write("星期" + getDay());
}
数据类型
获取并输出变量的数据类型: document.write(typeof(num)+"<br/>");
数据类型转换: document.write(parseInt(mes)+"<br/>");
document.write(typeof (bo) + "转化为" + parseInt(bo)+”或者”+bo.tostring());
不能将bool型转化为整型
在这里 string型直接乘以整型结果为整型
123+" " 结果为字符串类型 即整形加个字符型结果为字符型
对字符的操作
分割: name.join(“|”); //默认是逗号
var arr = str.split(",");
截取: alert(str.substring(1, 4)); //从第 1 位截取到第几(4)位
alert(str.substr(1, 4)); //从第 1 位截取几(4)位
查找:检索 alert(str.indexOf("d", 4)); //从索引 4 开始查找 d
大小写转换: str.toLowerCase(); 转换为小写 str.toUpperCase(); 转换为大写
获取单个字符 : Str.charAt(10);
日期(年月日)时间
日期: alert(new Date().toLocaleDateString());
时间: alert(new Date().toLocaleTimeString());
年份: date.getFullYear();
月份: parseInt(date.getMonth())
日 : date.getDate();
星期: date.getDay();
// //根据索引获取
// var date1 = new Date();
// var arr = new Array( "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月",
"9月", "10月", "11月", "12月");
// document.write(arr[date1.getMonth()]);
自动把获取的参数放到一个集合里
// function sum() {
// var s=0;
//这里的 arguments叫参数的集合,接受参数,并放到数组中,这就没有必要加参数
// for (var i = 0; i < arguments.length; i++) // s = s + arguments[i];
// alert(s);
// }
// sum(1,2,3,5,6,7); //调用
List, Combox,select 组合框,下拉框, 下拉列表
//通过设置select的size属性 size=”1”大于1的是listbox,小于1的是combox,默认是combox
<select id="Select1" name="D1" size="" >
<option id="op1" value="zhao1">zhao</option>
<option id="Option1" value="wang1">wang</option>
<option id="Option2" value="liu1">liu</option>
</select>
单选框,单选按钮 ,checkbox复选框
单选按钮 通过设置相同的名字可以分组 ,就可以设置只选择一个了
<input id="Radio1" name="sex" type="radio" value="man" />男
<input id="Radio2" name="sex" type="radio" value="woman"/>女
复选框也是通过名字,但是可以实现多选
<input id="Checkbox1" name="ch" type="checkbox" value="f足球" />足球<br />
<input id="Checkbox2" name="ch" type="checkbox" value="s游泳" />游泳<br />
<input id="Checkbox3" name="ch" type="checkbox" value="b篮球" />篮球<br />
<input id="Checkbox4" name="ch" type="checkbox" value="t象棋" />象棋<br />
正则表达式
function checkText() {
// var reg = /d\d\d\-d\d\d/;
// \d 一个数字 \d{2} 重复两次\d ^开始$结束
// \w 表示 a-z A-Z 0-9 中一个字母或数字
// \d 表示一个数字相当于[0-9]
// var reg = /^0\d{2}-\d{2}$/
//var reg = /\bac[0-9a-zA-Z]{5}ac\b/;
//var reg = /\bac[0-9a-zA-Z]?ac\b/;
// \b \b 是指之间是一个字符串
//var reg = /\b\w{2}[(-]?\b/ // [)-]? 意思是)和- 只能选一个
// var reg = /^\($/; // ( 也是关键字,显示时需要转义一下,即 \(
// var reg = /\b\w\b/ //?是指出现一次或者0次
// * 代表多次出现
//var reg = /\b\b/;
// var reg = /^[0-9a-zA-Z]\w*@\w*.com$/;
//var reg = /^\d{5}-\d{4}$|^\d{5}$/;
// var reg = /^\d{5}(-\d{4})?$/; //等价于上面那行
//var reg = /^(\d{1,3}\.){3}\d{1,3}$/; //ip地址 \d{1,3} 是数字可以出现 1 次到 3 次
//var reg = /^[3-6][0-4]$/;
//var reg = /^((25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(25[0-5]|2[0-4]\d|[01]?\d?\d)$/; //完整的ip正则表达式
//var reg= /^(\d)(\d)\1\2$/ //分组匹配 \1 匹配第一个分组,即第一个括号里面的数字,后面同理
//var reg = /^(\d)\1(\d)\2$/gi; //g是全局匹配 i是忽略大小写
var str = form1.Text1.value;
if (reg.test(str)) { alert("正确"); }
else { alert("错误"); }
}
添加事件的方式
<!—第一种方式-->
<script type="text/javascript" for="kjID" event="onmousemove">alert("这也是添加事件的 一种方式")</script>
<!—第二种方式-->
<script type="text/javascript">
document.getElementById("kjID").onclick = function () {
alert("这是添加js事件的第二种方式方式");
}
</script>
<!—第三种方式-->
<script type="text/javascript">
document.getElementById("kjID").onclick = new Function("alert('添加事件的第三种方式, 记得这个的Function的f要大写');");
</script>
<!—第四种方式-->
<script type="text/javascript">
function takeit() { alert("这是通过方法名称来调用事件"); }
document.getElementById("kjID").onclick = function () { takeit(); } //这里直接 写方法名就可以了
</script>
判断浏览器标准(W3C , IE)
<script type="text/javascript">
function show1() { alert("经判断,此浏览器是W3C标准,即火狐"); }
function show2() { alert("经判断,此浏览器是IE标准");}
function click_event() {
//window.addEventListener==true
//alert(window.addEventListener);
if (window.addEventListener) {
document.getElementById("error").addEventListener("click", show1); //这种方法适用于火狐浏览器 W3C
}
else {
document.getElementById("error").attachEvent("onclick", show2); //这种方法只适用于IE标准,而且是一个累加事件
//还需要加一个单例模式
}
}
</script>
判断鼠标在页面,鼠标在屏幕中的位置
function showMousePosition() {
//根据页面取值(即获取鼠标在页面上的位置)
document.getElementById("Text1").value = event.clientX;
document.getElementById("Text2").value= event.clientY;
//根据屏幕取值(即获取鼠标在屏幕上的位置) event.screenX可用event.x代替,y同理
document.getElementById("Text3").value= event.screenX;
document.getElementById("Text4").value= event.screenY;
//alert(event.type); //记录这个事件是由哪个方法激发的
}
获取鼠标当前所在位置,鼠标位置,鼠标当前位置
$("kjid").mousemove(function (e) {
alert("鼠标当前位置: 横坐标: "+e.pageX+" 纵坐标: "+e.pageY);
//若function后没写e,则,上行的e用event.clientX和event.clientY代替即可
});
获取鼠标按键
function getMouseBtn() {
//event.srcElement 是返回一个控件(实体)
alert(event.srcElement.id);
event.button = 0; // 0代表左键 1代表中键 2代表右键
if (event.button == 2) {
alert("禁止右击"); //配合使用 onmousedown()方法
return false; //默认return turn ,所以只写return false时就行了
}
}
获取键盘按键
(不同浏览器获取按键的方法不同)
<script type="text/javascript">
alert("此浏览器的标准是: "+navigator.appName);
document.onkeydown = key; //获取按键的事件
//document.onkeydown=otherKey(this)
function key() {
if (navigator.appName == "Microsoft Internet Explorer") {
alert("您按下的键是: " + String.fromCharCode(event.keyCode)+" 此键的编码号是: "+event.keyCode);
}
else if (navigator.appName == "Netscape") {
var KeyCode = new Number(e.which);
document.getElementById("Text1").value += unescape("%" + keyCode.toString(16));
alert(keycode);
}
}
function otherKey(e) {
// event.shiftKey; event.ctrlKey; event.altKey;
if (navigator.appName == "Netscape") {
alert(e.altKey);
}
else if (navigator.appName == "Microsoft Internet Explorer") {
if (event.ctrlKey) {
alert("你按下了ctrl键");
return false;
}
}
}
</script>
打开/弹出新窗口,关闭窗口,关闭当前窗口,往页面中写值
<script type="text/javascript">
var newwin;
function btn_click() {
// toolbar = yes 工具栏
// menubar =yes 菜单栏
// location=yes 地址栏
// status = yes 状态栏
// scrollbars = yes 滚动条
// resizable = yes 可改变大小
newwin = window.open("jqueryTest2.htm", "baidu", "height=300px,width=300px,toolbar=yes,scrollbars=yes,status=yes,resizable=yes");
newwin = window.showModalDialog("getData.aspx", "这是要传递的值" , "dialogHeight:300px;dialogWidth:300px"); //(这是要打开一个小窗口)变量newwin是接受子页面回传值的
}
function closeWindows() {
debugger;
//window.close(); //关闭当前窗口
if (window.newwin) { newwin.close(); } //关闭新窗口
else { alert("没有打开的窗口"); }
}
function write() {
//write 可以往页面上写值,针对空白页面的
newwin.document.write("hello");
}
</script>
1页面传值,父窗体和子窗体相互传值
父窗体中:
<script type="text/javascript">
var zichuang;
function openziweb() {
zichuang = window.open("js_YeMianChuanZhi_ziWeb.aspx", "这里随便", "width=300,height=300"); //获取子窗体
}
function sendOrGetData() {
// window.opener.document.getElementById("") 指父页面中的容器控件
form1.Text1.value = zichuang.document.getElementById("ziText1").value;
}
</script>
//------------------------------------------------------------//
<body onload="openziweb()">
<form id="form1" runat="server">
<div>
<a href="js_YeMianChuanZhi_ziWeb.aspx" target="_blank">先打开子页面</a>
<a href="js_YeMianChuanZhi_ziWeb.aspx" target="_blank">dd</a>
<input id="Text1" type="text"/>
<input id="Button1" type="button" value="获取子窗口中的text值" onclick="sendOrGetData()" /><br/>
<label>子窗体传回的值是:</label>
<input id="textFromziWeb" type="text" />
</div>
</form>
</body>
子窗体中:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
function sendTofuWeb() {
window.opener.document.getElementById("textFromziWeb") ;是父窗体
var thisText = document.getElementById("ziText1").value;
window.opener.document.getElementById("textFromziWeb").value = thisText;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="ziText1" type="text" value="aa"/>
<input id="Button1" type="button" value="将text的值传给父窗体" onclick="sendTofuWeb()" />
</div>
</form>
</body>
</html>
2页面传值,父窗体和子窗体相互传值
先运行页面1:
<script type="text/javascript">
var obj = new Object();
obj.name = "zhao";
obj.sex = "nan";
function btn_sendData() {
var str = window.showModalDialog("getData.aspx", obj, "dialogHeight:300px;dialogWidth:300px"); //变量str是接受子页面window.returnValue回传值的
alert(str);
}
</script>
再运行页面2:
<script type="text/javascript">
//获取传回来的值
function getData() {
var obj = window.dialogArguments;
alert(obj.name);
}
function btn_returnData() {
//此方法只适用于打开的小窗口回传值
window.returnValue = "这是子页面回传回来的值(只有关闭子页面时,才能看到回传回来的值)";
}
</script>
获取DIV或其他标签中的其他元素的类型event.srcElement.type
例子: 图片的选择
<script type="text/javascript">
function move() {
var val = event.srcElement;
if (event.srcElement.type == "link") {
var id = val.id;
document.getElementById("myImage").src = "image/image" + val.id + ".jpg";
}
// alert(event.srcElement.id);
}
</script>
流执行顺序
<form id="form1" runat="server" onclick="myclick('form')">
<div onclick="myclick('div')">
<table onclick="myclick('table')">
<tr onclick="myclick('tr')">
<td onclick="myclick('td')">
<b onclick="myclick('b')">点击我-标签从内到外展示</b>
</td>
</tr>
</table>
</div>
<span id="myspan"></span>
<div onclick="myclick('dd')"><h3>这里的onclick="myclick('dd')"不会显示因为与 "点击我" 没有关系,因为那只在子标签和父标签里有用</h3> </div>
</form>
获取地址栏的信息,通信协议端口号,页面路径,主机名,参数等信息刷新页面,状态栏
document.write("本页面地址栏的内容为: " + window.location.href+"<br/>");
document.write("本机的通信协议是: " + window.location.protocol + "<br/>");
document.write("本机的主机名是: " + window.location.host + "<br/>");
document.write("本页面的端口号是: " + window.location.port + "<br/>");
document.write("本页面在主机中的路径地址是: " + location.pathname + "<br/>");
document.write("从别的页面传过来的url参数是: " + location.search + "<br/>"); //参数(页面间传的参数)[参数?name=123&pwd=345]
js刷新页面 location.reload();
Js页面跳转: location.replace("http://www.baidu.com"); //页面的跳转
Js改变状态栏信息: window.status = "改变的状态栏"; //作用时间短,尽量在方法下使用
window.defaultStatus = "默认状态栏"; //作用时间长
递归调用
(方法自己调用自己就叫递归调用)
例子: 计时器
<script type="text/javascript">
function showDateTime() {
var date = new Date();
//innerHTML 是一个属性 label不是一个控件,是一个标签
document.getElementById("dt").innerHTML = " " + date.toLocaleDateString() + date.toLocaleTimeString() + "星期" + date.getDay();
timer = setTimeout("showDateTime()", 1000); //递归调用,setTimeout()意思是每隔多长时间(毫秒)调用一次指定的方法
}
//timerval = setInterval("showDateTime()", 1000); //每隔多长时间(毫秒)调用多次指定的方法
function btn_stop() {
//clearTimeout(timer); //取消超时
clearInterval(timerval); //取消超时
}
</script>
页面缓存cookie
<script type="text/javascript">
document.cookie = "name=wjq";
document.cookie = "pwd=123";
alert("查看cookie"+document.cookie); //默认的生命周期是一天
var date = new Date();
date.setYear(date.getFullYear() + 2);
document.cookie = "pwd=123;expris=" + date; //这样就能保存两年
var arr = document.cookie.split(";");
var obj = new Array();
for (var i = 0; i < arr.length; i++) {
var dd = arr[i].split("=");
obj[dd[0]] = dd[1];
} alert(obj["name"] + " " + obj["pwd"]);
</script>
对table表格的操作(插入/删除行,插入/删除单元格,插入值)
//遍历表格内的内容
function show() {
var tableMenu = document.getElementById("tableid");
for (var i = 0; i < tableMenu.rows.length; i++) {
for (var j = 0; j < tableMenu.rows[i].cells.length; j++) {
//获取表格中的值用innerHTML
alert(tableMenu.rows[i].cells[j].innerHTML);
}
}
}
//插入行,括号里面是索引值
function addRow() {
var tableMenu = document.getElementById("tableid");
//rowNum是在第几行前面插入行
var rowNum = document.getElementById("rowNumValueID").value-1;
if (rowNum <= tableMenu.rows.length) {
tableMenu.insertRow(rowNum); //插入表格行
}
else { alert("该行不存在"); }
}
//删除行,括号里面是索引值
function removeRow() {
var tableMenu = document.getElementById("tableid");
//rowNum是行索引
var rowNum = parseInt(document.getElementById("rowNumValueID").value) - 1;
if (rowNum <= tableMenu.rows.length) {
tableMenu.deleteRow(rowNum); //删除表格行,括号里面是索引值
}
else { alert("该行不存在"); }
}
//添加单元格
function addCell() {
var tableMenu = document.getElementById("tableid");
var rowNum = parseInt(document.getElementById("rowNumValueID").value);
var mes = document.getElementById("contentOfInsertID").value; //插入的值
if (rowNum <= tableMenu.rows.length) {
var row = tableMenu.rows[rowNum - 1];
row.insertCell(); //括号里写值的话,值代表从第几列插入,默认每次是从最后插入
row.cells[row.cells.length - 1].innerHTML = mes; //给添加的单元格赋值
}
else { alert("该行不存在"); }
}
//删除单元格
function delCell() {
var table = document.getElementById("tableid");
var rowNum = parseInt(document.getElementById("rowid").value);
var lieNum = parseInt(document.getElementById("lieid").value);
if (rowNum <= table.rows.length && lieNum <= table.rows[rowNum-1].cells.length){
table.rows[rowNum - 1].deleteCell(lieNum-1);
}
}
菜单特效(动态加载, 静态加载)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
//声明一个二维数组
myArray = new Array(new Array(3), new Array(3));
myArray[0][0] = "打开10";
myArray[0][1] = "打开11";
myArray[0][2] = "打开12";
myArray[1][0] = "打开20";
myArray[1][1] = "打开21";
myArray[1][2] = "打开22";
function hiddenList() {
document.getElementById("menu1_list").style.visibility = "hidden";
document.getElementById("menu2_list").style.visibility = "hidden"
for (var i = 0; i < myArray.length; i++) {
var menuList = document.getElementById("menu" + (i + 3) + "_list");
for (var j = 0; j < myArray[i].length; j++) {
var newnode = document.createElement("a"); //创建一个a标签对
var newnodeText = document.createTextNode(myArray[i][j]); //创建一个内容节点
newnode.appendChild(newnodeText); //将内容添加到a标签内,组成了 <a>newnodeText的内容</a>
newnode.appendChild(document.createElement('br')); //添加换行标签
menuList.appendChild(newnode); //将新生成的完整a标签添加到menuList(即div内)
}
}
}
function show(menuid) {
document.getElementById(menuid.id + "_list").style.visibility = "visible";
event.srcElement; //这个是获取事件在哪个控件上执行
}
function unShow(menuid) {
document.getElementById(menuid.id + "_list").style.visibility = "hidden";
}
</script>
</head>
<body onload="hiddenList()">
<form id="form1" runat="server">
<div id="menu1" onmousemove="show(this)" onmouseout="unShow(this)" style=" position:absolute; top:10px; left:10px; width:100px">文件</div>
<div id="menu1_list" style=" position:absolute; top:30px; left:10px; width:100px">
<a>新建</a><br/>
<a>打开</a><br/>
<a>保存</a><br/>
<a>关闭</a><br/>
</div>
<div id="menu2" onmousemove="show(this)" onmouseout="unShow(this)" style=" position:absolute; top:10px; left:50px; width:100px">编辑</div>
<div id="menu2_list" style=" position:absolute; top:30px; left:50px; width:100px">
<a>撤销</a><br/>
<a>剪切</a><br/>
<a>复制</a><br/>
<a>粘贴</a><br/>
</div>
<div id="menu3" onmousemove="show(this)" onmouseout="unShow(this)" style=" position:absolute; top:10px; left:90px; width:100px">帮助</div>
<div id="menu3_list" style=" position:absolute; top:30px; left:90px; width:100px; visibility:hidden">
</div>
<div id="menu4" onmousemove="show(this)" onmouseout="unShow(this)" style="position:absolute; top:10px; left:130px; width:100px">1帮助</div>
<div id="menu4_list" style=" position:absolute; top:30px; left:130px; width:100px; visibility:hidden">
</div>
</form>
</body>
</html>
DOM 笔记汇总
动态添加节点一般过程
<script type="text/javascript">
function btn_addNewNode() {
//获取根节点
var rootNode = document.getElementById("rootID");
//1.创建新节点( p 节点, p标签对: <p></p>)
var newNode = document.createElement('p');
//2.创建节点内容,纯文本( "这是节点内容" )
var textNode = document.createTextNode("这是节点内容");
//3.将节点内容添加到新节点p内 ( 这时新节点为: <p>这是新节点内容</p> )
newNode.appendChild(textNode);
//4.将新节点添加到根节点前
rootNode.parentNode.insertBefore(newNode, rootNode); //node之后添加标签
}
</script>
零散知识点
1) nodeType 返回值 1 代表标签对 2代表控件 3 代表文本值
2) 第一个子节点: var child = ar.firstChild;
最后一个子节点:var child = ar.lastChild; //最后一个子节点
下一个节点 : var child = ar.firstChild.nextSibling; //第一个子结点之后一个兄弟节点
上一个节点: //var child = ar.lastChild.previousSibling;//最后一个结点之前一个兄弟节点
3) 判断当前节点是否有子节点: if (ar.hasChildNodes) {}
4) 遍历节点(遍历当前节点的所有子节点)
var childs = ar.childNodes;
for (var i = 0; i < childs.length; i++) {
alert(childs[i].nodeName + "\n" + childs[i].nodeType + "\n" + childs[i].nodeValue);
}
5) 判断当前节点有没有父节点: if (ar.parentNode) {}
6) 节点名称: nodeName 节点值: nodeValue 节点类型:nodeType
7) 获取所有节点 :document.all //返回所有的标签
8) 按元素/标签/节点的类型获取标签,获取节点:
document.getElementsByTagName("input") //返回所有input
例子:<label id="lb" class="aa" onclick="setA()"><p>this is a test too</p></label>
9) innerHTML 标签中的HTML代码, 即上例中的: <p>this is a test too</p>
outerHTML,包含标签对的HTML 代码即上例中的: 全部
innerTEXT 标签内的文本即上例中的this is a test too
outerTEXT包含标签对的标签文本
平常写为: html 即可
10)
dom技术对节点,元素控件的操作
1) 创建节点: var newNode = document.createElement('p'); (括号里是标签类型,例如: a ,div,font)
2) 删除节点:
删除子节点: rootNode.removeChild(rootNode.firstChild); ( 括号里是要删除的子节点)
3) 添加节点: (节点之前添加节点) : ar.parentNode.insertBefore(createnode, ar); //将该节点添加到指定结点之前(添加子节点)
4) 替换子节点: Node.replaceChild(新节点，老结点); //一般只替换标签内的内容而不替换整个标签
替换节点:
5) 追加节点: newnode.appendChild(newnodeText);
6) 为匹配的元素添加一个或者多个元素 : $("#addID").add("<span>添加的元素</span>");
7) 深度复制: var current = ar.cloneNode(true); 或者 = ar.firstChild.cloneNode(true);
document.getElementsByName //返回同name的一个数组
8) Dom设置元素属性,控件属性:
document.getElementById("lb").setAttribute("className", "bb");或 lb.className = "bb";
selectkj.setAttribute("color", selectcolor.options[selectcolor.selectedIndex].text); //设置颜色
selectkj.setAttribute("size", selectsize.options[selectsize.selectedIndex].text);//设置字体大小,字号
Jquery 笔记汇总
零散知识点
1) 基本格式:
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () { 这里面写function方法或程序段 })
//上一行代码亦可用下一行代替
$(function () { 这里面写function方法或程序段 })
</script>
2) jquery事件的链式写法
$(function(){
$(".divTitle").click(function(){
$(this).addClass("divCurrColor").next(".divContent").css("display","block");
});
});
3) window.onload = function () { alert(“初始化加载时执行”) }
4) 获取匹配元素在当前视口的相对偏移: kj.offset().left 或者 kj.offset().top 即获取当前对象的top和left 顶点坐标
5) 获取控件: $(选择器) jquery选择器
6) $("#outDiv,span")对ID为outDiv 和所有span元素操纵
$("#outDiv span")对ID为outDiv 下所有span元素操作
$("*")对所有元素,全部元素操作
$("#isID,.isClass,span") 对ID为isID的,类名为isClass的,全部span元素操作
$("#fistDiv + #secondDiv") 对id为fistDiv节点和id为secondDiv的元素操作
$("#fistDiv + div")当前节点后的一个div标签节点
$("#fistDiv ~ div") 当前节点到某个范围之间的节点
$("li:first") 集合中的第一个元素
$("li:last") 集合中的最后一个元素
$("li:not(#li1)") 或 $("li:not(li:first+li)") 集合中除了某一个元素
$("li:even") 集合中的奇数(even代表奇数)
$("li:odd") 集合中的偶数(odd代表偶数)
$("li:eq(2)") 等于索引为2的li
$("li:gt(2)") 大于索引为2的li
$("li:lt(3)") 小于索引为3的li
$(":header") 凡是<h1></h1><h2></h2>这种标签对,都可以用:header来寻扎
$("div:contains('1')") 包含某些文本(包含文本为1的div元素)
$("div:empty") 为空的元素,空元素
$("div:has(span)") 包含span标签的div
$("div:parent") div的父节点
$("div:hidden") 隐藏的div元素 $("div:visible") 显示的div元素
$("li:[id]") 查找含有id的属性元素
$("li:[id='Li1']") 查找id是特定值的属性元素
$("li:[id!='Li1']") 查找id不是某些值的属性元素
$("li:[id^='L']") 查找id以某些值开头的属性元素
$("li:[id$='5']") 查找id以某些值结束的属性元素
$("li:[id*='i']") 查找id包含某些值的属性元素
$("div:only-child") div父元素下只有一个子元素时….
//遍历表格中除全选以外的所有复选框
$("input[type=checkbox]:not('chb_selectAll')").each(function (index)
var dataobj = eval("(" + data + ")"); //转换为json对象
$("li:[id][id*='4']") 查找含有id属性并且id包含4的属性元素
$("#fu div:nth-child(2)") 对div下的第2个节点操作(如果把2改为odd或even ,则对奇数列或偶数列操作)
$("div div:first-child") div下的第一个子节点变色
$("div:last-child") 对div下的最后一个子节点操作
$("div:only-child") div父元素下只有一个子元素时变色
$("#CheckBox1:checked") 对选中的复选框操作
$("#CheckBox1:not(:checked)") 对未选中的复选框操作
var objW = $(window); //当前窗口
var objW = $(window); //jquery获取当前窗口
var brsW = objW.width(); //当前窗口的宽度
var brsH = objW.height(); //当前窗口的高度
var sclL = objW.scrollLeft(); //当前窗口滚动条的位置( 左 )
var sclT = objW.scrollTop(); //当前窗口滚动条的位置( 高 )
//隔行变色
$("table tr:nth-child(even)").css("background-color", "#eee");
//table表格中每行的checkbox复选框全选
$("table tr td input[type=checkbox]").attr("checked", true);
//反选
$("chb_ReselectAll").click(function () {
$("table tr td input[type=checkbox]").attr("checked", function () {
return !$("this").attr("checked");
})
})
Jquery对元素,控件的操作
对样式的操作:
更改背景色: $("#outDiv,span").css("background-color", "red");
$("#id").attr("属性名称"); //通过id获取控件的某个属性
$("#id").attr({ style:"color:green" , title:"给属性赋值"}); //一次性给控件设置多个属性
$("#id"). addClass("className") //为当前节点添加样式
$("#id").addClass("className1 className2"); //同时给一个元素添加多个样式
$("#id"). removeClass ("csName3") //删除固定样式, 括号中如果为空则删除所有样式 $("#id").toggleClass("csName3"); //替换样式, 如果有csName3这个样式,就删除,否则增加一个该名称的css样式
一些方法事件, 对标签元素的操作
$("#id").next() ; //获取当前节点的下一个兄弟节点
$("#id").nextAll() ; //获取当前节点后的所有兄弟节点
$("#id").change(function(){ alert(“文本更改时弹出”); }) //文本发生更改时执行
$("#id").val().join("#") 对于数组风格的array来说,可以使用join方法拼接为字符串,间隔符
$("#id").click(function () {} 点击事件,单击事件
//get()方法将一组元素转换成其他数组（不论是否是元素数组）
$("p").append($("input").map(function () {return $(this).val(); }).get().join(", "));
//将一组元素转换成为数组集合
var arr = jQuery.makeArray(document.getElementsByName("smImg"));
$("#id").empty(); //清空id控件中的值
//要区分何时用val ,何时用text, 何时用html
var mes = $(this).val(); 获取当前节点的值( 即控件的value属性)
var mes = $(this).html(); //取值 ( html不仅会找文本还会将原标签的格式找到, 文本+标签 )
$(this).html(mes+"456"); //html标签对内赋值
var mes = $(this).text(); //取值( text只会找到元标签的文本内容)
$(this).text(mes + "456"); //赋值(纯文本)
var div = $("<" sxm + "='" + sxz + "'>" + nrw + "</" + ysm + ">"); //创建dom对象
$("#id").append($("<span title='aaa'>元素创建,添加一个创建的元素</span>"));
$("#id").appendTo($("#oldDivID")); //追加到,添加到元素
$("#id").after("<div>移动控件,将本标签添加到id控件之后</div>").clone(true);
$("#id").before("<div>移动控件,将本标签添加到id控件之前</div>");
$("#id").insertAfter($("#Text1")); //将id控件插入到text1控件之后
$("#id").insertBefore($("#Text1")); //将id控件插入到text1控件之后
//遍历元素(遍历整个文档中相关的标签)index是当前标签索引(减1)
$("#div1").each(function (index) { alert(index); }
//get()方法将一组元素转换成其他数组（不论是否是元素数组）
$("p").append($("input").map(function () {return $(this).val(); }).get().join(", "));
//将一组元素转换成为数组集合
var arr = jQuery.makeArray(document.getElementsByName("smImg"));
//遍历上面的数组索引用下面的方法
$.each(arr, function (index) {}
//冒泡
var intI = 0;
$("body,div,#btnShow").click(function () {
intI++;
$(".clsShow").show().html("hello").append("<div>执行次数:"+intI+"</div>")
};
//阻止冒泡过程
var intI = 0;
$("div").click(function (even) {
alert(++intI);
even.stopPropagation(); //阻止冒泡过程(注意stopPropagation别写错)
});
绑定,添加,移除事件
//绑定事件( 将一个方法绑定到多个事件上)( 鼠标点击或鼠标mouseout都会触发)
$("#kjid").bind("click mouseout", function () { alert($(this).val());} );
//绑定事件(将多个方法绑定到多个事件上)( 鼠标点击或鼠标mouseout都会触发)
$("#kjid").bind({click: function () { alert("click事件"); },
mouseout: function () { alert("mouseout事件"); }});
$("#kjid").bind( {blur : function(){ 方法体 )}, focus : function(){ 方法体 });
//绑定事件,bind只能绑原有的,而live可以绑定后来添加上的元素
$("#1").live("click", function () { alert(“启动后绑定”); return false; });
//移除事件 (如果括号里什么也不加则移除所有事件)
$("#kjid").unbind("blur");
//移除事件,用live绑定的事件,对应的用die去解除, 用bind绑定的用unbind解除
$("#1").die("click");
//切换事件,用hover方法绑定事件(即先执行mousemove后执行mouseout)
$("#kjid").hover( function () { $("#divID").show(1000); }, function () { $("#divID").hide(1000) } );
//toggle()方法,在此方法中,可以依次调用N个指定的函数,直到最后一个函数,然后重复对这些函数轮番调用
$("#kjid").toggle(
function () { alert("执行方法1"); alert("执行方法2"); },
function () { alert("执行方法3"); alert("执行方法4"); },
function () { alert("执行方法5"); alert("执行方法6"); }
)
//事件只执行一次 one() 方法, 用于交易性的页面
$("#kjid").one("click", function () { alert("用one,方法只执行一次,再次单击则不再响应任何事件") });
//trigger()方法绑定事件,功能:自动激发,自动触发,(括号里是事件名称,例如focus, select, )
$("#txt_ID").trigger("select"); //自动选中文本框
//编写文本框自定义事件,并用trigger()方法自动触发该自定义事件
$("#kjid").bind("btn_click", function () { alert(“这是自定义方法”); });
$("#txt_trigger").trigger("btn_click"); //自动触发自定义事件
//文本框获得焦点事件$("#kjid").focus(function (){ 代码段; } ); 和失去焦点事件blur()
查找,匹配
//检查当前的元素是否含有某个特定的类，如果有，则返回 true
if ($(this).hasClass("className")) { alert("true"); }
//保留包含特定后代的元素，去掉那些不含有指定后代的元素。
$('li').has('ul').css("background-color", "purple")
//用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true 如果没有元素符合，或者表达式无效，都返回'false'。
$("#btnID").parent().is("Div")); (btnID的父节点是Div吗,是的话返回true, 否则返回false)
//slice()选取一个匹配的子集(如果括号里为-1,则子集为最后一个)
$("li").slice(0,2).css("background-color", "purple");
//children()获取所有子节点
$("div").children().css("background-color", "purple");
//find是到一个子节点中查找(可以找N代),搜索所有与指定表达式匹配的元素。这个函数是查找正在处理的元素的后代元素的好方法。
$("div").children().find("li").css("color", "purple");
//查询,查找到"#term-2" 为止
$("dl dt").first().nextUntil("#term2ID").css("color", "purple");
$("dl dt").first().nextUntil(选择器).css("background-color", "purple");
//parents (注意parent加s啦)是查找指定元素的所有祖先元素,而parent(不加s的parent)只找上一级
$("#term-2").parents().css("background-color", "red");
//parentsUntil 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。但不包括那个选择器匹配到的元素。即不包括"#aa"
$("#term-2").parentsUntil("#aa").css("background-color", "green");
//查找当前元素之前所有的同辈元素,查找当前节点前面的所有兄弟节点
$("dd:last").prevAll().css("background-color", "green");
//查找当前元素之前所有的兄弟节点，直到遇到匹配的那个元素为止。但不包括那个选择器匹配到的元素。
$("dd:last").prevUntil("#prevID").css("background-color", "green");
//siblings是查找当前节点的所有兄弟节点,同级元素
$("dd").siblings().css("background-color", "green");
动画
//元素的隐藏与显示(括号里的数字代表时间<毫秒> , 有了时间就有了动画效果)
$("#kjid").hide(1000); 或者 $("#kjid").css("display","none");
$("#kjid").show(1000); 或者 $("#kjid").css("display","block");
//一个按钮实现显示与隐藏,<若隐藏,则执行显示; 若显示则执行隐藏>(用toggle) 并加样式
$("#btn_hs").click(function () {
$("#lbID").toggle(1000, function () {
//$(this).css({"boder":"solid 1px #ccc","padding":"2px"})
$(this).css("margin", "100")
})
})
//滑动隐藏 : $("#imgID").slideUp("slow", function () { } );
//滑动显示 : $("#imgID").slideDown("slow", function () { } );
//滑动隐藏与显示(slipDown 和 slipUp ) 的综合
$("#kjid").click(function () { $("#imgID").slideToggle(1000) } );
//渐进渐出,淡入淡出
var isFadeShow = true;
$("#kjid).click(function () {
//$("#imgID").fadeTo(0.8) //这是设置透明度
if (isFadeShow) { $("#imgID").fadeOut("slow", function () { isFadeShow = false }); }
else { $("#imgID").fadeIn(3000, function () { isFadeShow = true }); }
})
//简单动画animate
var isleftRight = true;
$("#btn_animate").click(function () {
//$("#imgID2").animate({ left: "+=100px", "150px" }, "slow", function () { alert("ok") });
//链式写法
$("#imgID2").animate({ left: "+=200px" }, 1000).animate({ left: "+=200px" }, 1000).animate({ left: "+=200px" }, 1000).animate({ left: "+=200px" }, 1000)
})
//停止动画( 不可恢复,只停当前事件 )
$("#btn_stop").click(function () { $("#imgID2").stop(); })
//动画延时
$("#btn_delay").click(function () { $("#imgID2").delay(3000).slideToggle(1000); })
获取控件位置,动态设置控件位置
<script type="text/javascript">
$(function () {
var curY; //获取所选项的Top值,坐标y
var curX; //获取所选项的Top值,坐标x
var curH; //获取所选项的Height值
var curW; //获取所选项的Width值
var srtY; //设置提示箭头的Top值
var srtX; //设置提示箭头的Left值
var objL; //获取当前对象
//设置当前位置数值,参数obj为当前对象名称( 设置箭头的位置 )
function setInitValue(obj) {
curY = obj.offset().top
curX = obj.offset().left
curH = obj.height();
curW = obj.width();
srtY = curY + (curH / 2) + "px"; //设置提示箭头的Top值
srtX = curW - 5 + "px"; //设置提示箭头的Left值
}
//设置当前所选项的鼠标滑过事件
$(".optn").mouseover(function () {//设置当前所选项的鼠标滑过事件
objL = $(this); //获取当前对象
setInitValue(objL); //设置当前位置
var allY = curY - curH + "px"; //设置提示框的Top值
objL.addClass("optnFocus"); //增加获取焦点时的样式
objL.next("ul").show().css({ "top": allY, "left": curW }) //显示并设置提示框的坐标
//$("#aa").show().css({ "top": allY, "left": curW }) //显示并设置提示框的坐标
$("#sort").show().css({ "top": srtY, "left": srtX }); //显示并设置提示箭头的坐标
})
//设置当前所选项的鼠标移出事件
$(".optn").mouseout(function () {
$(this).removeClass("optnFocus"); //删除获取焦点时的样式
$(this).next("ul").hide(); //隐藏提示框
$("#sort").hide(); //隐藏提示箭头
})
Jquery对表格的操作
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//隔行变色
$("table tr:nth-child(even)").css("background-color", "#eee");
//单击全选
$("#chb_selectAll").click(function () {
if (this.checked) {
$("table tr td input[type=checkbox]").attr("checked", true);
}
else {
$("table tr td input[type=checkbox]").attr("checked", false);
}
});
//反选
$("chb_ReselectAll").click(function () {
$("table tr td input[type=checkbox]").attr("checked", function () {
return !$("this").attr("checked");
})
})
//删除按钮单击事件
$("#btn_delete").click(function () {
var intL = $("table tr td input:checked:not('chb_selectAll')").length; //获取除全选框以外的所有选中项(的个数)
if (intL != 0) //如果有选中项
{
$("table tr td input[type=checkbox]:not('chb_selectAll')").each(function (index) {
if (this.checked) {
$("table tr[id=" + this.value + "]").remove(); //获取选中的值并删除该值所在的行
}
})
}
});
//小图片鼠标移动事件
var x = 5; var y = 15; //初始化提示图片位置
$("table tr td img").mousemove(function (e) {
$("#lbXY").html("x:" + e.pageX + " y:" + e.pageY);
$("#imgTip").attr("src", this.src).css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show(500);
});
//小图片鼠标移出事件
$("table tr td img").mousemove(function () {
$("#imgTip").hide(); //隐藏图片
});
})
</script>
AJAX 笔记汇总
(ajax局部刷新属于jquery中的一种技术,所以还是需要引入外部脚本库的)
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
基本格式步骤
//将被调用: 根据浏览器创建对象
<script type="text/javascript">
var xmlHttp; //请求对象
//方法 : 根据浏览器创建对象
function wjq_createXMLHttpRequest() {
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
//将被调用: 准备请求
function wjq_callback_state() {
// readyState : 4请求完毕 3是正在发送
//status : 200是请求成功 400是禁止方法( 禁止状态码是400)
if (xmlHttp.readyState== 4 && xmlHttp.status== 200)
//xmlHttp.responseText接收到的数据字符串
$("#kjid").html(xmlHttp.responseText);
//document.write(xmlHttp.responseText);
}
//大方法( 将调用以上两个方法) : 开始发送请求来接收数据
function wjq_startRequest() {
wjq_createXMLHttpRequest(); //调用上面写的方法( 调用方法直接执行的时必须加括号
//发送HTTP请求
xmlHttp.open("GET",
"dataPage.aspx?firstName='zhao'&age=22&id="+Date().toString(),
True
);
//接收到返回结果后如何处理
xmlHttp.onreadystatechange = wjq_callback_state; //函数赋值语句不加括号
xmlHttp.send(null); //获取到的数据就是dataPage.aspx执行后页面呈现的内容,包括后台数据和前台数据
}
</script>
以下是dataPage.aspx后台Page_Load方法内的代码:
Response.Write("这些数据时从后台搞到的奥!但是下方的滚动条没走,神奇吧<br/>"+DateTime.Now.ToShortDateString()+Request.Params["firstName"]);
//Response.End();
以下是dataPage.aspx前台的代码:
<form id="form1" runat="server">
<div class="divBlock">
<label>这是dataPage.aspx前台页面类名为divBlock的div内的内容</label>
</div>
</form>
简化后的格式
//往另一个页面后台传数据,并获取后台数据
$("#btn_getBackDate1").click(function () {
//从后台获取数据,不走服务器(但往后台传了值)
//如果后台加Response.End();则只加载后台数据
$("#lbID").load("Default.aspx?firstName='zhao'")
})
//获取另一个页面前台的值
$("#btn_getForeDate1").click(function () {
//获取另一个页面前台的值(表示获取页面Default.aspx中类名为divBlock的元素内的全部元素)
//此时Default.aspx页面后台不能有Response.End();这句话,否则加载不到其前台数据,
//因为Response.End();限制只加载后台数据
$("lbID").load("Default.aspx .divBlock")
})
获取json数据
//jason是一个对象,没有大小限制,用于存放数据 { key:value , key:value , key:value}
//例如:[｛"name":'wjq' , "password":'123'｝,｛"name":'wjq' , "password":'123'｝]
$("#btn_getJson").click(function () {
$("#lb_getJson").empty(); //先清空一下数据
$.getJSON("/tool/myJson.json", function (val) {
$.each(val, function (k, v) {
//$("#lb_getJson").append(val[k])
$("#lb_getJson").append(v["name"] + "<br/>").append(v["password"] + "<br/>").append(v["email"] + "<br/>")
})
})
})
注: tool文件夹下的myJson.json文件中数据为:
[
{
"name":"wang" ,
"password":"123" ,
"email":"wjqxw@hotmail.com"
},
{
"name":"ji" ,
"password":"456" ,
"email":"wjqxw@hotmail.com"
},
{
"name":"quan" ,
"password":"789" ,
"email":"wjqxw@hotmail.com"
}
]
获取javascript数据
$("#btn_getjavascript").click(function () {
//加载一些js文件(将js加载到当前页面)
$.getScript("/tool/myJs.js", function (val) {
$("#lb_getJs").html(val);
})
})
注: tool文件夹下的myJs.js文件中数据为:
function test() {
alert("这个javascript函数用于测试ajax获取js数据");
}
获取XML数据
$("#btn_getXMLdata").click(function () {
//打开文件,并通过回调函数处理获取到的数据
alert("开始获取");
$.get("/tool/XMLFile1.xml", function (data) {
$("#divTip").empty(); //先清空一下标记中的内容
var strHTML = ""; //初始化保存内容变量
$(data).find("person").each(function () { //遍历获取的数据
var $strUser = $(this);
alert($strUser);
strHTML += "姓名: " + $strUser.find("name").text() + "<br/>";
strHTML += "性别: " + $strUser.find("sex").text() + "<br/>";
strHTML += "邮箱: " + $strUser.find("email").text() + "<br/>";
})
$("#divTip").html(strHTML); //显示处理后的数据
});
})
})
与一般处理程序交互
$("#btn_ashx").click(function () {
//$.load("/tool/Handler1.ashx");
//name: escape('王') 也是对中文编码 name: encodeURI('王')是对中文编码
//.post 如果传json 则用post 传输的数据量大
$.get("/tool/Handler1.ashx",
{ name: encodeURI('这是发送的数据,在.ashx端,用context.Request["name"]接收') },
function (val) { alert("返回的值为:" + val); }
)
})
注: tool文件夹下的Handler1.ashx文件中ProcessRequest方法为:
public void ProcessRequest(HttpContext context)
{
string name = System.Web.HttpUtility.UrlDecode(context.Request["name"]); //解密
//string sex = (context.Request["txt_wPsd"]); //解密
if (name == "wang")
{ context.Response.Write("王集权"); }
else
{ context.Response.Write(name+"不知道是谁"); }
//context.Response.ContentType = "text/plain";
}
参数序列化
$("#btn_requireDate").click(function () {
//参数序列化
$.post( "/tool/Handler1.ashx",
$("#form1").serialize(),
function (date, status) { if (status == "success") {alert("请求到的数据为:" + date); } }
)
})
注: tool文件夹下的Handler1.ashx文件中ProcessRequest方法为:
如果#form1内的控件ID为 txt_sendData
则在tool文件夹下的Handler1.ashx文件中ProcessRequest方法与上面的( 注 :……)一样,只是
string name = System.Web.HttpUtility.UrlDecode(context.Request["txt_sendData"]); //解密
ajax发送/获取数据
$("#btn_requireDate").click(function () {
//参数序列化
$.ajax({
url: "/tool/Handler1.ashx?name=wang",
dataType: "text",
success: function (date) { alert("请求到的数据为:" + date); }
})
})
})
// $.ajax 使用HTTP请求加载远程页面
$("#btn_getData").click(function () {
$.ajax({
type: "GET",
url: "/tool/Handler3.ashx",
dataType: "text",
success: function (data) {
var dataobj = eval("(" + data + ")"); //转换为json对象
alert(dataobj[0]["name"]);
}
});
}); //end
//设置AJAX请求的全局设置
$.ajaxSetup({
url: "tool/6-10.json",
dataType: "json",
success: function (data) {
alert(data);
}
});
$("#Button1").click(function () {
$.ajax();
});
});
//使用$.each()工具函数遍历ajaxSetting(系统)对象
var strContent = "<li>属性: 值</li>";
$.each($.ajaxSettings, function (property, value) {
strContent += "<li>" + property + ":" + value + "</li>";
})
$("ul").append(strContent);
//使用$.grep()工具函数筛选数组中的元素,筛选元素值大于5 索引号小于8
var strTmp = "筛选前数据";
var arrNum = [2, 8, 3, 7, 4, 9, 10, 9, 7, 21];
var arrGet = $.grep(arrNum, function (ele, index) {
return ele > 5 && index < 8
})
strTmp += arrNum.join();
strTmp += "<br/><br>筛选后数据:"
strTmp += arrGet.join();
$("#divTip").append(strTmp);
//-------------------------------------------------
//使用$.map()工具函数变更数组中的元素
})
标准ajax步骤(XML发表 获取点评为例)
Ajax: get
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
loadData();
//发表点击按钮
$("#btn_yes").click(function () {
//获取加码后的用户名
var strName = encodeURI($("#txtName").val());
//获取加码后的发表内容
var strContent = encodeURI($("#txtContent").val());
$.ajax({
type: "GET",
url: "AppData.aspx", //请求加载数据动态页
dataType: "html",
data: { name: strName, content: strContent },
success: function (msg) {
alert(msg);
loadData();
$("#txtName").val("");
$("#txtContent").val("");
}
})
})
//动态加载xml点评数据
function loadData() {
$.ajax({
type: "GET",
url: "/tool/XMLFileCommon.xml",
dataType: "xml",
cache: false,
success: function (data) {
$("#lb_comment").empty();
var strHTML = "";
//如果没有找到数据
if ($(data).find("Data").length == 0) {
alert("抱歉,目前还没有找到点评数据!")
}
//遍历获取的数据
$(data).find("Data").each(function () {
var $strUser = $(this);
strHTML += "<div>" + "<a href='#'>" + $strUser.find("name").text() + "</a></div>"
strHTML += "<div>" + $strUser.find("content").text() + "</div>";
strHTML += "<div>发送时间: " + $strUser.find("date").text() + "</div>";
})
$("#lb_comment").html(strHTML); //显示处理后的数据
}
})
}
})
</script>
注: AppData.aspx前台页面内容:
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Xml" %>
<%@ Import Namespace="System.IO" %>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["name"]); //解码点评用户名称
string strContent = System.Web.HttpUtility.UrlDecode(Request["content"]); //解码点评提交内容
string strFileName = "/tool/XMLFileCommon.xml";
//定义xml文档变量
XmlDocument xmlDoc = new XmlDocument();
//打开指定的xml文档
xmlDoc.Load(Server.MapPath(strFileName));
//查找根节点元素
XmlNode xmlN = xmlDoc.SelectSingleNode("Comment");
//加入一个节点元素
XmlElement xmlE = xmlDoc.CreateElement("Data");
//创建一个子节点
XmlElement xmlEn = xmlDoc.CreateElement("name");
//设置节点文本
xmlEn.InnerText = strName;
//添加到节点中
xmlE.AppendChild(xmlEn);
//创建一个子节点
XmlElement xmlEc = xmlDoc.CreateElement("content");
//设置节点文本
xmlEc.InnerText = strContent;
//添加到节点中
xmlE.AppendChild(xmlEc);
//创建一个子节点
XmlElement xmlEd = xmlDoc.CreateElement("date");
//获取时间的时分秒
string strSendTime = DateTime.Now.Hour + ":" + DateTime.Now.Minute + ":" + DateTime.Now.Second;
xmlEd.InnerText =strSendTime;
//添加到节点中
xmlE.AppendChild(xmlEd);
//将节点加入根节点中
xmlN.AppendChild(xmlE);
//保存创建好的xml文档
xmlDoc.Save(Server.MapPath(strFileName));
Response.Write("您的点评已成功发表！");
%>
//--注: tool文件夹下的XMLFileCommon.xml文件中数据为 :-------------
<?xmlversion="1.0"encoding="utf-8"?>
<personid="这里是id的value值">
<!--行-->
<teachername="zhao"id="1"sex="man"/>
<student>
<name>学生1</name>
<sex>男</sex>
<age>22</age>
<email>wjqxw@hotmail.com</email>
</student>
</person>
Ajax: post
<script type="text/javascript">
$(function () {
$("#Button1").click(function () {
alert("aa")
$.ajax({
type: "post",
url: "http://www.haitian.com.cn/",
//dataType: "html",
cache: false,
success: function (data, state) {
alert(state);
alert(data);
var aa = $(data).find("#srcPic").children("img").attr("src");
alert(aa);
}
})
})
})
</script>