宁波做网站皆选蓉胜网络php网站架设教程

宁波做网站皆选蓉胜网络,php网站架设教程,wordpress php 开发,百度搜索排名规则记录在听黑马课的时候的笔记以及课堂上练习的代码#xff0c;文章图源于我在听课的时候所截的屏#xff0c;所以有些不清晰#xff0c;请见谅。下面是课程链接#xff0c;可点击自行跳转。 【黑马程序员JavaWeb开发教程#xff0c;实现javaweb企业开发全流程#xff08;…记录在听黑马课的时候的笔记以及课堂上练习的代码文章图源于我在听课的时候所截的屏所以有些不清晰请见谅。下面是课程链接可点击自行跳转。【黑马程序员JavaWeb开发教程实现javaweb企业开发全流程涵盖SpringMyBatisSpringMVCSpringBoot等】https://www.bilibili.com/video/BV1m84y1w7Tb/?share_sourcecopy_webvd_sourced521b664e1113402904fa9336bd1d0ac目录介绍引入方式基础语法书写语法变量数据类型运算符函数对象Array数组字符串JSONBOMDOM事件监听Vue常用指令案例生命周期介绍引入方式JS的内部脚本和外部脚本实现!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS引入方式演示/title !-- 内部脚本 -- !-- script alert(hello JS!); /script -- !-- 外部脚本 -- script srcjs/demo.js/script /head body /body /html !--demo.js-- alert(hello JS!);基础语法书写语法JS三种输出!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS基础语法输出语句/title /head body script /* alert(Hello,JS!); */ //浏览器弹出警告框 window.alert(Hello,JS!); //写入HTML在浏览器中展示 document.write(Hello,JS!); //写入浏览器控制台 console.log(Hello,JS!); /script /body /html变量变量的定义方式!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS基础语法变量/title /head body script /* var a 10; //使用var关键字声明变量a并赋值为10 a 张三; //变量a重新赋值为字符串张三 alert(a); //弹出警告框显示变量a的值 */ //作用域比较大为全局变量可以重复定义的 /* { var a 20; var a 李四; } alert(a); //弹出警告框显示变量a的值 */ //let 局部变量不能重复定义 /* { let b 30; //let b 王五; //报错不能重复定义变量b alert(b); //弹出警告框显示变量b的值 } */ //const 声明常量不能修改 const c 40; c 50; //报错不能修改常量c的值 alert(c); //弹出警告框显示常量c的值 /script /body /html数据类型运算符JS数据类型!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS基础语法数据类型/title /head body script //原始数据类型 alert(typeof 3);//number 数字类型 alert(typeof 3.14);//number 数字类型 alert(typeof A);//string 字符串类型 alert(typeof Hello);//string 字符串类型 alert(typeof true);//boolean 布尔类型 alert(typeof false);//boolean 布尔类型 alert(typeof null);//object 对象类型特殊的原始数据类型表示空值 var a ; alert(typeof a);//undefined 未定义类型 /script /body /htmlJS运算符!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS基础语法运算符/title /head body script // var age 20; // var _age 20; // var $age 20; // alert(age _age);//true // alert(age _age);//false // alert(age $age);//true // 类型转换 - 其他类型转为数字 alert(parseInt(12)); //12 alert(parseInt(12A45)); //12 alert(parseInt(A45)); //NaN // 类型转换 - 其他类型转为boolean // if(0){ // alert(0 转换为false); // } // if(NaN){ // alert(NaN 转换为false); // } // if(-1){ // alert(除0和NaN其他数字都转为 true); // } // if(){ // alert(空字符串为 false其他都是true); // } // if(null){ // alert(null 转化为false); // } // if(undefined){ // alert(undefined 转化为false); // } /script /body /html函数但只取前面所需要的参数个数。JS函数实现!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS函数/title /head body script //定义函数 -1 /* function add(a,b){ return a b; } */ //定义函数 -2 var add function(a,b){ return a b; } //调用函数 var result add(3,5); alert(result); //8 /script /body /html对象Array数组JS数组创建以及相关操作!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS对象定义Array数组/title /head body script //定义数组 - 方式1 /* var arr1 new Array(); arr1[0] 张三; arr1[1] 20; arr1[2] true; alert(arr1[0]); //张三 alert(arr1.length); //3 */ //定义数组 - 方式2 /* var arr2 [李四,25,false]; alert(arr2[1]); //25 alert(arr2.length); //3 //数组长度可变类型可变 arr2[10] 10; alert(arr2.length); //11 alert(arr2[5]); //undefined alert(arr2[10]); //10 */ //for获取数组元素 var arr3 [苹果,香蕉,橘子]; // arr3[9] 葡萄; // for (let i 0; i arr3.length; i) { // const element arr3[i]; // console.log(element); // } // //forEach遍历有数值的元素 // arr3.forEach(function(element) { // console.log(element); // }); // //箭头函数遍历有数值的元素 (...){...} // arr3.forEach(element // console.log(element) // ); //push 添加元素至数组末尾 arr3.push(草莓); console.log(arr3); console.log(); //splice 添加/删除元素 //arr3.splice(1,0,葡萄);//在索引1位置添加元素葡萄不删除元素 arr3.splice(2,1);//从索引2位置删除1个元素 console.log(arr3); console.log(); //pop 删除数组末尾元素 arr3.pop(); console.log(arr3); console.log(); //shift 删除数组开头元素 arr3.shift(); console.log(arr3); console.log(); //unshift 添加元素至数组开头 arr3.unshift(西瓜); console.log(arr3); /script /body /html字符串JS字符串!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS对象String字符串/title /head body script //创建字符串对象 var str new String(Hello, World!); console.log(str); //输出字符串对象 var str2 Hello, JavaScript!; console.log(str2); //输出字符串字面量 //字符串长度 length 属性 console.log(str.length); //13 console.log(str2.length); //18 //charAt() 方法 获取指定位置的字符 console.log(str.charAt(7)); //W console.log(str2.charAt(6)); //J //indexOf() 方法 查找子字符串首次出现的位置 console.log(str.indexOf(o)); //4 console.log(str2.indexOf(o)); //4 //trim() 方法 去除字符串两端的空格 var str3 Hello, Trim! ; console.log(str3.trim()); //Hello, Trim! //substring() 方法 提取字符串的子字符串 参数起始位置结束位置不包含 console.log(str.substring(0,5)); //Hello console.log(str2.substring(7,17)); //JavaScript /script /body /htmlJSONJSON对象的创建以及转换!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS对象JSON/title /head body script // JSON对象 /* var jsonObj { name: 张三, age: 20, isStudent: false, greet: function() { console.log(Hello, this.name); } }; console.log(jsonObj); // 访问属性 console.log(jsonObj.name); console.log(jsonObj[age]); // 修改属性 jsonObj.age 21; console.log(jsonObj); // 添加属性 jsonObj.gender 男; console.log(jsonObj); // 删除属性 delete jsonObj.isStudent; console.log(jsonObj); // 调用方法 jsonObj.greet(); */ var jsonstr {name:Jens,age:27,isStudent:false}; // JSON字符串转换为JS对象 var jsonObj JSON.parse(jsonstr); alert(jsonObj.name); // JS对象转换为JSON字符串 var jsonstr2 JSON.stringify(jsonObj); alert(jsonstr2); /script /body /htmlBOM概念Browser Object Model浏览器对象模型允许 JavaScript 与浏览器对话JavaScript 将浏览器的各个组成部分封装为对象。组成Window浏览器窗口对象Navigator浏览器对象Screen屏幕对象History历史记录对象Location地址栏对象Window和LocationBOM对象!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS对象BOM/title /head body script //获取 // window.alert(Hello BOM); // alert(Hello BOM Window); //方法 //confirm - 弹出一个确认对话框 -- 确认 true 取消 false // var res confirm(你确定要删除吗); // alert(res); //定时器 -- 在指定的毫秒数后调用函数或计算表达式 setInterval/setTimeout // var i 0 ; // setInterval(function(){ // i; // console.log(定时器执行了i次); // },2000); //setTimeout -- 只执行一次 // setTimeout(function(){ // alert(定时器只执行我一次); // },5000); //location -- 获取或设置当前页面的URL alert(location.href); location.href https://www.baidu.com; /script /body /htmlDOMDOM对象实现!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS对象DOM获取元素/title /head body img idh1 srcimg/off.gif brbr div classclsLove yourself/div br div classclsand love what you love/div br input typecheckbox namehobby 电影 input typecheckbox namehobby 旅游 input typecheckbox namehobby 游戏 /body script //1. 获取Element元素 //1.1 获取元素-根据ID获取 var img1 document.getElementById(h1); alert(img1.src); //1.2 获取元素-根据标签获取 var imgs document.getElementsByTagName(img); alert(imgs[0].src); //1.3 获取元素-根据name属性获取 var hobbies document.getElementsByName(hobby); alert(hobbies[0].checked); //1.4 获取元素-根据class属性获取 var cls document.getElementsByClassName(cls); alert(cls[0].innerHTML); //2. 查询参考手册属性、方法 //修改Love yourself为Hello World cls[0].innerHTML Hello World; alert(修改后的内容是cls[0].innerHTML); /script /htmlDOM操作!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS对象DOM案例/title /head body img idh1 srcimg/off.gif brbr div classcls传智教育/div br div classcls黑马程序员/div br input typecheckbox namehobby 电影 input typecheckbox namehobby 旅游 input typecheckbox namehobby 游戏 /body script //1. 点亮灯泡 : src 属性值 var img document.getElementById(h1); img.src img/on.gif; //2. 将所有div标签的内容后面加上: very good (红色字体) -- font colorred/font var divs document.getElementsByTagName(div); for (let i 0; i divs.length; i) { const div divs[i]; div.innerHTML font colorredvery good/font; } //3. 使所有的复选框呈现选中状态 var ins document.getElementsByName(hobby); for (let i 0; i ins.length; i) { const check ins[i]; check.checked true;//选中 } /script /html事件监听事件绑定事件绑定!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS-事件-事件绑定/title /head body input typebutton idbtn1 value事件绑定1 onclickon() input typebutton idbtn2 value事件绑定2 /body script function on(){ alert(按钮1被点击了...); } document.getElementById(btn2).onclick function(){ alert(按钮2被点击了...); } /script /html事件监听!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS-事件-常见事件/title /head body onloadload() form action styletext-align: center; onsubmitsubfn() input typetext nameusername onblurbfn() onfocusffn() onkeydownkfn() input idb1 typesubmit value提交 input idb1 typebutton value单击事件 onclickfn1() /form brbrbr table width800px border1 cellspacing0 aligncenter onmouseoverover() onmouseoutout() tr th学号/th th姓名/th th分数/th th评语/th /tr tr aligncenter td001/td td张三/td td90/td td很优秀/td /tr tr aligncenter td002/td td李四/td td92/td td优秀/td /tr /table /body script //onload : 页面/元素加载完成后触发 function load(){ console.log(页面加载完成...) } //onclick: 鼠标点击事件 function fn1(){ console.log(我被点击了...); } //onblur: 失去焦点事件 function bfn(){ console.log(失去焦点...); } //onfocus: 元素获得焦点 function ffn(){ console.log(获得焦点...); } //onkeydown: 某个键盘的键被按下 function kfn(){ console.log(键盘被按下了...); } //onmouseover: 鼠标移动到元素之上 function over(){ console.log(鼠标移入了...) } //onmouseout: 鼠标移除某元素 function out(){ console.log(鼠标移出了...) } //onsubmit: 提交表单事件 function subfn(){ console.log(表单被提交了...); } /script /htmlVueVue快速入门!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleVue-快速入门/title script srcjs/vue.js/script /head body div idapp input typetext v-modelmessage {{message}} /div /body script //定义Vue对象 new Vue({ el: #app, //vue接管区域 data:{ message: Hello Vue } }) /script /html常用指令Vue指令v-bind和v-model!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleVue-指令-v-bind/title script srcjs/vue.js/script /head body div idapp a v-bind:hrefurl链接1/a a :hrefurl链接2/a input typetext v-modelurl /div /body script //定义Vue对象 new Vue({ el: #app, //vue接管区域 data:{ url: https://www.baidu.com } }) /script /htmlVue指令v-on!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleVue-指令-v-on/title script srcjs/vue.js/script /head body div idapp input typebutton value点我一下 v-on:clickhandle() input typebutton value点我一下 clickhandle() /div /body script //定义Vue对象 new Vue({ el: #app, //vue接管区域 data:{ }, methods: { handle: function(){ alert(你点我了一下...); } } }) /script /htmlVue指令v-if与v-show!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleVue-指令-v-if与v-show/title script srcjs/vue.js/script /head body div idapp 年龄input typetext v-modelage经判定,为: span v-ifage 35年轻人(35及以下)/span span v-else-ifage 35 age 60中年人(35-60)/span span v-else老年人(60及以上)/span brbr 年龄input typetext v-modelage经判定,为: span v-showage 35年轻人(35及以下)/span span v-showage 35 age 60中年人(35-60)/span span v-showage 60老年人(60及以上)/span /div /body script //定义Vue对象 new Vue({ el: #app, //vue接管区域 data:{ age: 20 }, methods: { } }) /script /htmlVue指令v-for!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleVue-指令-v-for/title script srcjs/vue.js/script /head body div idapp div v-foraddr in addrs{{addr}}/div hr div v-for(addr,index) in addrs{{index 1}} : {{addr}}/div /div /body script //定义Vue对象 new Vue({ el: #app, //vue接管区域 data:{ addrs:[北京, 上海, 西安, 成都, 深圳] }, methods: { } }) /script /html案例通过Vue完成表格数据的渲染展示!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleVue-指令-案例/title script srcjs/vue.js/script /head body div idapp table border1 cellspacing0 width60% tr th编号/th th姓名/th th年龄/th th性别/th th成绩/th th等级/th /tr tr aligncenter v-for(user,index) in users td{{index 1}}/td td{{user.name}}/td td{{user.age}}/td td span v-ifuser.gender 1男/span span v-ifuser.gender 2女/span /td td{{user.score}}/td td span v-ifuser.score 85优秀/span span v-else-ifuser.score 60及格/span span stylecolor: red; v-else不及格/span /td /tr /table /div /body script new Vue({ el: #app, data: { users: [{ name: Tom, age: 20, gender: 1, score: 78 },{ name: Rose, age: 18, gender: 2, score: 86 },{ name: Jerry, age: 26, gender: 1, score: 90 },{ name: Tony, age: 30, gender: 1, score: 52 }] }, methods: { }, }) /script /html生命周期vue生命周期!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleVue-指令-v-for/title script srcjs/vue.js/script /head body div idapp /div /body script //定义Vue对象 new Vue({ el: #app, //vue接管区域 data:{ }, methods: { }, mounted () { alert(vue挂载完成,发送请求到服务端) } }) /script /html这篇文章就先更到这里接下来的内容可查看我的下一篇博客感谢观看希望对你有帮助。