JS笔记

      看了下最近学习JS写的代码,发现已经忘得差不多了,故写此篇来回顾下,有错误的话望指点

1.js中常见的字符类型:字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）。

String类型用于表示由零或多个16位Unicode字符组成的字符序列，即字符串。字符串可以由单引号(')或双引号(")表示。

Number类型用来表示整数和浮点数值，还有一种特殊的数值，即NaN（非数值 Not a Number）。这个数值用于表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。例如，在其他编程语言中，任何数值除以0都会导致错误，从而停止代码执行。但在JavaScript中，任何数值除以0会返回NaN，因此不会影响其他代码的执行。

NaN本身有两个非同寻常的特点。首先，任何涉及NaN的操作（例如NaN/10）都会返回NaN，这个特点在多步计算中有可能导致问题。其次，NaN与任何值都不相等，包括NaN本身。例如，alert(NAN==NAN);//false。

Boolean类型的返回值就只有ture/false.

Null类型被看做空对象指针，前文说到null类型也是空的对象引用。

Undefined只有一个值,使用var声明了变量，但未给变量初始化值，那么这个变量的值就是undefined,或者直接赋值,没有用var声明.

2.数据类型的计算:

(1).打印字符串长度:document.write(str.length);

(2).判断字符串的位置:document.write(str.indexOf("Hello"));第一位为该字符串的0计数位:该字符串为"Hello World"就打印0;如果字符串中没有改字符,返回-1,如:该字符串为"hello World"(大小写必须区分).

(3).替换元素document.write(str.replace("原有元素","替换后的内容"));

(4).大小写转换document.write(str.toUpperCase());//转换为大写,小写为toLowerCase*/

(5)字符类型转换为数组,然后输出第一个元素:Hello

var s=str.split(" ");//将字符串以数组的形式展示,""表示string字符的分隔符

document.write(s[0]);

3.运算符

/除(不是求整js:5/2=2.5,java:5/2=2,java会受到强制类型转化,将得到的结果转换为int型,即为整型);++累加:y=++i和y=i++,i的值自加一,前面的y=i+1,后面的y=i(从左到右计算就是);y+=x:y=x+y;=为赋值运算,即将等号右边的值传给左边,==为判断结果为true/false,===是==基础的运算必须数值和类型相同才为true("1"==1:true但是"1"===1:false)

注:字符与数字相加为组合,不为加运算:'5'+5==55

4.改变文本样式

(1).通过id获取p的内容然后通过按钮调用myFunction()函数来改变p的内容

<p id="demo">JavaScript 能改变 HTML 元素的内容。</p>
    <script>
        function myFunction()
            {
                x=document.getElementById("demo");  // 找到元素id为demo的位置
                x.innerHTML="Hello JavaScript!"; // 将该位置的内容改变
                x.style.color="#ff0000";   //改变颜色          
        }
    </script>
        <button type="button" οnclick="myFunction()" ;>点击这里</button><!--改变方式为点击-->

(2).文本框中输入内容,if.....else循环来判断输入是否为数字,并且弹出提示框

<input id="demo" type="text">
<script>
function myFunction()
{
    var x=document.getElementById("demo").value;
    if(x==""||isNaN(x))//判断x的值是否为数字
    {
        alert("不是数字");
    }
    else{
        alert("有本事别输数字");
    }
}
</script>
<button type="button" οnclick="myFunction()">点击这里</button>

5.句柄

x.addEventListener("click", hello);//添加事件句柄)("事件",内容)

x.addEventListener("click",world);
x.removeEventListener("click",hello);//删除句柄,一句删除一个
x.removeEventListener("click",world);

6.事件冒泡

<div id="div">
            <button id="btn">按钮</button>
            <a href="http://www.baidu.com" id="aid">百度</a>        

</div>
        <script>
            document.getElementById("btn").addEventListener("click",showBtn);
            /*获取该按钮,添加点击事件("事件",函数)

            等于 var x = document.getElementById("btn");
            x.addEventListener("click", showBtn);*/
            document.getElementById("div").addEventListener("click",showDiv);
            document.getElementById("aid").addEventListener("click",showA);
            function showBtn(event){
                alert(event.type);//获取当前目标的类型(click.mouseover等)
//                alert(event.target);//获取当前事件目标(位置)
                alert("我是一个按钮");
                event.stopPropagation();//阻止冒泡事件,也就是div,这里理解为父级暂时
            }
            function showDiv(){
                alert("叫我div");
            }
            function showA(){
                event.stopPropagation();//阻止冒泡事件,也就是div
                event.preventDefault();//阻止事件默认行为,a:超链接默认跳转的标签,由于这里也是点击事件,所以还要阻止冒泡
            }
        </script>