JavaScript初探一

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        table {

            border: 1px solid #0094ff;

        }

    </style>

    <script type="text/javascript">

        //00.注意,js代码无差别折叠,ctrl+m+h

        //01.js代码写在javascript标签中,一般放在 head标签里面(约定_规范),放在其他地方也行

        //02.js中定义变量, var关键字,js中定义对象,new Object()

        var fox = 123;

        var foxage = 18.5;

        var foxSex = true;

        var foxName = "狐狸一号";

        var people = new Object();

        people.skill = "吃饭饭";

        //03.js中 对象的字面量表示法

        var animal = {

            skill: "打小动物", height: "18cm"

        }

        //04.js中 数组长度可变

        //js中的数组,可以放任意元素

        //js中,变量定义了,未赋值 就是 undefined

        var numArr = new Array();

        // alert(numArr.length);

        numArr.length = 10000;

        //alert(numArr.length);

        numArr[0] = "小二黑";

        numArr[9999] = 998;

        //alert(numArr[0] + "||" + numArr[9999] + "||" + numArr[2]);

        var haha;

        //  alert(haha)

        //05.判断语句

        //  string true 数字(除0以外) 对象 数组

        // false 0 undefined null NaN

        //var smallFox = "胡二皓";

        //if (null) {

        //    alert("这是大女儿");

        //} else {

        //    alert("这是二小姐");

        //}

        //06.选择语句

        //写法 跟c#类似,但是 break 可以不写,会直接向下执行

        //var nowDay="星期一";

        //switch (nowDay) {

        //    case "星期一":

        //        alert("睡觉觉");

        //    case "星期二", "星期三", "星期四":

        //        alert("上班班");

        //        break;

        //    default:

        //}

        //07.循环语句

        //07.1for c#一样

        for (var i = 0; i < 2; i++) {

            // alert("捏方便面_哈哈");

        }

        //07.2while循环  do while

        //while (true) {

        //}

        //do {

        //}

        //while(true)

        //07.3for in 循环

        //没有办法tab出来 需要自己写,

        //一般用来循环对象

        //item 访问到的是属性名,通过对象[属性名]可以取到属性值

        //var lunch = {

        //    food1:"白切鸡",food2:"叉烧饭",food3:"叉烧猪脚双拼"

        //}

        //for (var item in lunch) {

        //    alert(item + ":" + lunch[item]);

        //}

        //08方法(函数)的定义

        //命名规范跟c#一样

        //形参 和实参可以不匹配,

        //如果定义了形参,不传,那么就是undeifned

        //如果传多了,只能接收到形参个数一样的实参

        //无参无返回值的方法

        function SayHi() {

            //alert("成龙大哥好啊");

        }

        //有参无返回值

        function EatFood(foodName) {

            alert("水煮肉片,味道不错" + foodName + "味道也可以");

        }

        //EatFood(123);

        //有参,又返回值

        //js方法有一个默认的返回值 undefined

        //也可以理解成,定义变量.未赋值,就是undefined

        function BuyFood(money) {

            if (money > 5 && money < 10) {

                return "兰州拉面";

            }

            else if (money >= 10) {

                return "水煮肉片";

            }

        }

        var someFood = BuyFood("铁板牛肉");

        // alert(SayHi());

        //09.重要 js中方法也是对象

        //可以new出来

        //可以为方法对象添加属性

        var peopleRun = new Function("alert('123');");

        //   peopleRun();

        peopleRun.sayhi = "1233";

        function peopleEatFood() {

            alert("肚子饿了,吃饭饭");

        }

        peopleRun.eatFood = peopleEatFood;

       // peopleRun.eatFood();

        //匿名函数

        //没有名字的函数

        peopleEatFood.jump = function () {

            alert("大跳,大跳");

        }

        peopleEatFood.jump();

    </script>

</head>

<body>

    <table>

        <tr>

            <td>姓名</td>

        </tr>

    </table>

</body>

</html>

　　全局函数

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript">

        //01.alert()输出内容

        //02.confirm()选择的框,形参是提示信息,选择确定,返回true 选择取消返回false

        //var eatOrNot = confirm("今天中午吃饭吗?");

        // alert(eatOrNot);

        //03.prompt()输入框,第一个形参,提示信息,第二个形参默认值

        //点击确定,获取文本内容,点击取消就为null

        //var sleepWhere = prompt("今天中午睡哪里?", "教室我看就不错");

        //alert(sleepWhere);

        //小练习 让用户依次输入两个数字,然后将这两个数字的和打印给用户看 友情提示,运算符,跟c#一样

        var num1 = parseInt( prompt("请输入第一个数字"));

        var num2 = parseInt( prompt("请输入第二个数字"));

        alert(num1 + num2);

        //04.转型parseInt()

        //数字,直接转换成数字

        //数字+字母,从左往右转换,直到遇到字母,就跳出

        //字母+数字,NaN not a num

        //alert(parseInt(prompt("请随便输入")));

        //alert(parseFloat(prompt("请随便输入")));

        //05.math这个函数里面提供了一些数学方法,比如四舍五入,天花板函数

        //06.转换数字的新方法

        //Number() int float 直接转换 但是不能转换 字母和数字拼接的

        //  alert(Number(prompt("请输入一些东西")) + 1);

        if (Number("abc")) {

            alert("对了");

        } else {

            alert("不对哦");

        }

    </script>

</head>

<body>

</body>

</html>

　　dom元素初识

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

</head>

<body>

    <input type="button"  value="点击吃饭饭" id="btnEatFood" name="ha"/>

    <br />

    <label>食物名称:</label>

    <input type="text"  id="foodName" />

</body>

</html>

    <script type="text/javascript">

        //00.alert可以阻断浏览器线程,其他的弹窗也会阻断线程

        //01.通过id获取dom元素

        //alert("稍微等一会");

        //01.通过id获取dom对象

        //document.getElementById("btnEatFood");通过id获取单个对象

        //dom元素的属性可读可写

        //var inputObj = document.getElementById("btnEatFood");

        //inputObj.value = "晚上好好睡觉";

        //inputObj.type = "text";

        //inputObj.name = "捏哈哈";

        // alert(inputObj.value);

        //02.元素事件

        document.getElementById("btnEatFood").onclick = function () {

            alert("大家好,马上吃午饭了");

            //获取文本框里面的文本质

            alert(document.getElementById("foodName").value);

        }

    </script>

　　小练习

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <label>数字1</label>

    <input type="text" id="num1" />

    <br />

    <label>数字2</label>

    <input type="text" id="num2" />

    <br />

    <input type="button" id="sum" value="点击求和" />

    <table>

        <tr>

            <td></td>

        </tr>

    </table>

</body>

</html>

<script type="text/javascript">

    //01.添加点击事件

    document.getElementById("sum").onclick = function () {

        //获取两个文本框里面的值 加起来,给用户看

        var num1 = document.getElementById("num1").value;

        var num2 = document.getElementById("num2").value;

        alert(parseInt(num1) + parseInt(num2));

    }

</script>

　　dombom

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <ol>

        <li id="apple" class="fruit" >小苹果</li>

        <li class="fruit">小榴莲</li>

        <li id="vegettableOne">小南瓜</li>

        <li id="Twodog" class="littleDog">小哈士奇</li>

    </ol>

</body>

</html>

<script type="text/javascript">

    //  window.location = "http://www.baidu.com";

    // window.close();

    //01.window对象相当于是页面中的顶级对象,

    //如果是通过window.xx 的方式写出来的变量 可以省略掉 window.

    //我们定义的所有 全局 变量,都相当于为window对象添加属性

    window.sayHi = "123";

    var fox = "小狐狸";

    function sayHello() {

        var people = "火星人";

    }

    //----------分割线=-----------------------------------

    //02.dom对象时存放在 window对象的document属性下面

    //document对象为我们提供了很多种获取dom元素的方式

    //02.1byid 通过id获取单个dom元素

    //双标签里面的文本值,通过innerHTML修改

    // document.getElementById("apple").innerHTML = "西兰花";

    //02.2byClass 获取所有符合 class的 元素 返回的是dom数组无论元素个数是多少个

    //注意:写js代码的时候,可能出现没有智能提示---不要不敢写哦

    var fruitObjs = document.getElementsByClassName("fruit");

    for (var i = 0; i < fruitObjs.length; i++) {

        fruitObjs[i].innerHTML = "西洋菜";

    }

    // document.getElementsByClassName("littleDog").innerHTML = "大哈士奇";

    //02.3byTagName获取的也是dom数组

    //修改样式,必须通过style点出来,如果在css中 是 background-color的写法 需要改写为 backgroundColor

    var liObjs = document.getElementsByTagName("li");

    for (var i = 0; i < liObjs.length; i++) {

        liObjs[i].style.color = "yellow";

        liObjs[i].style.backgroundColor = "#0094ff";

    }

    //----------分割线=--------------------------s---------

    //----------分割线=-----------------------------------

</script>

　this　

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <input type="button" value="点击明天休息"  id="tomorrowSleep"/>

</body>

</html>

<script type="text/javascript">

    //js中方法体里面的this 看 这个方法由谁点出来

    document.getElementById("tomorrowSleep").onclick = function () {

        alert(this.value);

    }

    //用户点击按钮的时候 浏览器调用了 document.getElementById("tomorrowSleep").onclick();

    function sayHello() {

        alert(this.value+"1");

    }

    window.sayHello();

    //js中重新为元素属性复制,会覆盖之前的

    document.getElementById("tomorrowSleep").onclick = sayHello;

</script>

　　HTMLText

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <div style="height: 100px; width: 100px; border: 1px solid #0094ff" id="divBox">

        <input type="button" value="测试用按钮1" />

        <input type="button" value="测试用按钮2" />

        <input type="button" value="测试用按钮3" />

    </div>

    <input type="button" value="HTML" id="btnHTML" />

    <input type="button" value="Text" id="btnTEXT" />

</body>

</html>

<script type="text/javascript">

    //innerHTML如果设置的是 符合html规范的标签,那么浏览器会解析成html代码

    //可以使用InnerHTML来清空某些元素内部的所有元素

    document.getElementById("btnHTML").onclick = function () {

        var inputStr = prompt("请输入内容_HTML");

        //设置给div

        document.getElementById("divBox").innerHTML = inputStr;

    }

    //innerText不管输入什么,都当成字符串

    //innerText火狐不支持 contextText(火狐用)

    //后面做开发用的是jq

    document.getElementById("btnTEXT").onclick = function () {

        var inputStr = prompt("请输入内容_Test");

        //设置给div

        document.getElementById("divBox") = inputStr;

    }

</script>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        ol {

            list-style: none;

            text-align: center;

        }

        li {

            border: 1px solid #0094ff;

            width: 200px;

            height: 30px;

            line-height: 30px;

        }

    </style>

</head>

<body>

    <input type="button" id="btnAdd" value="追加li标签" />

    <input type="button" id="btnRemove" value="删除选中li标签" />

     <input type="button" id="btnInsert" value="制定位置插入li标签" />

    <ol id="olList">

        <li>红烧排骨</li>

        <li>糖醋里脊</li>

        <li>剁椒鱼头</li>

        <li>驴肉火烧</li>

        <li>鱼香肉丝</li>

    </ol>

</body>

</html>

<script type="text/javascript">

    //选中的li标签;

    var liSelected;

    //-----------风格线-下面是方法上面是变量--------

    //00.为所有的li标签 添加点击事件

    var liObjs = document.getElementsByTagName("li");

    //为每一个li标签设置点击事件

    for (var i = 0; i < liObjs.length; i++) {

        liObjs[i].onclick = highSel;

    }

    //01.为新增按钮添加点击事件

    document.getElementById("btnAdd").onclick = function () {

        //01.创建dom元素

        var liCreate = document.createElement("li");

        //02.接受用户输入,并且将用户输入设置到创建的li标签中

        liCreate.innerHTML = prompt("请输入问本值");

        //03.追加到ol标签里面

        document.getElementById("olList").appendChild(liCreate);

        //04设置点击事件

        liCreate.onclick = highSel;

    }

    //02.为删除按钮添加点击事件

    //dom元素的删除,注意,不能自杀,需要他杀-通过父元素的 removeChild方法来删除

    //dom元素.removeChild方法来删除 只是将dom元素从dom树里面移除,dom元素还在内存中

    document.getElementById("btnRemove").onclick = function () {

        //02.1测试删除代码

        //var liObjs = document.getElementsByTagName("li");

        //document.getElementById("olList").removeChild(liObjs[0]);

        //调用ol标签的删除放发

        document.getElementById("olList").removeChild(liSelected);

        //将liselected设置为undifned

        liSelected = undefined;

    }

    //03.为插入按钮 添加点击事件

    //注意,insertBefore在指定位置插入dom元素 父元素点出来的

    //如果不传指定元素位置,那么在最后追加

    document.getElementById("btnInsert").onclick = function () {

        //01.创建dom元素

        var liCreate = document.createElement("li");

        //02.接受用户输入,并且将用户输入设置到创建的li标签中

        var inputStr = prompt("请输入问本值");

        //判断文本的正确性

       if (inputStr == null||inputStr.trim()=="") {

           return;

       }

        //如果不为空才设置

       liCreate.innerHTML = inputStr;

        //03.插入到指定的位置到

        document.getElementById("olList").insertBefore(liCreate, liSelected);

        //04设置点击事件

        liCreate.onclick = highSel;

    }

    //修改逻辑

    //01.判断是否选中li标签

    //02.创建一个文本框

    //03.设置文本框的.value

    //04.将文本框追加到li标签里面

    //05.设置文本框的失去焦点事件onblur

    //05.1失去焦点的时候,获取文本框的value值,设置给li标签

    //------------全局函数

    //高亮选中方法

    function highSel () {

        //这里的this就是点击的那个li标签

        liSelected = this;

        //还原其他的li标签的颜色

        for (var j = 0; j < liObjs.length; j++) {

            liObjs[j].style.color = "black";

        }

        //高亮显示选中

        this.style.color = "pink";

    }

</script>

　　编辑

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <input type="button" value="修改选中" id="btnEdit" />

    <ol>

        <li>小苹果</li>

        <li>小西瓜</li>

    </ol>

</body>

</html>

<script type="text/javascript">

    //全局变量 保存点击的li标签

    var liSelect = undefined;

    //添加高亮选中方法

    var liObjs = document.getElementsByTagName("li");

    for (var i = 0; i < liObjs.length; i++) {

        liObjs[i].onclick = function () {

            //还原其他

            for (var j = 0; j < liObjs.length; j++) {

                liObjs[j].style.backgroundColor = "white";

            }

            this.style.backgroundColor = "pink";

            //为全局变量赋值

            liSelect = this;

        }

    }

    //为修改按钮添加点击事件

    document.getElementById("btnEdit").onclick = function () {

        //创建一个input标签

        var inputEdit = document.createElement("input");

        //设置input标签的value值

        inputEdit.value = liSelect.innerHTML;

        //清空

        liSelect.innerHTML = "";

        //将input标签追加到li标签里面

        liSelect.appendChild(inputEdit);

        //让文本框获得焦点

        inputEdit.focus();

        //为文本框添加失去焦点事件

        inputEdit.onblur = function () {

            if (inputEdit.value.trim()=="") {

                alert("不能为空");

                this.focus();

                return;

            }

            //将文本框的value值 设置给li标签的html值

            liSelect.innerHTML = this.value;

        }

    }

</script>

JavaScript初探一的更多相关文章

JavaScript学习（一） —— 环境搭建与JavaScript初探
1.开发环境搭建本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
JavaScript初探五
JavaScript 初探七 JavaScript 数据类型基本的值类型字符串(String) 数字(Number) 布尔值(Boolean) 对象(Object) 函数(Function ...
JavaScript初探三（学习js数组）
JavaScript初探 (三) JavaScript数组定义创建数组 var 数组名 = [元素0,元素1,元素2,--] ; var arr = ["Huawei",&qu ...
JavaScript初探二（了解数据）
JavaScript初探 (二) JavaScript 事件 HTML事件 HTML事件是可以在浏览器或用户做的某些事情 HTML事件的例子: HTML网页完成加载 HTML输入字段被修改 HTML按 ...
JavaScript初探一（认识JavaScript）
JavaScript 初探 JavaScript插入HTML中内嵌的Js代码 <!DOCTYPE html> <html> <head> <meta cha ...
JavaScript初探系列目录
一系列导航结合各方面的参考资料,整理出来以下主要目录,供方便浏览查看 (一)初探系列 JavaScript初探系列(1)——基本概念 JavaScript初探系列(2)——数 ...
JavaScript初探之AJAX的应用
什么是 AJAX1. AJAX = 异步 JavaScript 和 XML. 2. AJAX 是一种用于创建快速动态网页的技术. 3. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步 ...
JavaScript初探四
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
JavaScript初探三
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
JavaScript初探二
//----------总结01.查找dom元素 document.getElementById();//通过id获取一个dom元素 document.getElementsByClassName() ...

随机推荐

java -version 版本号与path中配置的不一致
Error: could not open `F:\e\java\jre7\lib\amd64\jvm.cfg' C:\Users\wl>java -versionError: could no ...
spring配置Bean
Bean 就是一个类一下代码都是基于spring之IOC和DI实现案例基础上进行解析 Bean的实例化方式: 1.无参构造 <bean id="UserService" ...
线段树区间覆盖蛤玮打扫教室（zzuli 1877）
http://acm.zzuli.edu.cn/zzuliacm/problem.php?id=1877 Description 现在知道一共有n个机房,算上蛤玮一共有m个队员,教练做了m个签,每 ...
【python】鼠标操作
[python]鼠标操作推荐地址:http://www.cnblogs.com/fnng/p/3288444.html --------------------------------------- ...
Javaweb异常提示信息统一处理
Java异常封装(自己定义错误码和描述,附源码) 2016年01月29日 22:30:54 小宝鸽阅读数:23262 标签: java异常更多个人分类: Java基础所属专栏: Java工作实 ...
Yarn的资源隔离机制
源调度和资源隔离是YARN作为一个资源管理系统,最重要和最基础的两个功能.资源调度由ResourceManager完成,而资源隔离由各个NodeManager实现,在文章“Hadoop YARN中内存 ...
poj 3083 Children of th
#include <iostream> #include<stdio.h> #include<string.h> using namespace std; int ...
PL/SQL客户端连Oracle很快就断开问题的解决
PL/SQL登录很短时间session就自动断开 1.首先查看你这个用户的profile文件 select profile from dba_users where username='USERNAM ...
分形之花篮（Flower Basket）
这一篇展示的图形与上一篇文章分形之皇冠(Crown)很相似. 核心代码: static void FractalFlowerBasket(const Vector3& vStart, cons ...
如何把jar包发布到maven私服
1.格式 mvn deploy:deploy-file -DgroupId=com.qiyi -DartifactId=sphinx -Dversion=1.0 -Dpackaging=jar -Df ...

JavaScript初探一

JavaScript初探一的更多相关文章

随机推荐

热门专题