| 第一行 | 第一行 | +
| 第二行 | 第二行 | +
| 第三行 | 第三行 | +
| 第四行 | 第四行 | +
| 第五行 | 第五行 | +
+ JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。 + 它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言， + 最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 +
+ + \ No newline at end of file diff --git "a/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.23\344\272\213\344\273\266\346\265\201.md" "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.23\344\272\213\344\273\266\346\265\201.md" new file mode 100644 index 0000000000000000000000000000000000000000..6f3fd4f613318282d540b1cdb922470f08149122 --- /dev/null +++ "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.23\344\272\213\344\273\266\346\265\201.md" @@ -0,0 +1,77 @@ +2022.11.23事件流 +一个事件的生命周期有三个阶段：捕捉，目标，冒泡。 +二、事件冒泡 +事件按照从最特定的事件目标到最不特定的事件目标(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/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.24\344\272\213\344\273\266.md" "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.24\344\272\213\344\273\266.md" new file mode 100644 index 0000000000000000000000000000000000000000..3356eb8c12c29543bd349a477125b4311145d78a --- /dev/null +++ "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.24\344\272\213\344\273\266.md" @@ -0,0 +1,15 @@ +2022.11.24冒泡笔记 + +``` + //事件阻止冒泡 + // ev.stopPropagation(); //不支持ie9以下 DOM + // event.cancelBubble = true; //ie独有 ie + //事件对象 + // ie: window.event + // 非ie: e + //事件委托（代理） + //把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件[监听] + //阻止默认行为 + //ev.perventDefault(); + //ev.returnValue = false + // return false; \ No newline at end of file diff --git "a/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.25JQuery.md" "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.25JQuery.md" new file mode 100644 index 0000000000000000000000000000000000000000..01d8239e730037eefe784bf34b6530a40b771c50 --- /dev/null +++ "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.25JQuery.md" @@ -0,0 +1,109 @@ +2022.11.25JQuery + +1.JQuery的优点 + +代码简洁 ，完美兼容 ，轻量级 ，强大的选择器 ， 完善的AJAX ，丰富的插件 + +2.分类： + +(1)基本选择器（2）层次选择器（3）属性选择器 + +3.伪类选择器 + +jquery的伪类选择器： + +1、位置选择器，根据页面中的位置来选取元素； + +2、子元素选择器，选择某一个元素下的子元素； + +3、可见性选择器，根据元素是否可见选取元素； + +4、内容选择器，根据元素的内部文本或者子元素来选取元素； + +5、表单选择器，用于操作表单元素； + +6、表单属性选择器，根据表单元素的属性来选取 + +4.DOM对象转成Jquery对象 + +``` + var jqDiv = $(div); + // $(jqDiv).click( + // function () { + // alert('这是js包装集对象弹窗') + // } +``` + +5.Jquery对象转成DOM对象 + +``` +console.log($('.div')[0]); +``` + +基础选择器：标签选择器 + $('div') + +基本选择器 + +id选择器：#id + + 类选择器： . class + +选择所有元素（document之下的）：* + + 群组选择器：元素1，元素2，元素3 + +层次选择器 + + 1.后代:所有后代（不止一代）的元素 $('#parent div') + + console.log($('#parent div')); + + 2.子代(只找后面一代)：$('#parent>div') + + console.log($('#color>img')); + + 3.相邻选择器:只能找后面一个元素 + + console.log($('.blue+button')); + + 4.同辈选择器:往后找多个 + + console.log($('#color~div')); + +属性选择器 + +选择器 说明 +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 + +表单伪类选择器 + +Forms 名称 举例 +表单选择器 :input 查找所有input元素: $(':input'); +注意：会匹配所有的input, textarea,select和button元素 +文本框选择器 :text 查找所有的文本框: $(':text') +密码框选择器 :password 查找所有密码框 +单选按钮选择器 :radio 查找所有单选按钮 +复选框选择器 :checkbox 查找所有复选框 +提交按钮选择器 :submit 查找所有提交按钮 +图像域选择器 :image 查找所有图像域 +重置按钮选择器 :reset 查找所有重置按钮 +按钮选择器 :button 查找所有按钮 +文本域选择器 :file 查找所有文本域 + +表单属性选择器 + +选择器 说明 +:checked 选取所有被选中的表单元素，一般是单选框或复选框 +:selected 选取被选中的表单元素的选项，一般是下拉列表 +:enabled 选取所有可用的表单元素 +:disabled 选取所有不可用的表单元素 +:read-only 选取所有的表单元素除了只读 +:focus 选取所有获得焦点的表单元素 \ No newline at end of file