diff --git "a/37 \346\217\255\351\230\263\344\270\275/20231213 jQuery\347\254\224\350\256\260.md" "b/37 \346\217\255\351\230\263\344\270\275/20231213 jQuery\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4b59109dc247855e1d4c6c5f6b3a3393da078591
--- /dev/null
+++ "b/37 \346\217\255\351\230\263\344\270\275/20231213 jQuery\347\254\224\350\256\260.md"
@@ -0,0 +1,355 @@
+# jQuery
+
+
+
+### 1 关于原生js对象（DOM对象）和jQuery对象的误区：
+
+```js
+1.javascript对象又称dom对象，是指使用javascript操作的对象，
+例如：
+ document.getElementById("id值")方法 获得的对象就是dom对象
+ document.querySelectorAll("")
+2.jquery对象是指使用jquery操作的对象，
+例如：
+ $("选择器");
+3.关于javascript对象与jquery对象之间的转换
+ 因为jquery对象默认是集合或者数组，所以可以使用数组或者集合的取值方法
+
+ dom->jquery: $(dom对象);
+ jquery->dom: jquery对象[0]或者jquery对象.get(0)
+
+4.dom对象只能使用javascript方法，jquery对象只能使用jquery方法
+
+```
+
+### 2 jQuery 是第三方库，使用前要先引入
+
+```js
+
+```
+
+### 3 选择器
+
+```js
+我是一个标题
+我是有id的p段落
+
+```
+
+### 4 jQuery事件
+
+***1.js事件回顾***
+
+```js
+javascript事件
+ 1.以on开头，比如鼠标单击事件onclick，onchange,onready,onblur,oninput,
+ javascript事件一般通过注册事件句柄实现绑定
+ 2.js事件通常是一个函数，通过事件驱动执行，js函数内部可以使用jquery方式进行选中元素
+ 3.位置：js事件函数写在标签内，ready()外
+
+ 定义onclick事件函数
+
+
+
+ function jsClick(){
+ alert("js鼠标单击事件...");
+ // 使用jquery选中选中其它元素
+ $("#myText").css("background-color","red");
+ }
+
+```
+
+***2.jQuery事件***
+
+```js
+/*
+ jquery事件：
+ 1.没有on，直接以js事件去掉相应的on即可
+ 2.位置：ready()内
+ ready(function){
+ $("jquery选择器").事件类型(function(){
+ 事件体...
+ })
+ }
+ */
+ $(document).ready(function(){
+ // 鼠标单击事件
+ $("#myButton").click(function(){
+ $("#myText").css("background-color","red");
+ })
+ })// ready()结束标记
+
+```
+
+***3.常见的jQuery事件***
+
+```js
+ 鼠标事件
+ -click：鼠标单击
+ -- dblclick 双击
+ -mouseover：鼠标进入（进入子元素也会触发）
+ -mouseout：鼠标离开（离开子元素也会触发）
+ -focus：元素获得焦点
+ -blur：元素失去焦点
+
+ 键盘事件
+ -keydown：键盘按下事件，从上到下的过程
+ -keyup：松开键盘
+ -keypress：键盘被按到最底部
+ 绑定事件
+ 1.形式 addEventLister("事件名",函数)
+ $("jquery选择器").bind("事件名",函数)
+ 好处：更加通用
+ 2.多组事件绑定：
+ $("jquery选择器").bind({"事件名":函数，"事件名":函数，"事件名":函数，})
+
+
+显示效果：
+ -show(参数1，参数2)：显示
+ -hide(参数1，参数2)：隐藏
+
+
+ -fadeIn(参数1，参数2)：淡入
+ -slideDown(参数1，参数2)：展开
+ 关于参数：参数1表示速度，可选值有slow、fast、normal
+ 参数2表示回调函数
+ 隐藏效果：
+
+ -fadeOut(参数1，参数2)：淡出
+ -slideUp(参数1，参数2)：拉升 (压缩)
+
+ $("p").one( "click", fun...) //one 绑定一个一次性的事件处理函数
+ $("p").unbind( "click" ) //解绑一个事件
+
+```
+
+### 5 jQuery操作DOM对象
+
+***1.jQuery操作样式***
+
+```js
+i.设置css
+ 获取对象的某个样式的属性对应的值jquery对象.css("属性名") style
+ 设置单个样式：jquery对象.css("属性名","属性值")
+ 设置多个样式：jquery对象.css({"属性名":"属性值",属性名":"属性值,属性名":"属性值})
+classList.add .remove toggle .contains
+ii.追加或移出预定义样式
+ addClass("xxx")：追加单个属性
+ addClass("xxx xxx xxx")：追加多个属性
+ removeClass("xxx")：移除单个属性
+ removeClass("xxx xxx xxx")：移除多个属性
+ toggleClass("xxx xxx xxx")：轮换属性
+ 可以在style标签预定义一些样式，通过add或remove方法进行追加或移除属性
+
+```
+
+***2.jQuery操作内容***
+
+```js
+i.jquery操作DOM之内容
+ 取值(文本)：
+ html()：获取值，获取的是元素的内容，包括元素内部的各种标签 innerHTML
+ text()：获取值，只获取内容值，不包括各种标签 innerText
+ 赋值：
+ html("xxx")：先渲染，后显示 innerHTML= xxx
+ text("xxx")：原封不动显示，不进行渲染 innerText = xxx
+
+ 表单的：
+ val()：获取属性值 .value
+ val("xxx")：赋值 .value =xxx
+
+
+ii.jquery工厂$()的作用
+ -$("jquery选择器")：jquery选择器：
+ -$(document)：类型转换，DOM对象转换为jquery对象
+ -$(html字符串)：创建节点
+
+ 插入节点：
+ -内部插入：
+ $("A").append($("B"))：将B插入到A尾部
+ $("A").prepend($("B"))：将B插入到A头部
+
+ 外部插入：
+ $("A").before($("B"))：将B插入到A前面（外部）
+ $("A").after($("B"))：将B插入到A后面（外部）
+
+ 替换节点
+ -$("A").replaceWith($("B"))：用B替换A
+
+ 删除节点
+ -remove()：彻底删除，包括节点关联的一切
+ -empty()：只删除节点内容
+
+ 克隆节点
+ -clone(true|false)
+ 其中true代表克隆节点的同时克隆节点所绑定的事件，false代表只克隆节点
+
+iii.属性操作
+ attr("属性名")：根据属性名获取属性值
+ attr("属性名","属性值")：设置单个属性值
+ attr({"属性名":"属性值","属性名":"属性值","属性名":"属性值"})：设置多个属性值
+ removeAttr("属性名")：删除属性值
+
+iiii.jquery获取集合和遍历集合
+ 获取子节点集合：$("选择器").children("过滤")
+
+
+ 同辈集合：
+ -next()：下一个
+ -prev()：前一个
+ -sublings()：左右
+
+ 前辈集合：
+ -parent()：父辈
+ -parents()：祖先
+
+iiiii.集合遍历：
+ $("选择器").each(function(index,element){
+
+ })
+ 其中参数index表示当前是第几个元素，element代表当前元素，注意element是dom对象，必须进行jquery工厂进行转换
+
+```
+
+### 6 jQuery表单验证（后端必会知识)
+
+***1.关于表单验证***
+表单验证是java后端程序员必须要掌握的前端技能，表单验证减轻了前端对服务器的访问量。
+表单验证三大步：
+-获取要校验的元素值（选择器）
+-要触发校验的事件或方法：blur或是submit,或change
+-验证：采用字符串处理方法或是正则表达式
+***2.采用字符串验证表单（传统模式）***
+————————————————
+
+```js
+// 采用字符串处理方法对表单进行校验
+ $("#uname").blur(function(){
+ if($(this).val().length<2 || $(this).val().length>6){
+ if($(this).val().length==0 || $(this).val()==""){
+ $("#nameTip").css("display","none");
+ }else{
+ $("#nameTip").css("display","inline");
+ }
+ }else{
+ $("#nameTip").css("display","none");
+ }
+ })
+```
+
+***3.采用正则表达式验证表单***
+————————————————
+
+```js
+// 使用正则验证邮箱
+ $("#uemail").blur(function(){
+ var $email = $(this).val();
+ // 定义正则规则
+ var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
+ // 调用方法校验
+ if(!reg.test($email)){
+ if($email=="" || $email.length==0){
+ $("#emailTip").css("display","none");
+ }else{
+ $("#emailTip").css("display","inline");
+ }
+ }else{
+ $("#emailTip").css("display","none");
+ }
+ })
+```
+
+### 7 对象访问
+
+```js
+$.trim(对象) //去除字符串两端的空格
+$.map(data,(item)=>{})
+
+$.each(对象) //遍历一个数组或对象，for循环
+
+$.inArray(对象) //返回一个值在数组中的索引位置，不存在返回-1
+
+$.grep() //返回数组中符合某种标准的元素
+
+$.extend() //将多个对象，合并到第一个对象
+
+$.makeArray() //将对象转化为数组
+
+$.type() //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等
+
+$.isArray() //判断某个参数是否为数组
+
+$.isEmptyObject() //判断某个对象是否为空(不含有任何属性)
+
+$.isFunction() //判断某个参数是否为函数
+
+$.isPlainObject() //判断某个参数是否为用"{}"或"new Object"建立的对象
+
+$.support() //判断浏览器是否支持某个特性
+```
+
diff --git "a/37 \346\217\255\351\230\263\344\270\275/20231213 \344\275\234\344\270\232.txt" "b/37 \346\217\255\351\230\263\344\270\275/20231213 \344\275\234\344\270\232.txt"
new file mode 100644
index 0000000000000000000000000000000000000000..a25849658d67d39f2f9b87cf8cc38ef6812b5b23
--- /dev/null
+++ "b/37 \346\217\255\351\230\263\344\270\275/20231213 \344\275\234\344\270\232.txt"
@@ -0,0 +1,431 @@
+#### tab 栏切换:
+
+```html
+
+
+
+
+
+
+
+ tab栏切换
+
+
+
+
+
+
+
+
+
+
+```
+
+#### 轮播图：
+
+```html
+
+
+
+
+
+
+
+ 轮播图点击切换
+
+
+
+
+
+
+
+
+
+
