前端的基本功Javascript

1、

      1. Alert()  弹出警示框

完整的写法  :  window.alert(“执行语句”);

Window 对象  窗口    一般情况是可以省略的。

Alert(“123”);

2、

使用代码

作用

Console.log()

控制台输出  普通输出语句

Console.warn()

控制台警示

Console.error();

错误提示

3、

      1. document.write()  文档打印输出

document   文档对象  它不可以省略   

Alert()  非常少。   用户体验     

Console  用户看不见

document.write() 直接在文档中显示。

 

4、

getElementById("demo")

   Get 获取   element 元素   by 通过   id 名字

  通过 id 名字为 demo的  得到这个元素

  因为这个div  是在  文档中,文档中很多个div其中的一个。所以我们

先document

 

document.getElementById("demo").style.width = "200px";

5、

    1. 变量

变量的命名规则!

1.变量命名必须以字母或是下标符号”_”或者”$”为开头。

2.变量名长度不能超过255个字符。

3.变量名中不允许使用空格。

4.不用使用脚本语言中保留的关键字及保留符号作为变量名。

5.变量名区分大小写。(javascript是区分大小写的语言)

 

6、事件的三要素

      1. 事件源 

 要触发的对象     手    用手去触发的。  谁触发了

 一般情况下 是 个名词   

 发起者  

 被触发者    开关按钮 

 

怎么触发的这个事情     按   

  一般情况下这个是 动词   点击  鼠标经过   按键盘

 

事件名

说明

onclick

鼠标单击

ondblclick

鼠标双击

onkeyup

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

onchange 

文本内容或下拉菜单中的选项发生改变

onfocus 

获得焦点,表示文本框等获得鼠标光标。

onblur 

失去焦点,表示文本框等失去鼠标光标。

onmouseover 

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

onmouseout 

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

onload

网页文档加载事件

onunload

关闭网页时

onsubmit

表单提交事件

onreset

重置表单时

事件源:  按钮

    事件  点击

    事件处理程序:  盒子的宽度改变  400

    代码:

     <script>

事件源.事件 = function(){  事件处理函数 }

  1.     /*要操作先找人*/
        var demo = document.getElementById("demo");  //获得id为demo的div盒子给demo
        var btn = document.getElementById("btn"); // 获得按钮
        /*事件三要素*/
        /*事件源.事件 = fucntion(){}*/
        btn.onclick = function(){
            demo.style.width = "400px";
        }
    </script>

7、

    1. 隐藏样式

 Display: none           display: block ;  显示的意思

 Visibility: hidden;       visibility: visible  显示的意思

 Display  隐藏不占位置

 Visibility:hidden 隐藏占有位置   停职留心

 Overflow:hidden;   隐藏超出的部分。

 

8、js的书写的位置

 

内行式

<button onclick="alert('你好吗')">点击我</button>

 

9、

 内嵌式

 <script type=”text/javascript”>  </script>  任何一个地方

 

10、

 外链式

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

11、

    1. 数据类型

 Js 的数据类型分为:

  字符型     数值型   布尔型   null    undefined 

 Js 是一个是一种弱数据类型 。

 Var  Aa = 10;

Var  aa:int = 10;

 Js 的变量你给什么值,他就是什么数据类型。

 

12、 函数的

(1)自定义函数

function fun(){

    alert("我是自定义函数")

}

fun();  // 函数不调用,自己不执行

      1. 函数直接量声明

 

var fun1 = function(){

    alert("直接量声明")

}

fun1();  也需要调用

 

利用Function 关键字声明

var fun2 = new Function("var a = 10; var b = 20; alert(a+b)");

fun2();

 

 

 

arguments是存储了函数传送过过来实参

Javascript在创建函数的同时,会在函数内部创建一个arguments对象实例.

arguments对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组,访问单个参数的方式与访问数组元素的方式相同

arguments对象的长度是由实参个数而不是形参个数决定的

 

    <script>
    function fn(a,b)
    {
        console.log(fn.length); //得到是 函数的形参的个数
        //console.log(arguments);
        console.log(arguments.length); // 得到的是实参的个数
        if(fn.length == arguments.length)
        {
            console.log(a+b);
        }
        else
        {
            console.error("对不起,您的参数不匹配,正确的参数个数为:" + fn.length);
        }
        //console.log(a+b);
    }
    fn(1,2);
    fn(1,2,3);
</script>

13、获取焦点

    1. 获得焦点  失去焦点 事件 

 我们前面学过了  onclick  点击  onmouseover  onmouseout’

 获得焦点:   onfocus         fao ~克死

 失去焦点:   onblur          不len ~~

1.11	getElementsByTagName()  获取某类标签
前面我们可以得到一个盒子  通过  id 获得 
getElementById()   只得到一个 盒子
我们想要获取某类标签   比如说所有 的div   li  span
getElementsByTagName();  很多个所以是复数   很多个
得到的是一个伪数组。
Lis  数组  
Lis[索引号]   一个 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

猜你喜欢

转载自blog.csdn.net/shisjieshoufu/article/details/81222652