From 3d8c25b90311ae5c09a2be2be622783deb6aa199 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A2=81=E8=B4=B5=E6=A3=AE?= <3032059138@qq.com> Date: Sat, 3 Dec 2022 03:24:48 +0000 Subject: [PATCH 1/3] =?UTF-8?q?28=E8=A2=81=E8=B4=B5=E6=A3=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 袁贵森 <3032059138@qq.com> --- ...\346\200\247\344\275\234\344\270\232.html" | 293 ++++++++++++++++++ ...\350\261\241\344\275\234\344\270\232.html" | 109 +++++++ ...\346\263\225\344\275\234\344\270\232.html" | 32 ++ 3 files changed, 434 insertions(+) create mode 100644 "28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1128jQuery\346\223\215\344\275\234\345\261\236\346\200\247\344\275\234\344\270\232.html" create mode 100644 "28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1130jQuery\344\272\213\344\273\266\345\257\271\350\261\241\344\275\234\344\270\232.html" create mode 100644 "28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1201jQuery\346\226\271\346\263\225\344\275\234\344\270\232.html" diff --git "a/28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1128jQuery\346\223\215\344\275\234\345\261\236\346\200\247\344\275\234\344\270\232.html" "b/28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1128jQuery\346\223\215\344\275\234\345\261\236\346\200\247\344\275\234\344\270\232.html" new file mode 100644 index 0000000..8acac1a --- /dev/null +++ "b/28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1128jQuery\346\223\215\344\275\234\345\261\236\346\200\247\344\275\234\344\270\232.html" @@ -0,0 +1,293 @@ + + + + + + + Document + + + + + + + +
+ 0 + 1 + 2 + 3 + +
+
+ + + + +
+
+ +
+
+ + + + +
+ 用户名：
+ 密 码：
+ 确认密码：
+
+
+ + + + + + + + + + + +
留言 0
+ +
+ + + + + + \ No newline at end of file diff --git "a/28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1130jQuery\344\272\213\344\273\266\345\257\271\350\261\241\344\275\234\344\270\232.html" "b/28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1130jQuery\344\272\213\344\273\266\345\257\271\350\261\241\344\275\234\344\270\232.html" new file mode 100644 index 0000000..2f69520 --- /dev/null +++ "b/28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1130jQuery\344\272\213\344\273\266\345\257\271\350\261\241\344\275\234\344\270\232.html" @@ -0,0 +1,109 @@ + + + + + 注册表单验证 + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
用户注册
用户名: + +
密码: + +
密码确认: + +
性别: + 男 + 女 + +
专业: + + +
爱好: + 抽烟 + 喝酒 + 打游戏 + 烫头发 + 足球 + 篮球 + +
自我介绍: + +
  + + +
+ +
+ + + + \ No newline at end of file diff --git "a/28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1201jQuery\346\226\271\346\263\225\344\275\234\344\270\232.html" "b/28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1201jQuery\346\226\271\346\263\225\344\275\234\344\270\232.html" new file mode 100644 index 0000000..988cd40 --- /dev/null +++ "b/28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1201jQuery\346\226\271\346\263\225\344\275\234\344\270\232.html" @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + -- Gitee From 8ae65f37fc774d2ea230be001d4ac74e2700588f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A2=81=E8=B4=B5=E6=A3=AE?= <3032059138@qq.com> Date: Sat, 3 Dec 2022 03:26:23 +0000 Subject: [PATCH 2/3] =?UTF-8?q?28=E8=A2=81=E8=B4=B5=E6=A3=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 袁贵森 <3032059138@qq.com> --- ...13\344\273\266\347\254\224\350\256\260.md" | 192 ++++++++ ...15\344\275\234\347\254\224\350\256\260.md" | 166 +++++++ ...71\350\261\241\347\254\224\350\256\260.md" | 310 +++++++++++++ ...71\346\263\225\347\254\224\350\256\260.md" | 429 ++++++++++++++++++ 4 files changed, 1097 insertions(+) create mode 100644 "28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1128jQuery \344\272\213\344\273\266\347\254\224\350\256\260.md" create mode 100644 "28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1128jQuery\345\261\236\346\200\247\346\223\215\344\275\234\347\254\224\350\256\260.md" create mode 100644 "28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1130jQuery\344\272\213\344\273\266\345\257\271\350\261\241\347\254\224\350\256\260.md" create mode 100644 "28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1201jQuery\346\226\271\346\263\225\347\254\224\350\256\260.md" diff --git "a/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1128jQuery \344\272\213\344\273\266\347\254\224\350\256\260.md" "b/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1128jQuery \344\272\213\344\273\266\347\254\224\350\256\260.md" new file mode 100644 index 0000000..1e03863 --- /dev/null +++ "b/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1128jQuery \344\272\213\344\273\266\347\254\224\350\256\260.md" @@ -0,0 +1,192 @@ +# jQuery 事件 + +#### onload事件 + +在JavaScript中，onload表示文档加载完成后再执行的一个事件。window.onload只能调用一次，如果多次调用，则只会执行最后一个。 + +```html +window.onload = function(){ +…… +} + +``` + +#### ready事件 + +​ 在jQuery中，ready也表示文档（document）加载完成后再执行的一个事件。 + +```html +$(document).ready(function(){ + …… +}) + +``` + +#### read事件的四种写法 + +``` +//写法1： +$(document).ready(function(){ +…… +}) +//写法2： +jQuery(document).ready(function(){ +…… +}) +//写法3(最常用)： +$(function(){ +…… +}) +//写法4： +jQuery(function(){ +…… +}) + +``` + +常见 DOM 事件： + +| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 | +| :----------------------------------------------------------- | :----------------------------------------------------------- | :-------------------------------------------------------- | :-------------------------------------------------------- | +| [click](https://www.runoob.com/jquery/event-click.html) | [keypress](https://www.runoob.com/jquery/event-keypress.html) | [submit](https://www.runoob.com/jquery/event-submit.html) | [load](https://www.runoob.com/jquery/event-load.html) | +| [dblclick](https://www.runoob.com/jquery/event-dblclick.html) | [keydown](https://www.runoob.com/jquery/event-keydown.html) | [change](https://www.runoob.com/jquery/event-change.html) | [resize](https://www.runoob.com/jquery/event-resize.html) | +| [mouseenter](https://www.runoob.com/jquery/event-mouseenter.html) | [keyup](https://www.runoob.com/jquery/event-keyup.html) | [focus](https://www.runoob.com/jquery/event-focus.html) | [scroll](https://www.runoob.com/jquery/event-scroll.html) | +| [mouseleave](https://www.runoob.com/jquery/event-mouseleave.html) | | [blur](https://www.runoob.com/jquery/event-blur.html) | [unload](https://www.runoob.com/jquery/event-unload.html) | +| [hover](https://www.runoob.com/jquery/event-hover.html) | | | | + +------ + +## jQuery 事件方法语法 + +在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。 + +页面中指定一个点击事件： + +```js +$("p").click(); +``` + +下一步是定义了点击后触发事件。您可以通过一个事件函数实现： + +```js +$("p").click(function(){ // 动作触发后执行的代码!! }); +``` + + + +------ + +## 常用的 jQuery 事件方法 + +### $(document).ready() + +### click() + +click() 方法是当按钮点击事件被触发时会调用一个函数。 + +该函数在用户点击 HTML 元素时执行。 + +在下面的实例中，当点击事件在某个

元素上触发时，隐藏当前的

元素： + +```js +$("p").click(function(){ + $(this).hide(); +}); +``` + +当双击元素时，会发生 dblclick 事件。 + +dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数： + +```js +$("p").dblclick(function(){ + $(this).hide(); + }); +``` + +### mouseenter() + +当鼠标指针穿过元素时，会发生 mouseenter 事件。 + +mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数： + +```js +$("#p1").mouseenter(function(){ + alert('您的鼠标移到了 id="p1" 的元素上!'); +}); +``` + +### mouseleave() + +当鼠标指针离开元素时，会发生 mouseleave 事件。 + +mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数： + +```js +$("#p1").mouseleave(function(){ + alert("再见，您的鼠标离开了该段落。"); +}); +``` + +### mousedown() + +当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。 + +mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数： + +```js +$("#p1").mousedown(function(){ + alert("鼠标在该段落上按下！"); +}); +``` + +### mouseup() + +当在元素上松开鼠标按钮时，会发生 mouseup 事件。 + +mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数： + +```js +$("#p1").mouseup(function(){ + alert("鼠标在段落上松开。"); +}); +``` + +### hover() + +hover()方法用于模拟光标悬停事件。 + +当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。 + +```js +$("#p1").hover(function(){ + alert("你进入了 p1!"); +}, function(){ + alert("拜拜! 现在你离开了 p1!"); +} ); +``` + +### focus() + +当元素获得焦点时，发生 focus 事件。 + +当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。 + +focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数： + +```js +$("input").focus(function(){ $(this).css("background-color","#cccccc"); + }); +``` + +### blur() + +当元素失去焦点时，发生 blur 事件。 + +blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数： + +```js +$("input").blur(function(){ $(this).css("background-color","#ffffff"); + }); +``` + diff --git "a/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1128jQuery\345\261\236\346\200\247\346\223\215\344\275\234\347\254\224\350\256\260.md" "b/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1128jQuery\345\261\236\346\200\247\346\223\215\344\275\234\347\254\224\350\256\260.md" new file mode 100644 index 0000000..9363a48 --- /dev/null +++ "b/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1128jQuery\345\261\236\346\200\247\346\223\215\344\275\234\347\254\224\350\256\260.md" @@ -0,0 +1,166 @@ +# jQuery属性操作 + +#### **jQuery常用属性操作有三种:propl/attr()/data();** + +**1、元素固有属性值prop()** + +所谓元素固有属性就是元素本身自带的属性，比如元素里面的href，比如元素里面的type + +| 描述 | 语法 | +| ------------ | ---------------------- | +| 获取属性语法 | prop("属性") | +| 设置属性语法 | prop("属性" ,"属性值") | + +**注意:prop()除了普通性操作，更适合操作表单属性:disabled/checked/selected等。** + +**2、元素自定义属性值attr()** +用户自己给元然添加的属性，我们称为自定义属性，比如给 div添加index=1” + +| 描述 | 语法 | +| ------------ | --------------------------------------------- | +| 获取属性语法 | attr("属性") //类似原生getAttribute() | +| 设置属性语法 | attr("属性""属性值”) //类似原生setAttributef | + + **注意:attr() 除了普通属性操作，更适合操作自定义属性。(该方法也可以获取H5自定义属性)** + +#### 3、 数据缓存 data() + +data()方法可以在指定的元素上存取数据，并不会修改DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。 + +| 描述 | 语法 | +| ------------ | ------------------------------------------- | +| 附加数据语法 | data（"name"""value") //向被选元素附加数据 | +| 获取数据语法 | data（"name"） //向被选元素获取数据 | + +**注意:同时，还可以读取 HTML5 自定义显性 data-index，得到的是数字型。** + +## jQuery 文本属性值 + +#### **常见操作有三种:html()/text()/val()** + +##### 1.普通元素内容html() (相当于原生innerHTML) + +html() //获取元素的内容 +html("内容") // 设置元素的内器 + +##### 2.普通元素文本内容 text()(相当与原生 innerText) + +text() // 获取元素的文本内容 +text("文本内容”) // 设置元素的文本内容 + +##### 3.表单的值val() (相当于原生value) + +val() // 获取表单的值 +val("内容') // 设置表单的值 +**注意:htmll 可识别标签，text不识到标签。** + +## jQuery元素操作 + +#### **1** **操作元素的属性** + +###### 1.1 获取属性 + +| 方法 | 说明 | 举例 | +| -------------- | ------------------------------------------------------------ | --------------------------------- | +| attr(属性名称) | 获取指定的属性值，操作checkbox时
选中返回checked，没有选中返回undefined。 | attr('checked')
attr('name') | +| prop(属性名称) | 获取具有true和false两个属性的属性值 | prop('checked') | + +属性的分类： + +- 固有属性： +- 返回值是bool的属性: checked ,selected, disabled +- 自定义属性 + +###### 1.2 设置属性 + +```html +attr('属性名','属性值') +``` + + + +###### 1.3 移除属性 + +```html +removeAttr('属性名') +``` + +#### 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'}) +``` + +#### 3 操作元素内容 + +| 方法 | 说明 | +| ----------------- | ---------------------------------- | +| html() | 获取元素的html内容 | +| html('html内容') | 设定元素的内容 | +| text() | 获取元素的内容，不识别html标签 | +| text('text 内容') | 设置元素的文本内容，不识别html标签 | +| val() | 获取元素的值（表单元素） | +| val('值') | 设定元素的值 | + +常见的表单元素(可以操作的):文本框，密码框，单选框，复选框，隐藏域，文本域，下拉框 + +非表单元素:div,span,h1~h6,table,tr,td,li,p等 + +#### 4 创建元素 + +​ 在jQuery创建元素很简单，直接使用核心函数即可 + +```html +$('元素内容'); +``` + +``` +$('

this is a paragraph!!!

') +``` + +#### 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) | + +#### 6 删除元素 + +| 方法 | 说明 | +| -------- | ---------------------------------------------------- | +| remove() | 删除所选元素或指定的子元素，包括整个标签和内容一起删 | +| empty() | 清除所选元素的内容 | + +#### 7 遍历元素 + +each() + +$(selector).each(function(index,element)):遍历元素 + +参数function为遍历时的回调函数 + +index 为遍历元素的序列号，从0开始 + +element为当前的元素(===this)，此时是dom元素 + diff --git "a/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1130jQuery\344\272\213\344\273\266\345\257\271\350\261\241\347\254\224\350\256\260.md" "b/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1130jQuery\344\272\213\344\273\266\345\257\271\350\261\241\347\254\224\350\256\260.md" new file mode 100644 index 0000000..d049efb --- /dev/null +++ "b/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1130jQuery\344\272\213\344\273\266\345\257\271\350\261\241\347\254\224\350\256\260.md" @@ -0,0 +1,310 @@ +# 事件对象 + +### jQuery事件绑定扩展 + +#### 绑定事件的三种类型 + +##### 直接绑定(最简单也是最常用) + +语法: + +```js +$(selector).event(function(){}) +``` + +##### bind绑定 + +语法: + +```js +$(selector).off(event,selector,function(eventObj),map) +``` + +```html +eg:对btn进行绑定点击事件 + +``` + +##### on()绑定 + +在jQuery中，我们可以使用on()方法为“已经存在的元素”绑定事件。 + +语法: + +```js +$(selector).on(event,childSelector,data,function) +``` + +on绑定与前两个绑定最大的区别是on可以为动态创建的元素绑定事件 + +```html +<--eg:对.btn进行绑定点击事件，点击.btn后会新增另一个.btn按钮--> + +``` + + + +##### 合成事件hover + +通常来说，mouseover和mouseout是一对形影不离的事件，而且实际工作中用的比较多。所以jQuery中定义了hover事件表示这两事件的触发 + +语法: + +```js +$().hover(fn1, fn2) +``` + +参数fn1表示鼠标移入事件触发的处理函数，参数fn2表示鼠标移出事件触发的处理函数。 + + + +##### 解绑事件 + +我们可以使用off()方法来解除元素绑定的事件。jQuery的off()方法，有点类似于JavaScript的 + +removeEventListener()方法。 + +语法： + +```html +$(selector).off(type) 移除所有事件:off() +``` + +​ type是可选参数，表示事件类型。例如单击事件是"click"，按下事件是"mousedown"，以此类推。如果参数省略，表示移除当前元素中的所有事件。 + +​ 此外，off()方法不仅可以用来解除使用“基本事件”方式添加的事件，还可以用来解除“绑定事件”添加的事 + +件。 + +```html +
+ +``` + + + +##### 一次事件 + +语法: + +```js +$(selector).one(type, fn) +``` + +```html +<--eg:使按钮只点击一次--> + +``` + +## + +**事件对象**就是 event 对象，通过处理函数默认传递接受。之前处理函数的 e 就是 event事件对象，event 对象有很多可用的属性和方法。 + +```js +//通过 event.type 属性获取触发事件名 + +$('input').click(function (e) { + +alert(e.type); + +}); + +//通过 event.data 获取额外数据，可以是数字、字符串、数组、对象 + +$('input').bind('click', **123**, function () { 　　//传递 data 数据 + +alert(e.data); 　　　　　 //获取数字数据123 + +}); +``` + +**注意：如果字符串就传递：'123'、如果是数组就传递：[123,'abc']，如果是对象就传递：{user : 'Lee', age : 100}。数组的调用方式是：e.data[1]，对象的调用方式是：e.data.user。** + +**//event.data** **获取额外数据，对于封装的简写事件也可以使用** + +```js +$('input').click({user : 'Lee', age : 100},function (e) +{ + alert(e.data.user); +}); +``` + +**注意：键值对的键可以加上引号，也可以不加；在调用的时候也可以使用数组的方式：alert(e.data['user']);** + +**区别：target****，currentTarget****，relatedTarget：** + +```js +//通过 event.target 获取触发事件的 DOM 元素 + +$('input').click(function (e) { + +alert(e.target); + +}); + +//relatedTarget获取临近元素 + +//获取移入到 div 之前的那个 DOM 元素 + +$('div').mouseover(function (e) { + +alert(e.relatedTarget); + +}); + +//获取移出 div 之后到达最近的那个 DOM 元素 + +$('div').mouseout(function (e) { + +alert(e.relatedTarget); + +}); + +//获取绑定的那个 DOM 元素，相当于 this，区别与 event.target + +$('div').click(function (e) { + +alert(e.currentTarget); + +}); +``` + +**注意：event.target 得到的是触发元素（比如点击事件，即具体点击的那个元素）的 DOM，event.currentTarget 得到的是监听元素（即绑定的那个元素）的DOM。相当于this， this 也是得到监听元素的 DOM。** + +```js +//result获取上一次相同事件的返回值 + +$('div').click(function (e) { + +return '123'; + +}); + +$('div').click(function (e) { + +alert(e.result); + +}); + +//which获取鼠标的左中右键 + +$('div').mousedown(function (e) { + +alert(e.which); + +}); + +//which获取键盘的按键 + +$('input').keyup(function (e) { + +alert(e.which); + +}); + +//获取触发元素鼠标当前的位置 + +$(document).click(function (e) { + +alert(e.screenY+ ',' + e.pageY + ',' + e.clientY); + +}); +``` + +**注意：pageX和pageY获取的是距离页面原点的位置；screenX和screenY获取的是距离显示屏的位置；clientX和clientY获取的是距离页面视口的距离。在没有滚动条的时候，pageY和clientY在数值上是一样的。当有滚动条的时候，pageY会明显变大，因为它是相对于页面原点。** + +**二．冒泡和默认行为** + +**阻止冒泡：** + +如果在页面中重叠了多个元素， 并且重叠的这些元素都绑定了同一个事件， 那么就会出现冒泡问题。 + +示例： + +**//HTML** **页面** + +``` +
+ +
+ //三个不同元素触发事件 + + $('input').click(function () { + + alert('按钮被触发了！'); + + }); + + $('div').click(function () { + + alert('div 层被触发了！'); + + }); + + $(document).click(function () { + + alert('文档页面被触发了！'); + + }); +``` + +**PS：当我们点击文档的时候，只触发文档事件；当我们点击 div 层时，触发了 div 和文档两个；当我们点击按钮时，触发了按钮、div 和文档。触发的顺序是从小范围到大范围。这就是所谓的冒泡现象，一层一层往上。** + +jQuery 提供了一个事件对象的方法：**event.stopPropagation()**；这个方法设置到需要触发的事件上时，所有上层的冒泡行为都将被取消。 + +```js +$('input').click(function (e) { + +　　alert('按钮被触发了！'); + +　　**e.stopPropagation();** + +}); +``` + +**阻止默认行为：** + +网页中的元素，在操作的时候会有自己的默认行为。比如：右击文本框输入区域，会弹出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据。 + +```js +//阻止超链接进行跳转 + +$('a').click(function (e) { + +　　**e.preventDefault();** + +}); + +//禁止提交表单跳转（注意是在form上阻止） + +$('form').submit(function (e) { + +　　**e.preventDefault();** + +}); +``` + +**PS： 如果想让上面的超链接同时阻止默认行为且禁止冒泡行为， 可以把两个方法同时写上： event.stopPropagation()和 event.preventDefault()。 这两个方法如果需要同时启用的时候，还有一种简写方案代替，就是直接 return false。** + +```js +$('a').click(function (e) { +　　**return false;** +}); +``` + +#### jQuery事件冒泡 + +**jQuery实现不了事件捕获** + +阻止事件冒泡：**event.stopPropagation()** + +阻止默认行为：event.preventDefault() + +```js +eg:阻止form表单提交 +$('form').submit(function (e) { +　　e.preventDefault(); + +}); +``` + diff --git "a/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1201jQuery\346\226\271\346\263\225\347\254\224\350\256\260.md" "b/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1201jQuery\346\226\271\346\263\225\347\254\224\350\256\260.md" new file mode 100644 index 0000000..dce69bb --- /dev/null +++ "b/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1201jQuery\346\226\271\346\263\225\347\254\224\350\256\260.md" @@ -0,0 +1,429 @@ +# jQuery方法 + +### **1.HTML（）方法** + +HTML（）方法相当于原生JS中的innerHTML属性，用来获取/设置标签内部内容 + +语法：jQuery对象.html(‘文本内容’) + +### **2.text()方法** + +text（）方法相当于原生JS中的innerText属性，用来获取/设置标签内部文字 + +获取：仅仅是文本，获取所有文字内容，忽略标签 + +语法：jQuery对象.text() + +设置：设置标签时，标签会被当做普通文本，不会按照标签加载 + +语法：jQuery对象.text(‘文本内容’) + +### **3.val（）方法** + +val（）方法相当于原生JS中的value属性，用来获取/设置表单元素内容 + +获取：表单元素的value + +语法：jQuery对象.val() + +设置：表单元素的value + +语法：jQuery对象.val(‘文本内容’) + + + +### **4.attr（）方法** + +用来获取/设置标签的属性值 + +设置标签的属性 + +语法：jQuery对象.attr(name,value) + +获取标签属性值 + +语法：jquery对象.attr(name) + +### **5.removeAttr()方法** + +移除标签的属性 + +语法：removeAttr(name) + + + +### **6.prop()方法** + +### **直接操作的就是布尔值** + +针对：selected、checked、disabled等表单元素的属性。此类属性的属性值与属性名相同 + +获取： + +语法：$(‘input’).prop(‘属性名’) + +设置： + +语法：$(‘input’).prop(‘属性名’,值) + +------ + +### **操作样式方法** + +### **css()方法** + +jQuery对象有一个css()方法，用于调用css属性值/更改css属性值 + +语法：jQuery对象.css(name,value) + +参数1：字符串格式的css样式属性名 + +参数2：设置/更改的属性值 + +### **注意：** + +1.一个参数：表示调用css属性的值，得到的是某个元素的计算后样式，值为字符串格式 + +2.两个参数：表示设置css样式属性，第二个参数可以是字符串格式的属性值，如果带单位的数字的属性值，可以写成带单位的字符串格式、不带单位的字符串、纯数字、带+=等赋值运算的字符串 + +css()方法的第一个参数，复合属性的单一属性写法可以是驼峰命名法，也可以是横线写法 + +可以给同一个对象同时设置多条css属性，将多条属性的属性和属性值写成对象格式，传给css()的参数 + +------ + +### **操作类名方法** + +### **jQuery中的类名控制方法，只会操作指定的类名，不会影响其他类名** + +### **1.addClass()添加类名** + +语法：jQuery对象.addClass(‘类名’) + +参数：字符串格式的类名 + +### **2.removeClass()移除类名** + +删除指定的类名 + +语法：jQuery对象.removeClass() + +参数：字符串格式的类名 + +不传参数，表示删除所有的类名 + +### **3.toggleClass()类名切换** + +这个类名存在，会移除该类名。否则添加该类名 + +语法：jQuery对象.toggleClass(‘类名’) + +参数：字符串格式的类名 + +优点：三个方法只操作参数部分的类名，不影响原有的其他类名 + + + +### **4.hasClass()检测类名是否存在** + +语法：jQuery对象.hasClass(‘类名’) + +返回值：true、false + +------ + +## **jQuery常用事件方法** + +jQuery对象封装了一系列的事件方法 + +事件方法与原生JS事件方法名称类似，不需要写on + +事件方法需要jQuery对象打点调用，小括号内的参数是事件函数 + +列：点击事件：click()方法 + +### **1.mouseenter()方法** + +jQuery中自己的事件方法 + +鼠标进入一个元素触发的事件 + +### **2.mouseleave()方法** + +jQuery中自己的事件方法 + +鼠标离开一个元素触发事件 + +### **注意：mouseenter和mouseleave没有事件冒泡** + +### **在使用时替换mouseover和mouseout更加合适** + +### **3.hover()方法** + +hover事件相当于将mouseenter和mouseleave事件进行了合写 + +参数：有两个参数，第一个参数是鼠标移上执行的事件函数，第二个参数是鼠标离开执行事件函数 + + + +### **jQuery关系查找方法** + +### **1.$(this)自己** + +在原生的DOM操作中，事件函数内部有一个this关键字指向的就是触发事件的事件源，在jQuery中将this关键字传递给$() + +方法，得到就是指向自己的jQuery对象，可以使用JQ方法 + +### **2.parent()父级** + +jQuery对象都有一个parent()方法，得到的是自己的父级 + +父级得到的也是一个jQuery对象，直接继续打点调用JQ方法和属性 + +```js + // 获取所有p标签 + var $p = $("p") + + // 批量添加事件 + $p.click(function () { + // this 指向的触发事件的事件源的原生JS对象 + $(this).css("backgroundColor","red")// 让点击的自己颜色 变红色 + + // 找到事件源的父级元素 添加一个黄色背景 + $(this).parent().css("backgroundColor","yellow") + }) +``` + +### **3.children()子级** + +jQuery对象内部有一个children()方法，可以得到自己的所有子级元素组成的jQuery对象 + +得到子级组成的jQuery对象可以继续调用JQ方法和属性 + +获得子级时，不限制标签类型 + +children()可以传参数：参数是字符串格式的选择器，在选中所有子级的情况下，保留满足选择器的部分，进行了二次选择 + +### **4.siblings()兄弟** + +jQuery对象通过调用siblings()方法可以得到除了自己以外的所有同级元素(兄弟)组成jQuery对象，找到的 + +只能是亲的兄弟，不能是叔叔家的兄弟 + +得到jQuery对象可以继续使用JQ的方法和属性 + +siblings()方法得到的jQuery对象可以进行二次选择，通过给参数传递字符串格式的选择器 + +### **4.siblings()兄弟** + +jQuery对象通过调用siblings()方法可以得到除了自己以外的所有同级元素(兄弟)组成jQuery对象，找到的 + +只能是自己父亲的兄弟，不能是隔壁其他父级的兄弟 + +得到jQuery对象可以继续使用JQ的方法和属性 + +siblings()方法得到的jQuery对象可以进行二次选择，缩小范围，通过给参数传递字符串格式的选择器 + +## **其他节点关系方法** + +### **find()后代元素** + +jQuery对象可以利用find()方法，传递一个参数，参数部分规定的选择器，查找范围是jQuery对象的所有后代 + +参数是字符串格式的选择器 + +### **兄弟元素** + +### **紧邻的兄弟元素方法** + +next()下一个兄弟 + +prev()前一个兄弟 + +### **多选方法** + +nextAll()后面所有的兄弟 + +prevAll()前面所有兄弟 + +通过传递参数可以进行二次选择，参数是字符串格式的选择器，在前面/后面兄弟中选中符合选择器规定的部分 + +#### parent():找直接父级 + +#### parents()：找所有父级（） + +#### parentsUntil('')：找 + +parentsUntil()方法是parents()方法的一个补充，它可以查找“指定范围”的所有祖先元 素，相当于在parents()方法返回的集合中截取一部分。 + +语法： + +```js +$().parentsUntil(selecotr) +``` + + + +### **1.eq（）方法，大排序** + +jQuery中获得的对象，内部包含选择一组原生JS对象，在jQuery对象中会进行一个大排序，这个排序与原来的HTML结构没有关系 + +eq()方法在jQuery对象中通过下标获取某个对象，下标是jQuery对象中的大的排序的下标 + +```js +$().eq(n) +``` + +#### 判断过滤: is() + +​ 判断过滤，指的是根据某些条件进行判断，然后选取符合条件的元素。在jQuery中，我们可以使用is()方法来实现判断过滤。 + +语法： + +```js +$().is(selector) +``` + +说明： + +参数selector是一个选择器。is()方法用于判断当前选择的元素集合中，是否存在符合条件的元素。 + +如果存在，则返回true；如果不存在，则返回false。 + +```js +//判断元素是否可见 +$().is(":visible") +//判断元素是否处于动画中 +$().is(":animated") +//判断单选框或复选框是否被选中 +$().is(":checked") +//判断当前元素是否第一个子元素 +$(this).is(":first-child") +//判断文本中是否包含jQuery这个词 +$().is(":contains('jQuery')") +//判断是否包含某些类名 +$().is(".select") +``` + + + +### **2.index()方法** + +jQuery对象调用index()方法时，得到的是它自己在HTML结构中的兄弟的下标位置。和jQuery大排序没有关系 + +index()方法获取下标时，排序跟新生成的jQuery对象无关 + +依赖于自身元素在父级中同级元素之间的位置 + +### **3.排他方法** + +jQuery中可以让this特殊设置，让兄弟siblings设置成默认 + +### **4.each()方法** + +jQuery对象进行的操作都是批量操作，批量操作只能执行一些简单的效果 + +如果想对JQ对象中的每一个元素以及内部的后代元素进行一些复杂操作，程序很难执行 + +参数是一个函数 + +作用：就是对jQuery对象中的元素每一个都执行函数内部的操作 + +each方法的基本原理就是for循环，从对象的下标为0的项一直便历到最后一项，然后对每一项进行操作 + +### **优点：** + +1.each的函数内部，也有一个this，指向的是进来遍历的每一次的元素 + +2.each的函数可以传一个参数i，i表示的是这一次的遍历对象在整体的jQuery对象大排队中的下标位置 + +```js +------------------------------------隔行变色案例----------------------------------------- + +// 方法1 + // var $tr = $("tr"); + // $tr.each(function(){ + // //让子级所有的列 个列变色 + // $(this).children(":even").css("backgroundColor","skyblue") + // }) + + //方法2 操作td + $("td").each(function() { + // 可以判断当前这个td在父级中所处的位置 + // 获取父级中的位置 index() + if($(this).index() % 2 === 0 ){ + $(this).css("backgroundColor","skyblue") + } + }) +``` + +------ + +## **jQuery入口函数** + +### **入口函数** + +### **1.原生的window.onload** + +onload事件在加载时，指的是页面中所有的资源【DOM树、音频、视频、图片等】加载完毕后，才能触发 + +一个页面中只能出现一次 + +### **2.jQuery中的入口函数** + +仅仅需要等待页面中DOM树加载完毕就可以执行了 + +在一个页面中可以书写多个jQuery的入口函数，执行顺序按照前后加载顺序执行 + +语法1： + +```js +$(document).ready(function(){ + //获取元素 +}) +``` + +#### DOM创建元素 + +- DOM创建: var $p = $('

这是一段文本

>') +- 插入元素 +- prepend() 和 prependTo() +- append() 和 appendTo() +- before() 和insertBefore() +- after() 和 insertAfter() + + + +#### 删除元素 + +##### remove()：全部删除 + +##### detach():删除，保留事件 + +##### empty():清空元素，保留标签 + +#### 复制元素 + +语法： + +```js +$().clone(bool): true:深拷贝将事件和元素一起拷贝 false：只拷贝元素 +``` + + + +#### 替换元素 + +##### replaceWith() + +##### replaceAll() + + + +#### 包裹元素 + +##### wrap() + +##### wrapAll() + +##### wrapInner() \ No newline at end of file -- Gitee From 47871844f62e47ea34fdb7625092c26921dcaf14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A2=81=E8=B4=B5=E6=A3=AE?= <3032059138@qq.com> Date: Sat, 3 Dec 2022 03:41:21 +0000 Subject: [PATCH 3/3] =?UTF-8?q?28=E8=A2=81=E8=B4=B5=E6=A3=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 袁贵森 <3032059138@qq.com> --- .../2022-1202AJax\347\254\224\350\256\260.md" | 117 ++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 "28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1202AJax\347\254\224\350\256\260.md" diff --git "a/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1202AJax\347\254\224\350\256\260.md" "b/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1202AJax\347\254\224\350\256\260.md" new file mode 100644 index 0000000..6b17cf1 --- /dev/null +++ "b/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1202AJax\347\254\224\350\256\260.md" @@ -0,0 +1,117 @@ +# AJax + +#### 执行步骤 + +1.创建xhr对象 + +```js +const xhr = new XMLHttpRequest(); +``` + +2.利用onreadystatechange属性，封装一个函数，用于监听 readyState的变化。 + +```js +xhr.onreadystatechange = () => { +if (xhr.readyState !== 4) return; +if (xhr.status >= 200 && xhr.status < 300 ){ + console.log(xhr.responseText); + } +}; +``` + +2.1在xhr对象执行收发数据的时候，它会经历五种状态： + +Ajax状态码 状态 +0 （未初始化）未启动 +1 （启动）已经调用 open()，但尚未调用 send() +2 （发送）发送状态，已经调用 send()，但尚未接收到响应 +3 （接收）已经接收到部分响应数据 +4 （完成）已经接收到全部响应数据，而且已经可以在浏览器中使用了 +加两句console.log()就可以看见状态码的变化了。 + + + +上述的readyStateChange事件是专门用来监听xhr对象的Ajax状态码，只要readyState（也就是Ajax状态码）发生了变化，就会触发这个事件。 + + + +2.2判断HTTP状态码是否为200-299 + +Ajax状态码为4是不够的，这仅仅表明收到服务器端响应的全部数据，并不能保障数据都是正确的。 + +所以，我们还需要判断HTTP的状态码，判断xhr对象的status属性值是否在200到300之间（200-299 用于表示请求成功） + +```js +if (xhr.status >= 200 && xhr.status < 300 ){ + console.log(xhr.responseText); +} +``` + +所以要想请求成功完成，必须要满足上面两个条件。 + +3.准备发送请求 + +```js +xhr.open('GET','text.json', true); +``` + +参数1：选用"GET"或者“POST”的请求方式js + +参数2：发送请求的地址 + +参数3：是否异步 + +4.发送请求 + +```js +xhr.send(null) +``` + + 注意：send() 的参数是通过请求体携带的数据，而GET请求是通过请求头携带数据的，所以要把send的参数置为null + +#### $.get() + +语法： + +```js +$.get(url, data, fn, type) +``` + +| 参数 | 说明 | +| :--: | :--------------------------------- | +| url | 必选参数，表示被加载的页面地址 | +| data | 可选参数，表示发送到服务器的数据 | +| fn | 可选参数，表示请求成功后的回调函数 | +| type | 可选参数，表示服务器返回的内容格式 | + +参数type返回的内容格式包括：text、html、xml、json、script或default。 + + + +#### $.post() + +get方式不适合较大的数据量，并且它的请求信息会保存在浏览器缓存中，因此安全性不好； + +post方式不存在这两个方面的不足。 + +语法： + +``` +$.post(url,data,fn,type) +``` + +#### $.getJSON() + +在jQuery中，我们可以使用$.getJSON()方法来通过Ajax获取服务器中JSON格式的数据。 + +语法： + +``` +$.getJSON(url ,data, function(data){ +…… +}) + +``` + +说明： .getJSON()是一个全局方法，所谓“全局方法”，指的是直接定义在jQuery对象（即“$”）下的方法。 参数url表示被加载的文件地址；参数data表示发送到服务器的数据，数据为“键值对”格式；参数fn表示 请求成功后的回调函数，请求失败是不会处理的。 + -- Gitee