From 1cf57d88f94d424098da00baf745f1d9091ccd4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BD=97=E5=90=AF=E6=81=92?= <3013545725@qq.com> Date: Fri, 25 Nov 2022 08:47:05 +0000 Subject: [PATCH 1/6] =?UTF-8?q?=E7=BD=97=E5=90=AF=E6=81=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 罗启恒 <3013545725@qq.com> --- .../2022-11-25 \344\275\234\344\270\232.html" | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 "44 \347\275\227\345\220\257\346\201\222/\344\275\234\344\270\232/2022-11-25 \344\275\234\344\270\232.html" diff --git "a/44 \347\275\227\345\220\257\346\201\222/\344\275\234\344\270\232/2022-11-25 \344\275\234\344\270\232.html" "b/44 \347\275\227\345\220\257\346\201\222/\344\275\234\344\270\232/2022-11-25 \344\275\234\344\270\232.html" new file mode 100644 index 0000000..8ebe55d --- /dev/null +++ "b/44 \347\275\227\345\220\257\346\201\222/\344\275\234\344\270\232/2022-11-25 \344\275\234\344\270\232.html" @@ -0,0 +1,33 @@ + + + + + + + Document + + +
+ apple + banana + orange +
+

+ + + \ No newline at end of file -- Gitee From 7e94e88cce20034545a499b0f4c26d9a0700cb97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BD=97=E5=90=AF=E6=81=92?= <3013545725@qq.com> Date: Fri, 25 Nov 2022 08:47:28 +0000 Subject: [PATCH 2/6] =?UTF-8?q?=E7=BD=97=E5=90=AF=E6=81=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 罗启恒 <3013545725@qq.com> --- .../2022-11-24 \347\254\224\350\256\260.md" | 88 +++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 "44 \347\275\227\345\220\257\346\201\222/\347\254\224\350\256\260/2022-11-24 \347\254\224\350\256\260.md" diff --git "a/44 \347\275\227\345\220\257\346\201\222/\347\254\224\350\256\260/2022-11-24 \347\254\224\350\256\260.md" "b/44 \347\275\227\345\220\257\346\201\222/\347\254\224\350\256\260/2022-11-24 \347\254\224\350\256\260.md" new file mode 100644 index 0000000..a96694b --- /dev/null +++ "b/44 \347\275\227\345\220\257\346\201\222/\347\254\224\350\256\260/2022-11-24 \347\254\224\350\256\260.md" @@ -0,0 +1,88 @@ +**事件冒泡**:微软提出了名为**事件冒泡**的事件流。事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。可以想象把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。 + +**事件捕获**:网景提出另一种事件流名为**事件捕获**。事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)，与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。同样形象的比喻一下可以想象成警察逮捕屋子内的小偷，就要从外面一层层的进入到房子内。 + +#### 事件阻止冒泡 + +```js +ev.stopPropagation(); //不支持ie9以下 DOM +event.cancelBubble = true; //ie独有 ie + +封装取消冒泡的函数：stopBubble(event) +``` + +但是有些事件本身是不冒泡的：（表单事件）focus,blur,change,submit,reset,select 等事件不冒泡 + +#### 事件流 + +​ 事件有三个阶段，首先发生的是捕获阶段，然后是目标阶段，最后才是冒泡阶段，对于捕获和冒泡，我们只能干预其中的一个，通常来说，我们可能会干预事件冒泡阶段，而不去干预事件捕获阶段。 + +#### 阻止默认行为 + +​ 默认事件：表单提交，a标签跳转，右键菜单等 + +**事件委托**：利用事件冒泡，和事件源对象进行处理 + +优点：性能高 灵活 + +#### JS常用事件 + +###### 1.点击事件 + +onclick：单击事件 + +ondblclick：双击事件 + +###### 2.焦点事件 + +onblur：失去焦点 + +onfocus:元素获得焦点。 + +###### 3.加载事件 + +onload：一张页面或一幅图像完成加载。 + +###### 4.鼠标事件 + +onmousedown： 鼠标按钮被按下。 + +onmouseup： 鼠标按键被松开。 + +onmousemove： 鼠标被移动。 + +onmouseover： 鼠标移到某元素之上。 + +onmouseout ：鼠标从某元素移开。 + +mouseenter： + +mouseleave： + +contextmenu: + +鼠标按下时，通过事件对象 event中的属性 button 或 which 可以获取鼠标按键的编号e.button 事件对象中的 button属性可以获取鼠标按键的编号e.which 也可以获取鼠标的按键编号 0 左键 1滚轮 2右键 + +DOM3规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键 + +如何解决mousedown和click的冲突 + +###### 5.键盘事件 + +onkeydown ：某个键盘按键被按下。 + +onkeyup： 某个键盘按键被松开。 + +onkeypress ：某个键盘按键被按下并松开。 + +###### 6.选择和改变 + +onchange ：域的内容被改变。 + +onselect ：文本被选中。 + +###### 7.表单事件 + +onsubmit ：确认按钮被点击。 + +onreset： 重置按钮被点击 \ No newline at end of file -- Gitee From f4fac595b2ab7ff2cc87c54b1b84d1673771ea1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BD=97=E5=90=AF=E6=81=92?= <3013545725@qq.com> Date: Tue, 29 Nov 2022 07:36:22 +0000 Subject: [PATCH 3/6] =?UTF-8?q?=E7=BD=97=E5=90=AF=E6=81=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 罗启恒 <3013545725@qq.com> --- .../2022-11-27 \344\275\234\344\270\232.html" | 65 +++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 "44 \347\275\227\345\220\257\346\201\222/\344\275\234\344\270\232/2022-11-27 \344\275\234\344\270\232.html" diff --git "a/44 \347\275\227\345\220\257\346\201\222/\344\275\234\344\270\232/2022-11-27 \344\275\234\344\270\232.html" "b/44 \347\275\227\345\220\257\346\201\222/\344\275\234\344\270\232/2022-11-27 \344\275\234\344\270\232.html" new file mode 100644 index 0000000..7c79600 --- /dev/null +++ "b/44 \347\275\227\345\220\257\346\201\222/\344\275\234\344\270\232/2022-11-27 \344\275\234\344\270\232.html" @@ -0,0 +1,65 @@ + + + + + + + + Document + + + + +
+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
第一行第一行
第二行第二行
第三行第三行
第四行第四行
第五行第五行
+ + + + \ No newline at end of file -- Gitee From ef84f91c2d739bce11deccc4e8ce356cd36763f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BD=97=E5=90=AF=E6=81=92?= <3013545725@qq.com> Date: Tue, 29 Nov 2022 07:36:35 +0000 Subject: [PATCH 4/6] =?UTF-8?q?=E7=BD=97=E5=90=AF=E6=81=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 罗启恒 <3013545725@qq.com> --- .../2022-11-25 \347\254\224\350\256\260.md" | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 "44 \347\275\227\345\220\257\346\201\222/\347\254\224\350\256\260/2022-11-25 \347\254\224\350\256\260.md" diff --git "a/44 \347\275\227\345\220\257\346\201\222/\347\254\224\350\256\260/2022-11-25 \347\254\224\350\256\260.md" "b/44 \347\275\227\345\220\257\346\201\222/\347\254\224\350\256\260/2022-11-25 \347\254\224\350\256\260.md" new file mode 100644 index 0000000..e603697 --- /dev/null +++ "b/44 \347\275\227\345\220\257\346\201\222/\347\254\224\350\256\260/2022-11-25 \347\254\224\350\256\260.md" @@ -0,0 +1,31 @@ +将dom对象转成jquery对象 + // var jqDiv = $(div); + // $(jqDiv).click( + // function () { + // alert('这是js包装集对象弹窗') + // } + +jquery对象 -->dom对象 + +基础选择器：标签选择器 + // $('div') + +id:# class: . + +选择所有元素:document之下的 + // console.log($('*')); + +群组选择器 + console.log($('#box,.btn')); + +后代:所有后代（不止一代）的元素 $('#parent div') + // console.log($('#parent div')); + +子代(只找后面一代)：$('#parent>div') + // console.log($('#color>img')); + +相邻选择器:只能找后面一个元素 + // console.log($('.blue+button')); + +同辈选择器:往后找多个 + console.log($('#color~div')); \ No newline at end of file -- Gitee From 40c931941a7f9932ae854508f74965506b1345c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BD=97=E5=90=AF=E6=81=92?= <3013545725@qq.com> Date: Tue, 29 Nov 2022 14:18:54 +0000 Subject: [PATCH 5/6] =?UTF-8?q?=E7=BD=97=E5=90=AF=E6=81=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 罗启恒 <3013545725@qq.com> --- .../2022-11-29 \344\275\234\344\270\232.html" | 125 ++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 "44 \347\275\227\345\220\257\346\201\222/\344\275\234\344\270\232/2022-11-29 \344\275\234\344\270\232.html" diff --git "a/44 \347\275\227\345\220\257\346\201\222/\344\275\234\344\270\232/2022-11-29 \344\275\234\344\270\232.html" "b/44 \347\275\227\345\220\257\346\201\222/\344\275\234\344\270\232/2022-11-29 \344\275\234\344\270\232.html" new file mode 100644 index 0000000..694b80d --- /dev/null +++ "b/44 \347\275\227\345\220\257\346\201\222/\344\275\234\344\270\232/2022-11-29 \344\275\234\344\270\232.html" @@ -0,0 +1,125 @@ + + + + + + + + Document + + + + + + +
+ 0 + 1 + 2 + 3 + +
+

+
+
+ +
+

+
+ 用户名：
+ 密 码：
+ 确认密码：
+
+
+ + + + \ No newline at end of file -- Gitee From 02cee4fe56bacf2cb42ecf94a9baaabf848879e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BD=97=E5=90=AF=E6=81=92?= <3013545725@qq.com> Date: Tue, 29 Nov 2022 14:19:08 +0000 Subject: [PATCH 6/6] =?UTF-8?q?=E7=BD=97=E5=90=AF=E6=81=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 罗启恒 <3013545725@qq.com> --- .../2022-11-28 \347\254\224\350\256\260.md" | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 "44 \347\275\227\345\220\257\346\201\222/\347\254\224\350\256\260/2022-11-28 \347\254\224\350\256\260.md" diff --git "a/44 \347\275\227\345\220\257\346\201\222/\347\254\224\350\256\260/2022-11-28 \347\254\224\350\256\260.md" "b/44 \347\275\227\345\220\257\346\201\222/\347\254\224\350\256\260/2022-11-28 \347\254\224\350\256\260.md" new file mode 100644 index 0000000..8fa6011 --- /dev/null +++ "b/44 \347\275\227\345\220\257\346\201\222/\347\254\224\350\256\260/2022-11-28 \347\254\224\350\256\260.md" @@ -0,0 +1,72 @@ +属性的分类： + +- 固有属性： +- 返回值是bool的属性: checked ,selected, disabled +- 自定义属性 + +attr(属性名称) attr('属性名','属性值') + +获取指定的属性值，操作checkbox时
选中返回checked，没有选中返回undefined。 + +prop(属性名称) + +获取具有true和false两个属性的属性值 + +查询固有属性方法attr(属性名) + //console.log($('#aa').attr('name')); + +返回是bool类型的属性:prop + console.log($('#aa').attr('checked')); //undefined + console.log($('#aa').prop('checked')); //false + +对于自定义属性:只有attr才能定义属性,prop + $('#aa').attr('age',16); + // $('#bb').attr('checked',true); + +移除属性 + $('#aa').removeAttr('age'); + +智能判定单 双击 setTimeout var st = setInterval()-->clearInterval(st) + +jQuery:ready事件:节点树加载完成就触发 + +load事件:将节点树:document-->html-->body-->,多媒体文件加载进来之后才触发load事件 + +针对表单元素的值:val() -- > value + +获取值 + console.log($('#div').html()); + console.log($('#div').text()); + console.log($('#op').val()); + +设置值 + $('#div').html('北京'); + $('#op').val('poo'); + +css(样式，样式值) + //css({样式1:样式值, 样式2:样式值}) + // $('#conRed').css('background','cyan'); + +创建元素(dom:createNode('h2')):只能添加到某一位置 + +在$('f1')添加子元素($h3) + // $('#f1').prepend($h3); // + +添加子元素($h3)到$('f1') + // $h3.prependTo($('#f1')) + +append:添加子元素 + // $('#f2').after($h3); + // $h3.appendTo($('#f2')); + +after:添加到同辈 insertafter + // $('#f2').after($h3) + +before: + // $('#f2').before($h3); + +remove:子元素级自身删除 + // $('.green').remove(); + +empty：删除子元素，自身不会被删除 + // $('.green').empty(); \ No newline at end of file -- Gitee