From 211bbb76dfdbca68b4ad85dde433d7d7e7011f65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E8=B6=85?= <9828390+wu-chao24@user.noreply.gitee.com> Date: Wed, 23 Nov 2022 04:37:04 +0000 Subject: [PATCH 1/3] =?UTF-8?q?=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 吴超 <9828390+wu-chao24@user.noreply.gitee.com> --- .../11.21jquery\347\254\224\350\256\260.md" | 85 +++++++ .../11.22jQuery2\347\254\224\350\256\260.md" | 211 ++++++++++++++++++ 2 files changed, 296 insertions(+) create mode 100644 "30\345\220\264\350\266\205/\347\254\224\350\256\260/11.21jquery\347\254\224\350\256\260.md" create mode 100644 "30\345\220\264\350\266\205/\347\254\224\350\256\260/11.22jQuery2\347\254\224\350\256\260.md" diff --git "a/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.21jquery\347\254\224\350\256\260.md" "b/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.21jquery\347\254\224\350\256\260.md" new file mode 100644 index 0000000..14d7d24 --- /dev/null +++ "b/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.21jquery\347\254\224\350\256\260.md" @@ -0,0 +1,85 @@ +## jquery + +- **JQuery概念** + - javascript概念 + - 基于Js语言的API和语法组织逻辑，通过内置window和document对象，来操作内存中的DOM元素 + - JQuery概念 + - 基于javascript的，同上，提高了代码的效率 +- **jQuery是什么:** + - 是一个javascript代码仓库，我们称之为javascript框架。 + - 是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。 + - **它可以帮我们做什么(有什么优势)** + - 轻量级、体积小，使用灵巧(只需引入一个js文件) + - 强大的选择器 + - 出色的DOM操作的封装 + - 出色的浏览器兼容性 + - 可靠的事件处理机制 + - 完善的Ajax + - 链式操作、隐式迭代 + - 方便的选择页面元素(模仿CSS选择器更精确、灵活) + - 动态更改页面样式/页面内容(操作DOM，动态添加、移除样式) + - 控制响应事件(动态添加响应事件) + - 提供基本网页特效(提供已封装的网页特效方法) + - 快速实现通信(ajax) + - 易扩展、插件丰富 +- **如何引入JQuery包** + - 引入本地的JQuery + - 引入Google在线提供的库文件（稳定可靠高速） + - 使用Google提供的API导入 + - 写第一个JQUery案例 + - 解释:在JQuery库中，$是JQuery的别名，$()等效于就jQuery() + +``` + + +``` + +## $： + +- $是jQuery别名。如$()也可jQuery()这样写,相当于页面初始化函数，当页面加载完毕，会执行jQuery()。 +- 希望在做所有事情之前，JQuery操作DOM文档。必须确保在DOM载入完毕后开始执行，应该用ready事件做处理HTML文档的开始 +- $(document).ready(function(){}); + - 类似于js的window.onload事件函数，但是ready事件要先于onload事件执行 + - window.onload = function(){}; +- 为方便开发，jQuery简化这样的方法，直接用$()表示 +- JQuery的ready事件不等于Js的load： + - 执行时机不同：load需要等外部图片和视频等全部加载才执行。ready是DOM绘制完毕后执行，先与外部文件 + - 用法不同：load只可写一次，ready可以多次 + +## 代理对象$() + +- jQuery中返回的是代理对象本身 +- jQuery的核心原理是通过选择器找到对应的代理对象 +- jQuery全都是通过方法操作 +- 样式选择器$(".className") + - $(".aa").css("color","green"); +- id选择器("") + - $("#a").css("background-color","#ff0066"); +- 标签选择器 + - $("p").css("color","#cc3366"); +- 组选择器 + - $("#b ul li").size(); + +- **对象转换($(element))** + - 原生dom对象和jquery代理对象的相互转换 + +``` +$(传入的原生对象); +//原生对象转化成jQuery对象 +var nav = document.getElementById("nav"); +var $nav = $(nav); +alert($nav.get(0) == nav);//true +``` + +## 简单的JQuery选择器 + +- JQuery基本选择器（ID选择器，标签选择器，类选择器，通配选择器和组选择器5种） +- ID选择器：document.getElementById(id)与$("#id")对比(改变文字大小)---id唯一，返回单个元素 +- 标签选择器：document.getElementsByTagName(tagName)与$("tagname")对比---多个标签，返回数组 +- 类选择器:$(".className")--多个classname（改变背景图片） +- 通配选择器：document.getElementsByTagName("*")与$("*")对比---指范围内的所有标签元素 +- 组选择器：$("seletor1,seletor2,seletor3")----无数量限制，用逗号分割 \ No newline at end of file diff --git "a/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.22jQuery2\347\254\224\350\256\260.md" "b/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.22jQuery2\347\254\224\350\256\260.md" new file mode 100644 index 0000000..a8e1e23 --- /dev/null +++ "b/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.22jQuery2\347\254\224\350\256\260.md" @@ -0,0 +1,211 @@ +## jQuery选择器 + +- 基本选择器 + 1. id选择器:`$('#id');` + 2. 元素选择器:`$('div');` + 3. 类选择器: `$('myClass');` + 4. 所有元素:`$('*');` + 5. 多条件选择器: `$('h1,h2,h3');` + 6. 后代选择器：`$('.ul01 .myclass03');` + 7. 子代选择器：`只选择第一级后代$('.da>div');` + 8. 选中指定标签后面紧挨着的一个同级标签：`$('.myclas01+li');` + 9. 选中指定标签后面的所有同级的某种标签:`$('.myclas01~li');` +- 过滤选择器 +- 1. 过滤出第一个:$`('div:first');` + 2. 过滤出最后一个:`$('div:last');` + 3. 排除指定元素:`$('div:not(".myDiv")');` + 4. 按索引值过滤:`$('ul li:eq(4)'); $('ul li').eq(4);` + 5. 过滤大于指定索引值:`$('div:gt(索引值)');` + 6. 过滤小于指定索引值:`$('div:lt(索引值)');` +- 筛选选择器:父、子、兄 + +1. 1. 筛选出当前元素的父级元素:`$('div').parent();` + 2. 筛选出当前元素的子级元素:`$('div').children();` + 3. 筛选出当前元素:`$(this)` + 4. 筛选出当前元素的兄弟姐妹元素(小伙伴):`$(this).siblings()` + +## jQuery 属性操作 + + jQuery 常用属性操作有三种：prop() / attr() / data() ; + +### 元素固有属性值 prop() + + 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。 + +**语法** + +\1. 获取属性语法 + +```javascript +prop(''属性'') +``` + +复制 + +\2. 设置属性语法 + +```javascript +prop(''属性'', ''属性值'') +``` + +复制 + +注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。 + +### 元素自定义属性值 attr() + + 用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。 + +**语法** + +**1. 获取属性语法** + +```javascript +attr(''属性'') // 类似原生 getAttribute() +``` + +复制 + +\2. 设置属性语法 + +```javascript +attr(''属性'', ''属性值'') // 类似原生 setAttribute() +``` + +复制 + +注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性） + +### 数据缓存 data() + + data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。 + +**语法** + + \1. 附加数据语法 + +```javascript +data(''name'',''value'') // 向被选元素附加数据 +date +``` + +复制 + +\2. 获取数据语法 + +```javascript +date(''name'') // 向被选元素获取数据 +``` + +复制 + +注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。 + +**演示代码** + +```javascript + + 都挺好 + +
我是div
+ 123 + + +``` + +# 操作元素 + +（1）修改、设置样式 + +``` +$('#conBlue').attr('class','green') +``` + +（2）增加样式 + +``` +//只增加一个 +$('#conBlue').css('class','pink') + +//增加多个css({'样式1':'值1','样式2':'值2'}) +$('#conBlue').css({'class':'pink','font-family':'楷体'}) +``` + +（3）移除样式 + +``` +$('#remove').removeClass('blue'); +``` + +# 获取文本 + +（1）获取表单里的值val（） + +``` +console.log($('#oop').val()); +``` + +（2）创建元素 dom：createElement('p') createTextNode('这是新增加的一段文本') + +``` +var p = $('

这是新增加的一段文本

'); +``` + +（3）添加元素 prepend ().prepend(创建的元素) + +``` +$('#div').prepend(p); + +//3.1 prependTo +p.prependTo('#div'); + +//4 append +$('#div').before(p); +``` + +（4）before: 在$(对象)之前增加一个同级节点 + +``` +$('#div').before(p); +``` + +（5）after :在$(对象)之后增加一个同级节点 + +``` +$('#div').after(p); +``` + +（6）清空输入框的值 + +``` +$('#inp').val(''); +``` + +（7）删除文本内容 + +``` +//remove():标签和标签内容都被移除 +$('[class="blue"]').remove(); + +//empty():只移除内容 +$('[class="green"]').empty(); +``` \ No newline at end of file -- Gitee From ee96de28ab42d07ccde100a71160631f05c4c9f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E8=B6=85?= <9828390+wu-chao24@user.noreply.gitee.com> Date: Wed, 23 Nov 2022 04:39:00 +0000 Subject: [PATCH 2/3] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 吴超 <9828390+wu-chao24@user.noreply.gitee.com> --- .../11.17\344\275\234\344\270\232.md" | 121 ++++++++++++++++++ .../11.21\344\275\234\344\270\232.md" | 39 ++++++ 2 files changed, 160 insertions(+) create mode 100644 "30\345\220\264\350\266\205/\344\275\234\344\270\232/11.17\344\275\234\344\270\232.md" create mode 100644 "30\345\220\264\350\266\205/\344\275\234\344\270\232/11.21\344\275\234\344\270\232.md" diff --git "a/30\345\220\264\350\266\205/\344\275\234\344\270\232/11.17\344\275\234\344\270\232.md" "b/30\345\220\264\350\266\205/\344\275\234\344\270\232/11.17\344\275\234\344\270\232.md" new file mode 100644 index 0000000..efadb97 --- /dev/null +++ "b/30\345\220\264\350\266\205/\344\275\234\344\270\232/11.17\344\275\234\344\270\232.md" @@ -0,0 +1,121 @@ +``` + + + + + +``` \ No newline at end of file diff --git "a/30\345\220\264\350\266\205/\344\275\234\344\270\232/11.21\344\275\234\344\270\232.md" "b/30\345\220\264\350\266\205/\344\275\234\344\270\232/11.21\344\275\234\344\270\232.md" new file mode 100644 index 0000000..94ac118 --- /dev/null +++ "b/30\345\220\264\350\266\205/\344\275\234\344\270\232/11.21\344\275\234\344\270\232.md" @@ -0,0 +1,39 @@ +点击复选框输出值 + +``` + +``` + +遍历checkbox控件，输出选中个数 + +``` + +``` \ No newline at end of file -- Gitee From f9897728593f7369c61f296f0dff9d7fc348e4bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E8=B6=85?= <9828390+wu-chao24@user.noreply.gitee.com> Date: Sun, 27 Nov 2022 15:15:23 +0000 Subject: [PATCH 3/3] =?UTF-8?q?=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 吴超 <9828390+wu-chao24@user.noreply.gitee.com> --- ...13\344\273\266\347\254\224\350\256\260.md" | 136 ++++++++++++++++++ ...21\345\256\232\347\254\224\350\256\260.md" | 64 +++++++++ 2 files changed, 200 insertions(+) create mode 100644 "30\345\220\264\350\266\205/\347\254\224\350\256\260/11.23 \344\272\213\344\273\266\347\254\224\350\256\260.md" create mode 100644 "30\345\220\264\350\266\205/\347\254\224\350\256\260/11.24\344\272\213\344\273\266\347\273\221\345\256\232\347\254\224\350\256\260.md" diff --git "a/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.23 \344\272\213\344\273\266\347\254\224\350\256\260.md" "b/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.23 \344\272\213\344\273\266\347\254\224\350\256\260.md" new file mode 100644 index 0000000..862d13e --- /dev/null +++ "b/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.23 \344\272\213\344\273\266\347\254\224\350\256\260.md" @@ -0,0 +1,136 @@ +# jQuery 事件 + +页面加载完成有两种事件，一是ready，表示文档结构已经加载完成；二是onload，指示页 面包含图片等文件在内的所有元素都加载完成（ready 在onload 前加载！！！）。 使用$(window).load()方法，这 个方法会等到页面所有内容加载完毕后才会触发。 + +### onload事件 + +dom中的onload,是全部资源加载完后在进行执行,且只能执行一个.(这里的所有DOM元素，指的是HTML部分的代码。) +而jQuery中是基础元素加载完后就执行,且能执行多个(效率高). + +``` +window.onload = function(){ + xxx +} +``` + +### ready事件 + +在页面加载完成后，立即执行指定的函数。 + +#### ready()相比onload事件绑定函数的优势 + +具有较高优先级，只需等到html结构加载完成后即可执行；而onload必须等到图片在内的所有元素加载完毕后才执行。除了使用target选择器时需要结合window.onload，大多数我们都可以使用ready()来进行编写js代码。 + +在jQuery中，ready也表示文档（document）加载完成后再执行的一个事件。 + +对于jQuery的ready事件来说，只要页面所有DOM元素加载完成就可以执行，不需要再等外部文件 （图片、外部CSS、外部JavaScript）加载完成。 + +#### ready()的三种写法 + +``` +//写法1： +$(document).ready(function(){ +…… +}) +//写法2： +jQuery(document).ready(function(){ +…… +}) +//写法3(最常用)： +$(function(){ +…… +}) +//写法4： +jQuery(function(){ +…… +}) +``` + +## 键盘事件 + +#### keydown()事件 + +当按钮被按下时，发生 keydown 事件。 + +触发被选元素的 keyup 事件： + +``` +$(selector).keyup() +``` + +添加函数到 keyup 事件： + +``` +$(selector).keyup(function) +``` + +#### keypress()事件 + +keypress 当按钮被按下时，会发生该事件，我们可以理解为按下并抬起同一个按键。 + +添加函数到 keypress 事件： + +``` +$(selector).keypress(function) +``` + +#### keyup事件 + +keyup 事件会在按键释放时触发，也就是你按下键盘起来后的事件 + +触发被选元素的 keydown 事件： + +``` +$(selector).keydown() +``` + +添加函数到 keydown 事件： + +``` +$(selector).keydown(function) +``` + +## 表单事件 + +#### focus() 与 blur() + +与focusin() , focusout() 的区别：是否支持冒泡处理 + +focusin(): 事件绑定在父元素div，当它内部 有input获得焦点，会冒泡给父元素div。focusout() 也是 + +``` +
+ 　点击触发焦点(无反应)： +　　 +
+ $(".box").focusin(function() { + $(this).css('border', '2px solid red');// 点击input，input获得焦点，冒泡到父元素div ，父元素div加上了边框，$(this)代表父元素.box而不是点击的input元素 + }) +``` + +但一般直接 绑定到input上 如： + +``` + $("input").focus(),$('input').focusin() +``` + + + +#### 二、 change() 事件 + +元素，