diff --git "a/08\345\273\226\346\237\217\346\210\220/\344\275\234\344\270\232/2022-11-23.html" "b/08\345\273\226\346\237\217\346\210\220/\344\275\234\344\270\232/2022-11-23.html" new file mode 100644 index 0000000000000000000000000000000000000000..5de88f5f5f42092f40378f74bbb45edec3a32855 --- /dev/null +++ "b/08\345\273\226\346\237\217\346\210\220/\344\275\234\344\270\232/2022-11-23.html" @@ -0,0 +1,49 @@ + + + + + + + Document + + + +
+
+ +
+
+ + + \ No newline at end of file diff --git "a/08\345\273\226\346\237\217\346\210\220/\344\275\234\344\270\232/2022-11-25JQuery.html" "b/08\345\273\226\346\237\217\346\210\220/\344\275\234\344\270\232/2022-11-25JQuery.html" new file mode 100644 index 0000000000000000000000000000000000000000..253c1a7de286c1bd1cecc32389bdf81e859cbbe2 --- /dev/null +++ "b/08\345\273\226\346\237\217\346\210\220/\344\275\234\344\270\232/2022-11-25JQuery.html" @@ -0,0 +1,64 @@ + + + + + + + Document + + + + + + + + + + + + +

+ + + + + + + + + + + + + + + + + + + + + +
第一行第一行
第二行第二行
第三行第三行
第四行第四行
第五行第五行
+ + + + \ No newline at end of file diff --git "a/08\345\273\226\346\237\217\346\210\220/\344\275\234\344\270\232/2022_11_24_focus&blur.html" "b/08\345\273\226\346\237\217\346\210\220/\344\275\234\344\270\232/2022_11_24_focus&blur.html" new file mode 100644 index 0000000000000000000000000000000000000000..3379b06a60988af6c7872cd1f5dd21b02fd60b62 --- /dev/null +++ "b/08\345\273\226\346\237\217\346\210\220/\344\275\234\344\270\232/2022_11_24_focus&blur.html" @@ -0,0 +1,53 @@ + + + + + + + + Document + + + + +
+ banana + apple + orange + + + + mouse + dog + cat + pig +
+ +

+ + + + \ No newline at end of file diff --git "a/08\345\273\226\346\237\217\346\210\220/\347\254\224\350\256\260/2022-11-23\344\272\213\344\273\266\346\265\201.txt" "b/08\345\273\226\346\237\217\346\210\220/\347\254\224\350\256\260/2022-11-23\344\272\213\344\273\266\346\265\201.txt" new file mode 100644 index 0000000000000000000000000000000000000000..7c27c88554617047c22a35a31cfddef6fd4f4c4a --- /dev/null +++ "b/08\345\273\226\346\237\217\346\210\220/\347\254\224\350\256\260/2022-11-23\344\272\213\344\273\266\346\265\201.txt" @@ -0,0 +1,14 @@ + DOM 0 当有多个同类型事件触发时，只会触发一个 ，兼容性较高 + DOM 2 :当有多个同类型事件触发时，会依次触发， 兼容性较差 + + 事件从最外层开始捕获，直到当前元素（触发事件的对象），再从当前元素向外冒泡到document + 事件会自发冒泡(微软)（从里层向外层冒泡，直到document） + 事件捕获(网景)（从最外层向里层） + function fn1() { + alert('这是最外层body里面的点击事件') + } +addEventListener('click',fn2,false)：默认false，表示冒泡 true：捕获 + div.addEventListener('click',fn2,false); + + 事件取消 + btn.removeEventListener('click',fn); \ No newline at end of file diff --git "a/08\345\273\226\346\237\217\346\210\220/\347\254\224\350\256\260/2022-11-24\344\272\213\344\273\266\347\273\221\345\256\232.txt" "b/08\345\273\226\346\237\217\346\210\220/\347\254\224\350\256\260/2022-11-24\344\272\213\344\273\266\347\273\221\345\256\232.txt" new file mode 100644 index 0000000000000000000000000000000000000000..b6764120b96a531ffd00adfd7632e4deb24aa858 --- /dev/null +++ "b/08\345\273\226\346\237\217\346\210\220/\347\254\224\350\256\260/2022-11-24\344\272\213\344\273\266\347\273\221\345\256\232.txt" @@ -0,0 +1,25 @@ +1 事件绑定 + +1.1*传统事件绑定 + +1.2*现代事件绑定 + +绑定多个同类型事件时会依次执行，但是兼容性较差 + + addEventListener:DOM事件的绑定 +绑定事件 +var fn = fuction(){ + console.log(123) +} +addEventListener(事件,处理函数,布尔值):支持ie9及以上的浏览器和其他浏览器 +addEventListener('click',fn) + +2.事件取消 + +2.1传统事件取消 + +2.2现代事件取消 +//DOM +btn.removeEventListener('click',fn); +//IE +btn.detachEvent('onclick',fn); \ No newline at end of file diff --git "a/08\345\273\226\346\237\217\346\210\220/\347\254\224\350\256\260/2022-11-25JQuery .md" "b/08\345\273\226\346\237\217\346\210\220/\347\254\224\350\256\260/2022-11-25JQuery .md" new file mode 100644 index 0000000000000000000000000000000000000000..44beaaf82eb0ee830f68a0356939701ef1264a8b --- /dev/null +++ "b/08\345\273\226\346\237\217\346\210\220/\347\254\224\350\256\260/2022-11-25JQuery .md" @@ -0,0 +1,72 @@ +# JQuery的基本使用 + +### 1.1JQuery的入口函数 帮我们完成封装 + +$(function(){ + +​ ... // 此处是页面DOM加载完成的入口 + +}) + + + +#### 1.2等页面DOM加载完毕再去执行js 代码 + +$(docment).ready(function(){ + +​ ... // 此处是页面DOM加载完成的入口 + +​ $('div').hide(); + +}) + +##### 相当于 原生js中的DOMContentLoaded + +##### 不同于原生js 中的load事件是等页面文档，外部的js文件，css文件，图片加载完毕才执行内部代码 + + + +# 1.JQuery 选择器 + +## 1.1JQuery 基础选择器 + +### $("标签名") //写css选择器就好。但要加引号 + +| 选择器 | 名称 | 举例 | +| :--------: | :------------------------: | :---------------------------: | +| id选择器 | $('#testDiv'): | 选择id为testDiv的元素 | +| 标签选择器 | $('div'): | 选择所有div元素 | +| 类选择器 | $('.blue'): | 选择所有class=blue的的元素 | +| 全选选择器 | $('*'): | 选择页面所有元素 | +| 群组选择器 | $('#testDiv, span, blue'): | 同时选择多个选择器匹配的元素. | +| 交集选择器 | $("li.current"): | 交集元素 | + + + + + + + +##### 3.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元素 | + + + + + + + + + + + + + + +