JavaScript进修

About Javscript

record the thing which maybe forgetten

原生JavaScript

  • Javascript DOM

    1. document.write + “html/css 标签”;

    2. prompt(“这里是对话框显现部份”,”这里是文本框提醒部份”) = alert + inputtext + cancel +confirm;

    3. confirm(str) = alert + confirm + cancel;

    4. window.open(“URL”,”para1″,”para2″);

      • para1:

        • _blank:在新窗口显现目的网页

        • _self:在当前窗口显现目的网页

        • _top:框架网页中在上部窗口中显现目的网页

      • para2:

      • 《JavaScript进修》

    5. e.g.

        var a = window.open(…);
        a.close(); // close the window
    6. e.g.

        <h2 id = "cc">My Beautiful girl</h2>
        js: var c = getElementById("cc");
        c.innerHTML = “the text which we like”;

About JQuery【学自锐利的jQuery】

1.第一章 熟悉jQuery

  • $(“#foo”) is the same as jQuery(“#foo”)

  • compare with DOM
    《JavaScript进修》

2.Resolve conflicts

  • 先导入其他框架

    • 经由过程”jQuery.noConflict();”让出$的控制权,然后能够经由过程”jQuery(…)”来操纵jQuery对象,此时能够在jQuery内部继承运用$符

        jQuery.noConflict();
        jQuery(function($){              //这句的jQuery能够省略,从而定义匿名函数并定义形参为$
            $("p").click(function(){    //固然也能够不传$为参数,然后内部继承运用jQuery,不运用快捷键操纵
                alert($(this).text());    //好纠结。。认为如何都不惬意呢。。所以照样别引入其他的框架好了,嗯【匿-】
            })
        })
    • 或许 by “var $j = jQuery.noConflict();” 自定义快捷方式来操纵jQuery对象    //觉得这个不错吖么么哒

  • 先导入jQuery

    • 直接用jQuery来事情就好了,不必”jQuery.onConflict()”来让出控制权     //我的邃晓是后导入的框架覆蓋了$的控制权,所以$的控制权原本就在人家身上,不必你让出来,你乖乖的用你本身的名字就好了,嗯【仔细脸】

3.第二章 jQuery挑选器

  • 总的来说,给我觉得和css挑选器划定规矩相差不大,所以大抵写一下增强影象好了。至于长处,就是和之前js的getElementById比拟越发简短了,另有就是容错率高了0.0。

  • 基础挑选器

    • $(“#test”)    //挑选id为test的元素

    • $(“.test”)     //挑选class为test的元素

    • $(“p”)       //挑选一切的p元素

    • e.g. $(“.test”).css(“background”,”#0fccefc”); $(“#test,div,.cc”).css(“background”,”#cca343″);

  • 条理挑选器

    • $(“body p”)       //挑选body中的一切p元素

    • $(“body > p”)    //挑选body中的一切p儿子元素[不包括孙子元素哦]

    • $(“#cc + div”)    //挑选id为cc的元素的下一个div兄弟元素

      • 如果紧邻着的兄弟哦

      • e.g. 遗忘写分号不要太在乎- –

        《JavaScript进修》《JavaScript进修》

    • $(“#cc ~ div”)   //挑选id为cc的元素背面一切的div兄弟们

    • by the way,后两种,在jQuery中有更好的写法

      • $(“.one + div”) == $(“.one”).next(“div”)

      • $(“.one ~ div”) == $(“.one”).nextAll(“div”)   //个人觉得后一种写法越发轻易影象

      • $(“.one”).sibling(“div”)           //挑选class为one的元素一切平辈的div元素,前面的也会被选上哦

  • 过滤挑选器

    • 基础过滤挑选器

    • 认为挑选这里,又看了两遍,认为这类东西,没必要消费时刻整顿,也许相识之后用的时刻现查就好了[影象残患者!]

  • 不如说一下在演习的时刻注意到的一些小细节

    • 一向认为最先标签和完毕标签之间没有东西就能够简写成<br />这类,然后在设置jquery时狠狠被本身坑了一下

      <script src = "jquery.min.js"></script>
            要如许写才行。。被本身蠢哭。。
    • 另有就是

      $("p:contains('我')").css("background","#bbccaa");    //挑选内容包括“我”的p元素,转变其背景色
      $("p:contains(我)").css("background","#bbccaa");    //发明参数的参数能够写单引号也能够不写,总认为写上好一点,毕竟XHTML
      $("p:eq(3)").css("background","#bbccaa");           //挑选索引值为3的p元素,这时候又不能写引号了,我邃晓是写了引号就会变成字符型,取的值就是3的ASCII码值了,达不到想要的结果了
    • var $a = $(…);$a.length示意此时$a中获得的jquery对象个数

    • 在运用jquery挑选器时不要随便加空格,极可能形成语义毛病。e.g. $(“p:hidden”)和$(“p :hidden”),前者是过滤挑选器而后者是子代挑选器。notice!

    • make a distinction between :find() and :filter()

      • $(“div”).find(“#cc”)  挑选div子元素中id为cc的元素,等同于$(“div #cc”);

      • $(“div”).filter(“#cc”)  挑选id为cc的div元素们

    • 能够替代if else的.toggle()

          $(button...).toggle(
          function(){
              //代码段a
          }.function(){
              //代码段b
          }
          )    //单击按钮会轮番实行代码a和代码b~懂什么叫轮番么!轮番!就是这么6!不懂我也不通知你!【pia,打晕拖走】。。

4.第三章 jQuery中的DOM操纵

  • 查找节点

    • 想要查找元素节点或许是属性节点,就是经由过程前一章进修的挑选器+.text()猎取响应元素的文本,或许是经由过程挑选器+.attr(“属性名”)猎取某元素响应属性的值。

  • 增添节点和插进去节点

    • 经由过程$("<p></p>")来新建元素,个中参数完整遵照XHTML语法【XHTML大法好!】,着实就是和日常平凡写html文件差不多啦,然后经由过程以下函数将该元素添加到响应的位置

      《JavaScript进修》

var $test = $("<span id = "ture" class = "wtf">喵喵最喜欢帅哥辣么么哒</span>")
<p>大家好<p>    //把html和js写在一起了,邃晓就好,着实没想好怎样规划
  • 删除节点

    • 有empty(),remove()和detach()三种要领

    • 最好邃晓的就是empty()了,$(selector).empty();清空选中标签的中的内容,相当于格式化当前标签了

      • 原构造:《JavaScript进修》

      • 清空后:[窝才看不到这两个图辣么多]
        《JavaScript进修》

    • 然后是remove和detach,两者总体上来说是差不多的,能够删除选中的元素及个中子元素,同时返回一个指向被删除元素的指针,经由过程保留这个指针能够为所欲为的再把删除的元素插到你想插的处所【好污】,不同点就在于remove的元素再插回去后,经由过程js绑定的事宜就失效了,而detach的元素再插回去事宜依然见效。

      • 不能不说的事宜一,appendTo要领一样能够把选中的元素搬动位置

      • 不能不说的事宜二,这两天写网页,个中有个功用是经由过程点击按钮来动态天生一个表单纪录数据,我在设想款式时直接初始化的表单的一系列操纵都是见效的,当我点击按钮事宜来动态天生这个表单时,我绑定的js事宜就失效了,厥后经由过程点击按钮来show被隐蔽的表单才完成了这一功用。然后本日看材料的时刻才晓得,本来许多js的要领只能绑定在页面初始化时就存在的元素上,不能绑在动态天生的元素上【固然是有要领处理使其能够绑在动态天生的元素上的】,所以我当时写的没有见效【但是我至今不邃晓为何另一个动态天生的表单绑定的一样写法的事宜就见效了。。】。认为这个remove和detach的道理也许和这个相似【原本之前是写了许多我的纯YY的猜想的,但是我刚预备Preview的时刻电脑崩了,所以我不预备再胡扯一遍了,照样来日诰日本喵查查材料再来说说他们的道理吧。。。。】

  • 5.第四章

    原文作者:QAQMiao
    原文地址: https://segmentfault.com/a/1190000004671237
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞