javascript 的基础笔记

Posted 2020-08-15 込戲冭氵罙

新手入門：

alert的使用：

  在alert中\xB0可以输出温度(centigrade)的符号，\xNN可以输入一些不能输入的特殊字符，NN是两个十六进制数，表示字符在latin-1 字符集中的编号。。

注：特殊字符并不是跨平台兼容，\xNN在windows 平台中代表特定的字符，但在mac或unix系统中，它可能代表的是另一字符。

alert(Number(null)); 弹出的是个0；

 

在javascript 中空值用NaN（Not a Number)来表示 

 

在javascript中  \” 是个转义字符，用来表示单个双引号，一般都是成对出现的

 

prompt() 方法用于显示一个带有提示信息，并且用户可输入信息的对话框，第一个参数为提示信息，第二个参数为文本框默认值。

 

数据类型的转换：

parseInt()、parseFloat()函数，可以将字符串转换成整数、浮点数，处理机制：逐字符地解析字符串中的字符，并检查其中是否是一个有效的数字，如果是，转换为对应的数字，否则，终止解析，返回NaN,并将该字符之前的字符串转换为对应的数值

 

数组：

声明一个变量，并将变量定义成一个数组

Array()是一个构造函数，可以传递一个整型数据，表示数组的长度，，js中数组的最大长度为2的32次方

var array;    array= new Array();

或：var array = new Array();

 

 

Number()函数：

 把对象的值转换成数字

 

怎么表示乘方与开根号：

例： var a = Math.pow(3,4);  表示3的4次方

         var a = Math.sqrt(81);    表示81的开方  

 

在js中的函数调用不分先后顺序的，可以先调用再实现

 

在写javascript的代码时一定要用单引号或者双引号括起来，不带引号的话就以字符串来处理

 

在javascript里面不能以纯数字或者click命名函数或者变量

 

要想修改标签的属性，在html里面怎么写，javascript里面就怎么写，但有一个例外，就是class，要写成className

 

鼠标的响应事件：onmouseOver、onmouseOut

 

在javascript中获得标签的属性值有两种方法，点( . )或者方括号 [ ] （这是万能的）

 

设置标签的背景图片： background-image:url(‘jrwm.png’)；或者直接写background:url() top center     也是可以的、 注意一定得是单引号，如果是双引号就不行了

 

style加的样式是加在行间的

 

标签的优先级：

行间>id>class>标签

 

js里面的匿名函数，就是直接写在function()，不用取名字，方便

 

html在head中有时候标签没执行，就调用这个未知的标签就会报错，window.onload就可以解决这个问题，作用是等页面加载完成之后调用

window.onload=function()   {  这里面写函数内容}

 

返回的是一个数组，运用和c语言的数组一样

document.getElementsByTagName(这里面写标签的类型，比如div，然后用单引号或双引号括起来）

 

在js中input的checkbox要想选种就要这样写：xxx.checked=ture/false;

 

在javascript中，this的作用就相当于oc中的self,谁调用它就是谁

 

Sting 对象：

charAt()方法和charAtCode()方法

 charAt()方法和charAtCode()方法：获取字符串中指定位置的字符及该字符在Unicode字符集中的编码值

   charAt() 参数变回所选取字符在字符串中的位置，返回值为该位置上的字符

   charAtCode () 参数为所选取字符在字符串中的位置，返回值为该位置上的字符的Unicode编码值

 

for …in  循环

注意：遍历出来的元素是不是元素而是整数，要在遍历的数组中[遍历的数]才取得出

 window.onload=function() {

            var nav1 = document.getElementById("nav");

            var ele;

            var i;

            var allli = nav1.getElementsByTagName("li");

//            for(ele in allli) {

//                allli[ele].index = ele;

//                    allli[ele].onmousemove = function () {

//                        for(var b in allli) {

//                            allli[b].style.borderBottom = "0px";

//                        }

                        //执行到这里面的时候就会出现莫名的错误，尽量不要用for in 来遍历

//                    };

   

        // 同样的代码，这里就不会出错

            for (i = 0; i < allli.length; i++)//循环每个按钮

            {

                allli[i].onmousemove = function ()//按钮的第i个点击事件

                {

                    for (i = 0; i < allli.length; i++)//循环去掉button的样式，把div隐藏

                    {

                        allli[i].style.borderBottom = "0px ";

                    }

                    this.style.borderBottom="4px solid red";

                }

            }

        }

还是不要用for in 好点，用for循环，因为有时候就会出错

引用外面的js文件：

 <script  src=“xxxx.js”  type=“text/javascript”></script>

类型转换：

字符串转换： string();

布尔转换： ！！放在前面即可

数值转换： number()

js的动画效果

常见的三种输出语句：

1、Alert() 弹出警告框  完整的写法： window.alert();

2、控制台输出 console.log()

3、文档打印  document.write("要打印的内容");

 

事件的三要素：事件源、事件、事件处理程序

 

onclock  鼠标单击    、 ondblclick     鼠标双击 

onkeyup  按下并释放键盘上的一个键触发

onchage  文本框或者是下拉菜单，或者是文本内容的选项发生改变的时候

onfocus  获得焦点 获取鼠标的光标

onblur 失去焦点  失去鼠标的光标

onmouseover  鼠标悬停，即鼠标停留在图片等的上方

onmouseout   鼠标移出，即离开图片等的所在区域

onload   网页文档加载完成的时候调用

onunload   关闭网页时

onsubmit   表单提交事件

onreset   重置表单时

 

  string

返回字符串的长度：length

 

为字符串添加样式：“xxx”.big()/“xxx”.small()/“xxx”.bold()/blink()/tolowerCase()/toUpperCase()等

 

返回字符串中指定的文本首次出现的位置： -indexOf()方法，如果找到就返回，没有就返回-1

 

查找字符串中特定的字符，若找到，则返回该字符   -match()方法     没有找到就返回 null

 

替换字符串中的字符 -replace();   例:document.write(str.replace("ni","wo"));

 

Date日期对象

使用Date（ ）方法来返回今天的日期和时间

 

使用getTime()来计算从1970、1、1到今天的;毫粆数吧，但是得有个前提： 必须先创建一个日期date对象   

var d=new Date();
document.write(d.getTime());

 

使用setFullYear()设置具体的日期  ，前提和上面一样

 

使用toUTString()把当日的日期（根据UTC)转换为字符串， 前提和上面的一样

 

使用getDay() 来显示星期，而不仅仅是数字，前提和上面一样，不过调用返回的是整数，比如星期二就是2

 

时钟的方法： getHours()   getMinutes()   getSeconds()   不过前提和上面一样

 

数组

 

 合并两个数组 - concat()     

用法： 数组1.concat(数组2)    

 

用数组元素组成字符串   -join()   这个括号里面填的是分隔符

 

数组根据名称或者数字来排列数组元素

  sort()  如果元素是字母的话，以字母的顺序排序，如果想排序数字的数组，那就用sort(sortNumber)

 

css中的伪类：

何为伪类：

也就是实际实现了类的效果，但是并没有实际添加到标签中的类，这样的就是伪类，伪类的典型构成就是使用了（：）冒号

1、先说最常用的a链接的伪类，目前市场上的主流浏览器都支持

: link   链接样式

: visited  链接访问过后的样式（只要访问历史记录存在）

：hover 鼠标悬停样式

：active 鼠标按下样式

 

before 与after  伪类的用法：http://justcoding.iteye.com/blog/2032627

一个放在当前的前面，反之后面， 这两个伪类的特有属性content

 

background-size:  length|percentage|cover|contain;

cover:意思是把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

 

“appearance”功能听起来蛮大的，不过可惜的是，目前各个浏览器厂商各自为政，还无法达到统一的标准，至今天也只有两个内核的浏览器可以使用，其一是“webkit”，其二是“ff”也就是firefox浏览器的，也就是说在使用“appearances”时，需要加上各浏览器厂前缀。mozilla是moz的全称，是火狐浏览器的生产厂商，即是一家公司。

注意：使用是前面要加一个  -

-moz-代表firefox浏览器私有属性

-ms-代表IE浏览器私有属性

-webkit-代表chrome/safri私有属性

-o-代表opera私有属性，说白了就是为了兼容

去除系统默认appearance的样式,常用于IOS下移除原生样式，比如在新世界这个项目中的select就用到

了解更多：http://www.css88.com/book/css/webkit/visual/appearance.htm

-webkit-appearance: none 

-moz-appearance: none;

 

 

header标签:

<header> 标签定义文档的页眉（介绍信息）。是html5新出的

 

letter-spacing 属性增加或减少字符间的空白（字符间距）。

 

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

-webkit-transform:rotate(7deg); /* Safari 和 Chrome */