jQuery 初学笔记(一)

来源:互联网 发布:淘宝瘦身贴有用吗 编辑:程序博客网 时间:2024/05/21 11:34

1、  AjaxAsynchronous Javascript and XML(首先回顾下Ajax) 

var xmlHttpRequest;

         functionajaxTest()

         {

                   if(window.ActiveXObject)

                            xmlHttpRequest =newActiveXObject("Microsoft.XMLHTTP");

         //xmlHttpRequest = newActiveXObject("MSXML2.XMLHTTP");//适合IE新版本,不过上面的也可以使用

                   elseif(window.XMLHttpRequest)

                            xmlHttpRequest =newXMLHttpRequest();

 

                   if(xmlHttpRequest !="undefined")

                   //if("undefined" != xmlHttpRequest)//切忌此种写法不要推荐,有可能在IE不正确

                   {

                            //准备好数据,get请求;url=AjaxServlet; true 表示异步处理

                            var url ="${pageContext.request.contextPath}/AjaxServlet";

                            //GET方式提交,参数跟在url

                            /*xmlHttpRequest.open("GET",url, true);            

                            xmlHttpRequest.onreadystatechange= ajaxCallback; //回调函数                          

                            xmlHttpRequest.send(null);        //发送请求

                            */

                            //POST方式提交

                           

                            xmlHttpRequest.open("POST", url,true);

                            xmlHttpRequest.onreadystatechange= ajaxCallback;//回调函数                          

                            var json ={"001":"a","002":"b"};

                       xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//必须增加

                            xmlHttpRequest.send("json="JSON.stringify(json));     // 发送请求

                   }

 

         }

 

         functionajaxCallback()

         {

                   if(xmlHttpRequest.readyState == 4)

                   {

                            if(xmlHttpRequest.status == 200)

                            {

                                     var json =eval('('+xmlHttpRequest.responseText+')');

                                     for(var iin json)

                                     {

                                              alert(i+", " + json[i]);

                                     }

                            }

                   }

}

2、       www.jquery.com:write less, do more

<scripttype="text/javascript"src="jquery-1.7.2.js"></script>

<scripttype="text/javascript">

// dom文档加载完就会执行,而且是按照顺序执行,onload事件是对象引用,页面加载完并且关联号dom等相关准备工作完成,才会执行,且只会执行最后一次的引用

     $(document).ready(function()

     {

              alert("Hello");

     });

 

     $(document).ready(function()

     {

              alert("World");

     });

</script>

jQuery获取的html元素是以数组的形式

var d =document.getElementById("div1");

             alert(d.innerHTML);

             // dom 转换为 jQuery对象 扩展了功能

             var jd = $(d);

             alert(jd.html());

             // jQuery 对象-->转换为dom对象

             var e = $("a")[0];

           alert(e.innerHTML);

3、  jQuery 选择器

////////////首先看下css选择器

a.    标签选择器,以文档元素的标签名称作为选择器

b.    ID选择器,文档中某个元素属性的ID值

c.    类选择器 div.x 应用到div元素中class=”x”的元素,.x 表示引用到文档中所有class=”x”的文档元素

d.    群组选择器 td, tb, div.a{…}

e.    后代选择器 #links a

f.     通配选择器 * 表示所有内容

/////////////jQuery选择器

 

 

原创粉丝点击