From d62a383d4a574578194905d2fecd8d714070cbc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=8D=8E=E4=BC=9F?= <1931626338@qq.com> Date: Thu, 24 Nov 2022 13:02:08 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\270\232DOM\347\273\203\344\271\2401.html" | 0 ...\346\234\272\345\217\214\345\207\273.html" | 69 ++++ .../2022-11-17 BOM.md" | 339 ------------------ .../2022-11-18 DOM .md" | 115 ------ ...6\346\200\247\347\232\204\345\200\274 .md" | 27 +- .../2022-11-24 \344\272\213\344\273\266.md" | 61 ++++ 6 files changed, 134 insertions(+), 477 deletions(-) rename "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-18\347\254\254\345\215\201\345\205\255\346\254\241\344\275\234\344\270\232DOM\347\273\203\344\271\2401.html" => "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-18 \347\254\254\345\215\201\345\205\255\346\254\241\344\275\234\344\270\232DOM\347\273\203\344\271\2401.html" (100%) create mode 100644 "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-23 \347\254\254\345\215\201\345\205\253\346\254\241\344\275\234\344\270\232 \345\215\225\346\234\272\345\217\214\345\207\273.html" rename "12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-21 .md" => "12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-21 \345\205\250\351\200\211&\345\217\215\351\200\211&\350\216\267\345\217\226\350\256\276\347\275\256\345\261\236\346\200\247\347\232\204\345\200\274 .md" (76%) create mode 100644 "12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-24 \344\272\213\344\273\266.md" diff --git "a/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-18\347\254\254\345\215\201\345\205\255\346\254\241\344\275\234\344\270\232DOM\347\273\203\344\271\2401.html" "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-18 \347\254\254\345\215\201\345\205\255\346\254\241\344\275\234\344\270\232DOM\347\273\203\344\271\2401.html" similarity index 100% rename from "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-18\347\254\254\345\215\201\345\205\255\346\254\241\344\275\234\344\270\232DOM\347\273\203\344\271\2401.html" rename to "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-18 \347\254\254\345\215\201\345\205\255\346\254\241\344\275\234\344\270\232DOM\347\273\203\344\271\2401.html" diff --git "a/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-23 \347\254\254\345\215\201\345\205\253\346\254\241\344\275\234\344\270\232 \345\215\225\346\234\272\345\217\214\345\207\273.html" "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-23 \347\254\254\345\215\201\345\205\253\346\254\241\344\275\234\344\270\232 \345\215\225\346\234\272\345\217\214\345\207\273.html" new file mode 100644 index 0000000..67c37de --- /dev/null +++ "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-23 \347\254\254\345\215\201\345\205\253\346\254\241\344\275\234\344\270\232 \345\215\225\346\234\272\345\217\214\345\207\273.html" @@ -0,0 +1,69 @@ + + + + + + + Document + + + + + + + + + \ No newline at end of file diff --git "a/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-17 BOM.md" "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-17 BOM.md" index f031344..f095b70 100644 --- "a/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-17 BOM.md" +++ "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-17 BOM.md" @@ -46,342 +46,3 @@ location对象属性和方法: （2）reload方法:重新加载当前页面，相当于浏览器的刷新按钮； -### 一、window对象各种对话框 - -编写一个网页，点击不同的按钮分别实现alert,prompt,confirm对话框和实现打开关闭浏览器窗口； - -```js - - - - - Window的常用方法 - - - -

- - -

- - -

- -

- - - -``` - -### 二、setTimeout实现抽奖功能 - -```js - - - - - setTimeout实现抽奖功能 - - - - -
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
谢谢参与谢谢参与谢谢参与谢谢参与谢谢参与
谢谢参与谢谢参与谢谢参与谢谢参与谢谢参与
谢谢参与谢谢参与500万大奖谢谢参与谢谢参与
谢谢参与谢谢参与谢谢参与谢谢参与谢谢参与
谢谢参与谢谢参与谢谢参与谢谢参与谢谢参与
- - -``` - - - -### 三、setTimeout实现时间的延时切换图片 - -```js - - - - - setTimeout实现时间的延时切换图片 - - - - - - -``` - - - -### 四、setInterval实现抽奖功能 - -```js - - - - - setInterval实现抽奖功能 - - //JS代码 - - -
- - -
-
- - - - - - - - - - - - - - - - -
谢谢参与谢谢参与谢谢参与
谢谢参与iPhone14谢谢参与
谢谢参与谢谢参与谢谢参与
- - -``` - - - -#### 练习：setInterval实现图片的自动切换 - -```js - - - - - setInterval实现图片的自动切换 - //JS代码 - - -

- - - - -``` - - - -#### 练习：setInterval实现时钟效果 - -```js - - - - - setInterval实现时钟效果 - //JS代码 - - -

当前时间:

- - -``` - - - -### 七、history对象实现网页的前进后退 - -```js - - - - - - - -

我是第一个页面

- 我要跳转到第二个页面 - - -``` - -```js - - - - - - - -

我是第二个页面

- 我要跳转到第三个页面 -

- 后退 -

- 前进 - - -``` - -```js - - - - - history对象 - - -

我是第三个页面

-

- 后退 -

- 后退二步 - - -``` - - - -### 八、location对象实现页面刷新和跳转 - -```js - - - - - location对象 - - - - - - - -``` - diff --git "a/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-18 DOM .md" "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-18 DOM .md" index 57d19fd..ea8d3ad 100644 --- "a/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-18 DOM .md" +++ "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-18 DOM .md" @@ -469,118 +469,3 @@ document.body.children[1].previousElementSibling; -#### 父子节点练习 - -```js - - - - - 节点信息访问 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- 全选 - 反选 - 姓名性别专业爱好
刘备男软件开发抽烟
关羽男国际贸易喝酒
张飞男园林设计烫头发
赵云男平面设计抽烟
黄忠男影视制作玩游戏
小乔女高级护理唱歌
- - -``` - diff --git "a/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-21 .md" "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-21 \345\205\250\351\200\211&\345\217\215\351\200\211&\350\216\267\345\217\226\350\256\276\347\275\256\345\261\236\346\200\247\347\232\204\345\200\274 .md" similarity index 76% rename from "12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-21 .md" rename to "12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-21 \345\205\250\351\200\211&\345\217\215\351\200\211&\350\216\267\345\217\226\350\256\276\347\275\256\345\261\236\346\200\247\347\232\204\345\200\274 .md" index 13c3339..bda8e37 100644 --- "a/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-21 .md" +++ "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-21 \345\205\250\351\200\211&\345\217\215\351\200\211&\350\216\267\345\217\226\350\256\276\347\275\256\345\261\236\346\200\247\347\232\204\345\200\274 .md" @@ -1,6 +1,6 @@ # 2022-11-21 -## 全选&反选&操作style样式&获取设置属性的值 +## 全选&反选&获取设置属性的值 第一步：获取id(全选/反选)获取input(window.onclick =仅函数(事件)不起作用) @@ -20,13 +20,13 @@ var clear=document.getElementById( 'selonAll' ); //获取反选 var checked=document.getElementsByTagName( 'input' ); //获取input //全选 - sele.onclick= function (){ + selAll.onclick= function (){ for (var i=0;i Date: Fri, 25 Nov 2022 13:12:53 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E6=B5=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\345\244\215\351\200\211\346\241\206.html" | 39 ++ .../2022-11-23 \344\272\213\344\273\266.md" | 0 .../2022-11-24 \344\272\213\344\273\2662.md" | 354 ++++++++++++++++++ 3 files changed, 393 insertions(+) create mode 100644 "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-24 \347\254\254\345\215\201\344\271\235\346\254\241\344\275\234\344\270\232 \345\244\215\351\200\211\346\241\206.html" rename "12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-24 \344\272\213\344\273\266.md" => "12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-23 \344\272\213\344\273\266.md" (100%) create mode 100644 "12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-24 \344\272\213\344\273\2662.md" diff --git "a/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-24 \347\254\254\345\215\201\344\271\235\346\254\241\344\275\234\344\270\232 \345\244\215\351\200\211\346\241\206.html" "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-24 \347\254\254\345\215\201\344\271\235\346\254\241\344\275\234\344\270\232 \345\244\215\351\200\211\346\241\206.html" new file mode 100644 index 0000000..89c6735 --- /dev/null +++ "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-24 \347\254\254\345\215\201\344\271\235\346\254\241\344\275\234\344\270\232 \345\244\215\351\200\211\346\241\206.html" @@ -0,0 +1,39 @@ + + + + + + + Document + + +
+ banana + apple + orange +
+

+ + + + + \ No newline at end of file diff --git "a/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-24 \344\272\213\344\273\266.md" "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-23 \344\272\213\344\273\266.md" similarity index 100% rename from "12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-24 \344\272\213\344\273\266.md" rename to "12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-23 \344\272\213\344\273\266.md" diff --git "a/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-24 \344\272\213\344\273\2662.md" "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-24 \344\272\213\344\273\2662.md" new file mode 100644 index 0000000..9c30c36 --- /dev/null +++ "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-24 \344\272\213\344\273\2662.md" @@ -0,0 +1,354 @@ +## 事件 + +发生在HTML上的事情 + +#### 事件绑定 + +##### 传统事件绑定 + +兼容性好，但是不能绑定多个同类型事件。 + +```js + +
我是div
+
我是div2
+ + + +``` + + + +##### 现代事件绑定 + +绑定多个同类型事件时会依次执行，但是兼容性较差 + +###### addEventListener:DOM事件的绑定 + +```js +//绑定事件 +var fn = fuction(){ + console.log(123) +} +//addEventListener(事件,处理函数,布尔值):支持ie9及以上的浏览器和其他浏览器 +addEventListener('click',fn) + +``` + + + +思考：如果函数中带参该如何调用？ + +###### (了解)attachEvent:IE事件绑定 + +```js +var fn = fuction(){ + console.log(123) +} +//attachEvent(事件,fn,布尔值):支持IE10及以下的浏览器 +attachEvent('onclick',fn) +``` + + + +思考：如何合并两种事件类型，使得任意一个版本浏览器都能兼容。 + +```js +if(document.addEventListener){ + //DOM浏览器 +}else{ + //IE浏览器 +} +``` + + + +#### 事件取消 + +##### 传统事件取消 + +```js +btn.onclick = null +``` + + + +##### 现代事件取消 + +取消现代事件要与绑定事件的参数一模一样 + +```js +//DOM +btn.removeEventListener('click',fn); +//IE +btn.detachEvent('onclick',fn); +``` + + + +#### 事件流 + +```js + + + +
+ +
+ +``` + +**事件冒泡**:微软提出了名为**事件冒泡**的事件流。事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。可以想象把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。 + +**事件捕获**:网景提出另一种事件流名为**事件捕获**。事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)，与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。同样形象的比喻一下可以想象成警察逮捕屋子内的小偷，就要从外面一层层的进入到房子内。 + + + +#### 事件流 + +​ 事件有三个阶段，首先发生的是捕获阶段，然后是目标阶段，最后才是冒泡阶段，对于捕获和冒泡，我们只能干预其中的一个，通常来说，我们可能会干预事件冒泡阶段，而不去干预事件捕获阶段。 + +![img](https://img-blog.csdn.net/20170924010136220?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWxpZ2h0bWFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center) + + + +#### 事件阻止冒泡 + +```js +ev.stopPropagation(); //不支持ie9以下 DOM +event.cancelBubble = true; //ie独有 ie + +封装取消冒泡的函数：stopBubble(event) +``` + +但是有些事件本身是不冒泡的：（表单事件）focus,blur,change,submit,reset,select 等事件不冒泡 + + + +```js + + + + + + + Document + + + +
+ + + + +``` + +#### 事件对象 + +ie: window.event + +非ie: e + +```js + +
+
+
+
+ + +``` + +#### 事件委托（代理） + +​ 把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件[监听](https://so.csdn.net/so/search?q=监听&spm=1001.2101.3001.7020)的职务。事件代理的原理是DOM元素的事件冒泡。 + +​ 利用事件冒泡，和事件源对象进行处理。 + + + + + + + +#### 阻止默认行为 + +​ 默认事件：表单提交，a标签跳转，右键菜单等 + +```js +return false; //以对象属性的方式注册的事件才生效 DOM0 + + + +ev.perventDefault();//阻止默认行为 DOM浏览器, ie9以下不支持 +ev.returnValue = false //阻止默认行为 DOM与IE + +//封装阻止默认事件的函数:cancelHandler(event); + +//阻止鼠标右键弹出菜单 + + + +//阻止标签跳转 +测试 + + +``` + + + +#### 练习 + +获取对应ul中li的文本值 + +```js +var li = document.getElementByTagName('li'); +var len = li.length; +for(var i = 0 ; i{ + console.log(this.innerText) + } +} +``` + +**事件委托**：利用事件冒泡，和事件源对象进行处理 + +优点：性能高 灵活 + + + +#### 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： 重置按钮被点击 + + + + +#### 总结 + +绑定事件的三种方法 + +- ele.onXXX = function(event){} +- obj.addEventListener(type,fn,bool); +- obj.attachEvent('on'+type,fn,bool); \ No newline at end of file -- Gitee From 07aeebaec812d3ec6d753ef68c579013974d79aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=8D=8E=E4=BC=9F?= <1931626338@qq.com> Date: Mon, 28 Nov 2022 12:59:35 +0800 Subject: [PATCH 3/3] jQuery --- ...346\254\241\344\275\234\344\270\2321.html" | 30 ++++++ ...346\254\241\344\275\234\344\270\2322.html" | 46 ++++++++++ .../2022-11-25 iquery.md" | 91 +++++++++++++++++++ 3 files changed, 167 insertions(+) create mode 100644 "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-25 \347\254\254\344\272\214\345\215\201\346\254\241\344\275\234\344\270\2321.html" create mode 100644 "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-25 \347\254\254\344\272\214\345\215\201\346\254\241\344\275\234\344\270\2322.html" create mode 100644 "12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-25 iquery.md" diff --git "a/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-25 \347\254\254\344\272\214\345\215\201\346\254\241\344\275\234\344\270\2321.html" "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-25 \347\254\254\344\272\214\345\215\201\346\254\241\344\275\234\344\270\2321.html" new file mode 100644 index 0000000..7854221 --- /dev/null +++ "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-25 \347\254\254\344\272\214\345\215\201\346\254\241\344\275\234\344\270\2321.html" @@ -0,0 +1,30 @@ + + + + + + + Document + + + + + + +

+ + + + + + + + + \ No newline at end of file diff --git "a/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-25 \347\254\254\344\272\214\345\215\201\346\254\241\344\275\234\344\270\2322.html" "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-25 \347\254\254\344\272\214\345\215\201\346\254\241\344\275\234\344\270\2322.html" new file mode 100644 index 0000000..35d16f1 --- /dev/null +++ "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-25 \347\254\254\344\272\214\345\215\201\346\254\241\344\275\234\344\270\2322.html" @@ -0,0 +1,46 @@ + + + + + + + Document + + + + + + + + + + + + + + + + + + + + + + +
第一行第一行
第二行第二行
第三行第三行
第四行第四行
第五行第五行
+ + + \ No newline at end of file diff --git "a/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-25 iquery.md" "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-25 iquery.md" new file mode 100644 index 0000000..cd6f028 --- /dev/null +++ "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-25 iquery.md" @@ -0,0 +1,91 @@ +# 2022-11-25 + +## iquery + +#### 1.导入 + +```js + + + +``` + +#### 2.使用 + +```js +jQuery;//核心变量 里面的方法都是通过他来调用 +console.log(jQuery('body')); //通过JQuery对象来调用获取方法 +console.log($('body')); // 使用$来替代jQuery +``` + +https://blog.csdn.net/qq_44997166/article/details/124312390 + +## DOM操作 + +#### 选择器 + +```js +// 使用选择器获取对应的内容 使用$(选择器); +console.log($('#box')); //id为box的元素 +console.log($('.inner')); //class为inner的元素 +console.log($('li')); //获取标签为li +console.log($('ul>li')); //使用后代选择器 +console.log($('li[name=LQJ]')); //使用属性名＋选择器名获取元素 获取name为LQJ的li元素 +// 按照使用的方式来区别用法 +console.log($('li').length); +console.log($('li').css('background', 'red')); +// 特殊选择器 +console.log($('li:first')); //获取第一个li +console.log($('li:last')); //获取第一个li +console.log($('li:eq(2)')); //获取下标为二的li元素 获取第三个 +console.log($('li:odd')); //获取下标奇数位 +console.log($('li:even')); //获取下标偶数位 +``` + +属性操作 + +```js +// prop传一个参数为获取 两个参数为设置 +console.log($('#box').prop('id')); //box +// 给box设置一个class属性 值为inner +console.log($('#box').prop('class', 'inner')); +// 对于本身没有的属性 不会显式添加 但是可以使用 +$('#box').prop('name', 'jack') +console.log($('#box').prop('name')); + +// attr 读取显式添加的内容 +console.log($('div').attr('name')); //undefined +console.log($('div').attr('class')); //inner +// 设置的时候也会显示添加 +$('div').attr('age', 18); +// 关于prop attr的删除 +$('div').removeAttr('class'); //显示删除 +$('div').removeProp('name'); //隐式删除 删除prop自己添加的 以及自带的 +$('div').removeProp('age'); //删不了 +console.log($('div').removeProp('name')); +// class属性的其他操作方法 +$('div').addClass('tom'); //添加class属性值 +$('div').removeClass('inner') //删除class属性 +console.log($('div').hasClass('inner')); //判断存在于的class名字 +$('div').toggleClass(); //切换class 对于已经有class的删除 没有的添加 +``` + +### 样式操作 + +```js +//text() html() val()三者都是不传参获取 传参设置 +// text() +console.log($('div').eq(0).text()); +$('div').eq(0).text('我是重新设置的'); +// html() +console.log($('div').eq(1).html()); +$('div').eq(1).html('hi,叼毛'); +// val() +console.log($('input').val()); +$('input').val('帅哥'); +// 样式操作 +// 传一个参数为获取 两个参为设置 +console.log($('div:eq(0)').css('width')); +$('div:eq(0)').css('backgroundColor', 'red'); +``` + -- Gitee