diff --git "a/06\351\231\210\346\242\205\351\246\231/\344\275\234\344\270\232/2022.11.30\344\275\234\344\270\232.md" "b/06\351\231\210\346\242\205\351\246\231/\344\275\234\344\270\232/2022.11.30\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..5e7b01cdd46d6522ed16e95b53d05b70a0bbea1c --- /dev/null +++ "b/06\351\231\210\346\242\205\351\246\231/\344\275\234\344\270\232/2022.11.30\344\275\234\344\270\232.md" @@ -0,0 +1,222 @@ +2022.11.30作业 + + + + + + 注册表单验证 + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
用户注册
用户名: + 用户名不能为空 +
密码: + 密码不能为空 +
密码确认: + 请输入相同的密码 +
性别: + 男 + 女 + 请选择性别 +
专业: + + 请选择你的专业 +
爱好: + 抽烟 + 喝酒 + 打游戏 + 烫头发 + 足球 + 篮球 + 必须选择一个爱好 +
自我介绍: + + 自我介绍不能为空 +
  + + +
+
+ + + + +\ No newline at end of file \ No newline at end of file diff --git "a/06\351\231\210\346\242\205\351\246\231/\344\275\234\344\270\232/2022.12.01\344\275\234\344\270\232.md" "b/06\351\231\210\346\242\205\351\246\231/\344\275\234\344\270\232/2022.12.01\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..4859217b38d7d4ffae505b876b8f67be235d845e --- /dev/null +++ "b/06\351\231\210\346\242\205\351\246\231/\344\275\234\344\270\232/2022.12.01\344\275\234\344\270\232.md" @@ -0,0 +1,29 @@ +2022.12.01作业 + + + + + + + + + + + + + + + + \ No newline at end of file diff --git "a/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.28\346\223\215\344\275\234\345\261\236\346\200\247.md" "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.28\346\223\215\344\275\234\345\261\236\346\200\247.md" new file mode 100644 index 0000000000000000000000000000000000000000..75aa1698afc379960b69acad98228b553f54d6f9 --- /dev/null +++ "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.28\346\223\215\344\275\234\345\261\236\346\200\247.md" @@ -0,0 +1,76 @@ +2022.11.28操作属性 + +JQuery操作属性笔记 + +属性分类分为两种: + +1.固有属性 + +固有属性-->返回值是bool类型的属性(checked, selected, disabled....): true或false: + +2.自定义属性 + +查询固有属性方法attr(属性名) + +``` +console.log($('#aa').attr('name')); +``` + +返回是bool类型的属性:prop + +``` +console.log($('#aa').attr('checked')); //undefined +console.log($('#aa').prop('checked')); //false +``` + +对于自定义属性:只有attr才能定义属性,prop + +``` + $('#aa').attr('age',16); + $('#bb').attr('checked',true); +``` + +移除属性: + +``` +$('#aa').removeAttr('age'); +``` + +操作属性样式: + +``` +$('#conRed').attr('class','green'); +$('#conBlue').attr('class','green'); +$('#conBlue').addClass('pink'); +$('#conRed').addClass('red'); + + css(样式，样式值) + css({样式1:样式值, 样式2:样式值}) + $('#conRed').css('background','cyan'); + $('#conRed').css('color','red'); + $('#conRed').css({"background":"cyan", "color":"red"}) +``` + +操作属性内容: + +``` + +
+ 龙岩 + +
+ + + +``` \ No newline at end of file diff --git "a/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.30\344\272\213\344\273\266\345\257\271\350\261\241.md" "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.30\344\272\213\344\273\266\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..c8d52ce8d49f4cf3708d30a35c091facb9a250a3 --- /dev/null +++ "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.30\344\272\213\344\273\266\345\257\271\350\261\241.md" @@ -0,0 +1,28 @@ +2022.11.30事件对象 + +合成事件hover + +``` +$().hover(fn1, fn2) +``` + +一次事件 + +``` +$(selector).one(type, fn) //只能使用一次 +``` + +阻止事件冒泡：event.stopPropagation() + +阻止默认行为：event.preventDefault() + +##### event.type + +在jQuery中，我们可以使用event对象的type属性来获取事件的类型。 + +##### event.which + +在jQuery中，我们可以使用event对象的which属性来获取单击事件中鼠标的左、中、右键。 + +说明： +event.which会返回一个数字，其中1表示左键，2表示中键，3表示右键。 \ No newline at end of file diff --git "a/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.12.01jQuery\346\226\271\346\263\225.md" "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.12.01jQuery\346\226\271\346\263\225.md" new file mode 100644 index 0000000000000000000000000000000000000000..865b01757c2ec75cc40dc65920575ffada2db8bd --- /dev/null +++ "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.12.01jQuery\346\226\271\346\263\225.md" @@ -0,0 +1,124 @@ +2022.12.01jQuery方法 + +jquery方法笔记 + +1.eq()：跟据下标找元素,从0开始 + +``` +$('button').eq(2).click(()=>alert('按钮3')); +``` + +2.each(index,element):表示遍历jQuery对象集 中的所有元素对象 + +``` +$('button').each( + function (index) { + if(index==2){ + $(this).click(()=>{alert('按钮')}); + } + + } + ) +``` + +3.detach():保留事件 + +``` +var $btn = $('button').eq(2).detach(); + $('button').eq(1).click(function () { + $(this).after($btn); + }) +``` + +4.clone(bool):返回一个复制元素,默认是false：只克隆元素。不克隆事件，参数为bool=true:表示将事件一起复制, + +``` +$('button').eq(4).click( + function () { + var $btn3 = $('button').eq(2).clone(true); + $(this).after($btn3); + } + ) +``` + +5.replaceWith():替换jQuery对象， + +``` +$('button').eq(3).replaceWith($('')); +``` + +6.hasClass(属性值):查找jQuery对象中的class有没有该属性值 + +``` +console.log($('div').eq(0).hasClass('blue')); +``` + +7.全选 + +``` +$('#selectAll').click( + function () { + //点击全部选中 + if($(this).is(':checked')){ + $('[class=fruit]').prop('checked',true); + }else{ + $('[class=fruit]').prop('checked',false); + } + + } + ) +``` + +8.反选 + +``` +$('#selectAll1').click(function () { + if($(this).is(':checked')){ + console.log('111'); + $('[class="fruit"]').each( + function () { + if($(this).is(':checked')){ + $(this).prop('checked',false); + }else{ + $(this).prop('checked',true); + } + } + ) + } + }) +``` + +9.反向过滤not():去除符合条件的 + +``` +$('button').not('[class="btn"]').click( + function () { + alert('剩下的按钮点击') + } + ) +``` + +10.filter():筛选符合条件的 + +``` +$('button').filter('[class="btn"]').click( + function () { + alert('剩下的按钮点击') + } + ) +``` + +11.has( ):查找子代中是否有该元素，如果有，为父元素绑定事件 + +``` +$('.btn1').click( + function (e) { + e.stopPropagation(); + } + ) + $('div').eq(0).has('[class="btn2"]').click( + function () { + alert('点击') + } + ); +``` \ No newline at end of file diff --git "a/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.12.02Ajax.md" "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.12.02Ajax.md" new file mode 100644 index 0000000000000000000000000000000000000000..a0282216ebf3dad71142f00a942b05cd6a3b517c --- /dev/null +++ "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.12.02Ajax.md" @@ -0,0 +1,55 @@ +2022.12.02Ajax + +为什么使用Ajax + +一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互 +使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载 + +AJAX 的优缺点 +不需要插件的⽀持，原⽣ js 就可以使用 +用户体验好（不需要刷新页面就可以更新数据） +减轻服务端和带宽的负担 +缺点：搜索引擎的支持度不够 + +http请求 +（1）创建对象；XMLHttpRequest() +（2）请求设置；open("GET","路径",true) +（3）发送请求；send() +var newAj=new XMLHttpRequest(); + newAj.open("GET","json练习.json",true); + newAj.send(); + newAj.onreadystatechange=function(){ + if (newAj.readyState==4) { + if (newAj.status==200) { + var obj=JSON.parse(newAj.responseText); + console.log(obj); + } + } + } +三，JSON与对象之间的转换 +1，JSON.stringify(obj):将对象转成json数据格式 +2，JSON.parse(json):将json转成对象 + + + +1，GET方法；传送数据量小，处理效率高，安全性低，会被缓存 +send()中不需要添加任何参数,因为在连接服务器的时候就已经发送 +get请求就不必要设置 xhr.setRequestHeader(header,value) + +2，post方法;传送数据量大，处理效率低，安全性高，不会被缓存 +send()中需要添加参数，建议设置请求头 +参数可以是null或者xhr.send()|send(带有参数的)post请求在传递值的情况下必须 设置 xhr.setRequestHeader(header,value) + +3.响应数据处理；将返回的json类型的数据转换成对象 \ No newline at end of file