Bootstrap

JavaScript笔记分享

和部分中。

script> //标识标签

alert("我的第一个 JavaScript");//脚本语句

script>

也可以使用外部脚本script src="myScript.js">script>

几种输出语句:

· 使用 window.alert() 弹出警告框。

· 使用 document.write() 方法将内容写到 HTML 文档中。

· 使用 console.log() 写入到浏览器的控制台 (类似日志功能)

· 使用window.confirm();输出带有判断的弹出框

如果⽤户单击“确定”,该框返回 true。如果⽤户单击“取消”,该框返回 false。

· 使用 window.prompt("请输入姓名");输出提示框

如果⽤户单击“确定”,该框返回输⼊值。如果⽤户单击“取消”,该框返回 NULL。

测试片段

测试输入带有默认值的

  window.prompt("请输入姓名",”张三”);

测试确定/取消

<input type="button" value="测试" οnclick="fun()" /> <script> function fun(){ var content; if(confirm("确定 & 取消")){ content_true ="您选择了确定"; document.write(content_true); }else{ content_false ="您选择了取消"; document.write(content_false); } } </script>

测试输入框的返回值

<button οnclick="fun()">选择</button> <script>function fun() { var name = prompt("支持哪个国家","巴勒斯坦"); if (name == null||name =="以色列") { var content_null ="放弃选择" alert("content_null"); }else{ alert(name + "感谢你" ); } }

一、 javascript定义变量

定义变量:首先强调javascript声明任何变量全部用var(甚至没有var都可以,俩者有一点区别),这说明javascript是一门弱类型的语言,变量没有具体数据类型。

JavaScript中的数据很简洁的。简单数据只有 undefined, null, boolean, number和string这五种,而复杂数据只有一种,即object。

    JavaScript中的代码只体现为一种形式,就是function。

注意:以上单词都是小写的,不要和Number, String, Object, Function等JavaScript内置函数混淆了。要知道,JavaScript语言是区分大小写的呀!

    任何一个JavaScript的标识、常量、变量和参数都只是unfined, null, boolean, number, string, object 和 function类型中的一种,也就typeof返回值表明的类型。除此之外没有其他类型了。

    先说说简单数据类型吧。

    undefined:   代表一切未知的事物,啥都没有,无法想象,代码也就更无法去处理了。

                      注意:typeof(undefined) 返回也是 undefined。

    null:            有那么一个概念,但没有东西。无中似有,有中还无。虽难以想象,但已经可以用代码来处理了。

                      注意:typeof(null)返回object,但null并非object,具有null值的变量也并非object。

    boolean:     布尔类型:值跟java一样  只有false  trus

    number:      数字类型,整形,浮点

                     

                           

    string:         字符串

Javacript的类型

测试以下代码执行结果?

  输出number

假设要进行类型转换怎么办呢?

输出111

如果要转换需要:

输出12

假设转换一个不是数字的值:

利用NaN可以做一些判断然后分支。。。

NaN表示不是纯数字

经常可能需要设置字体大小,那么就可能用到16px等。font-size:12px :

输出NaN

看到Number(b)没办法转换了,接着往下:

输出12

利用这一点就可以实现通过javascript修改字体大小

常见的运算符号

选择器

修改元素内容

<html> <head> <script> function upd(){ // 获取元素对象 var a = document.getElementById("a"); var ipt = document.getElementById("ipt"); a.innerHTML = "京东"; ipt.value = "hello world"; } </script> </head> <body> <a href="" id="a">百度一下</a> <input type="text" id="ipt"><br> <button οnclick="upd()">修改内容</button> </body> </html>

先获取后赋值

修改元素样式

元素对象.style.样式 = “样式值”

<html> <head> <script> function upd(){ // 获取元素对象 var a = document.getElementById("a"); a.style.color = "green"; a.style.backgroundColor = "red"; } </script> </head> <body> <a href="" id="a">百度一下</a> <button οnclick="upd()">修改内容</button> </body> </html>

添加元素属性

元素对象. setAttribute(“属性名”,”属性值”)

添加元素属性

元素对象. removeAttribute (“属性名”)

移除元素属性

元素对象. getAttribute(“属性名”)

获取元素属性

inp.classList.add("123");

追加一个class属性

classList.remove("inp2")

移除一个class属性

<html> <head> <script> function upd(){ // 获取元素对象 var a = document.getElementById("a"); //添加属性 a.setAttribute("href","http://www.baidu.com"); //移除属性 a.removeAttribute("id"); } </script> </head> <body> <a href="" id="a">百度一下</a> <button οnclick="upd()">修改内容</button> </body> </html>

添加/删除元素

parentNode

获取父节点

childNodes

获取子节点

document. createElement

创建标签节点

document. createTextNode

创建文本节点

appendChild

添加节点

parent.removeChild(child);

删除节点

parent.replaceChild(para, child);

替换节点

<html> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var para = document.createElement("p");//创建标签 var node = document.createTextNode("这是一个新的段落。"); //创建内容 para.appendChild(node); //将文本添加到标签中 var element = document.getElementById("div1");//获取元素 element.appendChild(para); //添加到元素后面 </script>

移除 <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child); </script>

替换 <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("这是一个新的段落。"); para.appendChild(node); var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child); </script>

事件

常见的 HTML 事件

下面是一些常见的 HTML 事件:

事件

描述

onchange

HTML 元素已被改变

onclick

用户点击了 HTML 元素

onmouseover

用户把鼠标移动到 HTML 元素上

onmouseout

用户把鼠标移开 HTML 元素

onkeydown

用户按下键盘按键

onload

浏览器已经完成页面加载

    

    

;