- 博客(29)
- 收藏
- 关注
原创 移动网页设计基础(viewport)
pc端,屏幕1200两端留白在PE端就不行,首先没有1200px的宽度,其次不能留白,就需要在手机屏幕上铺满内容viewport在移动设备上进行网页的重构或者开发,首先我们就要搞明白viewport。只要搞明白概念及其相关的meta标签的使用,才能更好的让网页适配或者响应不同的分辨率的移动设备viewport概念设备上屏幕能用来显示我们网页的那一块区域获取视口大小:document.documentElement.clientWidth移动设备上的浏览器会把自己默认的视口大小设为980px或者
2020-10-14 20:07:03 297
原创 Ajax(概念,方法)
Ajax语法:$.ajax(JSON)JSON常用的参数url:服务器的地址,获取数据或者推送的地方data,需要给服务器的数据,需要去添加,比如说登录的接口需要传递“用户名和密码”,获取货品信息,则不需要传递任何的参数。数据类型键值对,键值对的“键”和服务器保持完全一致,包括键名的大小写type:数据提交的方式GET/POSTtimeout:请求等待的时间,时间为毫秒,一般10秒success:请求成功,做返回处理error:请求失败datatype:预期服务器相应的数据类型什么是Aj
2020-10-06 15:23:36 152
原创 jQuery(元素的删除,导航)
元素的删除(1)remove和empty区别:remove是删除了内容和格式,即全部删除,empty仅仅清除内容,格式还在<title></title> <script src="js/jquery-3.5.1.min.js" type="text/javascript"></script> <style type="text/css"> #div1,#div2{ height: 100px; width: 10
2020-10-05 15:28:21 232
原创 jQuery(方法,捕获与设置)
常用jQuery事件方法(1)$(document).ready()(document).ready()允许我们在文档完全加载完后执行函数等价于(document).ready()允许我们在文档完全加载完后执行函数等价于(document).ready()允许我们在文档完全加载完后执行函数等价于(function(){})(2)clicl()clicl()方法当按钮点击事件被触发的时候会调用一个函数,该函数在用户点击HTML元素的时候会执行(3)blur()失去焦点时触发,一般在input输入框
2020-09-30 15:23:36 501
原创 jQuery(基本语法)
基础知识jQuery是js库,能够帮助我们轻松实现一些原本麻烦的功能jQuery每个版本分俩个小版本,压缩版与未压缩版。压缩版文件较小,但是没有排版和注释,不便于阅读。未压缩版文件较大,有排版和注释,便于阅读。实际上是一个js文件,加载到页面就可以直接使用。也可以通过CDN(content distrubute net)来引用jQuery基本语法$(选择器).action()2.选择器基本选择器:id选择器$("#idName")类选择器$(".className")元素选择器$
2020-09-29 14:55:51 105
原创 JavaScript(计时事件)
setInterval(“函数”,毫秒数)它是一个计时器,就是每隔多长时间就调用一次函数<title></title> <style type="text/css"> .cr{ width: 1200px; height: 500px; border: 1px solid red; } </style> </head> <body> <div class="cr" id="d
2020-09-21 14:50:52 107
原创 JavaScript(导航,Location,刷新,弹窗,cookie)
导航Document是根节点parentNode获取父节点chidNode获取所有子节点firstChild获取第一个子节点lastChild获取最后一个子节点<body> <div name="第一章"> <p id="p1">第一段<span>第一句</span><span>第二句</span></p> </div> <input type="button" v
2020-09-18 15:13:48 397
原创 JavaScript(DOM,节点,获取与修改元素)
概念DOM(document object model)文档对象模型整个文档是由一系列的节点对象组成的一棵树节点:n=Node 节点包括元素节点(1),属性节点(2)和文本节点(3)<body> <table> <tr> <th id="th1">小伙真帅</th> </tr> </table> <a href="http://www,baidu,com" id="a1" tar
2020-09-17 15:31:28 485
原创 JavaScript(键盘事件,捕获与冒泡)
键盘输入键码值注意:键码13的enter是字母键盘上的回车键。键码为108的enter是右数字小键盘上的回车键(1)keypress事件<body> <input type="text" id="what" onkeypress="search(event)" /> </body> <script type="text/javascript"> function search(event){ if(event.keyCode
2020-09-16 15:26:34 1304
原创 JavaScript(随机数函数)
案例:优秀学生随机数:假设由=有十个科目,每个满分是120要求:每次点击按钮,出现的结果都不相同,并且排名与优秀学生显示准确表格边框,字体颜色自行设置输出结果:代码:<title></title> <style type="text/css"> table{ font-size: 2em; } </style> </head> <body> <button type="button
2020-09-15 15:17:57 744
原创 JavaScript(数组的排序,事件)
数组的排序1).sort()从小到大顺序排列数组对数字排序:从小到大对字母排序:从A到B,大写字母在前数字字母混合:先排数字,再排字母通过sort可以找出数组的最小值(xxx[0])和数组的最大值(xxx[xxx.length-1])但是,只能排同样位数的数(即个位数和个位数,两位数与两位数,三位数与三位数,四位数与四位数)比值函数还可以自定义排序function(m,n) return m-n;reverde():反转数组元素把元素从头到尾反序事件事件源,
2020-09-14 15:12:04 449
原创 JavaScript(二维数组)
二维数组var arr=[[1,2,3],["a","b","c",["d","e","f"]],450]; alert(arr[1][3][1]);//多重嵌套数组编历遍历数组通俗点就是说把数组中的每个数都读一遍(部分有if条件+break的则可能不会完全遍历),你可以对于数组中的每个数进行处理,亦或者是找到数组中那个你需要的数。1.普通编历var arr=[1,2,3,4,5,6,7,8,9]; for(var i=0;i<arr.length;i++){ docu
2020-09-12 14:49:47 471
原创 JavaScript(验证哥德巴赫猜想,数组)
案例:验证哥德巴赫猜想(函数方法)哥德巴赫猜想:任意一个大于6的偶数都可以写成两个质数之和(质数就是素数)。<script type="text/javascript"> var flag = true; //假设哥德巴赫猜想成立 for (var n = 6; n < 1000; n += 2) { if (!canSplit(n)) { flag = false; } } //所以偶数是否可拆,可拆直接输出成立, if (f
2020-09-11 15:24:47 379
原创 JavaScript(函数)
案例:判断一个数是否为素数(函数方法)函数名:isPrime参数: n参数传递参数传递,就是将实参的值传给形参。通过调试我们可以看键,形参在函数被调用之前是不存在的,当函数被调用的那一刻起,实参被创建,并且传递给形参。参数传递有两种方式:值传递与引用传递值传递A的值并没有显示预期中的6,还是5,这是因为形参x与实参a是两个不同的变量,x的变化与a没有任何的关系引用传递a. value没有被显示修改,但是a.value确实加了1,因为x就是a,或者说x是a的别名 专业一点就叫引
2020-09-10 14:45:44 163
原创 JavaScript(四)
For循环<script type="text/javascript"> for(var i=1;i<=100;i++){ i+=i; } i=1; while(i<=100){ i+=i; i++; } alert(i); </script>案例:用for循环求1~100的和<script type="text/javascript"> //求1到100的和 var sum=
2020-09-09 15:24:26 195
原创 案例用js写判断素数,求完数,求圆周率,讨厌的数字3
一、讨厌的数字3要求:输出不含3的三位数,还不能是3的倍数,例如143的个位是3不可以,141是3的倍数也不可以。<script type="text/javascript"> var x=100; do{ //判断每一位数是否能整除3 var n100=Math.floor(x/100); var n10=Math.floor((x%100)/10); var n=Math.floor(x%10); if(n100!=3 &&am
2020-09-08 19:15:29 412
原创 JavaScript(三)
If语句嵌套Else ifSwitch如果是if选择的分支比较多的时候,就需要一个一个分支的从上往下执行,这样执行的效率是非常低的,需要对选择结构进行一个改进使用switch就可以解决这个问题Switch基本语法Switch:开关语法:在执行的过程中,a 的值与哪个分支后面的值一样,就运行哪个分支的代码,Case后面的值可以立即为标号(程序中指令的地址)。如果运行完一个分支后,不想继续运行的话,可以用break来跳出选择结构,但break不是必须要写的。如果a 的值与case后面标号
2020-09-07 15:09:45 216
原创 JavaScript(二)
海伦公式:而公式里的p为半周长(周长的一半):prompt:在网页上显示输入框错误与程序调试程序错误:没有得到想要的结果语法错误:编写代码没有按照语言程序的要求去写,程序将不会执行逻辑错误:代码可以正常运行,但是运行结果不是我们想要的,这种错误我们可以使用单步调试(debug)去解决用浏览器进行调试错误语法错误检查:在浏览器中,鼠标右击检查或者F12错误查看可以定位到哪个文件,哪一行,哪里错了逻辑错误单步调试,让代码一行一行的去执行,去看每一行执行是否与期望一致,从而判断代码是否正
2020-09-05 15:36:28 496
原创 java script(一)
java scriptJavaScript是什么,能干什么?一个网页的结构,是通过HTML决定的脑袋,手脚,身体CSS决定了这个网页的样式是高是矮,是胖还是瘦,是黑还是白这个网页的行为是通过JavaScript决定的走路,跑步,眨眼睛JavaScript的发展史它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合,如服务器端编程。完整
2020-09-04 15:55:30 17017 4
原创 类的选择器(二)
伪元素选择器first-letter:选择文本首字母first-line:选择文本的第一行after:在元素前面添加内容before:在元素后面添加内容9.选择器总结什么是选择器?选择器:描述后面的样式施加到那些目标,或者说根据某个依据来选择应用的样式的目标根据选择依据不同,就产生了各种不同的选择器1.元素选择器div{ background-color:red}2.id选择器根据元素的ID属性来选择格式:#idname{xxxxx}#username{font-size:25
2020-08-28 14:51:32 400
原创 类的选择器
类选择器1.元素选择器用标签名来作为选择器,选中所有相应的元素2.类选择器根据class的属性来选择元素,样式定义为:.className{ xxxxxxx}3.ID选择器根据id名来选择元素,样式定义为:#idName{xxxxxxxxx}4.属性选择器例:[title*=’d’]:选择title值中包含d的元素5.关系选择器E F :选择E元素的后代元素F(所有后代,包括子类、孙类)E > F : 选择E元素的直接后代元素(也就是子类)E + F:选择E元素
2020-08-27 15:27:13 2567
原创 CSS样式基础(二)
颜色RGB(red greed bule)(0,10,256) #0010FFCSS中颜色的表示方法(1) 预定义颜色:bule ,red,black。。。(2) 十六进制颜色:#0f0f0f(3) RGB颜色(128,0,0)全红(4) RGBA,在RGB的基础上又添加了表示透明度的Alpha(5) HSl:用色调,饱和度,和透明度三个分量来表示颜色(6) HSLA:在HSL的基础上又添加了表示透明度的Alpha代码实现:<p style="color: blue;">预定
2020-08-26 15:31:10 126
原创 CSS样式基础(一)
CSS的基本概念Cascading style sheet层叠样式表选择器标签:****等之类的标签 使用方式:直接输入标签名类:(class):class名字 使用方式:输入点+class名ID:id名 使用方式:输入#+id名一般来说我们写css文件的时候用的都是第二种选择器,class名这是因为ID名一般被用作js的选择器给class命名也是规范的,像xxx-xxxx这样的好处是让你的代码更清晰,别人也更容易看懂三种连接样式行内样式(内嵌样式)
2020-08-25 15:15:44 169
原创 web前端(三)
Table和divTable表格的组成部分:标题 表头 主体 表尾table 定义一个表格caption 定义表格的标题thead 定义表头的部分tbody 定义表格的主体(数据)部分tfoot 定义表尾 ,一般来显示汇总信息tr 定义一行th td 来定义数据项(单元格) th一般用于表头,有加粗的样式。td 一般用于主体部分,没有加粗的样式td rowspan 和 colspan 分别定义了单元格跨行的行数,跨列的列数cellspacing= 间距cellpadding= 边距
2020-08-24 15:28:34 202
转载 单标签和双标签的区别
单标签和双标签的区别定义单标签:由一个标签组成。例如双标签:由“开始标签”和“结束标签”两部分构成。例如是开始标签,表示一个段落的开始。 是结束标签,表示一个段落的结束。常见单标签<hr /><meta /><img />常见双标签<html></html><head></head><title></title><body></body><
2020-08-23 16:31:12 802
原创 行内元素,块级元素,行内块级元素之间的区别
区别1.在众多行内元素中,最常使用的是span,另外行内元素还包括img、a、big、small、sub、sup、strong、u、button(属性默认为display:inline-block)2.行内元素的特点:相邻的行内元素不换行,设置宽高无效,margin设置仅左右方向有效,上下无效,padding设置上右下左都有效。水平方向上padding-left,padding-right,margin-left,margin-right都有边距效果,但是垂直方向上padding-top、padding
2020-08-23 16:25:14 245
原创 Get与Post的区别
get和post的区别最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数。但是我认为**“最标准的答案”**GET在浏览器回退时是无害的,而POST会再次提交请求。GET产生的URL地址可以被Bookmark,而POST不可以。GET请求会被浏览器主动cache,而POST不会,除非手动设置。GET请求只能进行url编码,而POST支持多种编码方式。GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。GET请求在URL中传送的参数
2020-08-23 15:34:19 126
原创 web前端(二)
基础标签标题标签 h1-h6h1-h6语义越来越轻,页面上只有一个h1标签段落标签p: 一段一段文字的时候使用链接标签a页面间的跳转页面内的跳转Href目的地,跳转后的URL地址Title:鼠标悬停显示的内容Target:设置跳转的方式_self:在当前页面中打开;(默认值)_black:在新的页面打开图片标签上一级目录:…/当前目录:.src:设置显示的目标图片alt:当图片加载失败的时候,显示的内容列表标签顺序:order没有顺序:unorder列表:lis
2020-08-23 15:25:37 131
原创 初学web前端
HTML基础知识(1)web基本概念web:网页、公众号、动画h5:HTML5URL:就是一个地址,网络资源的ID(地址)服务器:一个性能比较高(内存大、运行速度快)的电脑,安装了提供服务(apache、Tomcat、IIS、Nginx)云服务:阿里云、腾讯云、百度云、华为云有专门的团队提供维护工作浏览器:能帮我们打开网页,Google Chrome、IE、火狐、欧朋、safari(苹果)标记语言用各种标签将 相关信息或者关键字 包裹起来,方便搜索引擎的抓取HTML就是一种标记语
2020-08-22 15:36:21 169
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人