javaScript基础


什么是JavaScript?

  • 是轻量级的面向对象的编程语言(脚本语言)
  • 特点:面向对象、解释性、动态性、弱类型、跨平

JavaScript的组成?

  • ECMAscript:是js的标准
  • DOM(document object modul):文档对象模型,定义操作html的属性和方法
  • BOM(borwser object modul):浏览器对象模型,定义了浏览器的属性和方法

ECMAscript 于JavaScript的关系?

  • ECMAscript 是JavaScript的标准;
  • JavaScript是ECMAscript 的一种体现

变量的命名规则

  • 使用数字,字母,下划线和$符号
  • 不能以数字开头;
  • 不能使用关键字和保留字;
  • 推荐使用驼峰命名法

文档就绪事件:

window.onload = function(){ 
      ...
    }

如果直接把js放入head中,会报错。因为页面时从上向下执行的,当运行到js代码时,页面的标签还没有加载出来,获取不到,所以要添加文档就绪事件,让页面加载完再执行js代码 

简单的一个交互思路:

var oBox = document.getElementById('box');
- 绑定事件 oBox.onclick = function(){ }
- 事件发生时做什么 oBox.onclick = function(){ //这里面写事件发生时要执行的所有操作 }

js操作标签的样式:

    element.style.样式属性 = 值;
    oBox.style.backgroundColor = "red";
  
  * 样式属性名中带  '-'  ,都转换成驼峰命名  例如 font-size  --> fontSize

  - cssText 批量操作css样式  ,相当于设置标签上的style属性值
  
    oBox.style.cssText = "width:100px;height:100px;background-color:red;";

操作标签的内容:

  - 1-闭合标签
    - innerHTML : 设置或者获取标签之间的HTML代码
    - innerText : 设置或者获取标签之间的文本(不能识别标签)
    
    ```
      oBox.innerHTML = "<h1>hello</h1>";
       //浏览器显示:hello
      oBox.innerText = "<h1>hello</h1>";
       //浏览器显示:<h1>hello</h1>
    ```
- 2- 表单元素的值 - value : 获取或者设置表单元素的值 ``` oInp.value = "张三"; ```

操作标签属性

``` 
    <div id="box" class="red">
    <img src="img/pic.jpg" alt="替换文字">
    <a href="" target="_blank">
    <form action="" method="">
    <input type="" name="" checked>
    <option seleted></option>
  ``` 
 - 标签上的属性大部分情况都是直接用元素 .属性名 ,比如 

  ```
    oBox.id = "box";
    oImg.src = "img/pic.jpg";
    oLink.href = "http://www.ujiuye.com";
  ```
 - class属性比较特殊 ,需要用className属性访问 (因为class是js中的关键字)
  
  ```
    oBox.className = "red"
  ```
  ```
    box.className = "box red";
  ```
 - 标签属性的值正常情况都是标签上怎么写的,获取回来就是什么,
   checked和selected属性使用 truefalse 表示是否选中

 - 设置单选按钮\复选框\下拉列表选项选中状态也是使用true和false,true表示选中,false表示取消选中
   ```
      radio.checked = true;
   ```

常用的鼠标点击事件:

  - onclick  单击事件
  - ondblclick 双击事件
  - oncontextmenu  右键菜单事件
  - onmousedown  鼠标按键按下
  - onmouseup   鼠标按键抬起
  - onmouseover  移入事件
  - onmouseout   移出事件
  - onmouseenter   进入事件
  - onmouseleave   离开事件
  - onmousemove   移动事件
  
- onmouseover和onmouseenter区别: 鼠标从子元素上移入移出,会反复触发父元素的over事件
- onmouseout和onmouseleave区别: 鼠标从子元素上移入移出,会反复触发父元素的out事件

优质内容筛选与推荐>>
1、[翻译]-马丁·福勒-page对象
2、GSM移动通信系统结构简介
3、input搜索框实时检索功能实现(超简单,核心原理请看思路即可)
4、oracle-shell备份
5、Sql Server char、varchar、nchar、nvarchar的区别


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn