JavaScript学习

时间 2019-11-09

标签 javascript 学习栏目 JavaScript 繁體版

原文原文链接

About Javscript

record the thing which maybe forgetten

原生JavaScript

Javascript DOMcss
1. document.write + "html/css 标签";html
2. prompt("这里是对话框显示部分","这里是文本框提示部分") = alert + inputtext + cancel +confirm;jquery
3. confirm(str) = alert + confirm + cancel;app
4. window.open("URL","para1","para2");框架
  - para1:函数
    - _blank：在新窗口显示目标网页布局
    - _self：在当前窗口显示目标网页学习
    - _top：框架网页中在上部窗口中显示目标网页this
  - para2:spa
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

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. 忘记写分号不要太在乎- -
- $("#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文件差很少啦，而后经过以下函数将该元素添加到相应的位置

var $test = $("<span id = "ture" class = "wtf">喵喵最喜欢帅哥辣么么哒</span>")
<p>你们好<p>    //把html和js写在一块儿了，明白就好，实在没想好怎么布局

删除节点
- 有empty(),remove()和detach()三种方法
- 最好理解的就是empty()了，$(selector).empty();清空选中标签的中的内容，至关于格式化当前标签了
  - 原结构：
  - 清空后：[窝才看不到这两个图辣么多]
- 而后是remove和detach，两者整体上来说是差很少的，能够删除选中的元素及其中子元素，同时返回一个指向被删除元素的指针，经过保存这个指针能够为所欲为的再把删除的元素插到你想插的地方【好污】，不一样点就在于remove的元素再插回去后，经过js绑定的事件就失效了，而detach的元素再插回去事件仍然生效。
  - 不得不说的事件一，appendTo方法一样能够把选中的元素挪动位置
  - 不得不说的事件二，这两天写网页，其中有个功能是经过点击按钮来动态生成一个表单记录数据，我在设计样式时直接初始化的表单的一系列操做都是生效的，当我点击按钮事件来动态生成这个表单时，我绑定的js事件就失效了，后来经过点击按钮来show被隐藏的表单才实现了这一功能。而后今天看资料的时候才知道，原来好多js的方法只能绑定在页面初始化时就存在的元素上，不能绑在动态生成的元素上【固然是有方法解决使其能够绑在动态生成的元素上的】，因此我当时写的没有生效【然而我至今不明白为何另外一个动态生成的表单绑定的一样写法的事件就生效了。。】。以为这个remove和detach的原理大概和这个相似【原本以前是写了不少个人纯YY的猜想的，然而我刚准备Preview的时候电脑崩了，因此我不许备再胡扯一遍了，仍是明天本喵查查资料再来讲说他们的原理吧。。。。】
5.第四章