Javascript Dom Jquery 笔记汇总--转

齐晓威_518

浏览: 606855 次
性别:
来自: 郑州

最近访客更多访客>>

huangsheng2012

cr135810

ws07

gaochunhu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery使用心得与体会

jquery

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)

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", width: "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>

分享到：

HTML DIV CSS 笔记汇总 | jQuery分别获取选中的复选框值

2012-10-20 00:26
浏览 2117
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论