Javascript Dom Jquery 笔记汇总持续更新中

Javascript 笔记汇总

零散知识点

1) Js的执行顺序是从上到下执行的,所以有时将javascript写到body后面(一般是写到head标签中)

2) Javascript中既可以使用双引号也可以使用单引号声明字符串,主要是为了方便和html继承,避免转义符的麻烦

3) 事件在<body>标签中写 <a href=”javascript:alert(‘hello,这也是事件,注意是分号’)”

4) javascript中不像C#中那样要求所有路径都有返回值

5) 分割: name.join(“|”); //默认是逗号

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)

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>

单选框,单选按钮 ,checkbox复选框

单选按钮通过设置相同的名字可以分组 ,就可以设置只选择一个了

<input id="Radio1" name="sex" type="radio" value="man" />男

<input id="Radio2" name="sex" type="radio" value="woman"/>女

复选框也是通过名字,但是可以实现多选

正则表达式

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("错误"); }

}

添加事件的方式

<!—第一种方式-->

<!—第二种方式-->

document.getElementById("kjID").onclick = function () {

alert("这是添加js事件的第二种方式方式");

}

</script>

<!—第三种方式-->

document.getElementById("kjID").onclick = new Function("alert('添加事件的第三种方式, 记得这个的Function的f要大写');");

</script>

<!—第四种方式-->

function takeit() { alert("这是通过方法名称来调用事件"); }

document.getElementById("kjID").onclick = function () { takeit(); } //这里直接写方法名就可以了

</script>

判断浏览器标准(W3C , IE)

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时就行了

}

获取键盘按键

(不同浏览器获取按键的方法不同)

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>

打开/弹出新窗口,关闭窗口,关闭当前窗口,往页面中写值

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页面传值,父窗体和子窗体相互传值

父窗体中:

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>

//------------------------------------------------------------//

<div>

<a href="js_YeMianChuanZhi_ziWeb.aspx" target="_blank">先打开子页面</a>

<label>子窗体传回的值是:</label>

</div>

</form>

</body>

子窗体中:

function sendTofuWeb() {

window.opener.document.getElementById("textFromziWeb") ;是父窗体

var thisText = document.getElementById("ziText1").value;

window.opener.document.getElementById("textFromziWeb").value = thisText;

}

</script>

</head>

<body>

<div>

</div>

</form>

</body>

</html>

2页面传值,父窗体和子窗体相互传值

先运行页面1:

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:

//获取传回来的值

function getData() {

var obj = window.dialogArguments;

alert(obj.name);

}

function btn_returnData() {

//此方法只适用于打开的小窗口回传值

window.returnValue = "这是子页面回传回来的值(只有关闭子页面时,才能看到回传回来的值)";

}

</script>

获取DIV或其他标签中的其他元素的类型event.srcElement.type

例子: 图片的选择

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>

流执行顺序

<b onclick="myclick('b')">点击我-标签从内到外展示</b>

</td>

</tr>

</table>

</div>

<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 = "默认状态栏"; //作用时间长

递归调用

(方法自己调用自己就叫递归调用)

例子: 计时器

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

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

}

菜单特效(动态加载, 静态加载)

//声明一个二维数组

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>

</div>

</div>

</div>

</div>

</form>

</body>

</html>

DOM 笔记汇总

动态添加节点一般过程

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) 基本格式:

$(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); })

获取控件位置,动态设置控件位置

$(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对表格的操作

$(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中的一种技术,所以还是需要引入外部脚本库的)

基本格式步骤

//将被调用: 根据浏览器创建对象

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前台的代码:

<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

$(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"/>

<email>wjqxw@hotmail.com</email>

</student>

</person>

Ajax: post

$(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>

Javascript Dom Jquery 笔记汇总持续更新中

Javascript 笔记汇总

零散知识点

Js变量

Js排错与调试

匿名函数

面相对象初步(当成类用)

Array,dictionary对象数组

数组,for 及其它

数据类型

对字符的操作

日期(年月日)时间

自动把获取的参数放到一个集合里

List, Combox,select 组合框,下拉框, 下拉列表

单选框,单选按钮 ,checkbox复选框

正则表达式

添加事件的方式

判断浏览器标准(W3C , IE)

判断鼠标在页面,鼠标在屏幕中的位置

获取鼠标按键

获取键盘按键

打开/弹出新窗口,关闭窗口,关闭当前窗口,往页面中写值

1页面传值,父窗体和子窗体相互传值

2页面传值,父窗体和子窗体相互传值

获取DIV或其他标签中的其他元素的类型event.srcElement.type

流执行顺序

获取地址栏的信息,通信协议端口号,页面路径,主机名,参数等信息刷新页面,状态栏

递归调用

页面缓存cookie

对table表格的操作(插入/删除行,插入/删除单元格,插入值)

菜单特效(动态加载, 静态加载)

DOM 笔记汇总

动态添加节点一般过程

零散知识点

dom技术对节点,元素控件的操作

Jquery 笔记汇总

零散知识点

Jquery对元素,控件的操作

对样式的操作:

一些方法事件, 对标签元素的操作

绑定,添加,移除事件

查找,匹配

动画

获取控件位置,动态设置控件位置

Jquery对表格的操作

AJAX 笔记汇总

基本格式步骤

简化后的格式

获取json数据

获取javascript数据

获取XML数据

与一般处理程序交互

参数序列化

ajax发送/获取数据

标准ajax步骤(XML发表 获取点评为例)

标准ajax步骤(XML发表获取点评为例)