From 2057853e853aa94e76b9a0cb13305889fe4d99dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=9D=B0?=
 <11785149+denglingyan@user.noreply.gitee.com>
Date: Wed, 13 Dec 2023 15:59:15 +0000
Subject: [PATCH] =?UTF-8?q?=E9=99=88=E6=9D=B0=E7=9A=84=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈杰 <11785149+denglingyan@user.noreply.gitee.com>
---
 ...2 \351\200\211\346\213\251\345\231\250.md" | 134 ++++++++++++++++++
 1 file changed, 134 insertions(+)
 create mode 100644 "07 \351\231\210\346\235\260/20231212 \351\200\211\346\213\251\345\231\250.md"

diff --git "a/07 \351\231\210\346\235\260/20231212 \351\200\211\346\213\251\345\231\250.md" "b/07 \351\231\210\346\235\260/20231212 \351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000..d80bc27
--- /dev/null
+++ "b/07 \351\231\210\346\235\260/20231212 \351\200\211\346\213\251\345\231\250.md"	
@@ -0,0 +1,134 @@
+# 笔记
+
+
+
+### 选择器
+
+
+           <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 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)' },
+    ]
+
+    function shua(){
+      $('.slider-wrapper img')[0].src=sliderData[num].url;
+      $('.slider-footer p')[0].innerHTML=sliderData[num].title;
+      $('.slider-footer').css('background-color', sliderData[num].color);
+      $('li').removeClass('active');
+      $('li').eq(num).addClass('active');
+    }
+    
+    let num=0
+    $('.next').click(function(){
+      if (num<7) {
+        num++
+      }else{
+        num=0
+      }
+      shua()
+    })
+
+
+    $('.prev').click(function(){
+      if (num<1) {
+        num=7
+      }else{
+        num--
+      }
+      shua()
+    })
+      </script>
+
+
+
+
+<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
+
+  <script>
+$('li a').click(function(e) {
+  let index = $(this).parent().index(); 
+  $('li a').removeClass('active')
+  $('li a').eq(index).addClass('active')
+  $('.item').removeClass('active')
+  $('.item').eq(index).addClass('active')
+});
+  </script>
\ No newline at end of file
-- 
Gitee