From f079c7e7218c1920c1c6f071c7ef95e08c239eee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E6=AC=A3=E7=87=95?= <932306904@qq.com> Date: Mon, 28 Nov 2022 12:25:08 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=B4=E6=AC=A3=E7=87=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\344\275\234\344\270\232/DOM2.md" | 98 ++++++++++++ .../\344\275\234\344\270\232/JQuery.md" | 34 ++++ .../\344\272\213\344\273\266.md" | 33 ++++ .../\344\272\213\344\273\2662.md" | 26 ++++ ...15\344\275\234\346\240\267\345\274\217.md" | 145 ++++++++++++++++++ ...23\344\272\213\344\273\266\346\265\201.md" | 124 +++++++++++++++ .../2022-11-24\344\272\213\344\273\266.md" | 110 +++++++++++++ ...22-11-27JQuery\345\210\235\350\257\206.md" | 133 ++++++++++++++++ 8 files changed, 703 insertions(+) create mode 100644 "31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/DOM2.md" create mode 100644 "31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/JQuery.md" create mode 100644 "31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/\344\272\213\344\273\266.md" create mode 100644 "31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/\344\272\213\344\273\2662.md" create mode 100644 "31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-21\350\216\267\345\217\226\345\261\236\346\200\247&\346\223\215\344\275\234\346\240\267\345\274\217.md" create mode 100644 "31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-23\344\272\213\344\273\266\346\265\201.md" create mode 100644 "31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-24\344\272\213\344\273\266.md" create mode 100644 "31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-27JQuery\345\210\235\350\257\206.md" diff --git "a/31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/DOM2.md" "b/31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/DOM2.md" new file mode 100644 index 0000000..c91b615 --- /dev/null +++ "b/31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/DOM2.md" @@ -0,0 +1,98 @@ +``` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 全选 + 反选 + 姓名性别专业 + 爱好
刘备男软件开发抽烟
关羽男国际贸易喝酒
张飞男园林设计烫头发
赵云男平面设计抽烟
黄忠男影视制作玩游戏
小乔女高级护理唱歌
+ + +``` \ No newline at end of file diff --git "a/31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/JQuery.md" "b/31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/JQuery.md" new file mode 100644 index 0000000..71877cc --- /dev/null +++ "b/31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/JQuery.md" @@ -0,0 +1,34 @@ +``` + + + + + + + + + + + + + + + + + + + +
第一行第一行
第二行第二行
第三行第三行
第四行第四行
第五行第五行
+ + +``` \ No newline at end of file diff --git "a/31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/\344\272\213\344\273\266.md" "b/31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/\344\272\213\344\273\266.md" new file mode 100644 index 0000000..014aecc --- /dev/null +++ "b/31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/\344\272\213\344\273\266.md" @@ -0,0 +1,33 @@ +``` + + + + + + +``` \ No newline at end of file diff --git "a/31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/\344\272\213\344\273\2662.md" "b/31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/\344\272\213\344\273\2662.md" new file mode 100644 index 0000000..e3aec5c --- /dev/null +++ "b/31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/\344\272\213\344\273\2662.md" @@ -0,0 +1,26 @@ +``` + +
+ apple + banana + orange +
+

+ + +``` \ No newline at end of file diff --git "a/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-21\350\216\267\345\217\226\345\261\236\346\200\247&\346\223\215\344\275\234\346\240\267\345\274\217.md" "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-21\350\216\267\345\217\226\345\261\236\346\200\247&\346\223\215\344\275\234\346\240\267\345\274\217.md" new file mode 100644 index 0000000..4f32294 --- /dev/null +++ "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-21\350\216\267\345\217\226\345\261\236\346\200\247&\346\223\215\344\275\234\346\240\267\345\274\217.md" @@ -0,0 +1,145 @@ +### 属性获取与设置 （getAttribute、setAttribute） + +#### 1，获取属性 **div.getAttribute('class')** + +#### 2，更改属性 **div.setAttribute('class','tinctred')** + +``` + + + +   + +
+
+ + +``` + +### 四，获取input的值（输入框，单选框多选框，下拉框） + +#### 1，输入框 + +``` + + + +
+ + +``` + +#### 2，单选框 + +``` + + + +
+ + +``` + +#### 3，多选框 + +``` + + + + + + + +
+ + +``` + +#### 4，下拉框 + +``` + + + + 文字颜色: + + 背景颜色: + +

+

+ JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。 + 它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言， + 最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 +

+ + +``` \ No newline at end of file diff --git "a/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-23\344\272\213\344\273\266\346\265\201.md" "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-23\344\272\213\344\273\266\346\265\201.md" new file mode 100644 index 0000000..e566969 --- /dev/null +++ "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-23\344\272\213\344\273\266\346\265\201.md" @@ -0,0 +1,124 @@ +### 一、事件流 + +- 一个事件的生命周期有三个阶段：捕捉，目标，冒泡。 + +### **二、事件冒泡** + +- 事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。 + +- 冒泡阶段（小到大） + + 冒泡阶段的顺序与捕捉阶段的顺序刚好相反==div->body->html->document== + +#### 1，阻止事件冒泡 + +- **focus,blur,change,submit,reset,select 等事件不冒泡** + +``` +event.cancelBubble = true; //ie独有 +封装取消冒泡的函数：stopBubble(event) +event.stopPropagation();//1.阻止事件冒泡，但不会阻止默认行为，不支持ie9以下 +return false;//2.阻止事件冒泡，也阻止了默认行为 +event.preventDefault();//3.阻止默认行为，不阻止事件冒泡（可阻止鼠标右击出现菜单这个默认事件） +``` + +### **三、事件捕获** + +- 事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)，与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。 + +#### 1.事件捕捉流（==由外到内==） + +- 当某个事件被触发时，浏览器会找到涉及的元素。涉及的元素称为目标。浏览器会找到body元素和目标之间所有元素并分别检查它们，看其有没有事件绑定。浏览器会先触发外层事件处理器，最后才会轮到目标处理器。==document->html->body->div== + +- 当捕捉阶段完成后，浏览器会触发目标元素上任何已添加的事件类型监听器，这里的先后顺序是按照事件定义的先后顺序来的 + +### 四、事件委托 + +- 把原本需要绑定在子元素上的事件（onclick、onkeydown 等）委托给它的父元素，让父元素来监听子元素的冒泡事件，并在子元素发生事件冒泡时找到这个子元素 +- 优点：性能高 灵活 + +#### 1，好处： + +- 利用事件冒泡实现事件委托 + +#### 2，缺点： + +- 要避免事件冒泡 + +### 五、阻止默认行为 + +- 默认事件：表单提交，a标签跳转，右键菜单等 +- 事件委托是利用事件冒泡原理，让节点的父级代为执行事件。而不需要遍历元素的子节点，大大减少dom操作。 + +#### 1，传统事件绑定 （兼容性好，但是不能绑定多个同类型事件） + +``` + //传统事件绑定1，耦合度比较高 + function show(num) { + console.log('I am Div'+num); + } + var btn1 = document.getElementById('btn1'); + btn1.onclick = function () { + console.log('我是传统事件绑定2'); + } +``` + +#### 2，现代事件绑定 （兼容性较差，绑定多个同类型事件时会依次执行） + +##### 2.1 DOM事件的绑定 addEventListener + +- addEventListener(事件,处理函数,布尔值):支持ie9及以上的浏览器和其他浏览器 + +``` +var fn = fuction(){ + console.log(123) +} +addEventListener('click',fn) +``` + +##### 2.2 IE事件绑定 attachEvent + +- attachEvent(事件,fn,布尔值):支持IE10及以下的浏览器 + +``` +var fn = fuction(){ + console.log(123) +} +attachEvent('onclick',fn) +``` + +##### 2.3 传统事件取消 + +``` +btn.onclick = null; +//a标签跳转 +return false; +//右键菜单 +preventDefault() +``` + +##### 2.4 现代事件取消 + +``` +//DOM +btn.removeEventListener('click',fn); +//IE +btn.detachEvent('onclick',fn); +``` + +### 六，事件对象 （ie: window.event） + +``` + e.onclick = () => { + //事件对象:ie：window.event 谷歌:event + var event = event || window.event; + //事件源对象:event.target:火狐 event.srcElement:ie 谷歌两个都可以 + var target = event.target || event.srcElement; + } +``` + +#### 3，绑定事件的三种方法 + +- ele.onXXX = function(event){}；常用绑定 +- obj.addEventListener(type,fn,bool);DOM事件的绑定 +- obj.attachEvent('on'+type,fn,bool); IE事件绑定 \ No newline at end of file diff --git "a/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-24\344\272\213\344\273\266.md" "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-24\344\272\213\344\273\266.md" new file mode 100644 index 0000000..32e812b --- /dev/null +++ "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-24\344\272\213\344\273\266.md" @@ -0,0 +1,110 @@ +### 一，事件 + +- 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。 +- 注意：事件名称大小写敏感。若是事件监听方式，则在事件名的前面取消on + +#### 1、点击事件的几种方式 + +- 通过方法响应点击事件 onclick="函数名()" + +``` +
点击
+ +function fn(){ + alert(111) +} +``` + +- 点击事件 + +``` +
点击
+var aDiv=document.getElementById("demo") +aDiv.onclick=function(){ + alert(111) +} +``` + +- 当一个节点中有两个事件时 + +``` + +//它会执行第二个事件，第二个事件会覆盖第一个事件 + function one(){ + console.log(11) + } + btn.onclick=()=>{ + console.log(22) + } + //它会输出第二种，第二种优先级比第一种高 + + + + + +``` + +### 二，常用事件 + +#### 1.加载事件 + +**onload：一张页面或一幅图像完成加载** + +#### 2，鼠标事件 + +- 鼠标按下时，通过事件对象 event中的属性 button 或 which 可以获取鼠标按键的编号e.button 事件对象中的 button属性可以获取鼠标按键的编号e.which 也可以获取鼠标的按键编号 0 左键 1滚轮 2右键 +- DOM3规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键 + +| 鼠标事件 | 触发条件 | +| -------------- | ---------------- | +| ==onclick== | 鼠标点击左键触发 | +| oncontextmenu | 鼠标点击右键触发 | +| ==ondblclick== | 鼠标双击触发 | +| onmouseover | 鼠标经过触发 | +| onmouseout | 鼠标离开触发 | +| ==onfocus== | 获得鼠标焦点触发 | +| ==onblur== | 失去鼠标焦点触发 | +| onmousemove | 鼠标移动触发 | +| onmouseup | 鼠标弹起触发 | +| onmousedown | 鼠标按下触发 | + +#### 3， [表单](https://gitee.com/link?target=https%3A%2F%2Fso.csdn.net%2Fso%2Fsearch%3Fq%3D%E8%A1%A8%E5%8D%95%26spm%3D1001.2101.3001.7020)事件 + +| 表单事件 | 触发条件 | +| ------------ | ---------------------- | +| onfocus | 表单获得焦点触发 | +| onblur | 表单失去焦点触发 | +| oninput | 表单每次输入触发 | +| ==onchange== | 表单内容发生改变时触发 | +| ==onselect== | 表单文本被选取时触发 | +| ==onreset== | 表单重置时触发 | +| ==onsubmit== | 表单提交时触发 | + +#### 4， 事件对象 + +| **事件对象属性方法** | **说明** | +| -------------------- | ----------------------------------------- | +| e.target | 返回触发事件的对象 | +| e.type | 返回事件的类型 比如click mouseover 不带on | +| e.preventDefault() | 该方法阻止默认事件 比如禁止页面右键 | +| e.stopPropagation() | 阻止事件冒泡 | + +#### 5.键盘事件 + +| 键盘事件 | 触发条件 | +| ---------- | ------------------------ | +| onkeydown | 某个键盘按键被按下 | +| onkeyup | 某个键盘按键被松开 | +| onkeypress | 某个键盘按键被按下并松开 | + +#### 6、DOM2现代事件绑定 + +``` + + +``` \ No newline at end of file diff --git "a/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-27JQuery\345\210\235\350\257\206.md" "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-27JQuery\345\210\235\350\257\206.md" new file mode 100644 index 0000000..3eca474 --- /dev/null +++ "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-27JQuery\345\210\235\350\257\206.md" @@ -0,0 +1,133 @@ +### 一，JQuery + +- 获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定位元素，选择器跟CSS选择器几乎完全一样 + +#### 1，分类 + +##### 1，基础选择器 + +- 基本选择器 ，层次选择器 ，属性选择器 + +##### 2，伪类选择器 + +- “位置”伪类选择器 ，“子元素”伪类选择器 ，“可见性”伪类选择器 +- “内容”伪类选择器 ，“表单”伪类选择器 ，“表单属性”伪类选择器 + +#### 2，优点 + +- 代码简洁 ，完美兼容 ，轻量级 ，强大的选择器 ， 完善的AJAX ，丰富的插件 + +#### 3，DOM对象转成Jquery对象 + +``` +var div = document.getElementsByTagName('div')[0]; +console.log($(div)); +``` + +#### 4，Jquery对象转DOM对象 + +``` +var divs = $('div')[0] +console.log(divs); +``` + +### 二，基础选择器 + +#### 1，标签选择器 + +``` +$("标签名") +``` + +#### 2，基本选择器 + +| 选择器 | 名称 | 举例 | +| -------------- | ----------------------------- | ------------------------------------------------------ | +| id选择器 | #id | $('#testDiv'):选择id为testDiv的元素 | +| 元素名称选择器 | element | $('div'):选择所有div元素 | +| 类选择器 | .class | $('.blue'):选择所有class=blue的的元素 | +| 选择所有元素 | * | $('*'):选择页面所有元素 | +| 群组选择器 | selector1,selector2,selector3 | $('#testDiv, span, blue'):同时选择多个选择器匹配的元素 | + +#### 3， 层次选择器 + +| 选择器 | 名称 | 举例 | +| ---------- | ------------------- | -------------------------------------------------- | +| 后代选择器 | ancestor descendant | $('#parent div'):选择id为parent的元素的所有div元素 | +| 子代选择器 | parent > child | $('#parent>div'):选择id为parent的直接div子元素 | +| 相邻选择器 | prev + next | $('.blue + img'):选择css类为blue的下一个img元素 | +| 同辈选择器 | prev ~sibling | $('.blue ~ img'):选择css类为blue的之后的img元素 | + +#### 4，属性选择器 + +| **选择器** | 说明 | +| ------------------ | ------------------------------------------------------------ | +| E[attr] | 选择元素E，其中E元素必须带有attr属性 | +| E[attr = “value”] | 选择元素E，其中E元素的attr属性取值是value | +| E[attr!= “value”] | 选择元素E，其中E元素的attr属性取值不是value | +| E[attr ^= “value”] | 选择元素E，其中E元素的attr属性取值是以“value”开头的任何字符 | +| E[attr $=“value”] | 选择元素E，其中E元素的attr属性取值是以“value”结尾的任何字符 | +| E[attr *= “value”] | 选择元素E，其中E元素的attr属性取值是包含“value”的任何字符 | +| E[attr\|="value"] | 选择元素E，其中E元素的attr属性取值等于“value”或者以“value”开头 | +| E[attr ~= “value”] | 选择元素E，其中E元素的attr属性取值等于“value”或者包含“value” | + +#### 5，筛选选择器 + +| 名称 | 用法 | 描述 | +| ------------------ | -------------------------- | -------------------------------- | +| children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”)，子类选择器 | +| find(selector) | $(“ul”).find(“li”) | 相当于$(“ul li”),后代选择器 | +| siblings(selector) | $(“#first”).siblings(“li”) | 查找兄弟节点，不包括自己本身 | +| parent() | $(“#first”).parent() | 查找父亲 | +| eq(index) | $(“li”).eq(2) | 相当于$(“li:eq(2)”),index从0开始 | +| next() | $(“li”).next() | 找下一个兄弟 | +| prev() | $(“li”).prev() | 找上一个兄弟 | + +### 三，伪类选择器 + +- 以英文冒号（:）开头 + +#### 1，分类 + +1. “位置”伪类选择器 +2. “子元素”伪类选择器 +3. “可见性”伪类选择器 +4. “内容”伪类选择器 +5. “表单”伪类选择器 +6. “表单属性”伪类选择器 + +#### 2，表单伪类选择器 + +| Forms | 名称 | 举例 | +| -------------- | --------- | ------------------------------------------------------------ | +| 表单选择器 | :input | 查找所有input元素: $(':input'); 注意：会匹配所有的input, textarea,select和button元素 | +| 文本框选择器 | :text | 查找所有的文本框: $(':text') | +| 密码框选择器 | :password | 查找所有密码框 | +| 单选按钮选择器 | :radio | 查找所有单选按钮 | +| 复选框选择器 | :checkbox | 查找所有复选框 | +| 提交按钮选择器 | :submit | 查找所有提交按钮 | +| 图像域选择器 | :image | 查找所有图像域 | +| 重置按钮选择器 | :reset | 查找所有重置按钮 | +| 按钮选择器 | :button | 查找所有按钮 | +| 文本域选择器 | :file | 查找所有文本域 | + +#### 3， 表单属性伪类选择器 + +- 根据表单元素的属性来选取的一种伪类选择器 + +| 选择器 | 说明 | +| ---------- | ------------------------------------------------------ | +| :checked | 选取所有被选中的表单元素，一般是**单选框**或**复选框** | +| :selected | 选取被选中的表单元素的选项，一般是**下拉列表** | +| :enabled | 选取所有可用的表单元素 | +| :disabled | 选取所有不可用的表单元素 | +| :read-only | 选取所有的表单元素除了只读 | +| :focus | 选取所有获得焦点的表单元素 | + +#### 4，过滤选择器 + +| 名称 | 用法 | 描述 | +| ----------- | --------------------------------- | --------------------------------------------------------- | +| :eq（index) | $(“li:eq(2)”).css(“color”, ”red”) | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始 | +| :odd | $(“li:odd”).css(“color”, ”red”) | 获取到的li元素中，选择索引号为奇数的元素 | +| :even | $(“li:even”).css(“color”, ”red”) | 获取到的li元素中，选择索引号为偶数的元素 | \ No newline at end of file -- Gitee