diff --git "a/13\346\264\252\347\201\277\350\212\263/\347\254\224\350\256\260/Day24 11.22 JQuery\346\223\215\344\275\234\345\261\236\346\200\247.md" "b/13\346\264\252\347\201\277\350\212\263/\347\254\224\350\256\260/Day24 11.22 JQuery\346\223\215\344\275\234\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..00c1b9a63fe50ca5b593e356d49fe2224eeccaee
--- /dev/null
+++ "b/13\346\264\252\347\201\277\350\212\263/\347\254\224\350\256\260/Day24 11.22 JQuery\346\223\215\344\275\234\345\261\236\346\200\247.md"
@@ -0,0 +1,166 @@
+# Day24 11.22 JQuery操作属性
+
+## 1.操作元素属性
+
+### 1.1 获取属性
+
+获取属性有两种方法,atrr和prop两个方法返回的值是不一样的如下:
+
+| 方法 | 说明 | 举例 |
+| -------------- | ------------------------------------------------------------ | --------------------------------- |
+| attr(属性名称) | 获取指定的属性值,操作checkbox时
选中返回checked,没有选中返回undefined。 | attr('checked')
attr('name') |
+| prop(属性名称) | 获取具有true和false两个属性的属性值 | prop('checked') |
+
+### 1.2 attr()
+
+语法:
+添加属性
+
+```
+attr('属性名','属性值')
+```
+
+移除属性
+
+```
+removeAttr('属性名')
+```
+
+方法描述:专门操作属性值为非布尔值的属性,该方法读写一体。
+
+例题:
+
+**需求描述:设置p标签的title属性为”我是attr修改后的段落标题“**
+
+
我是段落
+ +```js +我是段落
+ +$('#content').attr('title', '我是attr修改后的段落标题'); + +``` + +结果: + + +**需求描述:读取p标签的title属性并输出** + +```js +我是段落
+console.log($('#content').attr('title')); +``` + +结果 + + + +### 1.3 prop() + +方法描述:专门操作属性值为布尔值的属性,该方法读写一体。 + +如:checked ,selected, disabled + +例题: + +**需求描述:设置复选框的状态为选中状态** + +```js +复选框 +$(':checkbox').prop('checked', 'true'); + +``` + +结果: + + + +**需求描述:读取复选框的选中状态并输出** + +```js +复选框 +console.log($(':checkbox').prop('checked')); +``` + +结果: + + +## 2.操作元素样式 + +attr还可以用来对属性进行更改 + +如下 + +| 方法 | 说明 | +| ---------------------- | --------------------------- | +| attr('class') | 获取属性的值,即样式名称 | +| attr('class','样式名') | 修改class属性的值,修改样式 | +| addClass('样式名') | 添加样式名称 | +| css() | 添加具体的样式 | +| removeClass(class) | 移除样式名称 | + +## 3.操作元素内容 + +| 方法 | 说明 | +| ----------------- | ---------------------------------- | +| html() | 获取元素的html内容 | +| html('html,内容') | 设定元素的内容 | +| text() | 获取元素的内容,不识别html标签 | +| text('text 内容') | 设置元素的文本内容,不识别html标签 | +| val() | 获取元素的值(表单元素) | +| val('值') | 设定元素的值 | + +### 3.1 val() + +方法描述:该方法主要用于获取表单元素的值和设置表单元素的值,该方法读写一体。 + +可以用来读取用户输入的值,也可以用来设置值 + +例题 + +**需求描述:设置文本框的值为”123456“** + +``` + +$(':text').val('123456'); +``` + +**需求描述:读取文本框的值并输出** + +``` + +console.log($(':text').val()); +``` + +### 3.2 html() + +方法描述:设置/获取元素的html内容,该方法读写合一。 + +这个方法跟dom的innerHTML是一致的 + +例题: +**需求描述:设置ul列表标签的li列表项** + +``` +直接在里面写元素内容以及标签即可
') +``` + diff --git "a/13\346\264\252\347\201\277\350\212\263/\347\254\224\350\256\260/Day25 11.23 JQuery\344\272\213\344\273\266\344\270\212.md" "b/13\346\264\252\347\201\277\350\212\263/\347\254\224\350\256\260/Day25 11.23 JQuery\344\272\213\344\273\266\344\270\212.md" new file mode 100644 index 0000000000000000000000000000000000000000..f8c314fd4ab457fbaadbc83358b6434ca4d1ed49 --- /dev/null +++ "b/13\346\264\252\347\201\277\350\212\263/\347\254\224\350\256\260/Day25 11.23 JQuery\344\272\213\344\273\266\344\270\212.md" @@ -0,0 +1,205 @@ +# Day25 11.23 JQuery事件上 + +## 1.表单事件 + +### 1.1 focus() 获取焦点触发事件 + +描述:当获得焦点后就会触发绑定的函数 + +例如:**需求描述:当文本框获取焦点时,设置其背景为红色** + +```js + +$(':text').focus(function () { + $(this).css('background', 'red'); +}); +``` + +### 1.2 blur() 失去焦点触发事件 + +方法描述:当失去焦点时触发所绑定的函数 + +例如:**当文本框获取焦点时,设置其背景为红色,当文本框失去焦点时,设置其背景为绿色** + +```js + +$(':text').focus(function () { + $(this).css('background', 'red'); +}); +$(':text').blur(function () { + $(this).css('background', 'green'); +}); + +``` + +### 1.3 change() 内容改变时触发函数 + +方法描述:当内容改变时触发所绑定的函数。 + +**需求描述:当文本框内容改变时,就向控制台输出当前文本框的内容** + +```js + +$(':text').change(function () { + console.log($(this).val()); +}); + +``` + +**需求描述:当选择框的内容改变时,就向控制台输出当前选中项的内容** + +```js + +$('select').change(function () { + console.log($(this).val()); +}); + +``` + +### 1.4 select() 内容选择时触发函数 + +方法描述:当内容选择时触发所绑定的函数。 + +**需求描述:当文本框的内容被选择时,就向控制台输出当前文本框的内容** + +```js + +$('input').select(function () { + console.log($(this).val()); +}); + +``` + +### 1.5 submit() 表单提交时触发函数 + +方法描述:当表单提交时触发所绑定的函数。 + +**需求描述:当表单提交的时候,弹出对话框“表单提交了”** + +```js + +$('form').submit(function () { + alert('表单提交了'); +}); + +``` + +## 2.鼠标事件 + +### 2.1 click() 鼠标单击时触发函数 + +方法描述:当鼠标单击时调用所绑定的函数。 + +**需求描述:为按钮绑定一个单击函数,然后点击按钮,在控制台输出“按钮被单击了”** + +```js + +$('button').click(function () { + console.log('按钮被单击了'); +}); +``` + +### 2.2 dblclick() 鼠标双击时触发函数 + +方法描述:当鼠标双击时调用所绑定的函数。 + +**需求描述:为按钮绑定一个双击函数,然后双击按钮,在控制台输出“按钮被单击了”** + +```js + +$('button').dblclick(function () { + console.log('按钮被双击了'); +}); +``` + +### 2.3 mousedown() 左键按下的时候调用函数 + +方法描述:当鼠标左键按下的时候调用所绑定的函数。 + +**需求描述:当鼠标左键按下的时候,控制台输出“鼠标左键按下”** + +```js + +$('button').mousedown(function () { + console.log('鼠标左键按下'); +}); +``` + +### 2.4 mouseup() 左键松开时调用函数 + +方法描述:当鼠标左键松开的时候调用所绑定的函数。 + +**需求描述:当鼠标左键松开的时候,控制台输出“鼠标左键松开”** + +```js + +$('button').mouseup(function () { + console.log('鼠标左键松开'); +}); +``` + +### 2.5 mouseenter() 鼠标移入时触发 + +方法描述:当鼠标进入目标元素的时候调用所绑定的函数。 + +**需求描述:创建两个div,当鼠标移到外层div的时候,向控制台输出“mouse enter”** + +``` +.outer { + width: 200px; + height: 200px; + background: coral; +} + +.inner { + width: 100px; + height: 100px; + background: pink; +} +``` + +``` +