diff --git "a/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/11.29jQuery\345\261\236\346\200\247\346\223\215\344\275\234&\344\272\213\344\273\266\347\254\224\350\256\260.md" "b/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/11.29jQuery\345\261\236\346\200\247\346\223\215\344\275\234&\344\272\213\344\273\266\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..fd900cc8677572ae4059980db16e19025cbbe4cb
--- /dev/null
+++ "b/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/11.29jQuery\345\261\236\346\200\247\346\223\215\344\275\234&\344\272\213\344\273\266\347\254\224\350\256\260.md"	
@@ -0,0 +1,610 @@
+# 11.29jQuery属性操作笔记
+
+## 1.内容选择器
+
+empty 作用：找到既没有文本内容也没有子元素的指定元素
+
+```js
+            var $div = $("div:empty");
+            console.log($div);
+
+```
+
+parent 作用：找到有文本内容或有子元素的指定元素
+
+```js
+            var $div = $("div:parent");
+            console.log($div);
+
+```
+
+contains(text) 作用：找到包含指定文本内容的指定元素
+
+```js
+            var $div = $("div:contains('我是div')");
+            console.log($div);
+
+```
+
+has(selector) 作用：找到包含指定子元素的指定元素
+
+```js
+            var $div = $("div:has('span')");
+            console.log($div);
+
+```
+
+## 2.属性和属性节点
+
+### 2.1什么是属性?
+
+ 对象身上保存的变量就是属性
+
+### 2.2如何操作属性？
+
+ 对象.属性名称 = 值;
+
+ 对象.属性名称;
+
+ 对象[“属性名称”] = 值;
+
+ 对象[“属性名称”]
+
+```js
+            function person(){
+
+            }
+            var p = new person();
+            // p.name = "inj";
+            p["name"] = "zs";
+            // console.log(p.name);
+            console.log(p['name']);
+
+```
+
+### 2.3什么是属性节点？
+
+```js
+<span name = "it666"></span>
+
+```
+
+ 在编写HTML代码是，在HTMl标签只不过添加的属性就是属性节点
+
+ 在浏览器中找到span这个DOM元素之后，展开看到的都是属性
+
+ 在attributes属性中保持的所有内容都是属性节点
+
+### 2.4如何操作属性节点
+
+ DOM元素.setAttribute(‘属性名称’,‘值’);
+
+ DOM元素.getAttribute(‘属性名称’);
+
+```js
+            var span = document.getElementsByTagName('span')[0];
+            span.setAttribute('name','ing');
+            console.log(span.getAttribute('name'));
+
+```
+
+### 2.5属性和属性节点有什么区别？
+
+ 任何对象都有属性，但是只有DOM对象才有属性节点
+
+## 3.jQuery的attr方法
+
+### 3.1attr(name|pro|key,val|fn)
+
+ 作用：获取或者设置属性节点的值
+
+ 可以传递一个参数，也可以传递两个参数
+
+ 如果传递一个参数，代表获取属性节点的值
+
+ 如果传递两个参数，代表设置属性节点的值
+
+ **注意点：**
+
+ * 如果是获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
+
+ * 如果是设置：找到多少个元素就会设置多少个元素
+
+ * 如果是设置：如果设置的属性节点不存在，那么系统会自动新
+
+```js
+        console.log($('span').attr('class'));
+        $('span').attr('class','box');
+        $('span').attr('abc','123');
+```
+### 3.2removeAttr(name) 删除属性节点
+
+会删除所有找到元素指定的属性节点
+
+```js
+$('span').removeAttr('class name');
+
+```
+
+## 4.jQuery的prop方法
+
+### 4.1prop方法
+
+ 作用：获取或者设置属性节点的值
+
+ 可以传递一个参数，也可以传递两个参数
+
+ 如果传递一个参数，代表获取属性节点的值
+
+ 如果传递两个参数，代表设置属性节点的值
+
+ 注意点：
+
+ * 如果是获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
+
+ * 如果是设置：找到多少个元素就会设置多少个元素
+
+ * 如果是设置：如果设置的属性节点不存在，那么系统会自动新增
+
+```js
+ 			$("span").eq(1).prop('demo',"inj");
+            console.log($("span").prop("demo"));
+```
+
+### 4.2removeProp方法
+
+ 删除属性节点
+
+ 注意点：
+
+ 会删除所有找到元素指定的属性节点
+
+```js
+$("span").removeProp('demo');
+```
+
+注意
+注意点：prop方法不仅能够操作属性，他还能操作属性节点
+
+ 官方推荐在操作属性节点时，具有true和false两个属性的属性节点，如checked
+
+ ,selected 或者 disabled 使用 prop(),其他的使用 attr()
+
+```js
+        console.log($("input").prop("checked")); // true / false
+        console.log($("input").attr("checked")); // checked / undefined
+```
+
+
+
+## 5.jQuery操作相关的方法
+
+addClass(class|fn)
+ 作用：添加一个类
+
+ 如果要添加多个，多个类之间用空格隔开即可
+
+removeClass([class]|fn)
+ 作用：删除一个类
+
+ 如果要删除多个，多个类之间用空格隔开即可
+
+toggleClass(class|fn[,sw])
+ 作用：切换类
+
+ 有就删除，没有就添加
+
+```js
+        var btns = document.getElementsByTagName('button');
+        btns[0].onclick = function(){
+            // $("div").addClass("class1");
+            $('div').addClass('class1 class2');
+        }
+        btns[1].onclick = function(){
+            // $('div').removeClass('class2');
+            $('div').removeClass('class2 class1');
+        }
+        btns[2].onclick = function(){
+            $("div").toggleClass('class2 class1'); 
+        }
+```
+
+
+## 6.jQuery文本值相关的方法
+
+html([val|fn])
+ 和原生JS中的innerHTML一模一样
+
+text([val|fn])
+ 和原生JS中的innerText一模一样
+
+val([val|fn])
+ 和原生JS中的innerVal一模一样
+
+            var btns = document.getElementsByTagName('button');
+            btns[0].onclick = function(){
+                $('div').html("<p>我是一个段落<span>我是span</span></p>")
+            }
+            btns[1].onclick = function(){
+                console.log($("div").html);
+            }
+            btns[2].onclick = function(){
+                $("div").text("<p>我是一个段落<span>我是span</span></p>")
+            }
+            btns[3].onclick = function(){
+                console.log($("div").text());
+            }
+            btns[4].onclick = function(){
+                $("input").val('请输入内容！');
+            }
+            btns[5].onclick = function(){
+                console.log($("input").val());
+            }
+
+
+
+## 7.jQuery操作CSS样式的方法
+
+点式设置
+		
+
+```js
+	$("div").css("width","100px");
+            $('div').css("height","100px");
+            $("div").css('background',"blue");
+            $('div').css('border',"5px solid red")
+
+```
+
+链式设置
+ 注意点：链式操作如果大于3步，建议分开
+
+```js
+        $("div").css("width","100px").css("height","100px").css('background',"blue");
+```
+
+
+批量设置
+          
+
+```js
+         $("div").css({
+                width:"100px",
+                height:"100px",
+                background:"green"
+        });
+```
+
+获取CSS样式值
+
+```js
+console.log($('div').css("background"));
+```
+
+## 8.jQuery位置和尺寸设置操作的方法
+
+
+
+```js
+        $(function(){
+            var btns = document.getElementsByTagName('button');
+            //监听获取
+            btns[0].onclick = function(){
+                // 获取元素的宽度
+                // console.log($('.father').width());
+                // offset([coordinates])
+                // 作用：获取元素距离窗口的偏移位
+                console.log($(".son").offset().left) ;
+                //position()
+                // 作用：获取元素距离定位元素的偏移位
+                console.log($(".son").position().left);
+            }
+            //监听设置
+            btns[1].onclick = function(){
+                // 设置元素的宽度
+                // $(".father").width('500px');            
+
+            // $('.son').offset({
+            //     left:10
+            // });
+            
+            // 注意点：position 方法只能获取不能设置
+            $(".son").position({
+                top:10
+            });
+
+            $(".son").css({
+                top:"10px"
+            })
+        }
+    });
+```
+
+## 9.jQuery 事件
+
+jQuery 是为事件处理特别设计的。
+![](https://gitee.com/wuxiangzhicao/tuchuang/raw/master/img/jq%E4%BA%8B%E4%BB%B6-2022-11-2916:17:11.png)
+
+#### onload事件
+
+在JavaScript中，onload表示文档加载完成后再执行的一个事件。window.onload只能调用一次，如果多次调用，则只会执行最后一个。
+
+```html
+window.onload = function(){
+……
+}
+
+```
+
+对于JavaScript的onload事件来说，只有当页面所有DOM元素以及所有外部文件（图片、外部 CSS、外部JavaScript等）加载完成之后才会执行。这里的所有DOM元素，指的是HTML部分的代码。
+
+#### ready事件
+
+​		在jQuery中，ready也表示文档（document）加载完成后再执行的一个事件。
+
+```html
+$(document).ready(function(){
+	……
+})
+
+```
+
+​		对于jQuery的ready事件来说，只要页面所有DOM元素加载完成就可以执行，不需要再等外部文件 （图片、外部CSS、外部JavaScript）加载完成。
+
+#### read事件的四种写法
+
+```
+//写法1：
+$(document).ready(function(){
+……
+})
+//写法2：
+jQuery(document).ready(function(){
+……
+})
+//写法3(最常用)：
+$(function(){
+……
+})
+//写法4：
+jQuery(function(){
+……
+})
+
+```
+
+
+
+#### 鼠标事件
+
+在jQuery中，常见的鼠标事件如下表:
+
+| 事件      | 说明         |
+| --------- | ------------ |
+| click     | 鼠标单击事件 |
+| dblclick  | 鼠标双击事件 |
+| mouseover | 鼠标移入事件 |
+| mouseout  | 鼠标移出事件 |
+| mousedown | 鼠标按下事件 |
+| mouseup   | 鼠标松开事件 |
+| mousemove | 鼠标移动事件 |
+|           |              |
+
+​	
+
+hover:mouseover+mousedown
+
+​	jQuery 事件比JavaScript事件只是少了“on”前缀。例如鼠标单击事件在JavaScript中是onclick，而在jQuery中是 click。
+
+​		jQuery事件的语法很简单，我们都是往事件方法中插入一个匿名函数function(){}
+
+
+
+### mouseenter为鼠标移入事件：
+
+```js
+// 当鼠标指针进入 <p> 元素时，设置背景色为黄色：
+$("p").mouseenter(function(){
+    $("p").css("background-color","yellow");
+})
+
+```
+
+
+
+#### 鼠标单击
+
+​		单击事件不只是按钮才有，我们可以为任何元素添加单击事件！
+
+```html
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+    <style>
+        div {
+            display: inline-block;
+            width: 80px;
+            height: 24px;
+            line-height: 24px;
+            font-family: "微软雅黑";
+            font-size: 15px;
+            text-align: center;
+            border-radius: 3px;
+            background-color: deepskyblue;
+            color: White;
+            cursor: pointer;
+        }
+
+       
+    </style>
+    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
+</head>
+
+<body>
+    <div>调试代码</div>
+</body>
+
+</html>
+```
+
+
+
+**练习:有单击事件:alert('我是单击')  有双击事件 alert('我是双击')**
+
+**思考:如何触发双击事件时不触发单击事件**
+
+
+
+#### 鼠标移入移出
+
+​		当用户将鼠标移入到某个元素上面时，就会触发mouseover事件。如果将鼠标移出某个元素时，就 会触发mouseout事件。mouseover和mouseout平常都是形影不离的。
+
+```js
+//鼠标到文字上变色，移开变色
+<div>Javascript</div>
+```
+
+
+
+**练习：一级菜单--》二级菜单**
+
+
+
+#### 鼠标按下和松开
+
+​		当用户按下鼠标时，会触发mousedown事件；当用户松开鼠标时，则会触发mouseup事件。 mousedown表示鼠标按下的一瞬间所触发的事件，而mouseup表示鼠标松开的一瞬间所触发的事 件。当然我们都知道，只有“先按下”才能“再松开”。 
+
+
+
+#### 键盘事件
+
+在jQuery中，常用的键盘事件共有2种。 
+
+1. 键盘按下：keydown 
+
+2. 键盘松开：keyup 
+
+keydown表示键盘按下一瞬间所触发的事件，而keyup表示键盘松开一瞬间所触发的事件。对于键盘来 
+
+说，都是先有“按下”才有“松开”，也就是keydown发生在keyup之前。
+
+```html
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
+    <script> 
+        //统计输入框字符串的长度
+    </script>
+</head>
+
+<body>
+    <input id="txt" type="text" />
+    <div>字符串长度为： <span id="num">0</span> </div>
+</body>
+
+</html>
+```
+
+
+
+#### 表单事件
+
+##### 1. focus和blur
+
+focus表示获取焦点时触发的事件，而blur表示失去焦点时触发的事件，两者是相反操作。 
+
+focus和blur这两个事件往往都是配合一起使用的。例如用户准备在文本框中输入内容时，此时它会获得 
+
+光标，就会触发focus事件。当文本框失去光标时，就会触发blur事件。 
+
+并不是所有的HTML元素都有焦点事件，具有“获取焦点”和“失去焦点”特点的元素只有两种。 
+
+1. **表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）** 
+
+2. **超链接** 
+
+判断一个元素是否具有焦点很简单，我们打开一个页面后按Tab键，能够选中的就是带有焦点特性的元 
+
+素。在实际开发中，焦点事件（focus和blur）一般用于单行文本框和多行文本框，其他地方比较少见。
+
+```html
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
+    
+</head>
+
+
+<body><input id="search" type="text" value="百度一下，你就知道" /> <input type="button" value="搜索" /> </body>
+
+</html>
+```
+
+
+
+##### 2. select
+
+在jQuery中，当我们选中“单行文本框”或“多行文本框”中的内容时，就会触发select事件。
+
+```html
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
+    
+</head>
+
+<body>
+    <input id="txt1" type="text" value="前端开发学习，jQuery框架学习" /><br />
+    <textarea id="txt2" cols="20" rows="5">前端开发学习，jQuery框架学习</textarea>
+</body>
+
+</html>
+```
+
+
+
+##### **3. change** 
+
+在jQuery中，change事件常用于“具有多个选项的表单元素”。 
+
+1. 单选框选择某一项时触发。 
+2. 复选框选择某一项时触发。 
+3. 下拉菜单选择某一项时触发。
+
+```html
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
+</head>
+
+<body>
+    <div>
+        <label><input type="radio" name="fruit" value="苹果" />苹果</label>
+        <label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
+        <label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
+    </div>
+    <p></p>
+</body>
+
+</html>
+```
+