xml地图|网站地图|网站标签 [设为首页] [加入收藏]

您的位置:亚洲必赢 > 计算机尝试 > 【bwin必赢亚洲官网】使用jQuery快速高效制作网页

【bwin必赢亚洲官网】使用jQuery快速高效制作网页

发布时间:2019-05-27 02:59编辑:计算机尝试浏览(84)

    1、jQuery简介:

    第四章 jQuery 选择

    1.jQuery选拔器的简单介绍

    (壹). Jquery中的接纳器完全承继了CSS的品格,利用Jquery选取器,能够拾叁分方便和飞跃的搜索特定的Dom成分,然后为他们增添相应的表现,而无需忧虑浏览器是不是扶助那1选择器,学会使用接纳器是读书Jqeury的根基,Jquery的一举一动规则都不可能不在获得到元素后手艺见效。

     

    jQuery中的事件

    一,基础事件

         基础事件又包罗  

        a:window事件

           在javaScript中的window事件又  window onload = fn(); 和onclick  在jQuery中常用的事件有文书档案就绪事件,对应的不二法门ready()

           $(document).ready(fn(){});  

       

        b:鼠标事件

            常用的鼠标事件有:

               click(fn);         单机鼠标时发生,fn表示绑定的函数

               keydown(fn);  鼠标指针移过时,fn表示绑定函数

               blur(fn)          鼠标指针移出时,失去大旨时,所实行的函数

               比如  最常见的光棒事件

               

    $(function () {
    
                //获取所有的li元素
                $("li").mouseover(function () {
    
                    $(this).css("background", "pink");
    
                });
                //注册事件
                $("li").mouseout(function () {
    
                    $(this).css("background", "");
    
                });
    
      });
    
     <ul>
            <li>一个示例</li>
            <li>二个示例</li>
            <li>三个示例</li>
        </ul>
    

      

      

        c:键盘事件

            键盘事件指当键盘聚集到Web浏览器时,用户每一回按下依然释放开关时所发出的轩然大波常用的键盘有keydown(),keyup(),keypress()

         //键盘事件
                $("input").keyup(function(event) {
    
                    var s =event.keyCode;
                    alert(s);
    
     //打印键盘的keycode值
    
    }); <h2>键盘事件</h2>
         --
         <body>
        <input />注意用词       
         --
    

     

      

     

            

     

        d:表单事件

           表单事件是装有事件中最安定,且扶助最稳固的风云之①,除了用户挑选单选框,复选框等发出的click事件外,当成分获得大旨时触发focus事件,失去大旨时触发blur事件 

    //表单事件
                $("input").focus(function () {
                    $("#first").addClass("a");
                })
                $("input").blur(function () {
    
                    $("#first").removeClass("a");
                });
            });
    ---
        <h2>键盘事件</h2>
        <input />注意用词
    

     

       e:绑定事件

           绑定事件是指为相称到的成分同事绑定三个可能四个事件,使用bind()方法

          

          语法:bind(type,[data],,fn)

     

           对应的unbind() 解除事件

          比方:为多少个严节列表绑定光棒效果

                $("li").bind({
    
                    "mousemove": function () {
    
                        $(this).css("background", "blue");
    
                    },      //鼠标移过 获得焦点
                    "mouseout": function () {
    
                        $(this).css("background", "");
    
                    },    //鼠标移出失去焦点
                    click: function () {
    
                        alert(this.innerHTML);
                    }
    
    
    
                }).unbind("mouseout mousemove");
                         //解除事件
            });
    
    
    
    --<body>
       <ul>
            <li>一个示例</li>
            <li>二个示例</li>
            <li>三个示例</li>
        </ul>
       </body>
    

     

     

    二,复合事件

         hover()和toggle()方法,这多个格局和 ready()方法一般都是jQuery自定义的艺术。

            a:hover()方法用于模拟鼠标指针悬停事件

        

        <script src="js/jQuery1.11.1.js" type="text/javascript"></script>
        <script>
            $(function () {
                $("#menu").hover(function () {                  //鼠标悬停事件 改变元素css样式
                    $("#myacc").css("display", "block");
                }, function () {
                    $("#myacc").css("display", "none");
                });
            });
        </script>
    

     

           平时用在网址导航栏下拉的隐没效果,相当于鼠标事件的mouseover 和mouseout事件

     

            b:toggle()方法 在一.玖之上的jquery都剔除了这么些事件。 

               toggle()方法约等于鼠标一而再单击事件,推行的fn

     $(function () {
    
    
                $("#one").toggle(
                    function () {
    
                        $("#two").show();    //控制元素显示
    
                    }, function () {
    
                        $("#two").hide();   //控制元素隐藏
                    }
                    );
            });
     //产生类似于 导航栏的单击出现再次单击关闭的效果-
    

     

     3,

         a:调整 成分的显示与潜伏

         在jQuery中,能够动用【show() hide()】调节成分的的体现和潜伏

         属性:【speed】[callback]

         speed的私下认可的值有slow(0.6s) normal(0.四s) fast(0.2s)

         前者决定成分彰显或潜伏的快慢,后者是指元素推行完方法后callback的自定义函数

    ----
    $(function () {
    
    
    
                $("body").click(function () {
                    $("img").show("slow");            //单击窗体  一图片以slow方式显现出来
    
                });
    
            });
    
    ----
    
    
    --省略部分代码
    
    <img src="1.jpg">
    

     

     

       b:相似的措施还应该有调整成分的淡入淡出分别对应fadein()和fadeout()

       对应语法是$(selector).fadein([speed],[callback])   --以退出的法子调整成分

                     $(selector).fadeout([speed],[callback])--调节成分淡出

       

        c:改换成分高度的章程

           slideDown(),slideUp(),

            语法类似

            

     

    第四章:JQuery选择器

    **● jQuery由英国人John Resig于200陆年创造**

    二.选择选取器的目标

     

     (壹).为了更加好的或许是越来越快的从参差不齐的DOM树中找到大家供给的壹类标签。

    一.Jquery选择器简要介绍

    **● jQuery是现阶段最流行的JavaScript程序库,它是对JavaScript对象和函数的包装**

    【bwin必赢亚洲官网】使用jQuery快速高效制作网页交互特效。3.jQuery 选拔器的优势

    (1). 简洁的写法,$()函数

    (2).支持CSS1到CSS3选择器

    (3).完善的拍卖体制

          (1) Jquery中的选取器完全承袭了CSS的风格,利用Jquery选取器,能够11分简便和连忙的寻觅一定的Dom成分,然后为他们增加相应的行为,而无需忧郁浏览器是或不是帮衬那壹采纳器,学会运用选择器是上学Jqeury的根底,Jquery的行事规则都无法不在赢获得成分后技能见效。

    **● 它的布置观念是write less,do more(以越来越少的代码,达成更加多的作用);**

    四.采取器的归类

    (1).选择器:

       三大类:基本选项器  等级次序采取器  属性选用器

       基本选用器:

                        标签

                        类

                        ID

                        并集

                        交集

                        全局

       档次接纳器:后代采纳器(div p)  子选用器(div>p)  同辈选拔器(div~p)  相邻采用器(div p)

       属性选拔器:

         单独属性名[href]

         属性名和属性值协作[href=”http”]  [href!=”http”]   [href^=”http”]  [href$=”http”]  [href*=”http”]

    (二).选取器详细情形

     (壹) 基本选拔器:通过成分id,class和标具名等来研究Dom成分。

             1)$("#id") 根据给定的ID相配三个要素,重返单个成分  $("#name")选取Id为test的元素。

                 2)$(".class") 依据给定的类名相配成分 重临集结成分  $(".class")采用全部class为class的要素。

                 3)$("element") 依据给定的成分名匹配成分,重回会集成分  $("input")接纳全数的input成分。

                 4)$("*") 相配全数的因素,重回会集成分,$("*")选拔全体的元素。

                 伍)$("selector一,selector二,...,selectorN") 将每3个接纳器相称到的成分合并后回来集结元素, $("div,span,p.myClass")选取全数<div>,<span>和拥                 有class为myClass的<p>标签的1组成分。

    导入文本:    jQuery一.1一.壹.js

     eg:

    <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
        <script type="text/javascript">
           $(function(){
             $("span").css("background","pink "); 
           });
    
           $(function(){
              $("body span").css("background","#6FF");
              $("body>span").css("background","#F9F");
           });
    
    
    
           </script>
          </head>
    
      <body>
        <h2>千与千寻</h2>
        <p>别名:神影少女</p>
        <p>导演:宫崎骏</p>
        <p>简介</p>
        <p>千寻和爸爸妈妈一同驱车前往新家,在郊外的小路上不慎进入了神秘的隧道--他们去了另一个诡秘世界...  >>详细</p>
        <a href="#">立即播放</a><strong><a href="#">极速播放</a></strong> 下载观看
        </body>
    

     (二)档期的顺序选取器:若是想通过Dom成分之间的档期的顺序关系来赢得一定成分,举个例子后代成分,子成分,相邻成分和同辈成分

                  1)$("ancestor descendant") 得到ancestor成分里面包车型的士具有descendant(后代)成分,$("div span")选拔<div>里的有所的<span>成分

                  2)$("parent>child") 采用parent成分下的child(子)成分,再次来到集合成分 $("div span")选用<div>成分下成分名称叫<span>的子成分

                           评释:和$("ancestor descendant")有分别,$("ancestor descendant")选取的是儿孙成分

                  3)$("prev next") 选用紧接在prev成分后的next成分,重返集结成分,$(".one div")选拔class为one的下2个<div>同辈元素

                  4)$("prev~siblings") 接纳prev成分之后的富有siblings成分,$("#two~div")选拔Id为two的成分前面包车型地铁有所<div>同辈成分

                         注脚:能够应用next()方法来代表$('prev next')选用器  $(".one").next("div");可以选择nextAll()方法来顶替$("prev~siblings")选择器 $("#two").nextAll(div)

     

    二.jquery选取器的优势

                                       bwin必赢亚洲官网 1

    0三.过滤选择器

    (一).过滤选取器:重要透过一定的过滤规则来筛选出所急需的Dom成分,依据分歧的过滤规则,过滤接纳器能够分为宗旨过滤,内容过滤,可知性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器

     

    (二).基本过滤接纳器

     

                           (一)$(":first") 接纳第一个因素,$("div:first")选择全数<div>成分中第3个<div>元素。

     

                           (二)$(":last")选择最终二个要素,$("div:last")采纳全体<div>成分中最终3个<div>成分。

     

                            (3)$(":not(selector)")去除全数与给定选取器匹配的因素,$("input:not(.myClass)")选拔class不是myClass的<input>成分。

     

                            (4)$(":even")选拔索引是偶数的持有因素,索引从0开始,$("input:even")选拔索引是偶数的<input>成分

     

                           (伍)$(":odd")接纳索引是奇数的全数因素,索引从0初始,$("input:odd")采用索引是奇数的<input>成分

     

                            (陆)$(":eq(index)")选择索引等于index的要素,(index从0初始),$("input:eq(一)")选取索引等于一的<input>成分

     

                            (7)$(":gt(index)")接纳索引大于index的因素,(index从0开头),$("input:gt(一)")选取索引大于一的<input>成分(大于一,而不包括一)

     

                            (捌)$(":lt(index)")选拔索引小于index的因素,(index从0开端),$("input:lt(壹)")选择索引小于一的<input>成分(小于1,而不包罗1)

     

                            (9)$(":header")选择全部的标题成分,举例:h1,h二,h三等等,$(":header")采取网页中的全数的<h一>,<h2>,<h三>...

     

                           (10)$(":animated")选用当前正值试行动画的持有因素,$("div:animated")选用正在施行动画的<div>成分。

     

                           (1壹)$(":focus")采用当前得到关节的成分,$(":focus")接纳当前赢得关节的因素

     

     (三)内容过滤选用器:重要显示在它所蕴含的子成分可能文本内容方面

     

                            (一)$(":contains(text)")选择含有文本为"text"的要素,$("div:contains('小编')")选择含有文本"小编"的<div>成分

     

                            (二)$(":empty")选用不包罗子成分或然文本的空成分,$("div:empty")采取不带有子成分(包蕴文件成分)的<div>空成分

     

                            (三)$(":has(selector)")选拔含有选拔器所相称的要素的要素,$("div:has(p)")选拔含有<p>成分的<div>成分

     

                            (肆)$(":parent")选拔含有子成分恐怕文本的成分,$("div:parent")选拔具有子成分(包蕴文件成分)的<div>成分

     

    eg:过滤采用器: 

    <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
        <script type="text/javascript">
             $(function(){
                $("li:first").css("background-color","pink");
             });
    
        </script>
      </head>
    
      <body>
        <h2>网络小说</h2>
        <ul>
            <li>王姬不好当</li>
            <li>致命交易</li>
            <li class="three">伽蓝寺</li>
            <li>逆天之春</li>
            <li>交错时光的爱恋</li>
            <li>张震鬼故事</li>
            <li>第一次亲密接触</li>
        </ul>
      </body>
    

     

     

    (3)可知性过滤选用器:依据成分的可知和不可知状态来抉择相应的要素

                           (一)$(":hidden")选择全部不可知的因素,$(":hidden")选拔全体不可知的因素,包蕴<input type="hidden" />,

                               <div style="display:none;">和<div style="visibility:hidden;">等要素。若是只想选取<input>成分,能够使用$("input:hidden")

                            (二)$(":visible")选用全数可知的成分,$("div:visible")选用全部可见的<div>成分

    (四)属性过滤选取器:通过成分的性情来博取相应的因素

                            (1)$("[attribute]")选择具备此属性的因素,$("div[id]")选择具有属性Id的<idv>成分。

                            (2)$("[attribute=value]")选用属性的值为value的因素,$("div[title=test]")选拔属性title为"test"的<div>成分

                            (3)$("[attribute!=value]")选用属性的值不对等value的成分,$("div[title!=test]")选择属性title不对等"test"的<div>成分(注意:未有质量title的<div>成分也会被增选)

                            (4)$("[attribute^=value]")选用属性的直以value开始的成分,$("div[title^=test]")选择属性title以"test"开首的<div>成分

                            (5)$("[attribute$=value]")选用属性的值以value截止的元素,$("div[title$=test]")接纳属性title以"test"停止的<div>成分

                            (6)$("[attribute*=value]")选取属性的值含有value的成分,$("div[title*=test]")选择属性title含有"test"的<div>成分

                            (7)$("[attribute|=value]")选取属性等于给定字符串或以给字符串为前缀(该字符串后跟1个连字符"-")的要素,$("div[title|="en"]")选拔属性title等于en大概以en为前缀(给字                             符串后跟二个"-")的因素

                           (8)$("[attribute~=value]")采取属性用空格分隔的值中隐含三个加以值得成分,$("div[title~='uk']")选择属性title用空格分隔的值中带有字符uk的要素

                           (9)$("[attribute1][attribute2][attribute3]")用属性选择器合并成七个复合属性选取器,满意五个规范,每采用三遍,减弱三次范围

                               $("div[id][title$='test']")选择具备属性id,并且属性title以"test"甘休的<div>成分

    eg:属性选用器:

    <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
        <script type="text/javascript">
             //改变表头颜色
              $(function(){
                 $("h2[title]").css("background-color","#09F");
             });   
    
           //改变奇数颜色
               $(function(){
                 $("[class=odds]").css("background-color","pink");
             });
    
           //改变id不为box的元素背景颜色
              $(function(){
                 $("ul").css("background-color","yellow");
                 $("h2").css("background-color","yellow");
             }); 
    
           //改变以h开头的元素颜色
              $(function(){
                 $("[title^=h]").css("background-color","green");
             }); 
    
             //改变以jp结尾的元素颜色
             $(function(){
                 $("[title$=jp]").css("background-color","gray");
             }); 
    
             //改变含有s的元素颜色
              $(function(){
                 $("[title*=s]").css("background-color","red");
             });
    
             //改变含有class属性,且title属性的值中含有y的<li>的元素颜色
           $(function(){
                 $("li[class][title*=y]").css("background-color","black");
             }); 
        </script>
        <style type="text/css">
        #box {background-color:#FFF;border:2px solid #000;height:230px;width:200px;padding:5px;}
        </style>
      </head>
    
      <body>
      <div id="box">
         <h2 class="odds" title="cartoonlist">动画列表</h2>
         <ul>
             <li class="odds" title="kn_jp">名侦探柯南</li>
             <li class="evens" title="hy_jp">火影忍者</li>
             <li class="odds" title="ki_jp">死神</li>
             <li class="enens" title="ko_jp">妖精的尾巴</li>
             <li class="odds" title="ht_jp">银魂</li>
             <li class="enens" title="yy_yy">黑猫警长</li>
             <li class="odds" title="ss_hu">仙履奇缘</li>
         </ul>
        </div>
      </body>
    

     

     

    (5)表单选拔器:方便的获得到表单的某部大概某项目标因素

                                   (1)$(":input")选择全数的<input>,<textarea>,<select>,<button>成分

                                   (2)$(":text")选用全部的单行文本框

                                   (3)$(":password")选取全部的密码框

                                   (四)$(":radio")选择全数的单选框

                                   (伍)$(":checkbox")选用全部的多选框

                                   (陆)$(":submit")选用全数的付出按键

                                   (7)$(":image")选拔全部的图像按键

                                   (8)$(":reset")选拔全数的重新设置开关

                                   (九)$(":button")选用全部的按键

                                  (十)$(":file")选拔全部的上传域

                                  (1壹)$(":hidden")选用全体的不可见成分

    eg:英雄联盟:

    <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
        <script type="text/javascript">
    
           $(document).ready(function(){
              $("p").click(function(){
                   $(".yx").css("background-color","pink");
                  $("span").css("background-color","pink");
                  $("strong").css("font-size","20px");
                  $("li").css("show");
                  $("#show").css("background-color","pink");
    
               });
    
           });
    
        </script>
    
        <style type="text/css">
        li{
        text-decoration:underline;
        }
        </style>
      </head>
    
    
    
      <body>
        <h1 >英雄联盟</h1>
        <p class="yx"><<英雄联盟>>,简称LoL.</p>
    
        <p>
                     由<strong>Riot Games</strong>开发,为3D竞技场战游戏,其主创团队</br>由实力强劲的 <strong>   魔兽争霸 </strong>  系列游戏多人即时对战自定义</br>地图的开发团队
                    ..<a href="#">更多详情</a>
        </p>
    
        <h2>目录</h2>
        <ul>
            <li id="show">开发团队</li>
            <li>游戏周边</li>
            <li>游戏介绍</li>
            <li>配置需求</li>
            <li>游戏背景</li>
        </ul>
      </body>
    

     

     

    5.采取器中隐含".","、","#","(","]"等特殊字符

     

     

     

                                                      

                                                                                                                      Is it not delightful to have friends coming from distant quarters!  

                  

     

     

         (一) 简洁的写法,$()函数

    ●jQuery是javaScript的程序库之1,它是javaScript对象和实用函数的卷入。

         (2)支持CSS1到CSS3选择器

    ●jQuery是继Prototype之后又3个奇妙的javaScript库,是由西班牙人 Johh  Resig于二零零六年开创的开源项目。

         (3)完善的拍卖体制

    • ●jQuery只是javaScript的程序库,只也就是它的贰个子集,并不能够完全替代javaScript。

    3.选拔器分类

    ●为啥要运用jQuery:与javaScript比较,使用jQuery制作交互特效的语法更为简单,代码量大大收缩,不设有浏览器包容性的难题。

          (一) 基本选取器:通过成分id,class和标签字等来搜索Dom元素

    ●jQuery与其他javascript库:

             1)$("#id") 根据给定的ID相配一个因素,再次回到单个成分  $("#name")选取Id为test的元素

    依照使用占比,几大javaScript库占比如下:

                 二)$(".class") 依照给定的类名相配成分 再次来到集合成分  $(".class")采取全数class为class的因素

    1. jQuery      (62%)
    2. Bootstrap         (22%)
    3. Zepto        (6%)
    4. Ext   (5%)
    5. YUI   (5%)

                 三)$("element") 依据给定的要素名相配成分,重返集结成分  $("input")选用全数的input成分

    比例图: 

                 4)$("*") 相配全部的要素,重返会集成分,$("*")选择全体的要素

    bwin必赢亚洲官网 2

                 5)$("selector一,selector2,...,selectorN") 将每三个增选器匹配到的因素合并后归来会集元素, $("div,span,p.myClass")选择全数<div>,<span>和颇具class为myClass的<p>标签的一组成分

    2、 jQuery的用途:

    导入文本:

    1)访问和操作DOM元素:使用jQuery可以很方便的获取和修改页面中的制定元素,无论是删除、移动还是复制元素,jQuery都提供了一套方便快捷的方法。

    2)控制页面样式:通过引入jQuery,开发人员可以很快捷的控制页面的CSS文件。

    3)对页面事件的处理:引入jQuery后,可以使页面的表现层与功能开发分离,开发者更多的关注于程序的逻辑与功效;页面设计者则侧重于页面的优化与用户的体验。通过事件绑定机制,可以很轻松的实现两者的结合。(比如鼠标的点击事件)

    4)方便使用jQuery插件:引入jQuery后,可以使用大量的jQuery插件来完善页面的功能和效果,如jQuery UI插件库,Form插件,Validate插件等。使得原来使用javaScript代码实现起来非常困难的功能通过jQuery插件可以轻松的实现。

                             Eg:3D幻灯片就是由jQuery的Slicebox插件来实现的。

    5)与Ajax技术的完美结合:利用Ajax异步读取服务器数据的方法,极大的方便了程序的开发,增强了页面的交互,提升了用户的体验,引入jQuery后,通过内部对象或函数,加上几行代码就可以实现复杂的功能。

    6)处理了与浏览器兼容性的问题:在jQuery库里帮我们写了兼容性的代码。

    ●jQuery能做的JavaScript也都能做,但使用jQuery能大幅提高开发效率;

        jQ库:

    3、 jQuery的优势

              jQuery1.11.1.js

    1)轻量级。jQuery的体积小,压缩之后,约等于100KB。

    2)强大的选择器。jQuery支持几乎所有的CSS选择器,以及jQuery有自定义特有的选择器。

    3)出色的DOM封装。jQuery封装了大量的DOM操作,使的开发者在编写DOM操作相关程序时更加得心用手。

    4)可靠的事件处理机制。jQuery的事件处理机制吸收了javaScript中事件处理函数的精华,非常的可靠。

    5)出色的浏览器兼容性。

    6)隐式迭代。使用jQuery查找相同名称(类名、表签名等)时,会返回一个结果集合,无需用户一一遍历,并且有快捷的查找所匹配的值的方法,简化了编程。

    7)丰富的插件支持。jQuery的易扩展性,吸引了来自全球的开发者来编写jQuery的扩展插件,目前已有成百上千的官方支持的插件。

    eg:

    4、jQuery的本子及配置

    <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
        <script type="text/javascript">
           $(function(){
             $("span").css("background","pink "); 
           });
    
           $(function(){
              $("body span").css("background","#6FF");
              $("body>span").css("background","#F9F");
           });
    
    
    
           </script>
          </head>
    
      <body>
        <h2>千与千寻</h2>
        <p>别名:神影少女</p>
        <p>导演:宫崎骏</p>
        <p>简介</p>
        <p>千寻和爸爸妈妈一同驱车前往新家,在郊外的小路上不慎进入了神秘的隧道--他们去了另一个诡秘世界...  >>详细</p>
        <a href="#">立即播放</a><strong><a href="#">极速播放</a></strong> 下载观看
        </body>
    

    ●获取jQuery的最新版本:进入jQuery的官方网站(http://jquery.com),在页面右侧的 Download  jQuery区域下载最新的版本。

                   ★jQuery类库说明:jQuery类库一个插件分为两个版本:开发版(完整无压缩)和发布版(GZIP压缩过的版本)。

                                  版本号为1.开头的jQuery插件才能支持IE6~IE8的兼容性。

                                  推荐的版本是:jquery-1.8.3.min.js和jquery-1.12.4.js

    名称

    大小

    说      明

    jquery-1.版本号.js(开发版)

    约286KB

    完整无压缩版本,主要用于测试、学习和开发

    jquery-1.版本号.min.js(发布版)

    约94.8KB

    经过工具压缩或经过服务器开启Gzip压缩,主要应用于发布的产品和项目

     

    ●jQuery的引用方式:

        1. 页面引用(引用本地):<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

        2. 引用网络存储的,引用地址实用网络存储的绝对地址。

        ★注:1.   要使用jQuery的功能,需要首先引用jQuery库文件,首先引入jQuery插件文件,再引用自己的.js文件。否则可能无法识别或编译。

         ★注:在一个页面中使用了多个库文件,变量冲突:

          1、使用jQuery.noConflict()方法解决对变量$的jQuery的控制权,即释放jQuery对$变量的控制权。

          2.如果页面仅使用jQuery的一个库文件,则不需要noConflict()方法;

     (2)档期的顺序采纳器:纵然想透过Dom成分之间的层系关系来得到特定成分,比方后代成分,子成分,相邻成分和同辈成分

    5、jQuery语法

                  一)$("ancestor descendant") 获得ancestor成分里面包车型客车具备descendant(后代)成分,$("div span")选择<div>里的保有的<span>成分

    ●jQuery的加载:

                  贰)$("parent>child") 选用parent成分下的child(子)成分,再次回到集结成分 $("div span")选择<div>成分下成分名字为<span>的子成分

      $(document).ready(function() {

                           注脚:和$("ancestor descendant")有分别,$("ancestor descendant")采用的是后人成分

               //试行的代码;

                  3)$("prev next") 采用紧接在prev成分后的next成分,重临集合成分,$(".one div")选择class为one的下三个<div>同辈成分

      });

                  4)$("prev~siblings") 选拔prev成分之后的具有siblings成分,$("#two~div")采纳Id为two的因素前边的享有<div>同辈成分

     

                         注脚:能够使用next()方法来顶替$('prev next')采纳器  $(".one").next("div");能够利用nextAll()方法来代替$("prev~siblings")选择器 $("#two").nextAll(div)

      这种语法等同于javaScript代码:

             (三)过滤采取器:主要透过一定的过滤规则来筛选出所需求的Dom成分,依照分歧的过滤规则,过滤采用器能够分为主旨过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤采纳器

     

                   1)基本过滤选择器

      Window.onload=function(){

                           一)$(":first") 选用第三个成分,$("div:first")选用全部<div>元素中首先个<div>元素。

               //推行代码;

                           贰)$(":last")选用末了一个成分,$("div:last")选拔全部<div>成分中最后三个<div>成分。

    本文由亚洲必赢发布于计算机尝试,转载请注明出处:【bwin必赢亚洲官网】使用jQuery快速高效制作网页

    关键词: JQUERY 亚洲必赢766net jQuery简单动画