From 6013c1fb907960d47d7c83d4a27a0ad03a2f123b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BD=99=E9=87=91=E6=98=9F?= <3441777097@qq.com> Date: Tue, 29 Nov 2022 13:57:26 +0800 Subject: [PATCH 1/2] 10 --- ...\204\345\222\214\345\214\205\350\243\205\347\261\273.md" | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git "a/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/10.13-\346\225\260\347\273\204\350\247\243\346\236\204\345\222\214\345\214\205\350\243\205\347\261\273.md" "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/10.13-\346\225\260\347\273\204\350\247\243\346\236\204\345\222\214\345\214\205\350\243\205\347\261\273.md" index 65b6682..ccbc677 100644 --- "a/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/10.13-\346\225\260\347\273\204\350\247\243\346\236\204\345\222\214\345\214\205\350\243\205\347\261\273.md" +++ "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/10.13-\346\225\260\347\273\204\350\247\243\346\236\204\345\222\214\345\214\205\350\243\205\347\261\273.md" @@ -34,7 +34,7 @@ console.log(obj.sign); ```javascript const arr1 = [1, 23, 3, 4, 5, 6] let [aa, cc] = arr1 -console.log(aa, cc); 1 23 +console.log(aa, cc); //1 23 ``` ### 对象解构 @@ -54,8 +54,8 @@ let { name: personName, age: personAge } = student let { name, age } = student console.log(name, age); //Boolean() -var i = new Boolean(); -i.d = false; +var istrue = new Boolean(); +istrue.d = false; let { d } = istrue; console.log(d); ``` -- Gitee From 385662d871363c699598f001d14499fb3cf9da2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BD=99=E9=87=91=E6=98=9F?= <3441777097@qq.com> Date: Sun, 4 Dec 2022 23:19:27 +0800 Subject: [PATCH 2/2] 10 --- .../10.10-\346\225\260\347\273\204.md" | 4 +- ...7-\344\272\213\344\273\266\344\270\213.md" | 60 ++++++++++ .../11.21-JQuery\345\210\235\345\247\213.md" | 106 ++++++++++++++++++ .../11.22-JQuery\346\223\215\344\275\234.md" | 91 +++++++++++++++ .../11.23-JQuery\344\272\213\344\273\266.md" | 76 +++++++++++++ ...13\344\273\266\345\257\271\350\261\241.md" | 49 ++++++++ .../11.28-jQuery\346\226\271\346\263\225.md" | 82 ++++++++++++++ .../\347\254\224\350\256\260/11.29-Ajax.md" | 60 ++++++++++ ....30-JQueryAjax\346\226\271\346\263\225.md" | 72 ++++++++++++ .../12.1-JQueryPromise.md" | 42 +++++++ 10 files changed, 640 insertions(+), 2 deletions(-) create mode 100644 "10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.17-\344\272\213\344\273\266\344\270\213.md" create mode 100644 "10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.21-JQuery\345\210\235\345\247\213.md" create mode 100644 "10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.22-JQuery\346\223\215\344\275\234.md" create mode 100644 "10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.23-JQuery\344\272\213\344\273\266.md" create mode 100644 "10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.24-JQuery\344\272\213\344\273\266\345\257\271\350\261\241.md" create mode 100644 "10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.28-jQuery\346\226\271\346\263\225.md" create mode 100644 "10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.29-Ajax.md" create mode 100644 "10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.30-JQueryAjax\346\226\271\346\263\225.md" create mode 100644 "10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/12.1-JQueryPromise.md" diff --git "a/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/10.10-\346\225\260\347\273\204.md" "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/10.10-\346\225\260\347\273\204.md" index ddf7c6d..3d82833 100644 --- "a/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/10.10-\346\225\260\347\273\204.md" +++ "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/10.10-\346\225\260\347\273\204.md" @@ -13,7 +13,7 @@ counts:截取字符串的个数 6.查看是否字符串中是否包含includes() ``` -#### 数据类型转换 +数据类型转换 ```javascript 将字符串转为整型:parseInt() @@ -34,7 +34,7 @@ console.log(a); var arr = [1,2,3,4,5,6] 1.join():把数组所有元素放入一个字符串 var str = arr.join('#') -2.concat(): +2.concat(): const firstList = [1, 2, 3]; const secondList = [4, 5, 6]; const thirdList = firstList.concat(secondList); diff --git "a/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.17-\344\272\213\344\273\266\344\270\213.md" "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.17-\344\272\213\344\273\266\344\270\213.md" new file mode 100644 index 0000000..0b4271d --- /dev/null +++ "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.17-\344\272\213\344\273\266\344\270\213.md" @@ -0,0 +1,60 @@ +获得焦点和失去焦点 + +```html +
+ +``` + +```js +var inp = document.getElementsByTagName('input')[0]; +var span = document.getElementById('sp'); +inp.onfocus = () => { + span.innerHTML = '获得焦点'; +} +inp.onblur = ()=>{ + span.innerHTML = '失去焦点'; +} +``` + +阻止默认行为 + +```js +百度一下 +var a = document.querySelector('a'); +a.onclick = (e) => { + var event = e || window.event; + return false; //阻止跳转 +} +function fn(e) +{ + var event = e || window.event; + event.perventDefault(); +} +a.addEventListener('click',fn); +``` + +DOM0 + +```javascript + +//双击 +span.ondblclick = ()=>{ +console.log(111); +} +``` + +DOM2 + +```javascript +function fn(){ + console.log('111'); +} +if(span.addEventListener){ + //DOM + span.addEventListener('dblclick',fn); +}else{ + //ie + span.attachEvent('ondblclick',fn); +} +``` + diff --git "a/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.21-JQuery\345\210\235\345\247\213.md" "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.21-JQuery\345\210\235\345\247\213.md" new file mode 100644 index 0000000..594d2b1 --- /dev/null +++ "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.21-JQuery\345\210\235\345\247\213.md" @@ -0,0 +1,106 @@ +## JQuery初始 + +DOM对象转成Jquery对象 + +```javascript +
这是一个div
+var div = $('div'); +console.log($(div)); +``` + +Jquery对象转DOM对象 + +```javascript +var divs = $('div')[0] +console.log(divs); +``` + +## JQuery选择器 + +① 层次选择器 + +```html +
层次选择器 +
父选择器 +
子选择器
+ + +
+

+
选择器2 +
选择器2中的div +
+
+
+``` + +```javascript +// 后代选择器:会获取(所有后代)的div元素对象. +console.log($('#parent div')); +// 子代: > 只获取子代，子代之后不再获取 +console.log($('#parent>div')); +// 相邻选择器 : + 紧挨着的 +console.log($('#color+p')); +// 同辈选择器 ： ~ +console.log($('.blue~img')); +``` + +② 表单选择器 + +```html +
+ + 姓名:
+ 密码:
+ 年龄: 宝宝 + 成年人
+ 爱好: 唱歌 + 跳舞 + rap
+ 来自:
+ 简介:
+ + + +
+``` + +```javascript +//获取所有的表单元素 +console.log($('input')); +//获取按钮 +console.log($(':button')); +//获取单选选中的属性值 +//将居住地弹窗出来 +function select() { + if ($(':selected').val() != -1) { + alert($(':selected').html()); + } +} +``` + +③ 属性选择器 + +```html + +``` + +```javascript +//属性选择器 +console.log($('li[class]')); +console.log($('li[class="select"]')); +//将class=se开头的文本颜色设置红色 +$('li[class^="se"]').css('color','red'); +``` + diff --git "a/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.22-JQuery\346\223\215\344\275\234.md" "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.22-JQuery\346\223\215\344\275\234.md" new file mode 100644 index 0000000..39a2360 --- /dev/null +++ "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.22-JQuery\346\223\215\344\275\234.md" @@ -0,0 +1,91 @@ +## 操作属性 + +属性分类： + +① 固有属性:标签本身就有的属性 返回值:checked selected disabled + +② 自定义属性:用户自己定义的属性 + +attr()和prop()的区别: + +① pro获取返回的值类型是bool类型 返回true或false + +② 自定义类型，prop获取不到，attr可以 + +```html + + +``` + +```javascript +// 获取属性 +console.log($('#aa').attr('checked'));//checked +console.log($('#aa').prop('checked')); //true +console.log($('#aa').prop('names')); +console.log($('#aa').attr('names')); +// 设置属性attr(属性名，属性值) +$('#aa').attr('checked','checked'); +$('#aa').attr('aa','aabbcc'); +移除属性 +$('#aa').removeAttr('id'); +$('aa').removeAttr('name'); +``` + +## 操作元素的样式 + +```html + +
背景天蓝色
+
红色
+
背景天蓝色
+``` + +```javascript +//修改、设置样式 +console.log($('#conBlue').attr('class','green')); +//增加样式 +console.log($('#conBlue').addClass('pink')); +//增加多个css({'样式1':'值1','样式2':'值2'}) +$('#conBlue').css({'class':'pink','font-family':'楷体'}); +//移除样式 : removeClass(class) +$('#remove').removeClass('blue'); +``` + +## 获取文本 + +```html +
+

龙岩

+
+
+

龙岩

+
+
+ +泡面 +``` + +```javascript +console.log($('#html').html()); +console.log($('#text').text()); +//获取表单里的值 +console.log($('#oop').val()); +``` + diff --git "a/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.23-JQuery\344\272\213\344\273\266.md" "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.23-JQuery\344\272\213\344\273\266.md" new file mode 100644 index 0000000..d6b9344 --- /dev/null +++ "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.23-JQuery\344\272\213\344\273\266.md" @@ -0,0 +1,76 @@ +## JQuery事件 + +ready()事件 + +```javascript +//自动触发的ready事件 +$(document).ready( + function (){ + alert('dom节点树已经加载完毕'); + } +) +``` + +mouseover()和mouseout()事件 + +```javascript +//链式调用 +$(function () { + // 鼠标移入 + $('div').mouseover( + function () { + $(this).css('color', 'red'); + } + ).mouseout( // 鼠标移出 + function () { + $(this).css('color', 'white'); + } + ) +}) +``` + +mousedown()和mouseup()事件 + +```javascript +$(function () { + // 鼠标按下 + $('div').mousedown( + function () { + $(this).css('background-color', 'red'); + } + ).mouseup( // 鼠标松开 + function () { + $(this).css('background-color', 'deepskyblue'); + } + ) +}) +``` + +change()事件 + +```javascript +$(function () { + $(':radio').change( + function () { + var value = $(this).val(); + $('p').text('你已经选中了:'+value); + } + ) +}) +``` + +focus()和blur()事件 + +```javascript +$(function () { + $(':text').focus(function () { + console.log('获得焦点'); + }) +}) +$(function () { + $(':text').blur(function () { + console.log('失去焦点'); + }) +}) +``` + diff --git "a/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.24-JQuery\344\272\213\344\273\266\345\257\271\350\261\241.md" "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.24-JQuery\344\272\213\344\273\266\345\257\271\350\261\241.md" new file mode 100644 index 0000000..4e6eb16 --- /dev/null +++ "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.24-JQuery\344\272\213\344\273\266\345\257\271\350\261\241.md" @@ -0,0 +1,49 @@ +## JQuery事件对象 + +事件对象的产生 + +```javascript +$(function () { + $('#btn').click( + function (event) { + console.log('btn'); + } + ) +}) +$(function () { + $('#div').click( + function (event) { + console.log('div触发了'); + } + ) +}) +``` + +off() + +```javascript +//解绑事件 不带参时默认全部事件解绑 +$(function () { + $('#btn').click( + function () { + alert('点击了'); + } + ).dblclick( + function () { + alert('双击'); + } + ).off(); +}) +``` + +one() + +```javascript +// 当前元素只触发一次该事件one(事件类型,function) +$(function () { + $('#btn').one('click',function () { + alert('点击'); + }) + }) +``` + diff --git "a/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.28-jQuery\346\226\271\346\263\225.md" "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.28-jQuery\346\226\271\346\263\225.md" new file mode 100644 index 0000000..33dc604 --- /dev/null +++ "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.28-jQuery\346\226\271\346\263\225.md" @@ -0,0 +1,82 @@ +## jQuery方法 + +下标过滤:eq() + +```javascript +$().eq(n) +``` + +判断过滤:is() + +```javascript +$().is(selector) +``` + +反向过滤:not() + +```javascript +$().not(selector或fn) +``` + +全选/反选 + +```html +
+

+ + + +
+``` + +```javascript +$('#selectAll').change(function () { + var bool = $(this).is(':checked'); + console.log(bool); + if (bool) { + //将下面的checkbox全变为选中状态(checked) true/false attr prop + $("[class='fruit']").prop("checked", true); + } else { + var $notChecked = $('[class=fruit]').not(':checked'); + $("[class='fruit']").prop("checked", false); + $notChecked.prop('checked', true); + } + }) +``` + +键码值 + +![](https://gitee.com/yu-jinxing/cartographic-bed/raw/master/img/1-2022-12-422:38:38.png) + +![](https://gitee.com/yu-jinxing/cartographic-bed/raw/master/img/2-2022-12-422:38:42.png) + + + +![](https://gitee.com/yu-jinxing/cartographic-bed/raw/master/img/3-2022-12-422:38:50.png) + +![](https://gitee.com/yu-jinxing/cartographic-bed/raw/master/img/4-2022-12-422:38:52.png) + +```javascript +window.onkeydown = function (e) { + if(e.keyCode == 13 || e.keyCode == 108){ + alert('按下了enter键'); + } +} +``` + +## 元素 + +parent():找父级 + +parents():找所有父级 + +children():找当前元素的"子元素" + +find():找当前元素的"后代元素" + +prev():找某个元素和前一个"相邻"的兄弟元素 + +prevAll():找某个元素前面“所有”兄弟元素 + +index():获取当前jQuery对象集合中“指定元素”的索引值 + diff --git "a/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.29-Ajax.md" "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.29-Ajax.md" new file mode 100644 index 0000000..4cac2fd --- /dev/null +++ "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.29-Ajax.md" @@ -0,0 +1,60 @@ +## Ajax + +```javascript + +//ajax:异步 无刷新 +function HTTP(method, file, bool) { + var n = 'zj'; + // 1.创建http请求对象 + var oAjax = new XMLHttpRequest(); + // 2.请求行设置 + oAjax.open(method, file, true); + // 3.发送一个请求 + oAjax.send(); + // 4. + oAjax.onreadystatechange = function() { + if (oAjax.readyState == 4) { + if (oAjax.status == 200) { + var obj = JSON.parse(oAjax.responseText); + console.log(obj); + } + } + } +} +HTTP('GET', "new.json", true); +``` + +```json +{ + "No1": { + "username": "周飘", + "age": 18, + "gender": "female" + }, + "No2": { + "username": "雅芸", + "age": 17, + "gender": "female" + } +} +``` + +```javascript +//JSON.stringify(obj):将对象转成json数据格式 +const arr = [1, 2, 3, 4, 5]; +var obj = { + name: '周飘', + age: 18 +} +var json = JSON.stringify(obj); +//JSON.parse(json):将json转成对象 +var jsonObj = JSON.parse(json); +//遍历 +console.log(Object.prototype); +//jsonObj is not iterable:不可迭代对象 +for (let e in jsonObj) { + console.log(e + ' ' + jsonObj[e]); +} +console.log(jsonObj); +``` + diff --git "a/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.30-JQueryAjax\346\226\271\346\263\225.md" "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.30-JQueryAjax\346\226\271\346\263\225.md" new file mode 100644 index 0000000..72353b6 --- /dev/null +++ "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/11.30-JQueryAjax\346\226\271\346\263\225.md" @@ -0,0 +1,72 @@ +## JQueryAjax + +```html + + + + + +``` + +$.get() + +```javascript +$('button').eq(0).click( + function () { + $.get('data.json',{a:100,b:200},function (data) { + console.log(data); + },'json'); + } +) +``` + +$.post() + +```javascript +$('button').eq(1).click( + function () { + $.post('data.json',{a:100,b:200},function (data) { + console.log(data); + },'json'); + } +) +``` + +getJSON() + +```javascript +$('button').eq(2).click( + function () { + $.getJSON('data.json',function (data) { + console.log(data); + }) + } +) +``` + +getScript:动态引入js文件 + +```javascript +$('button').eq(3).click( + function () { + $.getScript('test.js'); + } +) +``` + +$.ajax() + +```javascript +$('button').eq(4).click( + function () { + $.ajax({ + url:'data.json', + type:'get', + data:{a:100,b:200}, + success:(data) => console.log(data), + error:()=> console.log('请求失败') + }) + } +) +``` + diff --git "a/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/12.1-JQueryPromise.md" "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/12.1-JQueryPromise.md" new file mode 100644 index 0000000..b8340d8 --- /dev/null +++ "b/10\344\275\231\351\207\221\346\230\237/\347\254\224\350\256\260/12.1-JQueryPromise.md" @@ -0,0 +1,42 @@ +## promise + +```javascript +// PromiseState(在每个promise对象中，状态只会改变一次)：pending准备中 +// fulfilled（成功） ：调用了resolve函数，将状态改为成功 +// rejected（失败）：调用了reject函数，将状态改为失败 +PromiseResult:接收resolve或者reject中的参数 +const p = new Promise((resolve, reject) => { + // resolve('这是成功'); + reject('这是失败'); +}).then(data =>{ + console.log('成功then调用'); + return 123 + //catch:捕获异常 +}).catch( + function (e) { + console.log(e); + } +) +console.log('1111111111111'); +//then(成功时调用的函数,失败时调用的函数),返回值也是一个promise对象,pending +console.log(p) +``` + +```javascript +//get +//回调地狱 +$('div').eq(0).one('mousemove', function () { + $.get('data.json', function (data) { + // console.log(data.username); + //对象解构 username='周飘' + const { username } = data; + $.get('data1.json', function (data1) { + const contact = data1[username] + $.get('data2.json', function (data2) { + console.log(username + ':' + data2[contact]); + }) + }) + }) +}) +``` + -- Gitee