zoukankan      html  css  js  c++  java
  • JQuery温故而知新

    JQuery简介

     JQuery能做什么。JQuery能做的普通的Dom能做,普通Dom能做的JQuery也能做。

    JQuery的优点:尺寸小、使用简单方便(Write Less, Do More,吃得少干得多。链式编程($("#div1").draggble().show().hide().fly())、隐式迭代(自动对于多个元素进行迭代方法调用))、屏蔽浏览器差异跨浏览器兼容性好(IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)、插件丰富、开源、免费。
    VS中JavaScript、JQuery的自动完成功能:在VS2010中直接有,VS008需要安装VisualStudio和VS90SP1-KB958502-x86补丁会更强更好用,下载地址{

    (http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&familyid=27673c47-b3b5-4c67-bd99-84e525b5ce61)和VS90SP1-KB958502-x86(http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736)补丁会更强更好用。然后引用jquery-1.4.1.js,jquery-1.4.1-vsdoc.js放到同目录下,不需要在页面引用。

    }。然后引用jquery-1.4.2.js放到同目录下。(2010内置仅指的是不用自己把js文件放进去了,页面照样引用)。
    vsdoc是vs2008sp1以后增加的一个技术,将js文件对应的vsdoc(相当于js库提供的方法的说明库)放到和js一起,就有会这个第三方js的自动提示的功能。
    通过DomJQuery的例子简单复习Dom。

    简单的JQuery

    Dom中动态设置事件和静态设置。Jquery中一般习惯动态设置。
    $(document).ready(function(){
               alert("加载完毕!");
           });//注册事件的函数,和普通的dom不一样,不需要在元素上标记on**这样的事件。
    当页面Dom元素加载完毕时执行代码,可以简写为:
            $(function(){
               alert("加载完毕!");
          });

    和onload类似,但是onload只能注册一次(window.onload=function...)(没有C#中的+=机制),后注册的取代先注册的,而ready则可以多次注册都会被执行。

    JQuery的ready和Dom的onload的区别(*):onload是所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发,而ready则是Dom元素创建完毕后就被触发,这样可以提高网页的响应速度。在jQuery中也可以用$(window).load()来实现onload那种事件调用的时机。



    JQuery选择器

    JQuery选择器用于查找满足条件的元素,比如可以用$("#控件Id")来根据控件id获得控件的jQuery对象,相当于getElementById:
    $(“#div1”).html(“<fontcolor=red>hello</font>”)。语法、意义类似于CSS选择器
    $就是函数,自己动手写一把
    $("TagName")来获取所有指定标签名的jQuery对象,相当于getElementsByTagName:
           $(function() {
               $("#btnClick").click(function(){
                  $("p").html("我们都是P");
               });
            });
    –匿名函数的写法如果嵌套层数过多,可以将匿名函数写到单独的一个匿名函数然后用变量指向它,但是不推荐直接写一个命名函数再传进去
    JQuery中注册事件监听的写法:click()、leave()、focus()、blur...,自己动手写click函数。


    jQuery对象、Dom对象

    jQuery对象就是通过jQuery包装Dom对象后产生的对象:alert($('#div1').html())。Dom对象要想通过jQuery进行操作,先要转换为JQuery对象。
    $('#div1').html()等价于:document.getElementById("div1").innerHTML;
    $('#div1')得到的就是jQuery对象,jQuery对象只能调用jQuery对象封装的方法,不能调用Dom对象的方法,Dom对象也不能调用jQuery对象的方法,所以alert($('#div1').innerHTML是错的,因为innerHTML是DOM对象的属性。
    Array是JS语言本身的对象,不是Dom对象,因此不需要转换为Jquery对象才能用
    (*)将Dom对象转换为JQuery对象的方法,$(dom对象);当调用jQuery没有封装的方法的时候必须用Dom对象,转换方法:vardomobj = jqobj[0]或者vardomobj=jqobj.get(0)
    在引用外部js的Script标签内不能再写js代码,引用外部js的Script标签也不能用简写方法闭合。
    jQuery修改样式:$(“#div1”).css(“background”, “red”);获得样式$(“#div1”).css(“background”);修改value:$(“#un”).val(“abc”),获得value:$(“#un”).val(),类似的获得、设置innerText、innerHTML用text()和html()。val、html、text等是方法,不是属性,jQuery中很少有属性的用法(没有css.color=‘red’,因为属性写法很难“链式编程”。

    •CSS选择器,同时选择拥有样式的多个元素(类似于CSS选择器):
    –    <style type="text/css">
    –        .test{ background-color:Red}
    –    </style>
    –    <script type="text/javascript">
    –        $(function() {
    –        $(".test").click(function() {
    –                alert($(this).text());
    –            });
    –        });
    –    </script>  
    –    <pclass="test">test1</p>
    –    <pclass="test">test2</p>
    –    <pclass="test">test3</p>

    •CSS选择器,同时选择拥有样式的多个元素(类似于CSS选择器):
    –    <style type="text/css">
    –        .test{ background-color:Red}
    –    </style>
    –    <script type="text/javascript">
    –        $(function() {
    –        $(".test").click(function() {
    –                alert($(this).text());
    –            });
    –        });
    –    </script>  
    –    <pclass="test">test1</p>
    –    <pclass="test">test2</p>
    –    <pclass="test">test3</p>

    •标签选择器,拥有样式的标签选择器
    •多条件选择器:$("p,div,span.menuitem"),同时选择p标签、div标签和拥有menuitem样式的span标签元素(类似于CSS选择器)
    注意选择器表达式中的空格不能多不能少。易错!
    •层次选择器:
    1$("div li")获取div下的所有li元素(后代,子、子的子……
    2$("div > li")获取div下的直接li子元素
    –(3)$(".menuitem +div")获取样式名为menuitem之后的第一个div元素(不常用)
    –(4)$(".menuitem ~div")获取样式名为menuitem之后所有的div元素(不常用)
    JQuery的迭代

    •如何判断对象是否存在,jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象),调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法,因此即使通过id选择的元素不存在也不会报错,如果需要判断指定的id是否存在,应该写:
    •if($("#btn1").length <= 0) {
    •                alert("id为btn1的元素不存在!");
    •            }


    JQueryDom操作

    •1、使用html()方法读取或者设置元素的innerHTML:
    •alert($("#btn1").html());
    •$("#btn1").html("hello");
    •2、使用text()方法读取或者设置元素的innerText:
    •alert($("#btn1").text());
    •$("#btn1").text("hello");
    •3、使用attr()方法读取或者设置元素的属性,对于JQuery没有封装的属性(所有浏览器没有差异的属性)用attr进行操作。
    •        alert($(“#btn1").attr("href"));
    •        $("#btn1").attr("href","http://www.rupeng.com");       
    •4、(*)使用removeAttr删除属性。删除的属性在源代码中看不到,这是和清空属性的区别。“查看源文件”只能看服务器上下载下来的那份。

    节点遍历
    •next()方法用于获取节点之的挨着的第一个同辈元素,$(".menuitem").next("div")、nextAll()方法用于获取节点之后的所有同辈元素,$(".menuitem").nextAll("div")
    •prev、prevAll兄弟中之前的元素。
    siblings()方法用于获取所有同辈元素,$(“.menuitem”).siblings(“li”)。siblings、next等所有能传递选择器的地方能够使用的语法都和$()语法一样。如果是两组ul,则其中一个的siblings不包括另外一个ui中的,兄弟指的是同父元素的。
    •重申问题,不要$().click=function;好多时候能.出来;不要在引用js的代码里再写代码。

    •//对于设置css、attr等这种本来不需要返回值的函数,jquery前面对象给返回。如果函数返回jquery对象数组(siblings),则后续是基于返回的数组进行迭代。如果函数返回值根本不是jquery对象数组(取innerHTML的html()),则无法继续迭代。
    •                    //前面的所有的“后面的”
    •                    $(this).css("backgroundColor","red").prevAll().css("backgroundColor","green").nextAll().css("backgroundColor","black");
    •       //$(this).css("backgroundColor","red").prevAll().css("backgroundColor", "green");
    •//$("#ul1li").text().css("backgroundColor","red");//错误:返回值根本不是jquery对象数组

    链式编程
    •高亮选中项:给所有有menuitem这个样式的元素添加click监听事件,当click的时候,向被点击的元素添加highlight这个样式,然后从其兄弟节点(siblings)中移除highlight风格。.”的时候是针对的上一步的返回值的节点集合的操作。链式编程就是对象一棒棒向下传,能不能正确传下来要看返回值,html()不能传,prevAll().nextAll()也传错。自己动手写。$("#tableRating td").click(function() {$(this).prevAll().next().html("a"); });//经典!
    •    <styletype="text/css">
    •        .menuitem{background-color:Yellow; }
    •        .highlight { background-color: Red;}
    •    </style>
    • $(function() {
    •            $(".menuitem").click(function() {
    •                $(this).addClass("highlight").siblings().removeClass("highlight");
    •            });
    •        });
    •    <p class="menuitem">111111</p><br />
    •    <p class="menuitem">111111</p><br />
    •    <p class="menuitem">111111</p><br />

    基本过滤选择器
    •:first 选取第一个元素。$("div:first")选取第一个<div>$(".warn:first");
    •:last 选取最后一个元素。$("div:last")选取最后一个<div>
    •:not(选择器) 选取不满足“选择器”条件的元素,$("input:not(.myClass)")选取样式名不是myClass的<input>
    •:even、:odd,选取索引是奇数、偶数的元素:$("input:even")选取索引是奇数的<input>
    :eq(索引序号):gt(索引序号):lt(索引序号)选取索引等于、大于、小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的<input>
    组合选择器是按照表达式从前向后进行数据过滤。

    $(":header")选取所有的h1……h6元素(*)

    $(“div:animated”)选取正在执行动画的<div>元素。 (*)

    样式操作

    •获取样式 attr("class"),设置样式attr("class","myclass"),追加样式addClass("myclass")(不影响其他样式),移除样式removeClass("myclass"),切换样式(如果存在样式则去掉样式,如果没有样式则添加样式)toggleClass("myclass"),判断是否存在样式:hasClass("myclass")
    •点击表格行,被点击的行高亮显示(背景是黄色),其他行白色背景。监听每个tr的click事件,将点击的背景设置为黄色,其他的设置为白色背景。颜色定义为class样式。

    过滤器(*)
    •属性过滤选择器:
    –$("div[id]")选取有id属性的<div>
    $("div[title=test]")选取title属性为“test”的<div>,JQuery中没有对getElementsByName进行封装,用$("input[name=abc]")
    –$("div[title!=test]")选取title属性不为“test”的<div>
    –还可以选择开头、结束、包含等,条件还可以复合。(*)
    •表单对象选择器(过滤器):
    –$("#form1:enabled")选取id为form1的表单内所有启用的元素
    –$("#form1:disabled")选取id为form1的表单内所有禁用的元素
    –$("input:checked")选取所有选中的元素(Radio、CheckBox)
    –$("select option:selected")选取所有选中的选项元素(下拉列表)

    元素的each

    •jQuery元素的也可以调用each方法,只是对$.each的简化调用。

    显示选中的复选框信息

          $(function() {

             $("input[name=names]").click(function() {

                 varnames = $("input[name=names]:checked");

                 vararr = new Array();

                 names.each(function(key,value) { arr[key]= $(value).val();});

                 $("#msgNames").text("共选中"+names.length+"条:"+arr.join(","));

             });

         });

       <input type="checkbox" name="names"value="tom" />tom

       <input type="checkbox" name="names" value="jim" />jim

       <input type="checkbox" name="names"value="lily" />lily

       <p id="msgNames"></p>


    表单选择器
    •$(":input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样, $("input")只获得<input>
    •$(":text")选取所有单行文本框,等价于$("input[type=text]")
    •$(":password")选取所有密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

    选择器的相对定位
    •$(select,queryContext)
    •siblings、next、children等方法都可以指定选择器

    动态创建Dom节点
    •使用$(html字符串)来创建Dom节点,并且返回一个jQuery对象,然后调用append等方法将新创建的节点添加到其他节点(元素)中:
    •        var link = $("<a href='http://www.baidu.com'>百度</a>");
    •        $("div:first").append(link);
    •$()创建的就是一个jQuery对象,可以完全进行操作
    –var link = $("<a href='http://www.baidu.com'>百度</a>");
    –link.text("百毒");
    –$("div:first").append(link);。getElementByid的问题
    •append方法用来在元素的末尾追加元素。//$("#select1option:selected").remove().appendTo($("#select2")) ;

    $("#select1option:selected").appendTo($("#select2")) ;

    创建出的元素没有append到界面之前是无法用选择器找到的,就像new一个对象,没有insert到数据库之前是无法select出来的。

    •prepend,在元素的开始添加元素。prependto。after,在元素之后添加元素(添加兄弟)。before:在元素之前添加元素(添加兄弟)


    删除节点

    •(1)remove()删除选择的节点
    –案例:清空ul中的项,代码见备注。$(“ul li.testitem”).remove(); 删除ul下li中有testitem样式的元素。自杀。把找到的都删掉。
    •remove方法的返回值是被删除的节点对象,还可以继续使用被删除的节点。比如重新添加到其他节点下
    •                varlis = $("#ulSiteli").remove();
    •                $("#ulSite2").append(lis);    // $("#ulSiteli").remove().appendTo($("#ulSite2"));
    •权限选择:var items = $("#select1 option:selected").remove();$("#select2").append(items); 更狠的:$("#select1option:selected").appendTo($("#select2"))
    •(2)empty()是将节点清空,清除节点的innerHTML,节点还在

    补充
    •写代码的好习惯,{、(写完开始就写结束,省得忘了。,在JQuery中这样写就不容易写错了。
    •如果报错“例外被抛出”等,很可能是选择器表达式有问题,比如单词拼写错误、加了不必要的空格等。val是方法不是属性。jQuery是完全按照JavaScript的语法写出来的JavaScript函数库,没有任何的魔法,任何看似怪异的写法都是很合法的JavaScript语法。JQuery就是一堆写好的JavaScript函数库而已,没有什么特殊的,你也可以写出来,因此完全可以和普通JS代码混着用。最好不要dom、jQuery方式混着用。

    节点操作(*)

    •替换节点:
    •$("br").replaceWith("<hr/>");
    •将<br/>替换为<hr/>
    •包裹节点
    •wrap()方法用来将所有元素逐个用指定标签包裹:
    •$("b").wrap("<fontcolor='red'></font>") 将所有粗体字红色显示

    RadioButton操作
    •取得RadioButton的选中值
    –$("input[name=gender]:checked").val()
    –        <input id="Radio2"checked="checked" name="gender" type="radio"value="男"/>男<input
    –            id="Radio1"checked="checked" name="gender" type="radio"value="女"/>女<inputid="Radio3"
    –                checked="checked"name="gender" type="radio" value="未知"/>未知</p>
    设置RadioButton的选中值:
    $("input[name=gender]").val([""]);
    或者
    $(":radio[name=gender]").val([""]);
    注意val中参数的[]不能省略

    事件

    •(*)JQuery中的事件绑定:$(“#btn”).bind(“click”,function(){}),每次都这么调用太麻烦,所以jQuery可以用$(“#btn”).click(function(){})来进行简化。unbind
    •mouseover、mouseenter的区别:div里套div。见备注。和事件冒泡有关系。
    •(*)合成事件hover,hover(enterfn,leavefn),当鼠标放在元素上时调用enterfn方法,当鼠标离开元素的时候调用leavefn方法。
    •事件冒泡:JQuery中也像JavaScript一样是事件冒泡
    •如果想获得事件相关的信息,只要给响应的匿名函数增加一个参数:e,e就是事件对象。调用事件对象的stopPropagation()方法终止冒泡。e.stopPropagation();
    •$("tr").click(function(e){ alert("tr被点击"); e.stopPropagation(); });//注意函数的参数是e
    •阻止默认行为:有的元素有默认行为,比如超链接点击后会转向新链接、提交按钮默认会提交表单,如果想阻止默认行为只要调用事件对象的preventDefault()方法和Dom中的window.event.returnValue=false效果一样。
    •$("a").click(function(e) { alert("所有超链接暂时全部禁止点击"); e.preventDefault(); });

    事件其他(*)
    •属性:pageX、pageY、target获得触发事件的元素(冒泡的起始,和this不一样)、which如果是鼠标事件获得按键(1左键,2中键,3右键)。altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下,为bool值。keyCode、charCode属性发生事件时的keyCode(键盘码,小键盘的1和主键盘的keyCode不一样)、charCode(ASC码)。
    •移除事件绑定:bind()方法即可移除元素上所有绑定的事件,如果unbind("click")则只移除click事件的绑定。bind:+=;unbind:-=
    •一次性事件:如果绑定的事件只想执行一次随后立即unbind可以使用one()方法进行事件绑定:

    鼠标
    •获得发生事件时鼠标的位置
    •$(document).mousemove(function(e) {
    •            document.title = e.pageX + "," + e.pageY;
    •        });
    •在mousemove、click等事件的匿名响应函数中如果指定一个参数e,那么就可以从e读取发生事件时的一些信息,比如对mousemove等鼠标事件来说,就可以读取e.pageX、e.pageY来获得发生事件时鼠标在页面的坐标。

    动画
    lshow()、hide()方法会显示、隐藏元素。用toggle()方法在显示、隐藏之间切换
    l    $(":button[value=show]").click(function() {$("div").show(); });
    l   $(":button[value=hide]").click(function() {$("div").hide(); });
    l如果show、hide方法不带参数则是立即显示、立即隐藏,如果指定速度参数则会用指定时间进行动态显示、隐藏,单位为毫秒,也可以使用三个内置的速度:fast(200毫秒)、normal(400毫秒)、slow(600毫秒),jQuery动画函数中需要速度的地方一般也可以使用这个三个值。toggle、slideDown、slideUp
    l案例:QQTab效果。常见错误:animate参数是词典类型。隐藏和显示的级别不一样。mouseover(进入图片的时候触发一次)和mousemove(鼠标在元素上移动就会一直不断的触发)的区别。mousemove中放大造成的“没效果”的迷局。“没效果”不等于“没执行”。如何证明“这段代码运行了吗”alert。样式优先级

    复杂动画

    lanimate:anmite内部设置的多个值是同步变化的,链式的animate是依次动画的。
    l例子:animate({ left: 0, top: 0, 300, height: 300 })、.animate({ opacity: 0 }).animate({ opacity: 1 })。
    l还可以指定增量,$(“#div1”).animate({ height: “+=100” }); //如果是+=、-=等增量形式要写成字符串,因为JavaScript不认识这种语法

    JQuery提供的函数

    l$.map(array,fn)对数组array中每个元素调用fn函数逐个进行处理,fn函数将处理返回,最后得到一个新数组。猜猜内部实现。

    例子,得到一个元素值是原数组值二倍的新数组

    vararr = [3, 5, 9];

    var arr2= $.map(arr,function(item) { return item * 2; });//联想C#委托的例子。函数式编程。

    $.map不能处理Dictionary风格的数组。       

    l$.each(array,fn)对数组arry每个元素调用fn函数进行处理,没有返回值。猜猜内部实现。

    vararr = { "tom":"汤姆","jerry": "杰瑞", "lily": "莉莉" };

    $.each(arr, function(key, value) { alert(key+"="+value); });

    如果是普通风格的数组,则key的值是序号。

    l还可以省略function的参数,这时候用this可以得到遍历的当前元素:

    vararr = [3, 6, 9];

    $.each(arr, function() { alert(this); });//能读懂。

    普通数组推荐用无参,用dict风格的就用key、value。

    常用JQuery插件

    lJQuery官方的UI控件 JQueryUI
    http://jqueryui.com/下发包
    演示常用方法,分析代码。
    表现和内容分离,语义化。
    lJQuery.validate表单验证插件
    lForm,用于为表单提供直接的Ajax能力
    l所有插件列表http://plugins.jquery.com/


    使用JQueryUI

    l使用JQueryUI
    l1、引用jquery的css(注意不要忘了image文件夹)
    l2、引用jquery.js,引用jqueryui.js(如果想减小尺寸,可以引用单独的每个插件的js)
    l3、查看文档,根据说明使用,一般就是在ready里面加一句类似于$("#aa").draggle();
    l“development-bundle\demos”是例子,development-bundle\docs是每个控件的详细用法。

    JQuery插件: JQuery cookie
    l什么是cookie:Cookie就是保存在浏览器上的内容,用户在这次浏览页面的时候向Cookie中保存文本内容,下次再访问页面的时候就可以取出来上次保存的内容,这样就可以得到上次“记忆”的内容。Cookie不是JQuery特有的概念,只不过JQueryCookie把它简化的更好用而已。Cookie就是存储在浏览器里的一些数据。(不能在IE中存,FF中取)
    lCookie需要浏览器的支持,浏览器的Cookie是可以禁用的,如果禁用了Cookie就不能使用了,不过一般不用考虑禁用Cookie的情况。Cookie的几个特征:Cookie是与域名相关的,所以163.com不能读取baidu.com记录的Cookie,正因为如此读取、设置Cookie的时候不用担心不同域名cookie的冲突;一个域名能写入的Cookie总尺寸是有限制的,一般是是几千字节,能写入的Cookie总条数一般是几十条,超过以后浏览器自己会根据自己的策略移除一些Cookie;Cookie不是写入以后一定下次能读出来,浏览器可能会定期清除、用户也可能会手动清除。写到Cookie中的数据一定是可有可无的数据,像防止投票作弊就不能用Cookie。

    JQuery Cookie使用
    l使用方法,Cookie保存的是键值对
    1、添加对jquery.cookie.js
    2、设置值,$.cookie('名字', '值')。cookie中保存的值都是文本。
    3、读取值,var v=$.cookie('名字')
    alert($.cookie("用户名"));
    $.cookie("用户名","tom");在同域名的另外一个页面中也能读取到。
    l案例:点击登录以后保存用户名,再登录的时候读取上次保存的用户名,帮用户填上
    l设置值的时候还可以指定第三个参数,$.cookie(‘名字’, ‘值’, { expires: 7, path: ‘/’, domain: ‘itcast.cn’, secure: true}),expires表示要求浏览器保留Cookie几天,这个值只是给浏览器的建议,可能没到时间就已经被清除了。可以实现“勾选【记录我的用户名10天】”的功能。如果不设定expires在浏览器关闭以后就清除,options参数用哪个设置哪个。Cookie存在哪?IE中是存在临时文件夹中以cookie开头的文件。
    l练习:实现“上次访问时间”功能;写到div上。
    l练习:允许用户点击不同颜色的色块设置网页的背景颜色,然后记住用户的选择,下次进入的时候是用用户上次设置的背景色。
    l案例:换CSS文件实现换肤。$("link:first").attr("href","hongijin.css")

    案例,点击登录以后保存用户名,再登录的时候读取上次保存的用户名,帮用户填上

            varoldusername =$.cookie("username");

            if (oldusername) {

               $("#username").val(oldusername);

            }

            $("#btnLogin").click(function(){

               $.cookie("username", $("#username").val());

            });

    错误
    l$(“document”)与$(document)。为什么$(“document”)不可以,因为没有document这个标签。为什么$(“body”)可以?因为有body标签。
    l不要用attr设置背景颜色,分清属性和样式。$(“#btn1”).attr(“style”, “background-color:Red”);$("#btn1").css("backgroundColor","Red")
    l分清执行顺序,不要先设置立即执行。
  • 相关阅读:
    SQL学习
    FOR XML PATH
    IOS学习网址
    weak nonatomic strong等介绍(ios)
    UVALive3045 POJ2000 ZOJ2345 Gold Coins
    UVA713 UVALive5539 POJ1504 ZOJ2001 Adding Reversed Numbers
    UVA713 UVALive5539 POJ1504 ZOJ2001 Adding Reversed Numbers
    UVA439 POJ2243 HDU1372 ZOJ1091 Knight Moves【BFS】
    UVA439 POJ2243 HDU1372 ZOJ1091 Knight Moves【BFS】
    UVA10905 Children's Game
  • 原文地址:https://www.cnblogs.com/ffeng/p/3001849.html
Copyright © 2011-2022 走看看