js学习
关注
分享
扫一扫
kaka_hikun
这个作者很懒，什么都没留下…
展开
-
js学习-数据类型转换小案例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>window.onload = function (){ var oUl = document.getElementById('list'); var aLi原创 2020-07-03 20:18:27 · 202 阅读 · 0 评论 -
索引值应用
添加索引值1、index索引值2、索引值运用：图片切换实例思路一：全部清除思路二：消除上一个<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>ul { padding:0; margin:0; }li { lis原创 2020-07-01 18:29:39 · 453 阅读 · 0 评论 -
js学习-for循环、this、自定义属性
元素获取的第二种方法：getElementsByTagName（）与getElementsByid方法的区别：#list{} var oUl = document.getElementById(‘list’); //静态方法,找一个元素li{} document.getElementsByTagName(‘li’) //动态方法，括号内是标签名#list li{} var aLi = oUl.getElementsByTagName(‘原创 2020-07-01 11:45:25 · 423 阅读 · 0 评论 -
数组应用及实例应用
数组应用及实例应用数组1、数组定义：var arr = [ ‘这是一句话’, ‘这是第二句话’, ‘这是第三句话’ ] ;2、获取数组长度：arr.length3、获取数组里某个位置的元素：arr[2] //数组里第三个元素4、往数组最后位置里添加数据：arr.push ( ’ 我是最后一位 ‘ ) ;设置不透明度filter:Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, Fini原创 2020-06-11 20:59:10 · 948 阅读 · 0 评论 -
js学习-基本属性2
在网页里改变颜色背景等属性通过改变class值:注意要写成className，而不是class<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .red{ width: 50px; backgroun原创 2020-06-10 21:00:08 · 120 阅读 · 0 评论 -
js学习-基本属性操作
parseInt(string, radix): 返回转换成整数的值var test = parseInt(123); //123test = parseInt(234, 0); //234test = parseInt(0xabcdef); //自动转换成十六进制test = parseInt(012344); //自动转换成八进制字符串类型自动转换成整数型：var test = parseInt(‘123’); //123test = parseInt(‘234’, 0); //2原创 2020-06-09 21:00:26 · 160 阅读 · 0 评论 -
js学习-变量、数据类型、类型转换
变量声明变量通过var关键字声明变量可以声明变量的同时给变量赋值可以一次声明一个变量也可以一次声明多个看变量如果只声明变量未对其赋值，默认值为undefined如果变量重名产生覆盖注意变量严格区分大小写变量名称不要包含特殊字符变量名称最好遵循驼峰标记法或者下划线法变量名称最好含义明确变量在内存中的存储与释放收集方式收集内容回收算法原始数据类型（与c++相似）数值型十进制数十六进制0x00XABCDEF0x1a2b3c4d原创 2020-06-08 20:48:46 · 124 阅读 · 0 评论 -
js学习-多栏布局、盒布局、弹性盒布局
多栏布局1、column-count属性写法：-webkit-column-count: 栏目数；-moz-column-count: 栏目数；2、column-width属性：指定栏目的宽度-webkit-column-width: 值；-moz-column-width: 值；缩小页面时，不会像column-count属性不变栏目数，会根据页面宽度显示恰当的栏目数3、column-gap属性：指定栏目与栏目之间的距离-webkit-column-gap: 值；-moz-column原创 2020-06-07 15:22:47 · 393 阅读 · 0 评论 -
js学习-边框相关的样式、变形功能、动画效果
边框相关的样式border-radius1、border-radius是边框圆角绘制border-radius：length（左上角和右下角） length(右上角和左下角)；无边框设置时，会把背景进行圆角设置边框无论是实线，还是虚线等等，都会沿着圆角曲线绘制border - top / bottom - left / right - radius,一共四种2、border-image图像边框(-webkit-) / (-moz-) / (-o-) / border-image: ur原创 2020-06-06 20:55:28 · 1691 阅读 · 1 评论 -
js学习-显示不下的内容
1、overflow属性1、overflow: hidden / scroll / auto / visible ;hidden: 隐藏超出范围的文字scroll: 水平与垂直方向同时出现滚动条auto：根据需要出现水平或者垂直滚动条visible: 与不使用overflow属性时的效果一样还可以使用overflow-x和overflow-y属性，单独指定x轴和y轴方向的值2、text-overflow: ellipsis;使超出显示部分的文字呈"…"形式hidden效果：scroll原创 2020-06-06 14:45:43 · 306 阅读 · 0 评论 -
js学习-CSS3中新增的背景属性
1、background-clip属性background-clip: border-box； --默认background-clip: padding-box; --padding以外的裁剪掉background-clip: content-box; --content以外的裁剪掉<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title&g原创 2020-06-05 20:43:35 · 148 阅读 · 0 评论 -
js学习-盒布局
1、display: inline-block / inline;如果指定了宽度和高度，文字有可能会溢出无论是inline-block 还是 inline ，效果是一样的<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>盒的基本类型</title> <style> div{backgroun原创 2020-06-05 19:54:30 · 241 阅读 · 0 评论 -
js学习-服务器端字体和@font-face属性
在页面上显示服务器端的字体在CSS3中可以使用**@font-face**属性来利用服务端字体使用方法：@font-face{font-family: webfont;src: url( ‘xxx.otf’ ); / url( ‘xxx.ttf’ ); / url( ‘xxx.eot’ );}<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <tit原创 2020-06-04 20:33:41 · 618 阅读 · 0 评论 -
js学习-42文字阴影与自动换行
一、文字阴影text-shadow使用方法：text-shadow: length length length color第一个和第二个length分别是阴影离开文字的横、纵方向距离，第三个length是阴影的模糊程度，length越大，模糊越厉害，第四个color是阴影的颜色设置<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>文字阴原创 2020-06-04 19:42:37 · 628 阅读 · 0 评论 -
js学习-使用选择器来插入内容
一、插入文字1、使用选择器插入内容2、排除一些不需要插入内容的元素:nocontent<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>使用选择器插入内容</title> <style> h2:before{ content: "Title";原创 2020-06-02 21:13:52 · 381 阅读 · 0 评论 -
js学习-UI元素状态伪类选择器下
E:selection元素被选中时的样式<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>伪类选择器E::selection</title> <style> ::selection{ /*运用到全页面中，注意是两个冒号*/ background: green;原创 2020-06-02 18:56:03 · 149 阅读 · 0 评论 -
js学习-UI元素状态伪类选择器上
1、E:hover, E:active, E:focusE:hover 鼠标移动在上面E:active 被点击且未弹起E:focus 点击后，可输入文本状态实际操作中，要先写E:focus，再写E:active，不然无法实现E:active的代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>选择器E:hover、E:原创 2020-06-02 16:41:53 · 211 阅读 · 0 评论 -
js学习-结构性伪类选择器下
6、选择器first-child、last-child、nth-child和nth-last-child1）first-child单独指第一个子元素的样式2）last-child单独指最后一个子元素的样式3）nth-childnth-child（n）匹配正数下来第N个子元素nth-child (odd) 匹配正数下来第奇数个子元素nth-child (even) 匹配正数下来第偶数个子元素<style>li:first-child{ background: #ff66原创 2020-06-01 19:45:34 · 267 阅读 · 0 评论 -
js学习-结构性伪类选择器上
伪类选择器以及伪元素1、类选择器在css中可以使用类选择器把相同元素定义成不同的样式。p.left { text-align:left } /* ".left"是class类，"#left"是id类 */p.right { text-align:right } /* "left"和"right"都是起的名字 */2、伪类选择器类选择器和伪类选择器的区别在于，类选择器我们可以随意起名，而伪类选择器是css中已经定义好的选择器，不可以随意起名。/*最常见的伪类选择器*/a:link{ colo原创 2020-06-01 18:59:42 · 372 阅读 · 0 评论 -
js学习-css3新增的属性选择器
一、[att* = val]属性选择器包含用val指定的字符二、[att^ = val]属性选择器开头字符用val指定的字符三、[att$ = val]属性选择器结尾字符用val指定的字符<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>CSS3中的属性选择器</title> <style>原创 2020-05-31 21:23:42 · 122 阅读 · 0 评论 -
js学习-HTML5的拖放
事件产生事件的元素电脑$1600手机$12导管$1Column 1Column 2centered 文本居中right-aligned 文本居右| 事件 | 产生事件的元素 | | | ||–|--|| | |原创 2020-05-31 18:04:05 · 176 阅读 · 0 评论 -
一个网页请求从输入到最终显示到页面的路程
一个网页请求从输入到最终显示到页面的流程一个网页请求从输入到最终显示到网页的可以分为以下5个步骤：1.在客户端浏览器中输入网址URL。如http://www.taobao.com2.浏览器会去请求服务器端口上的JavaWeb程序，获得其对应的WEB服务器的IP地址。3.JavaWeb程序会先去获取数据库的数据，再将数据写入网页中4.WEB服务器响应请求，会将第三步所得到的网页源码返回给浏览器，返回指定的URL数据或错误信息。5.浏览器或者客户端对该HTML进行网页渲染解析后显示在浏览器当原创 2020-05-30 14:58:03 · 130 阅读 · 0 评论 -
js学习-video元素与audio元素
js学习-video元素与audio元素知识点：video元素与audio元素.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>video元素与audio元素</title></head><body> <h1>Audio元素的使用实例</h1> &原创 2020-05-30 09:32:25 · 125 阅读 · 0 评论 -
js学习-Web Storage本地保存
js学习-Web Storage本地保存知识点：web storage本地保存.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>web storage本地保存</title> <!-- <script type="text/javascript" src="index.js"></s原创 2020-05-29 20:36:08 · 265 阅读 · 0 评论 -
js学习-简单的网页留言板
js学习-简单的网页留言板知识点：简单的留言板.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网页留言板</title> <script type="text/javascript" src="留言板.js"></script></head><body>原创 2020-05-29 19:57:26 · 796 阅读 · 1 评论