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

您的位置:亚洲必赢 > 计算机尝试 > Web前端基础

Web前端基础

发布时间:2019-05-30 05:08编辑:计算机尝试浏览(68)

    今日回老家呆了几天,大约一贯不怎么学习新的知识,那时期一直有绝对续续的看《Java编制程序理念》,还刷了部分前敌新闻,也算没闲着。今上天的启示幕上学jQuery啦,继续开采进取。

    一、jQuery 中的常用函数

    一、jQuery 中的常用函数

    在网络查了,买了这本书。未来是单向搜录像,1边看那本书。

    1) $.map(Array,fn);

    1) $.map(Array,fn);

    图片 1

    对数组中的每一个成分,都用fn实行管理,fn将拍卖后的结果重返,最终得到一个数组                 

    对数组中的每一个元素,都用fn实行拍卖,fn将管理后的结果回到,最终得到1个数组                 

    认识jQuery,作者将从以下几方面开始展览教学。

    //因为这些操作,没有与dom元素相关的,所以可以不用写在 $(function(){...}); 中
    var arr=[1,3,5,7,9];
    arr=$.map(arr,function(item){
         return item*10;
     });
    
    alert(arr); [10,30,50,70,90];
    
    //上例是将数组中的每个元素乘10,然后返回新的数组
    
    //因为这些操作,没有与dom元素相关的,所以可以不用写在 $(function(){...}); 中
    var arr=[1,3,5,7,9];
    arr=$.map(arr,function(item){
         return item*10;
     });
    
    alert(arr); [10,30,50,70,90];
    
    //上例是将数组中的每个元素乘10,然后返回新的数组
    

    一、JavaScript和JavaScript库

     2) $.each(Array,fn);

     2) $.each(Array,fn);

    乘胜Web 二.0的兴起,JavaScript受重视的档期的顺序拉长,拉动JavaScript程序库也如火如荼起来。

    对数组中的每种成分,调用fn这么些函数进行管理,可是,未有再次回到值,比上例更常用

    对数组中的每种成分,调用fn这一个函数实行拍卖,但是,未有重返值,比上例更常用

    过程:Prototype—>Dojo—>jQuery—>Ext Js

    //例一
    var nameList=["哈利波特","伏地魔","小恶魔","本田","尼桑"];
    
        $.each(nameList,function(key,value){  //对于上面的数组来说,key就是索引,value就是元素值
             alert(key ":" value);
        });
    
    //例二
    var nameList={"aa":"哈利波特","bb":"伏地魔","cc":"小恶魔","dd":"本田","ee":"尼桑"};
        $.each(nameList,function(key,value){ 
            alert(key ":" value);
        });
    
    //例三 不关心key
        $.each(nameList,function(){ 
            alert(this);  //这里的this ,取到的是value
        });
    
    //例一
    var nameList=["哈利波特","伏地魔","小恶魔","本田","尼桑"];
    
        $.each(nameList,function(key,value){  //对于上面的数组来说,key就是索引,value就是元素值
             alert(key ":" value);
        });
    
    //例二
    var nameList={"aa":"哈利波特","bb":"伏地魔","cc":"小恶魔","dd":"本田","ee":"尼桑"};
        $.each(nameList,function(key,value){ 
            alert(key ":" value);
        });
    
    //例三 不关心key
        $.each(nameList,function(){ 
            alert(this);  //这里的this ,取到的是value
        });
    

    JavaScript自个儿存在的二个弊端(摘录自 锋利的jQuery):

    二、jQuery 对象和Dom对象

    二、jQuery 对象和Dom对象

    一.叶影参差的文书档案对象模型(DOM)

    jQuery对象 ,正是经过包装dom对象后发出的靶子,dom 对象要想透过jQuery对象开始展览操作,要转成jQuery对象。

    jQuery对象 ,正是经过包装dom对象后产生的指标,dom 对象要想透过jQuery对象进行操作,要转成jQuery对象。

    二.不一样等的浏览器达成和便当开辟

    $("#span1").html():  //jQuery的写法 等价于
    
    document.getElementById("span1").innerHTML;  //注意innerHTML 是属性,不是方法,不要加扩号
    
    $("#span1").html():  //jQuery的写法 等价于
    
    document.getElementById("span1").innerHTML;  //注意innerHTML 是属性,不是方法,不要加扩号
    

    三.调度工具的缺点和失误

    jQuery 对象不能够平素调用dom对象的方法 ,同样,dom对象也不能够直接调用jQuery对象的措施,能够将dom对象转成jQuery对象,也得以将jQuery对象转成dom对象。

    jQuery 对象不能够直接调用dom对象的方法 ,同样,dom对象也不可能一向调用jQuery对象的主意,能够将dom对象转成jQuery对象,也能够将jQuery对象转成dom对象。

    二、JavaScript库成效及相比

    一) 将dom对象转成jQuery对象  // $(dom对象)

    一) 将dom对象转成jQuery对象  // $(dom对象)

    为了简化JavaScript的成本,JavaScript程序库诞生了,那就像是Java封装了某些工具类的目标是差不离的。JavaScript程序库封装了众多预约义的对象和实用函数,能支持使用者轻易地创制有高难度交互的Web 二.0性情的富客户端页面,并且特别各大浏览器。

    var domObj = document.getElementById("span1");
    alert( $(domObj).html());   //将dom对象,用 $() 包围 ,转成了jQuery对象,就可调用jQuery对象的方法了
    
    var domObj = document.getElementById("span1");
    alert( $(domObj).html());   //将dom对象,用 $() 包围 ,转成了jQuery对象,就可调用jQuery对象的方法了
    

    1、Prototype

    二) 将jQuery对象转成dom对象  //取jQuery对象中的第[0]个因素或 get(0)

    贰) 将jQuery对象转成dom对象  //取jQuery对象中的第[0]个要素或 get(0)

    Prototype能够当作是把数不胜数好的卓有成效的JavaScript的不二等秘书籍结合在1块儿产生的JavaScript库。使用者可以在供给的时候随时将个中的几段代码抽取来放本人的台本里。不过出于Prototype成型时期较早,从总体上对面向对象的编制程序观念把握得不是很到位,导致其结构的松懈。可是,以后也在日益改良。

    var jQueryObj=$("#span1");                     
    jQueryObj[0].innerHTML="我现在是个dom对象"   //ok
    jQueryObj.get(0).innerHTML="我现在是个dom对象,哈哈哈"  //ok
    
    var jQueryObj=$("#span1");                     
    jQueryObj[0].innerHTML="我现在是个dom对象"   //ok
    jQueryObj.get(0).innerHTML="我现在是个dom对象,哈哈哈"  //ok
    

    2、Dojo

    三、jQuery 的取值和赋值操作

    三、jQuery 的取值和赋值操作

    Dojo的无敌之处在于它提供了重重别的JavaScript库所未有提供的魔法。作用很强劲,获得如IBM、SUN和BEA等部分大集团的支撑。可是Dojo的后天不足也是很鲜明的:学习曲线陡,文书档案不齐全,最要紧的是API不平稳,每趟进级都有希望产生已部分程序失效。也在逐年改良中。

    壹) 对于文本框类成分

    一) 对于文本框类成分

    Web前端基础。3、YUI

    取值  $("#userName").val();

    取值  $("#userName").val();

    YUI(Yahoo!UI,The Yahoo!User Interface Library),是由Yahoo集团支付的1套完备的增添性突出的丰赡交互页面程序工具集。YUI封装了壹体系比较充足的作用,比方DOM操作和Ajax应用等,同不常候还包蕴多少个基本的CSS文件。文书档案完善,代码规范。

    传值  $("#userName").val("那是赋的值 ");              

    传值  $("#userName").val("那是赋的值 ");              

    4、Ext JS

    2) 对于 div,span, label 类的

    2) 对于 div,span, label 类的

    Ext JS简称Ext,如明儿早上就进化到能够用席卷jQuery在内的种种JavaScript框架作为基础库,而Ext作为分界面的扩展库来选择。Ext能够用来开辟具备华丽外观的富客户端应用,能使B/S应用越发具备活力。可是由于Ext侧重于页面,本人计较臃肿。不常还并不是无需付费的。

    取值 $("#lblMsg").html();

    取值 $("#lblMsg").html();

    5、MooTools

    传值  $("#lblMsg").html("那是赋的值 ");

    传值  $("#lblMsg").html("那是赋的值 ");

    MooTools是1套轻量、简洁、模块化和面向对象的JavaScript框架。Mootools的语法差不离和Prototype一样,但却提供了特别庞大的职能、越来越好的扩大性和包容性。其模块化观念极其精粹,大旨代码只有8KB。可完成固然导入。此外,MooTools完全深透的落到实处了面向对象的编制程序看法,语法简洁直观,文书档案完善。

    取值 $("#lblMsg").text();

    取值 $("#lblMsg").text();

    6、jQuery

    传值  $("#lblMsg").html("那是赋的值 ");

    传值  $("#lblMsg").html("那是赋的值 ");

    轻量级的库,具备无敌的选取器、杰出的DOM操作。、可信赖的事件管理、完善的包容性和链式操作等功用。

    alert($("#span1").html());  //连文本,带标签一起取出
    alert($("#span1").text());  //只取文本,不取html标签
    
    $("#span1").html("<h1>这是用text方式传的值</h1>");  //h1 会被当做元素解释
    $("#span2").text("<h1>这是用text方式传的值</h1>");  //这里的h1,将会被当做文本,而不是标签
    
    alert($("#span1").html());  //连文本,带标签一起取出
    alert($("#span1").text());  //只取文本,不取html标签
    
    $("#span1").html("<h1>这是用text方式传的值</h1>");  //h1 会被当做元素解释
    $("#span2").text("<h1>这是用text方式传的值</h1>");  //这里的h1,将会被当做文本,而不是标签
    

    jQuery依附简洁的语法和跨平台的包容性,非常大的简化了JavaScript开垦职员遍历HTML文书档案、操作DOM、处总管件、实践动画和成本Ajax的操作。代码风格独特而高雅。

    四、jQuery选择器

    四、jQuery选择器

    三、jQuery的优势

    在一.肆.四的文书档案中,列了九类选拔器  基本  层级  基本  内容  可见性  属性  子成分  表单  表单属性

    在一.4.四的文档中,列了九类接纳器  基本  层级  基本  内容  可知性  属性  子成分  表单  表单属性

    1、轻量级

    1) 基本 5个

    1) 基本 5个

    二、庞大的选取器

    第一个: #id
    例子: $("#myDiv");

    第一个: #id
    例子: $("#myDiv");

    三、卓越的DOM操作的包装

    第二个:element

    第二个:element

    四、可信的事件处理机制

    3个用以寻觅的元素。指向 DOM 节点的标签字。

    一个用以找出的成分。指向 DOM 节点的标具名。

    5、完善的Ajax

    $("div").html("这是element选择器,我们都是div"); //查找所有div元素,为其赋值
    
    $("div").html("这是element选择器,我们都是div"); //查找所有div元素,为其赋值
    

    陆、不传染顶尖变量

    想想:如何给全体的DIV成分都助长一个点击事件?并在点击事件中弹出div中的内容

    观念:如何给具有的DIV成分都增进3个点击事件?并在点击事件中弹出div中的内容

    七、卓绝的浏览器包容性

    $("div").click(function(){
         alert(this.innerHTML);
         alert($(this).html());
    });
    
    $("div").click(function(){
         alert(this.innerHTML);
         alert($(this).html());
    });
    

    8、链式操作方法

    第三个:*

    第三个:*

    九、隐式迭代

    归来全数值,多数用来整合上下文进行操作

    回到全数值,多数用来整合上下文实行操作

    十、行为层与结构层的分开

    第四个:.Class

    第四个:.Class

    1壹、丰盛的插件支持

    凭仗给定的类相配成分。

    基于给定的类匹配成分。

    1二、完善文书档案

    $(".myClass");
    
     //例子
    <style type="text/css">
      .cry
       {
         background:silver;   //说明,这个样式也可以没有,依然可以在下面使用.cry
       }
       </style>
    
       <script type ="text/javascript">
          $(".cry").css("background","blue");
       </script>    
    
        <div class="cry">这是用来验证class选择器的层</div>
    
    $(".myClass");
    
     //例子
    <style type="text/css">
      .cry
       {
         background:silver;   //说明,这个样式也可以没有,依然可以在下面使用.cry
       }
       </style>
    
       <script type ="text/javascript">
          $(".cry").css("background","blue");
       </script>    
    
        <div class="cry">这是用来验证class选择器的层</div>
    

    13、开源

    第五个:selector1,selector2,selectorN

    第五个:selector1,selector2,selectorN

    4、jQuery代码的编辑

    将每三个取舍器匹配到的因素合并后壹并回去。(多少个接纳条件都灵验)

    将每1个精选器相称到的成分合并后一同回去。(八个挑选原则都使得)

    一.进来jQuery的官方网站

    $("#div1,span,p.myClass") 同有的时候候使用了三种精选器 p.myClass 指的是全体具备myClass样式的p标签

    $("#div1,span,p.myClass") 同不常候利用了三种取舍器 p.myClass 指的是具有具有myClass样式的p标签

    二.jQuery库类分为二种:生产版(最小化和压缩版)和开辟版(未压缩版)。

     

     

    名称 大小 说明
    jquery.js(开发版) 约229 KB 完整无压缩版本,主要用于测试、学习和开发
    jqusery.js(生产版)

    约31 KB

    经过工具压缩或经过服务器开启Gzip压缩

    主要应用于产品和项目

    二) 层级 陆个(注意不要乱加空格)

    二) 层级 陆个(注意不要乱加空格)

    三.jQuery不必要设置,把下载的jQuery.js放到网址上的叁个公共的职位,想要用的jQuery的时候,只须要在有关的HTML文书档案中引进该库类文件的岗位就可以。

    第一个:ancestor descendant

    第一个:ancestor descendant

    伍、编写轻巧的jQuery代码

    在加以的上代成分下相称全部的后生成分
     $("form input") //语法:接纳from标签下的具备 input 成分,无论是第几代

    在给定的上代成分下相配全部的后生成分
     $("form input") //语法:选取from标签下的有着 input 成分,无论是第几代

    首先分明,在jQuery库中,$就是jQuery的一个简写情势。

      <form>
          <label>Name:</label>
          <input name="name" />
          <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
          </fieldset>
       </form>
          <input name="none" />
          <script type ="text/javascript">
            $("form input").val("这是层级选器的例子");
          </script>
    
        $("div li") //获取div下所有的li元素(包扩后代,子的子)
    
    //给table下所有tr下的td加个点击事件,一点就取出td中的内容
                             $("#table1 tr td").click(function(){
                                    alert(this.innerHTML);
                                });
    
      <form>
          <label>Name:</label>
          <input name="name" />
          <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
          </fieldset>
       </form>
          <input name="none" />
          <script type ="text/javascript">
            $("form input").val("这是层级选器的例子");
          </script>
    
        $("div li") //获取div下所有的li元素(包扩后代,子的子)
    
    //给table下所有tr下的td加个点击事件,一点就取出td中的内容
                             $("#table1 tr td").click(function(){
                                    alert(this.innerHTML);
                                });
    

    比如:

    第二个:parent > child

    第二个:parent > child

    $("#foo") 等价于jQuery("#foo")

    $("div >li") //语法,获取div下所有的直接li子元素
    
    $("div >li") //语法,获取div下所有的直接li子元素
    

    本文由亚洲必赢发布于计算机尝试,转载请注明出处:Web前端基础

    关键词: