继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JQuery学习笔记

AI人工智能视频入门
关注TA
已关注
手记 330
粉丝 93
获赞 396

         1.JQuery简介         !JavaScript缺点: JQuery是对JavaScript进行了封装, 最好是把DOM能实现的功能也可以用JQuery来实现
 
          !JQuery,可扩展的插件非常多         !JQuery优点:尺寸小,使用简单方便(Write Less,Do More,吃得少干得多.链式编程(     $("#div1").draggble().show().hide().fly()    ),隐式迭代),屏蔽浏览器差异,跨浏览器兼容性好(IE 6.0+,FF 2+,Safari 3.0+ ,Opera 9.0+,Chrome),插件丰富,开源,免费         !vsdoc(相当于js的说明库)是vs2008sp1以后增加的一个技术,将js文件对应的vsdoc放到和js一起,就会有这个第三方js的自动提示的功能         !测试:    隐藏块$("div").click( function ()   { $(this ).hide("slow");   });         <head runat="server">        <title></ title>        <script src="Scripts/jquery-1.4.1.js" type ="text/javascript"></ script>        <script type="text/javascript">            $( function ()   {                $( "#btn").click(function ()   { alert($("#un").val());   });            });        </script>    </head>    <body>    <input type="text" id="un" />    <input id="btn" type="button" value="hello" />    </body>         效果:    
     2.简单的Jquery         ! $(document).ready( function ()   {alert("加载完毕" );   });//注册事件的函数,和普通的dom不一样,不需要再元素上标记on**这样的事件.         当页面Dom元素完毕时执行代码,可以简写为:         $(function())         {              alert("加载完毕!");         };         和onload类似,但是onload只能注册一次(window.   没有C#中的+=机制),后注册的去带先注册的,而ready则可以多次注册都会被执行.         JQuery的ready和DOM的onload的区别:onload是所有Dom元素创建完毕,图片,css等都加载完毕后才被触发,这样可以提高网页的响应速度.在JQuery中也可以用$(window).load()来事项onload那种事件调用的时机         注:IE只有在页面不是嵌入frame中的情况下才和Firefox等一样,先执行$(document).ready()的内容,再执行原来的onload 方法。对于嵌入frame中的页面,也只是绑定在load事件上执行,所以自然是在原来的 环境下有一个访问不到的资源,那十几秒的延迟正是它放大出的时间差。          window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。       $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。     3.JQuery提供的函数         $.map(array,fn)对数组 array 中每一个元素调用fn函数逐个进行处理, fn函数将处理返回, 最后得到一个新数组,注意这个函数是有返回值的函数,返回数组         例子:得到一个元素值是原数组值2倍风格的新数组         var arr = [3, 5, 7];            var arr2   = $.map(arr,function (item)   { return item   * 2; }); //联想C#委托的例子.函数式编程            alert(arr2);         $.map不能处理Dictionary风格的数组.         ! $.each(array,fn)对数组arry每个元素调用fn函数进行处理,没有返回值         var arr11 = { 'tom': '汤姆', 'jerry': '杰瑞', 'lily': '莉莉' };          $.each(arr11, function (key, value) { alert(key + '=' + value) });         如果是普通数组,key就是序号, 使用item传入的话, item指的是key, 不传入参数的this指的是value 
       ! 还可以忽略function的参数,这时候用this可以遍历的当前元素         普通数组推荐用无参数, dictionary推荐使用key,value的形式
 4.JQuery对象,Dom对象       JQuery对象就是通过JQuery包装Dom对象后产生的对象:           $(function ()   { alert($( "#div1").html());});Dom对象要想要通过jQyery进行操作,先要转换为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对象,装换方法jquery对象才能用,转换方法: var domobj = jqobj[0] 或者 var domobj=jqobj.get(0)         Jquery修改样式: $('#div1').css("background","red"); 获得样式 $("div1").css("background"); 修改value: $("#un").val(new Date()); 获得value: $("#un").val() 类似获得innerText, innerHTML用 text()和 html()          $(function ()   { $( "#div1").css("background" , "red")   });            $( function ()   { alert($("#div1" ).css("background"));   });            $( function ()   { $("#un" ).val(new Date());   });            $( function ()   { alert($("#un" ).val())   });            $( function ()   { $("#div1" ).html("a<font   color='red'>b</font>"); });            $( function ()   { alert($("#div1" ).html());   });    5.JQuery选择器         ! id选择器          $( "#div1" ).html()         ! name选择器          $(function(){              $("p").click(function(){alert("我是p"); })         });    6.JQuery选择器--样式选择         $(functio;;"text/css">            .warning{ background-color :Yellow; color:Red }        </style>    
     <body>    <input class="warning" type="button" value="tagname" id="btnClick" />    <p class="warning">aa </p>    <p> a1</p >    <p> a2</p >    <div class="warning">    dsadfasdf    </div>    </body>    
   7.JQuery选择器--多条件选择器,层次选择器       多条件选择器  $("p,div,span.menuitem"), 同时选择p标签,div标签和拥有menuitem样式的span标签元素       注意选择器表达式的空格不能多也不能少,易错点 要注意       层次选择器:            (1) $("div li")获取div下的所有li元素 (后代 , 子, 子的子)            (2) $("div > li") 获取div下的直接li子元素            (3) $("menuitem + div") 获取样式名为menuitem之后的第一个div元素(不常用)            (4) $("menuitem - div") 获取样式名为menuitem之后的所有div元素(不常用)      
     8.JQuery的迭代       在JQuery中,在通过id调用对象时,如果id名字不存在,JQuery是不会报错的. 如何判断对象是否存在可以写如下代码进行识别       $(function ()   {              var element   = $("#btn1" );              if (element.length   <= 0) {                  alert( "抱歉没有指定的按键" );                  return;              }              element.mouseover( function ()   { alert("移上来了!" )});          });               9.JQuery的节点的遍历       *this是Dom对象, 在JQuery中使用要转换 $(this)       ! next()使用       <script type="text/javascript">          $( function ()   { $("div" ).click(function ()   { alert($( this).next("div" ).text());   }) }); //next()指的是下一个元素,里面可以加限制,如果不符合,则显示空白,符合显示内容.所以实际上经过测试,没有意义,并非是第一个同辈元素.          $( function ()   { $("div" ).click(function ()   { alert($( this).nextAll().text());   }) });//显示接下去的所有元素          $(function ()   { $( "div").click(function ()   { $(this).nextAll().css( "background", "red" );   }); });      </script>           ! siblings() 方法用于获取所有同辈元素         案例: 选中的div变成红色,其他为白色         $(function ()   { $( "div").click(function ()   { $(this).css( "background", "red" ).siblings().css("background", "white");   }); });         案例2: 评分控件         $(function ()   {                $( "#ratings td").html("<img   src='images/starEmpty.jpg' alt='抱歉,图片加载失败'>" ).mouseover(function ()   {                    $( "#ratings   td").html("<img   src='images/starFull.jpg' alt='抱歉,图片加载失败'>" );                    $( this).nextAll("td" ).html("<img   src='images/starEmpty.jpg' alt='抱歉,图片加载失败'>" );                });            });    <table id="ratings">    <tr>< td></td ><td></ td><td ></td>< td></td ><td></ td></tr >    </table>    
     10.JQuery链式编程       ! 高亮选中项: 给所有有menuitem这个样式的元素添加click监听事件, 当click的时候, 向被点击的元素添加highlight这个样式, 然后从其兄弟节点(siblings)中移除highlight这个样式      <style type="text/css" >          .menuitem{ background-color :Red;}          .highlight{ background-color :Yellow;}      </style>  
    $(function ()   { $( ".menuitem").click(function ()   { $(this).addClass("highlight" ).siblings().removeClass("highlight");   }); });  
   <p class="menuitem">a </p>  <p class="menuitem">b </p>  <p class="menuitem">c </p>  
   11.JQuery基本过滤选择器              ! :first 选取第一个元素 $("div:first")选取第一个<div>         ! :last 选取第一个元素 $("div:last")选取第一个<div>         ! :not(选择器) 选取不满足"选择器"条件的元素   $("input:not(.myClass)")选取样式不是myClass的<input>       ! :even,  :odd, 选取索引是技术, 偶数的元素 : $("input:even")选取索引是奇数的<input>       ! :eq(索引序号), :gt(索引序号), :lt(索引序号)选取索引等于, 大于, 小于索引序号的元素 ,比如 $("input:lt(1)")选取索引小于1的<input>       ! $(":header") 选取所有的h1....h6元素       ! $("div:animate") 选取正在执行动画的<div>元素       * 注意: 序号大于小于的问题, 大于小于同时用的时候,  小于的序号是从大于选出来的行重新计算       * 注意: 算奇数偶数的时候,没有0,第一行就是1  
        练习要求: 第一行是表头, 所以显示大字体(fontSize=30), 最后一行是汇总,所以显示红色字体. 正文的前三行是前三名, 所以显示大的字体(28) 表格的奇数行是黄色背景.            < script type ="text/javascript" >            $( function ()   {                $( "#table1 tr:first" ).css("fontSize" , "30");                $( "#table1 tr:last" ).css("color" , "red");                $( "#table1 tr:gt(0):lt(3)" ).css( "fontSize", "28" );                $( "#table1 tr:gt(0):even" ).css("background" , "Yellow");            });        </ script>    
     DOM:                  < script type ="text/javascript">          function init()   {              var trs   = document.getElementById("table1" ).getElementsByTagName( "tr");              trs[0].style.fontSize = "xx-large" ;//这里可以使字体变大              for (var i   = 1; i < 4; i++) {                  trs[i].style.fontSize = "x-large" ; //这里就不可以使字体变大              }              for (var j   = 1; j < trs.length-1; j+=2) {                  trs[j].style.background = "Yellow" ;              }              trs[trs.length - 1].style.color = "red" ;          }      </ script>  
   网页代码:               < table id ="table1">  < tr>< td >名字 </ td>< td >成绩 </ td></ tr >  < tr>< td >小明 </ td>< td >100 </ td></ tr >  < tr>< td >小白 </ td>< td >99 </ td></ tr >  < tr>< td >小李 </ td>< td >98 </ td></ tr >  < tr>< td >小丽 </ td>< td >97 </ td></ tr >  < tr>< td >小妮 </ td>< td >96 </ td></ tr >  < tr>< td >平均分 </ td>< td >98 </ td></ tr >  </ table>  

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP