diff --git "a/17\345\220\264\346\226\207\351\276\231/\344\275\234\344\270\232/2022-11.23\347\254\254\344\272\214\345\215\201\346\254\241\344\275\234\344\270\232.html" "b/17\345\220\264\346\226\207\351\276\231/\344\275\234\344\270\232/2022-11.23\347\254\254\344\272\214\345\215\201\346\254\241\344\275\234\344\270\232.html" new file mode 100644 index 0000000000000000000000000000000000000000..fb67cdb3a9edc20084a1a19a2df159eb54aafa36 --- /dev/null +++ "b/17\345\220\264\346\226\207\351\276\231/\344\275\234\344\270\232/2022-11.23\347\254\254\344\272\214\345\215\201\346\254\241\344\275\234\344\270\232.html" @@ -0,0 +1,40 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git "a/17\345\220\264\346\226\207\351\276\231/\344\275\234\344\270\232/2022-11.24\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\350\257\276\344\275\234\344\270\2321.html" "b/17\345\220\264\346\226\207\351\276\231/\344\275\234\344\270\232/2022-11.24\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\350\257\276\344\275\234\344\270\2321.html" new file mode 100644 index 0000000000000000000000000000000000000000..10b7b0812e21ba6f86506f49b7ec2c764f7d6a86 --- /dev/null +++ "b/17\345\220\264\346\226\207\351\276\231/\344\275\234\344\270\232/2022-11.24\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\350\257\276\344\275\234\344\270\2321.html" @@ -0,0 +1,29 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git "a/17\345\220\264\346\226\207\351\276\231/\344\275\234\344\270\232/2022-11.25\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\2321.html" "b/17\345\220\264\346\226\207\351\276\231/\344\275\234\344\270\232/2022-11.25\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\2321.html" new file mode 100644 index 0000000000000000000000000000000000000000..52939fc8f96e7c1ed8b6c279af97816bd488a092 --- /dev/null +++ "b/17\345\220\264\346\226\207\351\276\231/\344\275\234\344\270\232/2022-11.25\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\2321.html" @@ -0,0 +1,26 @@ + + + + + + + Document + + + + + + + + + + + + \ No newline at end of file diff --git "a/17\345\220\264\346\226\207\351\276\231/\344\275\234\344\270\232/2022-11.25\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\2322.html" "b/17\345\220\264\346\226\207\351\276\231/\344\275\234\344\270\232/2022-11.25\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\2322.html" new file mode 100644 index 0000000000000000000000000000000000000000..abc8294a0f2e9cae60928883ea633ba5a0f5efc9 --- /dev/null +++ "b/17\345\220\264\346\226\207\351\276\231/\344\275\234\344\270\232/2022-11.25\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\2322.html" @@ -0,0 +1,40 @@ + + + + + + + Document + + + + + + + + + + + + + + + + + + + + + + + +
第一行第一行
第二行第二行
第三行第三行
第四行第四行
第五行第五行
+ + + + \ No newline at end of file diff --git "a/17\345\220\264\346\226\207\351\276\231/\347\254\224\350\256\260/2022-11.23\347\254\254\344\272\214\345\215\201\346\254\241\347\254\224\350\256\260.md" "b/17\345\220\264\346\226\207\351\276\231/\347\254\224\350\256\260/2022-11.23\347\254\254\344\272\214\345\215\201\346\254\241\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..e4ad0b935f05d1d5bf0c53aaf1d270b9ffba2aff --- /dev/null +++ "b/17\345\220\264\346\226\207\351\276\231/\347\254\224\350\256\260/2022-11.23\347\254\254\344\272\214\345\215\201\346\254\241\347\254\224\350\256\260.md" @@ -0,0 +1,32 @@ +# 事件 + +DOM 0 当有多个同类型事件触发时，只会触发一个 ，兼容性较高（后面的会把前面的覆盖） + +DOM 2 :当有多个同类型事件触发时，会依次触发， 兼容性较差 + +添加事件： + +```js +addEventListener('事件类型','函数名') +``` + +取消事件： + +```js +removeEventListener('事件类型','函数名') +``` + +## 事件冒泡 + +事件从最外层开始捕获，直到当前元素（触发事件的对象），再从当前元素向外冒泡到document + +事件会自发冒泡(微软)（从里层向外层冒泡，直到document） + + 事件捕获(网景)（从最外层向里层） + +```js +addEventListener('事件类型',函数名,false)：默认false，表示冒泡 true：捕获 + + +``` + diff --git "a/17\345\220\264\346\226\207\351\276\231/\347\254\224\350\256\260/2022-11.24\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\347\254\224\350\256\260.md" "b/17\345\220\264\346\226\207\351\276\231/\347\254\224\350\256\260/2022-11.24\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..c62292152d04240a79c3ec4c7d0bb5e72ef4680e --- /dev/null +++ "b/17\345\220\264\346\226\207\351\276\231/\347\254\224\350\256\260/2022-11.24\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\347\254\224\350\256\260.md" @@ -0,0 +1,28 @@ +# 事件 + +#### 绑定事件的方法 + +ele.onXXX = function(event){} + +obj.addEventListener(type,fn,bool); + +obj.attachEvent('on'+type,fn,bool); + +#### 取消事件绑定 + +第一种方式：document.onclick = null; + +第二种方式：obj.detachEvent(事件名称，事件函数); + +第三种方式：obj.removeEventListener(事件名称，事件函数，是否捕获); + + + + +#### 事件对象 + +Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 + +事件通常与函数结合使用，函数不会在事件发生前被执行！ + +当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细信息（包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息等。这个对象是在执行事件时，浏览器通过函数传递过来的。）都会被临时保存到一个指定的地方——event对象，供我们在需要的时候调用 \ No newline at end of file diff --git "a/17\345\220\264\346\226\207\351\276\231/\347\254\224\350\256\260/2022-11.25\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\347\254\224\350\256\260.md" "b/17\345\220\264\346\226\207\351\276\231/\347\254\224\350\256\260/2022-11.25\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..2b6ee703ab9cdb12e15e44bc8d040cd73c8c2c06 --- /dev/null +++ "b/17\345\220\264\346\226\207\351\276\231/\347\254\224\350\256\260/2022-11.25\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\347\254\224\350\256\260.md" @@ -0,0 +1,67 @@ +# JQuery + +### $("标签名")：说明：选择标签名 + +##### 基础选择器 + +| 选择器 | 名称 | +| :------------------: | :---------------------------: | +| id选择器 | #id | +| 元素名称(标签)选择器 | element | +| 类选择器 | .class | +| 选择所有元素 | * | +| 群组选择器 | selector1,selector2,selector3 | + +##### 层次选择器 + +| 选择器 | 名称 | +| ---------- | ------------------- | +| 后代选择器 | ancestor descendant | +| 子代选择器 | parent > child | +| 相邻选择器 | prev + next | +| 同辈选择器 | prev ~sibling | + +**1.后代:所有后代（不止一代）的元素** + + **$('#parent div')** + +**2子代(只找后面一代)：** + + **$('#parent>div')** + +**3.相邻选择器:只能找后面一个元素** + + **$('.blue+button')** + + **4.同辈选择器:往后找多个** + +​ **$('.blue ~ img')** + +##### 表单伪类选择器 + +| Forms | 名称 | 举例 | +| -------------- | --------- | ------------------------------------------------------------ | +| 表单选择器 | :input | 查找所有input元素: $(':input'); | +| 文本框选择器 | :text | 查找所有的文本框 | +| 密码框选择器 | :password | 查找所有密码框 | +| 单选按钮选择器 | :radio | 查找所有单选按钮 | +| 复选框选择器 | :checkbox | 查找所有复选框 | +| 提交按钮选择器 | :submit | 查找所有提交按钮 | +| 图像域选择器 | :image | 查找所有图像域 | +| 重置按钮选择器 | :reset | 查找所有重置按钮 | +| 按钮选择器 | :button | 查找所有按钮 | +| 文本域选择器 | :file | 查找所有文本域 | + +##### 表单属性伪类选择器 + +| 选择器 | 说明 | +| :--------: | :----------------------------------------------------: | +| :checked | 选取所有被选中的表单元素，一般是**单选框**或**复选框** | +| :selected | 选取被选中的表单元素的选项，一般是**下拉列表** | +| :enabled | 选取所有可用的表单元素 | +| :disabled | 选取所有不可用的表单元素 | +| :read-only | 选取所有的表单元素除了只读 | +| :focus | 选取所有获得焦点的表单元素 | + + + diff --git "a/17\345\220\264\346\226\207\351\276\231/\347\254\224\350\256\260/2022-11.28\347\254\254\344\272\214\345\215\201\344\270\211\346\254\241\347\254\224\350\256\260.md" "b/17\345\220\264\346\226\207\351\276\231/\347\254\224\350\256\260/2022-11.28\347\254\254\344\272\214\345\215\201\344\270\211\346\254\241\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..74ef9a763f9665b91cea9c37ca1a9770ce46f8d0 --- /dev/null +++ "b/17\345\220\264\346\226\207\351\276\231/\347\254\224\350\256\260/2022-11.28\347\254\254\344\272\214\345\215\201\344\270\211\346\254\241\347\254\224\350\256\260.md" @@ -0,0 +1,151 @@ +# JQuery + +##### 属性的分类 + +属性分类： + +1.固有属性 + +1.1固有属性-->返回值是bool类型的属性(checked, selected, disabled..)： true或者false; + +查询一般的固有属性用attr：.attr('属性名'); + +查询返回值是bool类型的固有属性用prop； + + + +2.自定义的属性 + +对于自定义属性:只有attr才能定义属性 + + + +移除属性 + +$('目标')removeAttr('要移除的属性')； + +##### 属性内容的操作方法 + +针对表单元素的值:.val() -- >. value + +获取整个标签的元素：.html()-->.innerHTML + +获取文本的值：.text()-->.innnerText + + + +##### 属性样式的两种操作方法 + +css(样式，样式值) + +css({样式1:样式值, 样式2:样式值}) + + + +##### 元素的增删改查 + +1.在目标元素添加子元素：$('目标元素').prepend($子元素); + +1.1添加子元素到目标元素： $子元素.prependTo($('目标元素'))； + +1.2添加子元素到目标元素：$子元素.appendTo($('目标元素')); + +1.3添加同级元素： + +在目标元素前插入新元素：$('目标元素').after($新元素)； + +在目标元素后插入新元素：$('目标元素').before($新元素)； + + + +2.删除整个元素：$('属性名').remove(); + +2.1删除选择属性的子元素，自身会保留：$('属性名').empty(); + + + +### JQuery事件 + +load事件:将节点树:document-->html-->body-->,多媒体文件加载进来之后才触发load事件 + +JQuery:ready事件:jQuery的ready事件来说，只要页面所有DOM元素加载完成就可以执行，不需要再等外部文件 （图片、外部CSS、外部JavaScript）加载完成 + +##### read事件的四种写法： + +写法1： + +$(document).ready(function(){ + +…… + +}) + +写法2： + +jQuery(document).ready(function(){ + +…… + +}) + +/写法3(最常用)： + +$(function(){ + +…… + +}) + +写法4： + +jQuery(function(){ + +…… + +}) + + + +##### 鼠标事件 + +在jQuery中，常见的鼠标事件如下表: + +| 事件 | 说明 | +| --------- | ------------ | +| click | 鼠标单击事件 | +| dblclick | 鼠标双击事件 | +| mouseover | 鼠标移入事件 | +| mouseout | 鼠标移出事件 | +| mousedown | 鼠标按下事件 | +| mouseup | 鼠标松开事件 | +| mousemove | 鼠标移动事件 | + + + +##### 键盘事件 + +在jQuery中，常用的键盘事件共有2种： + +1. 键盘按下：keydown + +2. 键盘松开：keyup + + + +##### 表单事件 + +1.focus和blur：focus表示获取焦点时触发的事件，而blur表示失去焦点时触发的事件，两者是相反操作。 + +focus和blur这两个事件往往都是配合一起使用的。例如用户准备在文本框中输入内容时，此时它会获得 + +光标，就会触发focus事件。当文本框失去光标时，就会触发blur事件。 + +2.select：在jQuery中，当我们选中“单行文本框”或“多行文本框”中的内容时，就会触发select事件 + +3.change：在jQuery中，change事件常用于“具有多个选项的表单元素”。 + +1. 单选框选择某一项时触发。 + +2. 复选框选择某一项时触发。 + +3. 下拉菜单选择某一项时触发 \ No newline at end of file