学校网站建设基本流程,杭州网站建设科技有限公司,长沙做网站好的公司有哪些,新鸿儒做网站系列文章目录
第一章 JAVA集中学习第一周学习记录(一) 第二章 JAVA集中学习第一周项目实践 第三章 JAVA集中学习第一周学习记录(二) 第四章 JAVA集中学习第一周课后习题 第五章 JAVA集中学习第二周学习记录(一) 第六章 JAVA集中学习第二周项目实践 第七章 JAVA集中学习第二周学…系列文章目录
第一章 JAVA集中学习第一周学习记录(一) 第二章 JAVA集中学习第一周项目实践 第三章 JAVA集中学习第一周学习记录(二) 第四章 JAVA集中学习第一周课后习题 第五章 JAVA集中学习第二周学习记录(一) 第六章 JAVA集中学习第二周项目实践 第七章 JAVA集中学习第二周学习记录(二) 第八章 JAVA集中学习第二周课后习题 第九章 JAVA集中学习第二周学习记录(三) 第十章 JAVA集中学习第二周学习记录(四) 第十一章 JAVA集中学习第三周学习记录(一) 第十二章 JAVA集中学习第三周小组项目开发 第十三章 JAVA集中学习第四周学习记录(一) 第十四章 JAVA集中学习第四周学习记录(二) 第十五章 JAVA集中学习第四周学习记录(三) 第十六章 JAVA集中学习第四周学习记录(四) 第十七章 JAVA集中学习第五周学习记录(一) 文章目录 系列文章目录前言一、DOM文档对象模型1. 获取一个标签对象2. 操作标签对象的属性2.1 操作属性2.2 综合实例——图片移动 3. 事件 二、jQuery1. JavaScript与jQuery区别2. 获得标签对象3. 代码示例3.1 设置表格隔行换色3.2 为表格中的第一行设置单击事件点击后背景颜色变成粉色3.3 获取属性3.4 操作外观3.4.1 第一种方式3.4.2 第二种方式 3.5 结构与事件3.5.1 面包例子3.5.2 图片跳转例子 4. 表单验证 总结 前言
本文我们将讲述 DOM文档对象模型在方法内对控件进行增删改查 jQuery库引入第三方库简化DOM操作 哦以这种方式写前言还好明了嘞以后这么写吧今天心情好人类甄别计划暂时搁置。 一、DOM文档对象模型
DOM是BOM的一个属性对象。 获得标签对象属性文本外观事件
1. 获取一个标签对象
function fun1(){//根据标签Id属性唯一获取该标签对象let obj document.getElementById(div1);alert(obj.innerText);//根据标签name属性获取一组标签对象let objs document.getElementsByName(dname);let obj1 objs[1];alert(obj1.innerText);//根据标签的class属性获取一组标签对象let os document.getElementsByClassName(cdiv);alert(os[0].innerText);//根据标签属性获取一组标签对象let divs document.getElementsByTagName(div);alert(divs[4].innerText);
}2. 操作标签对象的属性
2.1 操作属性
获得属性值标签对象.getAttribute(属性); 设置属性值标签对象.setAttribute(属性, 值);
let img1 document.getElementsByTagName(img)[0];
img1.setAttribute(title,我是img);//键值对
alert(img1.getAttribute(title));2.2 综合实例——图片移动
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascriptfunction demo1(){document.getElementsByTagName(div)[0].style.backgroundColoryellow;}function demo2(){document.getElementsByTagName(div)[0].style.backgroundColorgray;}function demo3(){alert(shubiaoyiru);}function demo4(){alert(shubiaoyichu);}function demo5(){alert(shubiaoyidong);}function demo6(event){let x event.pageX;let y event.pageY;document.getElementsByTagName(span)[0].innerTextx : y;}function demo7(event){let num event.keyCode;//let num event.code;//alert(num);let img document.getElementsByTagName(img)[0];if(num 87){let val img.style.top;let i parseInt(val.substring(0, val.length - 2)) - 50;img.style.topipx;}else if(num 65){let val img.style.left;let i parseInt(val.substring(0, val.length - 2)) - 50;img.style.leftipx;}else if(num 83){let val img.style.top;let i parseInt(val.substring(0, val.length - 2)) 50;img.style.topipx;}else if(num 68){let val img.style.left;let i parseInt(val.substring(0, val.length - 2)) 50;img.style.leftipx;}return false;}/script/headbodydiv styleheight: 300px; width: 300px; background-color: red;display: inline-block;onclickdemo1()ondblclickdemo2()onmousemovedemo6(event)/divspan /spaninput typetext onkeydownreturn demo7(event) /img srcimg/OIP-C.jpg styleheight: 100px; width: 100px;position: absolute;/*设置图片绝对定位*/top: 500px;left: 300px;/a hrefhttps://www.baidu.com/s?wd蝙蝠侠 onclickdemo10()dianji/ascript typetext/javascriptfunction demo10(){return false;}/script/body
/html
3. 事件
事件事件类型事件对象阻止事件
事件对象描述当前正在进行的事件存储该事件内的所有信息的对象就是事件对象
鼠标事件单机、双击、鼠标移动、鼠标移入、鼠标移出。
键盘事件按下、抬起。
表单事件获得焦点事件鼠标在点、失去焦点事件、内容更改事件、表单提交事件。
加载事件body标签的加载
补充 JavaScript代码所写的位置 1、可以直接放在标签里 2、当前页面里 3、放在外部js文件里用src引入源文件进行使用
二、jQuery
是JavaScript的函数库之一对JavaScript进行了封装。将常用、复杂的操作进行函数化封装直接调用降低了使用的难度能够大幅度降低使用JS的难度。可以简化DOM操作
1. JavaScript与jQuery区别
1、js选择器功能弱jQuery选择器强 2、DOM操作繁琐jQuery对DOM进行封装 3、浏览器兼容性不好jQuery对浏览器兼容性好 4、动画能力弱jQuery动画能力强 5、体积小 6、事件处理机制可靠 7、使用隐式迭代简化编程 8、丰富的插件支持
2. 获得标签对象
$(“选择器”)直接获得所有符合的标签对象 $(“html代码”)结构 JavaScript的对象要通过jQuery进行 let obj document.getElementsByTagName(“div”)[0]; $(obj).css(“height”, “500px”);
jQuery的对象要通过JavaScript进行
设计名 因为使用jQuery我们先要让其他控件提前就绪所以我们所有jQuery代码都写在$(document).ready()里。
3. 代码示例
3.1 设置表格隔行换色
$(body).css(background-color, yellow);
$(tr:even).css(background-color,blue);
$(tr:odd).css(background-color,red); 3.2 为表格中的第一行设置单击事件点击后背景颜色变成粉色
$(tr:even).click(function(){$(this).css(background-color,aqua);});$(tr:odd).click(function(){$(this).css(background-color,orangered);});jQuery要保证窗体加载后在做其他操作所以方法代码都写在document.ready内 操作属性
3.3 获取属性
//获取属性
alert($(img).attr(src));
alert($(input).attr(value));//最好不用
alert($(input).val());//用这个3.4 操作外观
3.4.1 第一种方式
let obj document.getElementsByTagName(div)[0];
$(obj).css(height, 500px);
$(obj).css(width, 300px);
$(obj).css(background-color, red);
$(div)[0].style.backgroundColor red;3.4.2 第二种方式
//设置属性
style typetext/css.a{/*类选择器*/height500pxwidth300px;background-colorazure;}
/style
//使用更改
(obj).addClass(a);3.5 结构与事件
3.5.1 面包例子
放到一个例子里讲这个例子是算面包总价并且我们可以删除面包、添加面包使用jQuery来编写。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascript src../js/jquery-1.8.3.js /scriptscript typetext/javascript$(document).ready(function(){var sum 0;$([valuebuy]).click(function(){let mon parseInt(Math.random()*10);$(input typetext value mon/input typebutton valuedelete/br /).appendTo($(div).last());summon;$(#sds).text(sum);});$(document).on(click, [valuedelete], function(){sum - $(this).prev().val();$(this).prev().remove();$(this).next().remove();$(this).remove();$(#sds).text(sum);});});/script/headbodyinput typebutton valuebuy /divsum is/divdiv idsds/divdiv/div/body
/html3.5.2 图片跳转例子
实现不同图片跳转不同连接
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascript src../js/jquery-1.8.3.js /scriptscript typetext/javascriptvar num 3;$(document).ready(function(){$([valuestart]).click(close1)});function close1(){window.setInterval(function(){num--;if(num 10){$(#pio).attr(src, ../img/R-C.jpg);$(#1ds).text(num);}else if(num 0){$(#pio).attr(src, ../img/OIP-C.jpg);$(#1ds).text(num);num 20;$(#1ds).text(num);}else$(#1ds).text(num);}, 1000);$(#pio).click(function(){if(num10)window.location.hrefhttps://www.baidu.com/s;elsewindow.location.hrefhttps://www.so.com/s;});} /script/headbodyinput typeimage idpio altpic styleheight: 150px;width: 150px; src../img/R-C.jpg titlesuperman /br /input typebutton valuestart/br /div id1ds3/div/body
/html4. 表单验证
直接上代码其实跟普通的表单操作没什么区别
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascript src../js/jquery-1.8.3.js /scriptscript typetext/javascript$(document).ready(function(){//1验证员工编号非空长度必须为6必须前三项是数字后三项由abc组成$([nameempno]).blur(ckempno);function ckempno(){let val $(this).val();let reg /^\d{3}[a-cA-C]{3}$/;if(reg.test(val)){$(this).next().css(color,green).text(✓);return true;}else{$(this).next().css(color,red).text(员工编号必须是6位3位数字3位abc);return false;}}//2验证员工姓名是2-10位汉字$([nameename]).blur(ckename);function ckename(){let val $(this).val();let reg/^[\u4e00-\u9fa5]{2,10}$/;if(reg.test(val)){$(this).next().css(color,green).text(✓);return true;}else{$(this).next().css(color,red).text(员工姓名必须是2-10位汉字);return false;}}//3验证邮箱$([nameemail]).blur(ckemail);function ckemail(){let val $(this).val();let reg/^\w([-.]\w)*\w([-.]\w)*\.\w([-.]\w)*$/;if(reg.test(val)){$(this).next().css(color,green).text(✓);return true;}else{$(this).next().css(color,red).text(邮箱格式实例123456123.com);return false;}}//4验证工资$([namesal]).blur(cksal);function cksal(){let val $(this).val();if(Number(val)0){$(this).next().css(color,green).text(✓);return true;}else{$(this).next().css(color,red).text(工资格式不正确);return false;}}//5验证下拉列表不能选择第一项$([namemgr]).change(ckmgr);function ckmgr(){//selectedIndex 是下拉列表中选中的option下标是多少//或者$(this).val()!-1if($(this)[0].selectedIndex ! 0){$(this).next().css(color,green).text(✓);return true;}else{$(this).next().css(color,red).text(必须选择一个实际存在的经理编号);return false;}}//6验证复选框选两个以上$([typecheckbox]).mouseout(ckbox);function ckbox(){let arr $([typecheckbox][nameplanet]);let count 0;for(let i 0; i arr.length; i){if(arr[i].checked){count;}}if(count 2){$(#planet).css(color,green).text(✓);return true;}else{$(#planet).css(color,red).text(必须选择两个星球);return false;}}//验证入职时间$([typedate]).mouseout(ckhiredate);function ckhiredate(){if($(this).val()!){$(this).next().css(color,green).text(✓);return true;}else{$(this).next().css(color,red).text(必须选择一个日期);return false;}}//验证提交按钮$([nameck]).click(ckagree);$(form).submit(cksubmit);//验证是否需要阻止提交function cksubmit(){return ckempno() ckename() ckemail() cksal() ckmgr() ckbox() ckhiredate();}}); //验证条例function ckagree(){let bool $([nameck]).prop(checked);if(bool)document.getElementById(sub).disabledfalse;else document.getElementById(sub).disabledtrue;}/script/headbodyform actionhttps://www.baidu.com/s methodget 员工编号input typetext nameempno /span/spanbr /员工姓名input typetext nameename/span/spanbr /岗位名称input typeradio namejob value1 checked/销售input typeradio namejob value2 /开发input typeradio namejob value3 /运维br /经理编号select namemgroption value-1 disabled---请选择---/optionoption value73887388/optionoption value7312 selected7312/optionoption value75287528/optionoption value71287128/option/selectspan/spanbr /你最喜欢的星球input typecheckbox nameplanet value1/地球input typecheckbox nameplanet value2/气球input typecheckbox nameplanet value3/太阳input typecheckbox nameplanet value4/ൠ♄§星span idplanet/spanbr /入职时间input typedate namehiredate /span/spanbr /邮箱input typetext nameemail /span/spanbr /工资价钱input typetext namesal /span/spanbr /条例input typecheckbox nameck /我已阅读该网站条例并同意条例内容br /input typesubmit idsub value表单验证 disabled//form/body
/html总结
本文介绍了 1、使用DOM进行对控件进行操作 2、使用jQuery改善DOM操作 以及例子 1、图片移动 2、面包总额 3、不同图片跳转链接 4、使用jQuery进行表单验证。
我们星球上有一种特殊的生物他的五脏六腑都聚集在一起呈球状从肉球中伸出来很多触手每个触手上都有一个器官他的触手尖端由干细胞构成如果某个特殊功能的触手被砍掉了另一个触手尖端上的干细胞会快速分化代替原来触手的功能同时原来的触手也会慢慢长回来。他在我们ൠ♄§星的名称是♇〒﹞₪翻译成中音类似’古咯斯巴’。
