From 34fa2f27d3e27d92876750ba30fea7e6b0dce54e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=97=AB=E9=9B=AA=E8=8E=B2?= <1653483984@qq.com>
Date: Wed, 13 Dec 2023 23:38:48 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AB=E9=9B=AA=E8=8E=B2=E7=9A=84=E4=BD=9C?=
 =?UTF-8?q?=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231212 jQuery.md"                       | 359 ++++++++++++++++++
 1 file changed, 359 insertions(+)
 create mode 100644 "37 \351\227\253\351\233\252\350\216\262/20231212 jQuery.md"

diff --git "a/37 \351\227\253\351\233\252\350\216\262/20231212 jQuery.md" "b/37 \351\227\253\351\233\252\350\216\262/20231212 jQuery.md"
new file mode 100644
index 0000000..5fbc156
--- /dev/null
+++ "b/37 \351\227\253\351\233\252\350\216\262/20231212 jQuery.md"	
@@ -0,0 +1,359 @@
+1.笔记
+
+```js
+### JQuery对象
+
+var jQueryObject = $("#testDiv");
+
+DOM对象转JQuery对象
+
+DOM对象转JQuery对象，只需要利用$()方法进行包装即可
+
+var domDiv = document.getElementById('mydiv'); //获取DOM对象
+mydiv = $(domDiv);
+
+JQuery对象转Dom对象
+
+获取包装集对象中指定下标的元素，将JQuery对象转换成dom对象
+
+//第一种方式 获取jQuery对象
+var jqueryDiv = jQuery('#mydiv');
+//第二种方式 获取jQuery对象
+jqueryDiv = $('jQuery');
+var dom = jqueryDiv[0]; //将已获取的jQuery对象转为dom
+
+### 选择器
+
+<h1>我是一个标题</h1>
+<p>我是有id的p段落</p>
+<script>			
+			// 元素选择器：$("元素名") ，也就是标签选择器			
+            // alert($("h1").html());
+    
+            // id选择器：$("#id值")			
+            // alert($("#p1").html());
+
+            // 类选择器：$(".类名")
+            // alert($(".s1").html());
+
+            // 并集选择器：$("选择器1,选择器2")，表示或的意思
+            // alert($("#p1,#p2").length); // 选中id值为p1或p2的元素
+
+            // 交集选择器：$("选择器1选择器2选择器n")，表示同时满足
+            // alert($("p#p2").html()); // 表示选中id值为p2的p标签
+
+            // 全局选择器：$("*")，表示选中全部元素
+            // alert($("*").length);
+    		// $('.content *').css('background', 'red'); 选择页面中class为content的div下所有元素，设置其背景为红色。
+
+            /*
+                层次选择器
+                    -相邻选择器（只选择后面的那个元素）：$("选择器1+选择器2")
+                    -同辈选择器（只选择后面的那些元素）:$("选择器1~选择器2")
+                    -后代选择器：$("选择器1 选择器2")
+                    -子代选择器：$("选择器1>选择器2")
+            */
+             // 相邻选择器
+                alert($("#l2+li").html()); // 选中紧挨着id属性值为l2的li元素
+                alert($(".l1~li").length); // 选中紧挨着后面的li元素
+                alert($("ul>li").length); // 选中ul的子代元素
+
+        
+            // 属性选择器
+            // $("[属性名]")：选中所有带有该属性的元素
+            // alert($("[class]").length); // 选中所有带有class属性的元素
+            /*
+                $("[属性名='属性值']")：选中属性值等于该属性值的元素
+                $("[属性名!='属性值']")：选中属性值不等于该属性值的元素
+                $("[属性名^='属性值']")：选中以该属性名开头的元素
+                $("[属性名$='属性值']")：选中以该属性值结尾的元素
+                $("[属性名*='属性值']")：选中包含该属性值的元素
+            */
+
+            // alert($("[id^='p']").length); // 选中id属性以p开头的元素
+            // alert($("[id*='s']").length); // 选中id属性包含s的元素
+
+            /*
+                过滤选择器（不经常使用）注意顺序由0开始
+                :first：最开头那一个（即0）
+                :last:最后那一个
+                :even：偶数
+                :odd：奇数
+                :eq(index)：第index个
+                :gt(index)：大于第index个的全部元素
+                :lt(index)：小于第index个的全部元素
+                :not：除了什么以外的全部元素
+            */
+            alert($("ul>li:first").html()); // 选择ul的所有li后代中的第一个
+            alert($("ul>li:last").html()); // 选择ul的所有li后代中的第一个
+            alert($("ul>li:even").length); // 选择ul的所有li后代中的偶数元素
+            alert($("ul>li:eq(2)").html()); // 选择ul的所有li后代中的第二个，从0开始
+            alert($("li:not(ul>li:eq(2))").length); // 选择ul的所有li中等于第二个以外的元素
+
+
+
+### 绑定多个事件
+
+<script type="text/javascript">
+    $(function () {
+        // 绑定click 和 mouseout事件
+        /*$("h3").bind('click mouseout',function(){
+        console.log("绑多个事件");
+        });*/
+        // 链式编程
+        $("h3").bind('click', function () {
+            alert("链式编程1");
+        }).bind('mouseout', function () {
+            $("#slowDiv").show("slow");//让slowDiv显示
+        });
+        /*$("#test").click(function(){
+        console.log("点击⿏标了....");
+        }).mouseout(function () {
+        console.log("移出⿏标了...");
+        });*/
+        $("#test").bind({
+            click: function () {
+                alert("链式编程1");
+            },
+            mouseout: function () {
+                $("#slowDiv").show("slow");
+            }
+        });
+    });
+</script>
+
+<body>
+    <h3>bind()⽅法绑多个事件</h3>
+    <div id="test" style="cursor:pointer">点击查看名⾔</div>
+    <div id="slowDiv" style=" width:200px; height:200px; display:none; ">
+        ⼈之所以能，是相信能
+    </div>
+</body>
+
+### 对象访问
+
+$.trim(对象) 　　//去除字符串两端的空格
+
+$.each(对象) 　　//遍历一个数组或对象，for循环
+
+$.inArray(对象) //返回一个值在数组中的索引位置，不存在返回-1
+
+$.grep() 　 //返回数组中符合某种标准的元素
+
+$.extend() //将多个对象，合并到第一个对象
+
+$.makeArray() //将对象转化为数组
+
+$.type() //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等
+
+$.isArray() //判断某个参数是否为数组
+
+$.isEmptyObject() //判断某个对象是否为空(不含有任何属性)
+
+$.isFunction() //判断某个参数是否为函数
+
+$.isPlainObject() //判断某个参数是否为用"{}"或"new Object"建立的对象
+
+$.support() //判断浏览器是否支持某个特性
+```
+
+2.作业
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>轮播图点击切换</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    .slider {
+      width: 560px;
+      height: 400px;
+      overflow: hidden;
+    }
+
+    .slider-wrapper {
+      width: 100%;
+      height: 320px;
+    }
+
+    .slider-wrapper img {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    .slider-footer {
+      height: 80px;
+      background-color: rgb(100, 67, 68);
+      padding: 12px 12px 0 12px;
+      position: relative;
+    }
+
+    .slider-footer .toggle {
+      position: absolute;
+      right: 0;
+      top: 12px;
+      display: flex;
+    }
+
+    .slider-footer .toggle button {
+      margin-right: 12px;
+      width: 28px;
+      height: 28px;
+      appearance: none;
+      border: none;
+      background: rgba(255, 255, 255, 0.1);
+      color: #fff;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .slider-footer .toggle button:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    .slider-footer p {
+      margin: 0;
+      color: #fff;
+      font-size: 18px;
+      margin-bottom: 10px;
+    }
+
+    .slider-indicator {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      align-items: center;
+    }
+
+    .slider-indicator li {
+      width: 8px;
+      height: 8px;
+      margin: 4px;
+      border-radius: 50%;
+      background: #fff;
+      opacity: 0.4;
+      cursor: pointer;
+    }
+
+    .slider-indicator li.active {
+      width: 12px;
+      height: 12px;
+      opacity: 1;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="slider">
+    <div class="slider-wrapper">
+      <img src="./images/slider01.jpg" alt="" />
+    </div>
+    <div class="slider-footer">
+      <p>对人类来说会不会太超前了？</p>
+      <ul class="slider-indicator">
+        <li class="active"></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+      <div class="toggle">
+        <button class="prev">&lt;</button>
+        <button class="next">&gt;</button>
+      </div>
+    </div>
+  </div>
+  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
+  <script>
+    // 1. 初始数据
+    const sliderData = [
+      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
+      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
+      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
+      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
+      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
+      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
+      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
+      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
+    ]
+
+    //获取元素
+    const slider = $('.slider');
+    const img = $('.slider-wrapper img');
+    const p = $('.slider-footer p');
+    const indicator = $('.slider-indicator');
+    const footer = $('.slider-footer');
+    const prev = $('.prev');
+    const next = $('.next');
+    let i = 0;
+
+    //切换函数
+    function toggle() {
+      img.attr('src', sliderData[i].url);
+      p.text(sliderData[i].title);
+      footer.css('background-color', sliderData[i].color);
+      indicator.find('.active').removeClass('active');
+      indicator.find(`li:eq(${i})`).addClass('active');
+    }
+    toggle();
+
+    //下一页
+    next.click(function () {
+      i++;
+      if (i >= sliderData.length) {
+        i = 0;
+      }
+      toggle();
+    })
+
+    //上一页
+    prev.click(function () {
+      i--;
+      if (i < 0) {
+        i = sliderData.length - 1;
+      }
+      toggle();
+    })
+
+    //实现自动轮播
+    let interval = setInterval(function () {
+      i++
+      if (i >= sliderData.length) {
+        i = 0;
+      }
+      toggle();
+    }, 1000)
+
+    //点击小圆点切换图片
+    indicator.on('click', 'li', function () {
+      i = $(this).index();
+      toggle();
+    });
+
+    //鼠标移入暂停，移出恢复轮播
+    slider.mouseenter(function () {
+      clearInterval(interval);
+    }).mouseleave(function () {
+      intervalId = setInterval(function () {
+        next.click();
+      }, 1000);
+    })
+
+  </script>
+</body>
+
+```
+
-- 
Gitee