From ef19922b28e9891b061dfb7fdbeedfe1fa859ce2 Mon Sep 17 00:00:00 2001 From: YH <2543387770@qq.com> Date: Mon, 28 Dec 2020 11:35:05 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E9=9A=8F=E5=A0=82=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-12-25 \347\254\224\350\256\260.md" | 2 +- .../2020-12-27 \347\254\224\350\256\260.md" | 62 +++++++++++++++++++ 2 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 "\351\273\204\345\256\207\347\205\214/2020-12-27 \347\254\224\350\256\260.md" diff --git "a/\351\273\204\345\256\207\347\205\214/2020-12-25 \347\254\224\350\256\260.md" "b/\351\273\204\345\256\207\347\205\214/2020-12-25 \347\254\224\350\256\260.md" index 42818c3..7063125 100644 --- "a/\351\273\204\345\256\207\347\205\214/2020-12-25 \347\254\224\350\256\260.md" +++ "b/\351\273\204\345\256\207\347\205\214/2020-12-25 \347\254\224\350\256\260.md" @@ -1,4 +1,4 @@ -# 2020年12月24日课堂笔记 +# 2020年12月25日课堂笔记 ## document document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。 diff --git "a/\351\273\204\345\256\207\347\205\214/2020-12-27 \347\254\224\350\256\260.md" "b/\351\273\204\345\256\207\347\205\214/2020-12-27 \347\254\224\350\256\260.md" new file mode 100644 index 0000000..361bc08 --- /dev/null +++ "b/\351\273\204\345\256\207\347\205\214/2020-12-27 \347\254\224\350\256\260.md" @@ -0,0 +1,62 @@ +# 2020年12月27日课堂笔记 + +## 插入DOM +方法一：apendChild，把一个子节点添加到父节点的最后一个子节点。 +``` + +

JavaScript

+
+

Java

+

Python

+

Scheme

+
+``` +``` +let js = document.getElementById('js'), +let list = document.getElementById('list'); +list.appendChild(js); +``` +方法二：创建一个新的节点，然后插入到指定位置 +``` + +
+

Java

+

Python

+

Scheme

+

JavaScript

+
+``` +``` +//apendChild 插入末尾 +let list = document.getElementById('list'), +let haskell = document.createElement('p'); +haskell.id = 'haskell'; +haskell.innerText = 'Haskell'; +list.appendChild(haskell); + +//insertBefore 插入到指定位置 +//let list = document.getElementById('list'); +let show = document.createElement('p'); + +show.id = 'show'; +show.innerText = 'show'; +//self为要插入的位置的下一个元素 +let self = document.getElementById('js'); +//插入到self上面 +list.insertBefore(show,self); +``` + +## 删除DOM +要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉： +``` +// 拿到待删除节点: +var self = document.getElementById('to-be-removed'); +// 拿到父节点: +var parent = self.parentElement; +// 删除: +parent.removeChild(self); +``` + +注：删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。 + +## 操作表单 \ No newline at end of file -- Gitee From c8da2b0e3d3568a76571e538ad29e63eba009d72 Mon Sep 17 00:00:00 2001 From: YH <2543387770@qq.com> Date: Tue, 29 Dec 2020 11:30:19 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E9=9A=8F=E5=A0=82=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-12-28 \347\254\224\350\256\260.md" | 1 + .../2020-12-28 \347\273\203\344\271\240.md" | 79 +++++++++++++++++++ 2 files changed, 80 insertions(+) create mode 100644 "\351\273\204\345\256\207\347\205\214/2020-12-28 \347\254\224\350\256\260.md" create mode 100644 "\351\273\204\345\256\207\347\205\214/2020-12-28 \347\273\203\344\271\240.md" diff --git "a/\351\273\204\345\256\207\347\205\214/2020-12-28 \347\254\224\350\256\260.md" "b/\351\273\204\345\256\207\347\205\214/2020-12-28 \347\254\224\350\256\260.md" new file mode 100644 index 0000000..61a76e6 --- /dev/null +++ "b/\351\273\204\345\256\207\347\205\214/2020-12-28 \347\254\224\350\256\260.md" @@ -0,0 +1 @@ +# 2020年12月28日课堂笔记 \ No newline at end of file diff --git "a/\351\273\204\345\256\207\347\205\214/2020-12-28 \347\273\203\344\271\240.md" "b/\351\273\204\345\256\207\347\205\214/2020-12-28 \347\273\203\344\271\240.md" new file mode 100644 index 0000000..2864abc --- /dev/null +++ "b/\351\273\204\345\256\207\347\205\214/2020-12-28 \347\273\203\344\271\240.md" @@ -0,0 +1,79 @@ +# 2020年12月28日讲解题 + +练习 +对于一个已有的HTML结构： +``` +Scheme +JavaScript +Python +Ruby +Haskell + +
    +
  1. Scheme
    2. +
  2. JavaScript
    3. +
  3. Python
    4. +
  4. Ruby
    5. +
  5. Haskell
    6. +
+``` +按字符串顺序重新排序DOM节点： +``` +'use strict'; +// sort list: + +// 测试: +;(function () { + var + arr, i, + t = document.getElementById('test-list'); + if (t && t.children && t.children.length === 5) { + arr = []; + for (i=0; i0){ + a.removeChild(re[0]); +} + +//将排序后的数组插回 +for(let i = 0;i Date: Thu, 31 Dec 2020 17:33:32 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E9=9A=8F=E5=A0=82=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-12-31 \347\254\224\350\256\260.md" | 125 ++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 "\351\273\204\345\256\207\347\205\214/2020-12-31 \347\254\224\350\256\260.md" diff --git "a/\351\273\204\345\256\207\347\205\214/2020-12-31 \347\254\224\350\256\260.md" "b/\351\273\204\345\256\207\347\205\214/2020-12-31 \347\254\224\350\256\260.md" new file mode 100644 index 0000000..d0c2286 --- /dev/null +++ "b/\351\273\204\345\256\207\347\205\214/2020-12-31 \347\254\224\350\256\260.md" @@ -0,0 +1,125 @@ +# 2020年12月31日课堂笔记 + +## jQuery +### 查询 +1. id查找 class查找 + ``` + // 查找
: + var div = $('#abc'); + + // 查找
: + var div = $('.abc'); + + ``` + +2. 按tag查找 + 按tag查找只需要写上tag名称就可以了： + ``` + var ps = $('p'); // 返回所有

节点 + ps.length; // 数一数页面有多少个

节点 + ``` + +3. 按属性查找 + ``` + var email = $('[name=email]'); // 找出 + var passwordInput = $('[type=password]'); // 找出 + var a = $('[items="A B"]'); // 找出 + + 按属性查找还可以使用前缀查找或者后缀查找： + + var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM + // 例如: name="icon-1", name="icon-2" + var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM + // 例如: name="startswith", name="endswith" + + ``` + +### 层级选择器 +``` + +

+
    +
  • JavaScript
    • +
  • Python
    • +
  • Lua
    • +
+
+``` +要选出JavaScript，可以用层级选择器： +``` +$('ul.lang li.lang-javascript'); // [
  • JavaScript
    • ] +$('div.testing li.lang-javascript'); // [
  • JavaScript
    • ] +``` + +注：层级之间用空格隔开 + +### 过滤器（Filter） +``` +$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点 + +$('ul.lang li:first-child'); // 仅选出JavaScript +$('ul.lang li:last-child'); // 仅选出Lua +$('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始 +$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素 +$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素 +``` + +## 操作DOM + +### 修改Text和HTML +``` + +
      +
    • JavaScript
      • +
    • Java & JavaScript
      • +
    +``` +分别获取文本和HTML： +``` +$('#test-ul li[name=book]').text(); // 'Java & JavaScript' +$('#test-ul li[name=book]').html(); // 'Java & JavaScript' +``` + +### 修改css +``` + +
      +
    • JavaScript
      • +
    • Java
      • +
    • Python
      • +
    • Swift
      • +
    • Scheme
      • +
    +``` +要高亮显示动态语言，调用jQuery对象的css('name', 'value')方法，我们用一行语句实现： +``` +'use strict'; +$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red'); + +``` + +### 添加DOM +``` +
    +
      +
    • JavaScript
      • +
    • Python
      • +
    • Swift
      • +
    +
    +``` +首先要拿到`
      `节点： +``` +var ul = $('#test-div>ul'); +``` +然后，调用append()传入HTML片段： +``` +ul.append('
    • Haskell
      • '); +``` + +### 删除节点 +拿到对象之间调用remove() +``` +var li = $('#test-div>ul>li'); +li.remove(); // 所有
    • 全被删除 +``` \ No newline at end of file -- Gitee From 9691e0ae39ed2a077f72f8871eccc1732d3136fa Mon Sep 17 00:00:00 2001 From: YH <2543387770@qq.com> Date: Mon, 4 Jan 2021 12:06:54 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E9=9A=8F=E5=A0=82=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-11-26 \344\275\234\344\270\232.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/\351\273\204\345\256\207\347\205\214/2020-11-26 \344\275\234\344\270\232.md" "b/\351\273\204\345\256\207\347\205\214/2020-11-26 \344\275\234\344\270\232.md" index 0089b87..27d26ca 100644 --- "a/\351\273\204\345\256\207\347\205\214/2020-11-26 \344\275\234\344\270\232.md" +++ "b/\351\273\204\345\256\207\347\205\214/2020-11-26 \344\275\234\344\270\232.md" @@ -55,7 +55,7 @@ newarr.push(arr[i]); } } - console.log(arr1); + console.log(newarr); ``` 4. 题目描述 -- Gitee