diff --git "a/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1118\347\254\254\345\215\201\344\270\203\346\254\241\344\275\234\344\270\232/\347\254\254\345\215\201\344\270\203\346\254\241\344\275\234\344\270\232.html" "b/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1118\347\254\254\345\215\201\344\270\203\346\254\241\344\275\234\344\270\232/\347\254\254\345\215\201\344\270\203\346\254\241\344\275\234\344\270\232.html" new file mode 100644 index 0000000000000000000000000000000000000000..af256eb42b9e2f4d371a78687529e2ecf18eb34d --- /dev/null +++ "b/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1118\347\254\254\345\215\201\344\270\203\346\254\241\344\275\234\344\270\232/\347\254\254\345\215\201\344\270\203\346\254\241\344\275\234\344\270\232.html" @@ -0,0 +1,73 @@ + + + + + + + + Document + + + + +   + +
+
+ + + + +
+

+
+ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git "a/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1121\347\254\254\345\215\201\345\205\253\346\254\241\344\275\234\344\270\232/\347\254\254\345\215\201\344\270\203\346\254\241\344\275\234\344\270\232.html" "b/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1121\347\254\254\345\215\201\345\205\253\346\254\241\344\275\234\344\270\232/\347\254\254\345\215\201\344\270\203\346\254\241\344\275\234\344\270\232.html" new file mode 100644 index 0000000000000000000000000000000000000000..a647058ac6d293439dae3973306cd584a6d68a65 --- /dev/null +++ "b/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1121\347\254\254\345\215\201\345\205\253\346\254\241\344\275\234\344\270\232/\347\254\254\345\215\201\344\270\203\346\254\241\344\275\234\344\270\232.html" @@ -0,0 +1,61 @@ + + + + + + + Document + + + +   + +
+
+ + +
+
+ + + \ No newline at end of file diff --git "a/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1123\347\254\254\345\215\201\344\271\235\346\254\241\344\275\234\344\270\232/\347\254\254\345\215\201\344\271\235\346\254\241\344\275\234\344\270\232.html" "b/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1123\347\254\254\345\215\201\344\271\235\346\254\241\344\275\234\344\270\232/\347\254\254\345\215\201\344\271\235\346\254\241\344\275\234\344\270\232.html" new file mode 100644 index 0000000000000000000000000000000000000000..5531e31d4ae668366c4bc560419c42245f9a1931 --- /dev/null +++ "b/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1123\347\254\254\345\215\201\344\271\235\346\254\241\344\275\234\344\270\232/\347\254\254\345\215\201\344\271\235\346\254\241\344\275\234\344\270\232.html" @@ -0,0 +1,69 @@ + + + + + + + Document + + +
+ +
+ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git "a/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1124\347\254\254\344\272\214\345\215\201\346\254\241\344\275\234\344\270\232/\347\254\254\344\272\214\345\215\201\346\254\241\344\275\234\344\270\232.html" "b/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1124\347\254\254\344\272\214\345\215\201\346\254\241\344\275\234\344\270\232/\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..0a156a58038b5a458331e32f43265857db564876 --- /dev/null +++ "b/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1124\347\254\254\344\272\214\345\215\201\346\254\241\344\275\234\344\270\232/\347\254\254\344\272\214\345\215\201\346\254\241\344\275\234\344\270\232.html" @@ -0,0 +1,53 @@ + + + + + + + + Document + + + + +
+ banana + apple + orange + + + + mouse + dog + cat + pig +
+ +

+ + + + \ No newline at end of file diff --git "a/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1125\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232.html" "b/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1125\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232.html" new file mode 100644 index 0000000000000000000000000000000000000000..e9e2211e4e37de4e2c81988cd42ee5788ced9096 --- /dev/null +++ "b/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1125\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232.html" @@ -0,0 +1,64 @@ + + + + + + + Document + + + + + + 1 + 2 + 3 + 4 + + + + + + + + + + + + + + + + + + + + + +
第一行
第二行
第三行
第四行
第五行
+ + + + + + + \ No newline at end of file diff --git "a/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1128\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232/2022-1128\346\223\215\344\275\234\345\261\236\346\200\247\344\275\234\344\270\232.html" "b/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1128\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232/2022-1128\346\223\215\344\275\234\345\261\236\346\200\247\344\275\234\344\270\232.html" new file mode 100644 index 0000000000000000000000000000000000000000..cdbecede48e5bda41a62beda48666d36c6b3adfa --- /dev/null +++ "b/40\345\274\240\350\200\200\344\273\201/\344\275\234\344\270\232/1128\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232/2022-1128\346\223\215\344\275\234\345\261\236\346\200\247\344\275\234\344\270\232.html" @@ -0,0 +1,314 @@ + + + + + + + + Document + + + + + + +
+ 0 + 1 + 2 + 3 + +
+
+ +
+
+ +
+
+ +
+ 用户名：
+ 密 码：
+ 确认密码：
+
+
+ + + + + + + + + +
留言 0
+ +
+ + + + diff --git "a/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1118\347\254\254\345\215\201\344\270\203\346\254\241\347\254\224\350\256\260/\347\254\254\345\215\201\344\270\203\346\254\241\347\254\224\350\256\260.text" "b/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1118\347\254\254\345\215\201\344\270\203\346\254\241\347\254\224\350\256\260/\347\254\254\345\215\201\344\270\203\346\254\241\347\254\224\350\256\260.text" new file mode 100644 index 0000000000000000000000000000000000000000..477b85a7c85ebe6e4bfafe2404bc572c73a2ed19 --- /dev/null +++ "b/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1118\347\254\254\345\215\201\344\270\203\346\254\241\347\254\224\350\256\260/\347\254\254\345\215\201\344\270\203\346\254\241\347\254\224\350\256\260.text" @@ -0,0 +1,38 @@ +``` + DOM(文档对象模型) +DOM定义了表示和修改文档所需的方法，DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类的对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。 + +DOM常用API +(应用程序接口（API，Application Programming Interface）是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。) + +DOM 树状结构 +DOM 就是用来改变网页 HTML 的内容用的,在浏览器标签中当前载入的文档用一个 document 对象来表示。这个对象是一个树状结构,我们把每个 HTML 元素对应在树中的入口称为节点 + + 元素节点: +一个元素，存在于DOM中。 + 根节点: +树中顶层节点，在HTML的情况下，总是一个HTML节点（其他标记词汇，如SVG和定制XML将有不同的根元素） + 子节点: +直接位于另一个节点内的节点。例如上面例子中，IMG是SECTION的子节点。 + 后代节点: +位于另一个节点内任意位置的节点。例如 上面例子中，IMG是SECTION的子节点，也是一个后代节点。IMG不是BODY的子节点，因为它在树中低了BODY两级，但它是BODY的后代之一。 + 父节点: +里面有另一个节点的节点。例如上面的例子中BODY是SECTION的父节点。 + 兄弟节点: +DOM树中位于同一等级的节点。例如上面例子中，IMG和P是兄弟。 + 文本节点: +包含文字串的节点 + + +基本的 DOM 操作 +在 HTML 当中 之前（就是 结尾的地方） +加入这样一行: + + +修改元素 +要想修改一个元素，操作 document 对象，使用 querySelector() 方法选中你想要的元素。这个方法使用一个 CSS 选择器来筛选元素。 +比如我们使用这个代码可以选中页面中第一个 a 元素，并且创建一个引用： +let link = Document.querySelector('a'); + +如果想对多个元素进行匹配和操作，你可以使用 document.querySelectorAll()，这个方法匹配文档中每个匹配选择器的元素，并把它们的引用存储在一个数组中，你就可以用一个 for 循环进行操作了。 +``` \ No newline at end of file diff --git "a/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1121\347\254\254\345\215\201\345\205\253\346\254\241\347\254\224\350\256\260/\347\254\254\345\215\201\345\205\253\346\254\241\347\254\224\350\256\260.txt" "b/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1121\347\254\254\345\215\201\345\205\253\346\254\241\347\254\224\350\256\260/\347\254\254\345\215\201\345\205\253\346\254\241\347\254\224\350\256\260.txt" new file mode 100644 index 0000000000000000000000000000000000000000..54ac962d1241f4cc23855a571fe89b82f3e28e19 --- /dev/null +++ "b/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1121\347\254\254\345\215\201\345\205\253\346\254\241\347\254\224\350\256\260/\347\254\254\345\215\201\345\205\253\346\254\241\347\254\224\350\256\260.txt" @@ -0,0 +1,46 @@ +innerHTML 和 innerText +innerHTML:获取时会将标签一起获取 + +innerText:只会获取纯文本，不能解析标签 + +//获取输入框的值 + +var input=document.queryselector('input'); //获取输入框里的值 + +var div=document.getelementByid('box') //获取text框 + +function getvalue(){ + +​ console.log(input.value); + +​ div.innerHTML='

'+input.value+'

'; + +​ input.value=' '; //消除输入框内容 + +} + +//获取单选框中状态 + +function Getstatus(){ + +​ var input=document.queryselectorAll('input')[1]; + +​ if（input.checked）{ + +​ input.checked=false; + +}else{ + +​ input.checked=true; + +} + +} + +操作style样式 + +//获取行间样式的时候需要进行初始化否则无法获取 + +​ var div=document.queryselector('#box'); + +//console.dir(div.style.marginleft); //如果直接获取行间的width是无法获取到的需要进行初始化 \ No newline at end of file diff --git "a/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1123\347\254\254\345\215\201\344\271\235\346\254\241\347\254\224\350\256\260/\347\254\254\345\215\201\344\271\235\346\254\241\347\254\224\350\256\260.text" "b/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1123\347\254\254\345\215\201\344\271\235\346\254\241\347\254\224\350\256\260/\347\254\254\345\215\201\344\271\235\346\254\241\347\254\224\350\256\260.text" new file mode 100644 index 0000000000000000000000000000000000000000..c75c0c90c2a16fa296e38e758c96cbb08533bdd3 --- /dev/null +++ "b/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1123\347\254\254\345\215\201\344\271\235\346\254\241\347\254\224\350\256\260/\347\254\254\345\215\201\344\271\235\346\254\241\347\254\224\350\256\260.text" @@ -0,0 +1,41 @@ +DMO 0当有多个同类型事件触发时，只会触发一个 ，兼容性较高 + +var btn = document.querySelector('button'); + //点击 + function aler() { + btn.onclick = function () { + alert(' a '); + } + } + //优先级更高 + btn.onclick = function () { + alert(' b '); + } +//DOM 2 :当有多个同类型事件触发时，会依次触发， 兼容性较差 + +var btn = document.querySelector('button'); + //addEventListener('事件类型','') + + //DOM:谷歌 double click + btn.addEventListener('click',fn); + btn.addEventListener('mousemove',fn1); + function fn() { + alert('啊'); + // btn.removeEventListener('click',fn); + } + function fn1() { + alert('嗷嗷'); + } +//事件取消 + +btn.removeEventListener('click',fn); + +//冒泡 + +// body.addEventListener('click',fn1,true); + +1.事件从最外层开始捕获，直到当前元素（触发事件的对象），再从当前元素向外冒泡到document + +2.事件会自发冒泡(微软)（从里层向外层冒泡，直到document） + +3.事件捕获(网景)（从最外层向里层） \ No newline at end of file diff --git "a/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1124\347\254\254\344\272\214\345\215\201\346\254\241\347\254\224\350\256\260/\347\254\254\344\272\214\345\215\201\346\254\241\347\254\224\350\256\260.txt" "b/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1124\347\254\254\344\272\214\345\215\201\346\254\241\347\254\224\350\256\260/\347\254\254\344\272\214\345\215\201\346\254\241\347\254\224\350\256\260.txt" new file mode 100644 index 0000000000000000000000000000000000000000..7062946cb389493ccd1ff37190f1da33ca7efa87 --- /dev/null +++ "b/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1124\347\254\254\344\272\214\345\215\201\346\254\241\347\254\224\350\256\260/\347\254\254\344\272\214\345\215\201\346\254\241\347\254\224\350\256\260.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/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1125\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\347\254\224\350\256\260/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\347\254\224\350\256\260.text" "b/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1125\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\347\254\224\350\256\260/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\347\254\224\350\256\260.text" new file mode 100644 index 0000000000000000000000000000000000000000..820e662fc7e53fcc310eb9d2d1e16081faa4b090 --- /dev/null +++ "b/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1125\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\347\254\224\350\256\260/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\347\254\224\350\256\260.text" @@ -0,0 +1,25 @@ +16、jQuery +jQuery 是一个 JavaScript 库。 + +jQuery 选择器 +元素 元素 +$("*") 选取所有元素 +$(this) 选取当前 HTML 元素 +$("p.intro") 选取 class 为 intro 的 +元素 + +$("p:first") 选取第一个 +元素 + +$("ul li:first") 选取第一个 +元素的第一个 +元素 +$("ul li:first-child") 选取每个 +元素的第一个 +元素 +$("[href]") 选取带有 href 属性的元素 +$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 元素 +$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 元素 +$(":button") 选取所有 type="button" 的 元素 和 元素 +$("tr:even") 选取偶数位置的 +$("tr:odd") 选取奇数位置的 \ No newline at end of file diff --git "a/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1128\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\347\254\224\350\256\260/2022-1128\346\223\215\344\275\234\345\261\236\346\200\247\347\254\224\350\256\260.text" "b/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1128\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\347\254\224\350\256\260/2022-1128\346\223\215\344\275\234\345\261\236\346\200\247\347\254\224\350\256\260.text" new file mode 100644 index 0000000000000000000000000000000000000000..23fc040be945260573808e47ce5fb24df1b30ceb --- /dev/null +++ "b/40\345\274\240\350\200\200\344\273\201/\347\254\224\350\256\260/1128\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\347\254\224\350\256\260/2022-1128\346\223\215\344\275\234\345\261\236\346\200\247\347\254\224\350\256\260.text" @@ -0,0 +1,110 @@ +## jQuery Dom 操作 + +###### 4.1.1 获取属性 + +| 方法 | 说明 | 举例 | +| -------------- | ------------------------------------------------------------ | --------------------------------- | +| attr(属性名称) | 获取指定的属性值，操作checkbox时
选中返回checked，没有选中返回undefined。 | attr('checked')
attr('name') | +| prop(属性名称) | 获取具有true和false两个属性的属性值 | prop('checked') | + +属性的分类： + +- 固有属性： +- 返回值是bool的属性: checked ,selected, disabled +- 自定义属性 + +attr与prop在用法上有什么区别？ + +###### 4.1.2 设置属性 + +```html +attr('属性名','属性值') +``` + + + +###### 4.1.3 移除属性 + +```html +removeAttr('属性名') +``` + +#### 4.2 操作元素的样式 + +| 方法 | 说明 | +| ---------------------- | --------------------------- | +| attr('class') | 获取属性的值，即样式名称 | +| attr('class','样式名') | 修改class属性的值，修改样式 | +| addClass('样式名') | 添加样式名称 | +| **css()** | 添加具体的样式 | +| removeClass(class) | 移除样式名称 | + +其中，css()表示增加具体样式： + +```html +1) css('样式名','样式值') + 例: css('color','red') + +2) css({'样式名':'样式值','样式名2':'样式值2'}) + 例: css({'background-color':'red','color':'red'}) +``` + +#### 4.3 操作元素内容 + +| 方法 | 说明 | +| ----------------- | ---------------------------------- | +| html() | 获取元素的html内容 | +| html('html内容') | 设定元素的内容 | +| text() | 获取元素的内容，不识别html标签 | +| text('text 内容') | 设置元素的文本内容，不识别html标签 | +| val() | 获取元素的值（表单元素） | +| val('值') | 设定元素的值 | + +常见的表单元素(可以操作的):文本框，密码框，单选框，复选框，隐藏域，文本域，下拉框 + +非表单元素:div,span,h1~h6,table,tr,td,li,p等 + +#### 4.4 创建元素 + +​ 在jQuery创建元素很简单，直接使用核心函数即可 + +```html +$('元素内容'); +``` + +``` +$('

this is a paragraph!!!

') +``` + +#### 4.5 添加元素 + +| 方法 | 说明 | +| ------------------------------ | ------------------------------------------------------------ | +| prepend(content) | 在被选元素内部的开头插入元素或内容，被追加的content参数，可以是字符，HTML元素标记。 | +| $(content).prependTo(selector) | 把content元素或内容加入selector元素开头 | +| append(content) | 在被选元素内部的结尾插入元素或内容， 被追加的content参数，可以是字符，HTML元素标记。 | +| $(content).appendTo(selector) | 把content元素或内容插入slector元素内，默认是在尾部 | +| before() | 在元素前插入指定的元素或内容: $(selector).before(content) | +| after() | 在元素后插入指定的元素或内容: $(selector).after(content) | + +#### 4.6 删除元素 + +| 方法 | 说明 | +| -------- | ---------------------------------------------------- | +| remove() | 删除所选元素或指定的子元素，包括整个标签和内容一起删 | +| empty() | 清除所选元素的内容 | + +#### 4.7遍历元素 + +each() + +$(selector).each(function(index,element)):遍历元素 + +参数function为遍历时的回调函数 + +index 为遍历元素的序列号，从0开始 + +element为当前的元素(===this)，此时是dom元素 + + +