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修改后的段落标题'); + +``` + +结果: +![image-20201112173818651](https://img-blog.csdnimg.cn/img_convert/f0ce790ee4d80a45402aff2cfde47616.png) + +**需求描述:读取p标签的title属性并输出** + +```js +

我是段落

+console.log($('#content').attr('title')); +``` + +结果 + +![image-20201112173942146](https://img-blog.csdnimg.cn/img_convert/a11816a3d35a5790e89e84b699fd6089.png) + +### 1.3 prop() + +方法描述:专门操作属性值为布尔值的属性,该方法读写一体。 + +如:checked ,selected, disabled + +例题: + +**需求描述:设置复选框的状态为选中状态** + +```js +复选框 +$(':checkbox').prop('checked', 'true'); + +``` + +结果: + +![image-20201112174254845](https://img-blog.csdnimg.cn/img_convert/8e5b05d84366ba904f0c389c2ba4245b.png) + +**需求描述:读取复选框的选中状态并输出** + +```js +复选框 +console.log($(':checkbox').prop('checked')); +``` + +结果: +![image-20201112174448411](https://img-blog.csdnimg.cn/img_convert/47dc1d85c48210cd90d2e9995527d193.png) + +## 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列表项** + +``` + +var li = '
  • 我是列表项
  • '; +$('ul').html(li); +``` + +### 3.3 text() + +方法描述:设置/获取元素的文本内容,该方法读写合一。 + +**需求描述:设置p段落标签的内容为“我是段落”** + +``` +

    +$('p').text('我是段落'); +``` + +### 4.创建元素 + +``` +$('

    直接在里面写元素内容以及标签即可

    ') +``` + 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; +} +``` + +``` +
    +
    +
    +$('.outer').mouseenter(function () { + console.log('mouse enter'); +}); +``` + +### 2.6 mouseleave() 鼠标移开时触发 + +方法描述:当鼠标离开目标元素的时候调用所绑定的函数。 + +**需求描述:创建两个div,当鼠标移出外层div的时候,向控制台输出“mouse leave”** + +``` +$('.outer').mouseleave(function () { + console.log('mouse leave'); +}); + +``` + +## 3. 键盘事件 + +### 3.1 keypress() 键盘按下调用函数 + +方法描述:keypress与keydown类似,当键盘按键按下的时候调用绑定的函数。 + +**需求描述:当键盘按键按下的时候,输出当前的按键** + +``` + +$(':text').keypress(function (event) { + console.log(event.key); +}); +``` + diff --git "a/13\346\264\252\347\201\277\350\212\263/\347\254\224\350\256\260/Day26 11.24 JQuery\344\272\213\344\273\266\344\270\213.md" "b/13\346\264\252\347\201\277\350\212\263/\347\254\224\350\256\260/Day26 11.24 JQuery\344\272\213\344\273\266\344\270\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..96aedbbbea40557f27bce726724dce4d604c3bfc --- /dev/null +++ "b/13\346\264\252\347\201\277\350\212\263/\347\254\224\350\256\260/Day26 11.24 JQuery\344\272\213\344\273\266\344\270\213.md" @@ -0,0 +1,30 @@ +# Day26 11.24 JQuery事件下 + +## 1.事件绑定 + +### 1.1 off() + +方法描述: 移除一个事件处理函数。 + +**需求描述:为按钮添加单击事件,然后再解绑,这时候你在点击按钮看看是不是不会输出信息了** + +```js + +$('button').on('click',function () { + console.log('按钮被单击了'); +}); + +$('button').off('click'); +``` + +### 1.2 one() + +一次事件:当前元素只触发一次该事件one(事件类型,function) + +``` + $(function () { + $('#btn').one('click',function () { + alert('点击'); + }) + }) +``` \ No newline at end of file diff --git "a/13\346\264\252\347\201\277\350\212\263/\347\254\224\350\256\260/Day28 11.28 \350\277\207\346\273\244\346\226\271\346\263\225.md" "b/13\346\264\252\347\201\277\350\212\263/\347\254\224\350\256\260/Day28 11.28 \350\277\207\346\273\244\346\226\271\346\263\225.md" new file mode 100644 index 0000000000000000000000000000000000000000..0fba43eb6ecd1424c215f4af1e39689bae5d888f --- /dev/null +++ "b/13\346\264\252\347\201\277\350\212\263/\347\254\224\350\256\260/Day28 11.28 \350\277\207\346\273\244\346\226\271\346\263\225.md" @@ -0,0 +1,87 @@ +# Day28 11.28 过滤方法 + +## 1 each遍历元素 + +### 1.1 $.each方法 + +方法描述:一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1,其他对象通过其属性名进行迭代。 + +**需求描述:给定一个数组,使用$.each方法进行遍历输出** + +``` +var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50]; +$.each(arr, function (index, element) { + console.log(index, element); +}); +``` + +**需求描述:给定一个对象,使用$.each方法进行遍历输出** + +``` +var obj = { + name: 'Tom', + age: 28, + speak: function () {} +}; +$.each(obj, function (key, value) { + console.log(key, value); +}); +``` + +## 2. is过滤 + +is可以根据条件来判断,然后选取符合的元素 + +语法 + +``` +$().is(selector) +``` + +例如: + +``` +判断元素设置的属性是否可见 +$().is(":visible") +``` + +## 3.not() 反向过滤 + +is用来判断符合条件的元素,not用来判断不符合的元素 + +其中,not()方法可以使用选择器过滤,也可以使用函数过滤 + +``` +语法:$().not(selector或fn) +``` + +## 4.filter() + +方法描述:筛选元素集合中匹配表达式或通过传递函数测试的元素集合。 + +``` +需求描述:查找所有id为two的li标签设置其背景为红色 + +$('ul>li').filter('[id=two]').css('background', 'red'); +``` + +## 5.has() + +has方法和filter相似,但是他只有选择器过滤,比较精简,所以运行速度比较块 + +``` +语法 +$().has(selector) +``` + +## 6.键码值 + +![](https://gitee.com/hong-canfang/xiaowuimg/raw/master/img/1669645052516-2022-11-2822:17:33.png) + +![](https://gitee.com/hong-canfang/xiaowuimg/raw/master/img/1669645079275-2022-11-2822:17:59.png) + +![](https://gitee.com/hong-canfang/xiaowuimg/raw/master/img/1669645099328-2022-11-2822:18:19.png) \ No newline at end of file diff --git "a/13\346\264\252\347\201\277\350\212\263/\347\254\224\350\256\260/Linux\345\270\270\347\224\250\346\214\207\344\273\244.md" "b/13\346\264\252\347\201\277\350\212\263/\347\254\224\350\256\260/Linux\345\270\270\347\224\250\346\214\207\344\273\244.md" new file mode 100644 index 0000000000000000000000000000000000000000..fdbbf485d6d0fc92720e06acb0798f9fa4404196 --- /dev/null +++ "b/13\346\264\252\347\201\277\350\212\263/\347\254\224\350\256\260/Linux\345\270\270\347\224\250\346\214\207\344\273\244.md" @@ -0,0 +1,73 @@ +# Linux常用指令 + +## 1.结束进程 + +**ps-ef** + +用来查看正在运行的全部进程 + +**ps -ef | grep 进程名** + +后面加上进程名就可以看见这个服务运行的进程是那些 + +**killall -9 进程名** + +可以杀掉一个组内的所有进程 + +**kill -9 进程id** + +可以杀掉指定的一个进程 + +## 2.文件夹操作 + +**mkdir** + +mkdir 文件夹名称 就可以直接创建文件夹 + +**ls** + +ls可以查看列表的所有文件夹名称以及文件名称 + +**scp 本地电脑的文件路径/带后缀的文件名 服务器的账户名@服务器ip:/存放在服务器哪个文件夹里** + +这个是把本地的文件上传到服务器的指令 + +**cd/文件夹名称** + +这个指令 可以进入文件夹里面 + +**tar zxvf 文件名** + +进入有文件的文件夹后,用这个语句可以解压文件 + +**cd ..** + + 返回上一级目录 + +**cd ../..** + + 返回上两级目录 + +**cd或cd ~** + +返回home目录 + +**cd - 目录名** + + 返回指定目录 + +**find** + +Linux find 命令用来在指定目录下查找文件。任何位于参数之前的字符串都将被视为欲查找的目录名。如果使用该命令时,不设置任何参数,则 find 命令将在当前目录下查找子目录与文件。并且将查找到的子目录和文件全部进行显示。 + +find /文件目录.d 就是查找后缀是d的文件 + +**rm** + +rm是用来删除文件的,他又很多的参数,但是同时也是一个很危险的操作,一不小心就会删掉其他东西并且不可恢复 + +建议刚开始接触的时候要进入到目录里面,用文件名来删除指定的文件避免误删 + +用法就是 rm 文件名即可(需要在最后一层文件夹里面用) + +cat 可以查看文件内容 \ No newline at end of file diff --git "a/2022_2021_20\347\272\247js\346\234\237\346\234\253\350\200\203.html" "b/2022_2021_20\347\272\247js\346\234\237\346\234\253\350\200\203.html" deleted file mode 100644 index 7cdb91b407c493eeed5bd5a2a646f096cfcedeae..0000000000000000000000000000000000000000 --- "a/2022_2021_20\347\272\247js\346\234\237\346\234\253\350\200\203.html" +++ /dev/null @@ -1,237 +0,0 @@ - - - - - - - - Document - - - - - - - \ No newline at end of file