js

来源：互联网发布：网络打印任务挂起编辑：程序博客网时间：2024/05/18 23:15

7.15HTML新特性

1.canvas

canvas元素用于在网页上绘制图形。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<canvas>不支持的浏览器可以看到的内容</canvas>

绘制环境

getContext(‘2d’)：目前只支持2d场景

①绘制方块

fillRect(L,T,W,H)：（填充的）方块（默认颜色黑色）

strokeRect(L,T,W,H)：（带边框的）方块（默认1px）

②设置绘图

fillStyle：填充颜色（绘制canvas是有顺序的）

lineWidth：线宽度，是一个数值

strokeStyle：边线颜色

③边界绘制

lineJoin：边界连接点样式

miter（默认）、round（圆角）、bevel（斜角）

lineCap：端点样式

butt（默认）、round（圆角）、square（高度多出为宽的一半）

oGC.lineWidth = 20;

oGC.lineCap = ‘round’;

④绘制路径1

beginPath：开始绘制路径（防止后面设置影响上面绘图）

closePath：结束绘制路径（闭合绘图）

moveTo：移动到绘制的新目标点

lineTo：新的目标点

<script>    var c=document.getElementById("draw");    var cxt=c.getContext("2d");    cxt.moveTo(10,10);    cxt.lineTo(150,50);    cxt.lineTo(10,50);    cxt.stroke();</script>

这里写图片描述

⑤绘制路径2

stroke：画线，默认黑色

fill：填充，默认黑色

rect：矩形区域（与fill组成fillRect方法）

clearRect：删除一个画布的矩形区域

save：保存路径（与restore一起组成一个设置区）

restore：恢复路径

⑥绘制圆

arc(x,y,半径,起始弧度,结束弧度,旋转方向)

x,y：起始圆心坐标

起始位置在3点钟位置

弧度与角度的关系：弧度=角度*Math.pi/180

旋转方向：顺时针（默认：false）、逆时针（true）

<script>    var c=document.getElementById("draw");    var cxt=c.getContext("2d");    cxt.moveTo(10,10);    cxt.lineTo(150,50);    cxt.lineTo(10,50);    cxt.stroke();</script>

这里写图片描述

7.16

一.HTML5 类选择器

①querySelector //类似jq里的$()方法，但是只能取到第一个元素

querySelectorAll //同上，但是只能取到一个集合，即使只有一个元素

getElementsByClassName //通过class的方式取到一个元素集合

var element = document.querySelector('div#box');//返回id为box的首个divvar element = document.querySelector('.one,.two');//返回带有one或者two样式类的首个元素

②
JSON.parse() : 把字符串转成json，字符串中的属性要严格的加上引号

JSON.stringify() : 把json转化成字符串，会自动的把双引号加上

<script>    var str ='{"name":"hello"}';  //一定是严格的JSON形式     var json = JSON.parse(str);     alert( json.name );   /* var json = {name :"hello"};    var str = JSON.stringify(json);    alert( str );*/</script>

json和eval的区别

eval : 可以解析任何字符串变成js,而且eval一些植入木马，病毒等不安全的字符串也可以解析

parse : 只能解析JSON形式的字符串变成JS (安全性要高一些)

json形式是类似于{“名称”：“值对”，“”：“”，···}

拷贝

<script>    var a = {        name : { age : 100 }    };     var str = JSON.stringify(a);//json转为字符     var b = JSON.parse(str);//字符转json     b.name.age = 200;     alert( a.name.age );//100</script>

③获取class列表属性

classList（获取一个元素的class集合，类数组的对象），基于classList的方法：

—-length : class的长度

—-add() : 添加class方法

—-remove() : 删除class方法

—-toggle() : 切换class方法

④svg是一种用XML定义的语言，用来描述二维及矢量/栅格图。

使用在背景，图片，框架等

基本写法--直接在html上添加svg<!--<img src="1svg.svg"/>--><!--<div style="height:200px; width:200px; background:url(1svg.svg) no-repeat"></div>--><!--<iframe src="1svg.svg"></iframe>-->--在html页面中书写svg（需要带上命名空间）<div id="div1">    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">  <circle cx="100" cy="100" r="40" fill="red"></circle></svg></div>

基本图形

circle（圆形）

cx cy r (不能用style) //圆心X/Y轴坐标半径

Fill（填充颜色） stroke（边框颜色） stroke-width（边框宽度） transparent（在设置颜色的地方设置透明）（可以用style）stroke-opacit

rect（圆角矩形）

width height x y //宽高左上角X/Y轴坐标

rx ry //圆角X/Y轴角度（只设置rx则为正圆角）

<circle cx="100" cy="100" r="40" fill="red"></circle>

line（画线，配合stroke颜色）

x1 y1 x2 y2 stroke//起点X/Y轴坐标，终点X/Y轴坐标，颜色

ellipse（椭圆）

cx cy rx ry //圆心X/Y轴坐标，X/Y轴半径

polyline：折线 points //折点设置，配合fill=‘transparent’去掉填充

polygon：多边形同上，有填充

path：路径（单标签）d //定义路径点

<path d="M150 0 L75 200 L225 200 Z" />

④拖放事件

目标元素事件 : 事件对象为目标元素

dragenter , 进入目标元素触发，相当于mouseover

dragover ,进入目标、离开目标之间，连续触发

dragleave , 离开目标元素触发，相当于mouseout

drop , 在目标元素上释放鼠标触发（必须在dragover上阻止默认事件ev.preventDefault()）

<body><div class="box" draggable="true"></div><div class="big_box"></div><script>    var oDiv = document.querySelector(".box");    var oBigDiv = document.querySelector(".big_box");    oDiv.ondragstart = function() {        console.log("拖放开始");    };    oDiv.ondrag = function(){        console.log("正在拖放");    };    oDiv.ondragend = function(){        console.log("拖放结束");    };    oBigDiv.ondragenter = function (){        console.log("进入目标");    };    oBigDiv.ondragover = function (ev){        var ev = ev || event;        console.log("在目标中");        ev.preventDefault();    };    oBigDiv.ondragleave = function (){        console.log("离开目标");    };    oBigDiv.ondrop = function (){        console.log("目标上释放");        document.body.removeChild(oDiv);    };</script></body>

二、js如何绑定自定义属性

1.基本了解：js中操作元素class时，需要用className

而使用cssText会先清空之前的所有样式，然后添加它的值

获取元素的颜色的属性值是不准确的

获取图片的src属性的时候获取到的是绝对路径，直接修改是可以写相对路径的

数组里面可以储存任意类型的数据

length属性代表数组的长度，是可读可写的

2.自定义属性：元素上本来不存在的属性;作用：js向html添加东西

语法：元素.自定义属性 = 123

①点击按钮，弹出按钮的索引值

<body><input type="button" value="btn1"><input type="button" value="btn2"><input type="button" value="btn3"><script>    var aInput = document.getElementsByTagName("input");    for(var i = 0;i < aInput.length; i++ ){       aInput[i].index = i;//自定义属性，就是通常用的索引值       aInput[i].onclick = function(){          alert(this.index);//弹出当前点击的是第几个按钮，从0开始       }    }</script></body>

②点击，改变按钮的值

<body><input type="button" value="0"><input type="button" value="0"><input type="button" value="0"><script>    var aInput = document.getElementsByTagName("input");    var arr = ["A","B","C","D","E","F","G"];    for(var i = 0;i < aInput.length;i++){        aInput[i].num = 0;        aInput[i].onclick = function(){            this.value = arr[this.num];            this.num++;            if(this.num === arr.length){                this.num = 0;            }        }    }</script></body>

这里写图片描述

③自定义属性组开关：点击按钮时，会改变按钮的背景颜色，字体颜色

<style type="text/css">        .cont{            width: 400px;            margin: 30px auto;            position: relative;        }        .cont input{            width: 100px;            height: 100px;            background-color: yellow;            margin-left: 20px;            font-size: 30px;            border: 1px solid red;        }        .cont .active{            background-color: indigo;            color: violet;            border: 1px solid green;        }    </style>

<body><div class="cont">    <input type="button" value="btn1">    <input type="button" value="btn2">    <input type="button" value="btn3"></div><script>    var aInput = document.getElementsByTagName("input");    for(var i = 0;i < aInput.length;i++){        aInput[i].Onoff = true;//自定义属性，切换开关        //点击事件        aInput[i].onclick = function(){            if(this.Onoff){            //this:object HTMLInputElement                this.className = "active";                this.Onoff = false;            }            else{                this.className = "";                this.Onoff = true;            };        }    };</script></body>

这里写图片描述

三、处理数组、字符串等常用方法

1.① push(): 向数组尾部添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

<script>    var arr = [1,2,3];    console.log(arr);//[1,2,3]    var b = arr.push(4);    console.log(b);// 4   //表示当前数组长度    console.log(arr);// [1,2,3,4]</script>

②pop(): 删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组。

    var arr = [1,2,3];    console.log(arr);                // [1,2,3]    arr.pop();    console.log( arr.pop() );　　// [3]　　//返回删除的元素    console.log(arr);                // [1,2]

2.①unshift():在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

var arr = ['a', 'b', 'c'];arr.unshift('x');        // 4console.log(arr);        // ['x', 'a', 'b', 'c']

② shift():删除数组的第一个元素，并返回该元素。注意，该方法会改变原数组。

var arr = ['a', 'b', 'c'];arr.shift()         // 'a'console.log(arr)     // ['b', 'c']

shift()方法还可以遍历并清空一个数组。

var list = [1, 2, 3, 4, 5, 6];var item;while (item = list.shift()) {   console.log(item);//依次出现1，2，3，4，5，6} console.log(list);     // []

3.arr.join():以参数作为分隔符，将所有数组成员组成一个字符串返回。如果不提供参数，默认用逗号分隔。

var arr = [1, 2, 3, 4];arr.join(' ')     // '1 2 3 4' arr.join(' | ')     // "1 | 2 | 3 | 4"arr.join()     // "1,2,3,4"

4.arr.concat():用于多个数组的合并。它将新数组的成员，添加到原数组的尾部，然后返回一个新数组，原数组不变。

var arr = [1,2,3];var b = arr.concat([4,5,6]);console.log(b);        //[1,2,3,4,5,6]

5.arr.reverse():用于颠倒数组中元素的顺序，返回改变后的数组。注意，该方法将改变原数组。

var arr = ['a', 'b', 'c'];arr.reverse() // ["c", "b", "a"]console.log(arr) // ["c", "b", "a"]

6.arr.slice():用于截取原数组的一部分，返回一个新数组，原数组不变。

slice(start,end)它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。

如果省略第二个参数，则一直返回到原数组的最后一个成员。

var arr = ['a', 'b', 'c'];   arr.slice(0)         // ["a", "b", "c"] arr.slice(1)         // ["b", "c"]  arr.slice(1, 2)     // ["b"]  arr.slice(2, 6)     // ["c"]  arr.slice()           // ["a", "b", "c"]    无参数返回原数组   arr.slice(-2)          // ["b", "c"]    参数是负数，则表示倒数计算的位置 arr.slice(-2, -1)     // ["b"]

7.arr.splice():删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组。

splice(start,delNum,addElement1,addElement2,…)第一个参数是删除的起始位置，第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];arr.splice(4, 2)     // ["e", "f"] 从原数组4号位置，删除了两个数组成员console.log(arr)     // ["a", "b", "c", "d"]var arr = ['a', 'b', 'c', 'd', 'e', 'f']; arr.splice(4, 2, 1, 2)     // ["e", "f"] 原数组4号位置，删除了两个数组成员,又插入了两个新成员console.log(arr)         // ["a", "b", "c", "d", 1, 2]var arr = ['a', 'b', 'c', 'd', 'e', 'f'];arr.splice(-4, 2)     // ["c", "d"] 起始位置如果是负数，就表示从倒数位置开始删除var arr = [1, 1, 1]; arr.splice(1, 0, 2)     // [] 如果只插入元素,第二个参数可以设为0conlose.log(arr)     // [1, 2, 1, 1]var arr = [1, 2, 3, 4];arr.splice(2)     // [3, 4] 如果只有第一个参数，等同于将原数组在指定位置拆分成两个数组console.log(arr)     // [1, 2]

8.arr.sort():对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变。

 ['d', 'c', 'b', 'a'].sort()  // ['a', 'b', 'c', 'd'] [4, 3, 2, 1].sort()  // [1, 2, 3, 4] [11, 101].sort() // [101, 11] [10111, 1101, 111].sort()// [10111, 1101, 111]

上面代码的最后两个例子，需要特殊注意。sort方法不是按照大小排序，而是按照对应字符串的字典顺序排序。也就是说，数值会被先转成字符串，再按照字典顺序进行比较，所以101排在11的前面。

如果想让sort方法按照自定义方式排序，可以传入一个函数作为参数，表示按照自定义方法进行排序。该函数本身又接受两个参数，表示进行比较的两个元素。如果返回值大于0，表示第一个元素排在第二个元素后面；其他情况下，都是第一个元素排在第二个元素前面。

 var arr = [10111, 1101, 111];  arr.sort(function (a, b) {    return a - b;  })  // [111, 1101, 10111]  var arr1 = [                { name: "张三", age: 30 },                { name: "李四", age: 24 },               { name: "王五", age: 28 }            ] arr1.sort(function (o1, o2) {   return o1.age - o2.age; }) // [ //   { name: "李四", age: 24 }, //   { name: "王五", age: 28 }, //   { name: "张三", age: 30 }  // ]

①.获取字符串

str.length //获取它的长度

str.charAt(2) //获取传入下标处的字符，如果不传默认为”0“，超出时返回空

str.charCodeAt(2) //获取传入下标处的Unicode 编码，不写默认为’0’

String.fromCharCode()//传入的编码值返回相应的字符，可以传多个编码，用’,’分割（静态方法，String不能少）

str.indexOf() //获取（）中在字符串中第一次出现的位置（可以一次找多个字符），未找到返回-1，第二个参数为开始位置（负数和不写默认是从0开始）

lastIndexOf() //获取（）中在字符串中最后出现的位置（可以一次找多个字符），未找到返回-1，第二个参数为开始位置（负数是从0开始，不写默认从最后开始找）

str.substring()//截取从第一个参数到第二个参数（不包括第二个参数）的字符串，一个参数时截取到最后，会自动检测两个参数大小，按照从小到大的顺序截取，不写和负数默认从0开始左闭右开区间

str.slice() //与上面方法类似，但是不会自动检测参数大小，负数从后向前找（最后一个为-1）必须从左到右的截取

str.split(‘.’) //以.分割整个字符串并输出一个数组，即使什么参数都不传也会变成一个数据的数组，因此如果想把一个字符串每个字符分割，就传一个空字符串”，（注意：如果分隔符在左右，也会生成个空在数组里），第二个可选参数限制生成数组的长度（剩下的会被舍去）替换或者删除子串

str.toUpperCase() //把内容转换成大写

str.toLowerCase() //把内容转换成小写

阅读全文

0 0