美文网首页
js基础语法

js基础语法

作者: 27b0bd2612de | 来源:发表于2017-07-02 17:31 被阅读0次

- 1.如何插入js

<script type="text/javascript">

js代码

</script>

- 2.引用外部文件

<script type="script.js"></script>

- 3.JS在页面中的位置

javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。比如进行任何页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body设置cee等);而如果是通过事件调用执行的function那么对位置没什么要求的。

- 4.什么是变量

语法:var 变量名

- 5.什么是函数

   函数代码;
}```
#- 6.输出内容
`document.write("I love" +"you"+"<br>");`
#- 7.警告
`alert("xxx");`
#-8. 确认

var message = confirm("你喜欢我吗?");
if(message)
{
当用户点击“确定”按钮时,执行。
}
else
{
当用户点击"取消"按钮时,执行。
}

#- 9.提问(prompt 消息对话框)
语法:`prompt(str1,str2);`
参数说明:
str1:要显示在消息对话框中的文本,不可修改
str2:文本框中的内容,可以修改
返回值:
- 点击确定按钮,文本框中的内容将作为函数返回值。
- 点击取消按钮,将返回null。

#- 10.打开新窗口(window.open)
语法: `window.open([URL],[窗口名称],[参数字符串])`
参数说明:
**URL**:可选参数,在窗口要显示网页的地址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
**窗口名称**:可选参数,被打开窗口的名称。
- 该名称由字母,数字,下划线字符组成。
- "_top","_blank","_self"具有特殊意义的名称。
     _balnk:在你新窗口显示目标网页
    _self:在当前窗口显示目标网页
    _top:框架网页中在上部窗口中显示目标网页。
- 相同name的窗口只能创建一个,要想创建多个窗口则name不能相同。
- name不能包含有空格。
*参数字符串:*可选参数,设置窗口参数,各参数用逗号隔开。
![参数表](http://img.mukewang.com/52e3677900013d6a05020261.jpg)

例如:打开http://www.imooc.com网站,大小为300px * 200px,无菜单,无工具栏,无状态栏,有滚动条窗口:

<script type="text/javascript">
window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no,status=no,scrollbars=yes');
</script>

#- 11.DOM
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素,属性和文本的树结构(节点树)。
- 元素节点:`<html>,<body>,<p>`等都是元素节点,即标签。
- 文本节点:向用户展示的内容,如`<li>...</li>`中的JavaScript,DOM,CSS等文本
- 属性节点 :如`<a>`标签的链接属性`href=""`。

#- 12.DOM-通过ID获取元素
语法:`document.getElementById("id")`.
![doucment.getElementById("ID")-例子](http://img.mukewang.com/52e4c5950001054207900423.jpg)
结果:`null`或`[object HTMLParagraphElement]`
#- 13.DOM-innerHTML属性
语法:`Object.innerHTML`
- Object是获取的元素对象,如通过`document.getElementById("ID")`获取的元素.
- 注意书写,`innerHTML`区分大小写.
通过id="con"获取<p>元素,并将元素的内容输出和改变元素的内容,代码如下:
![innerHTML-例子](http://img.mukewang.com/52e4cd080001f01507220418.jpg)
结果:
![innerHTML-结果](http://img.mukewang.com/52e4cb5c000187ce03740251.jpg)

#- 14.DOM-修改HTML样式Style
HTML DOM允许 JavaScript改变HTML样式
语法:`Object.style.property=new style;`
![基本属性表](http://img.mukewang.com/52e4d4240001dd6c04850229.jpg)
注意:该表只是一小部分CSS样式属性,其他样式也可以通过该方法设置和修改。
改变<p>元素的样式,将颜色改为红色,字号20,颜色背景改为蓝.

<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
</script>


#- 15.DOM-显示和隐藏(display属性)
语法:`Object.style.display=value`
value值:`none` (此元素不会被显示)隐藏
                 `block` (此元素将显示为块级元素)显示
  ![display-例子](http://img.mukewang.com/52e4dcf50001bead09310689.jpg)
#- 16.DOM-控制类名(className属性)
语法`Object.className=classname`
作用:
- 获取元素的class属性
- 为网页内某个元素指定一个css样式来更改改元素的外观

相关文章

  • JS基础和WebAPIs的关联性

    学习ECMAscript标准规定的基本语法掌握JS基础语法只学习JS基础做不了网页交互效果学习JS基础语法是为了后...

  • 4/07day28_js基础

    day28_js基础 回顾 JS基础语法 JS运算符 JS流程控制语句 条件语句 JS的条件语句和Java语法基本...

  • -----Web APIs-----

    JS学习ECMAScript基础语法是为后面做铺垫,Web APIs才是JS的应用,大量使用JS基础语法做交互效果...

  • React-Native 随笔

    学习基础: js的基础知识, rect.js基础 JSX语法基础 FlexBox布局 安装 安装node.js下载...

  • web前端 -- Day23 js高级

    js基础 JavaScript简称:JS JS分三个部分: ECMAScript标准---基础的语法 DOM D...

  • 022 JS操作

    JS基础操作 一、分支结构 1、if语句 if 基础语法 if 复杂语法 if 嵌套 2、switch语句 二、循...

  • Dom

    JS的组成 ECMAScript js的基础语法 DOM 文档对象模型 BOM ...

  • DOM

    JS的组成 ECMAScript js的基础语法 DOM 文档对象模型 BOM ...

  • JS基础操作

    JS基础操作 [TOC] 一、分支结构 1、if语句 if 基础语法 >>>阅读全文

  • DOM

    DOM JS的组成 ECMAScript js的基础语法 DOM 文档对象模型 BOM ...

网友评论

      本文标题:js基础语法

      本文链接:https://www.haomeiwen.com/subject/pyfocxtx.html