博客列表 >JavaScript基础知识(一)

JavaScript基础知识(一)

指纹指恋的博客
指纹指恋的博客原创
2017年12月15日 11:38:21712浏览

DOM对象:文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口。

  • DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

  • 通过DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。

  • DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 使用。

  • DOM对象,即是我们用传统的方法(javascript)获得的对象。

  • DOM准确说是对文档对象的一种规范标准(文档对象模型),标准只定义了属性和方法行为。

JS的引入

  • 直接在HTML中写

<script type="text/javascript">
   var str = "Hello, World!";
</script>
  • 外部导入

<script src="text_name.js"></script>
  • 注意事项:JS最好在HTML文件末尾引入

    • 一是为了提升页面加载速度

    • 二是为了生成完整的DOM对象,避免JS执行失效

变量声明

  • 可以用_、数字、字母、$、组成,且数字不能开头

  • 用 var 来声明变量,如果不用var声明,也不会报错,但是会污染全局变量

JS基本变量类型

  • 数值型

  • 字符串类型

  • 布尔类型

  • undefined型:原生数据类型变量[以上3种,其本身也是]没有值,返回的是undefined

  • null型:对象类型变量[DOM对象,数组等]没有值,返回的是null

JS组合数据类型

  • 对象类型

//声明
var object = {name:'zhangsan', age:20};

//调用
console.log(object.name);
//也可以用下面这用方式
console.log(object[ame]);
  • 数组类型

    • 即便中间删除一些数据,编号依然是从0~n,中间不会有空缺

    • 数组里面的数据可以是不同类型

//声明
var arr = ['a',23,"hellw",true];

//调用
console.log(arr[2]);

运算符

  • 基本的+、-、*、/、不想说,懒癌发作。

  • JS的连接运算符是:"+"

<script>
	console.log(2+3);                    //输出 5
	
	console.log("hellow"+""+"world");    //输出 hello world
	
	console.log(2+3+5+"hello"+6+8);      //输出 10hello68,一旦碰到非法数字,后面的一律理解为拼接
</script>
  • 逻辑运算符:不是单纯的返回true或false,而是返回最早能判断表达式整体结果的值

<script>
	var a = false;
	var b = 6;
	var c = a || b;
	console.log(c);        //输出 6

	var d = true;
	var e = a || b || d;
	console.log(d);        //输出 6
</script>

控制结构

//遍历数组
<script>
	var arr = ["赵","钱","孙","李"];
	for(var i=0; i++; i<arr.length){
	    console.log(arr[i]);
	}
</script>

//遍历对象
<script>
	var obj = {name:"lisi",age:28,height:180};
	for(var k in obj){
	    console.log(k);        //正确
	    console.log(obj.k);    //错误
	    console.log(obj[k]);   //正确
	}
</script>

对象操作

<script>
	var str = "helloworld";
	console.log(str.length);        //输出 10
	console.log(str.substr(2,3));   //输出 llo
</script>
  • 在JS中,如果调用属性和方法,会自动将变量转化为对象,这是JS中的重要思想

indexOf()函数

<script>
    var str = "helloworld";
    console.log(str.indexOf("he"));        //找到了,返回值为0,为false
    console.log(str.indexOf("dede"));      //找不到,返回值为-1,为true
    //这就比较尴尬了,所以要进行如下处理
    console.log(str.indexOf("he") >= 0 ? "find" : "not find");
</script>

JS内置对象

<script>
    var dt = new Date();                    //想调用时间函数,需要先实例化
    console.log(dt.getFullYear());
</script>

//但是Math是个例外,不需要实例化,就可以直接使用
<script>
    console.log(Math.floor(2.3));           //调用的其实是Math类的静态方法
</script>

浏览器window对象 [即BOM对象]

  • window对象是浏览器宿主对象,简单说就是用户看到的浏览器窗口。其本身和JS语言没有关系

  • window对象又包含很多子对象

    • location               //控制地址栏

    • screen                //控制屏幕

    • history                //控制浏览器历史记录

    • document           //控制页面文本,这就是DOM对象

作用域

<script>
    function t1(){
        var str = "china";
        function t2(){
            var str = "japan";    //输出结果为 japan,如果将本行注释掉,输出结果为 china
            alert(str);
        }
        t2();
    }
    t1();
</script>


<script>
    window.str = "union";
    function t1(){
       function t2(){
           str = "japan";
           alert(str);
       }
       t2();
    }
    t1();
    alert(window.str);        //输出结果为 japan japan
</script>
  • 如果一个变量在自身作用域内没有赋值,那么它会一直向上级查找,如多查到window层面[全局]还没有,就返回undefined

  • 变量前不加 var,就是赋值,比如第二个例子,第一次打印的是t2()的japan,但是由于其赋值运算污染了全局变量的值,所以,第二次也是japan

找对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>关键是找对象</h1>
    <div id="test1">
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div id="test2"></div>
    <input type="text" name="username" id="" value="poly">
    
    <script>
    //用ID来查询,返回值是"对象"
    console.log(document.getElementById('test1'));
    
    
    //用标签来查询,返回值是"对象的集合",即使只找到一个对象,也包装成对象集合返回
    var ps = document.getElementsByTagName('p');
    ps[1].style.background = 'green';


    //对于表单元素,可以用name来查询,返回值是对象集合
    alert(document.getElementsByName('username')[0].value);
    document.getElementsByName('username')[0].value = 'lucy';
    
    
    //按照类名查找,返回值是"对象的集合"
    document.getElementsByClassName('test2')[0].style.background = 'gray';
    
    
    //查找子节点或父节点
    alert(document.getElementById('test1').childNodes.length);    //输出 7,标准属性,一般不用
    
    alert(document.getElementById('test1').children.length);      //输出 3
    /* children非标准属性,但兼容性好,它不包含空白节点 */
    
    document/getElementsByTagName('p')[2].parentNode.style.border = '1px solid green';
    </script>
</body>
</html>

操作对象的属性

<img src="" alt="" title="" style="width: 300px; height: 300px;">
  • 普通属性可以通过:[ 对象.标签属性 ] 访问

  • CSS属性通过:[ 对象.style.属性 ] 访问,这种方式只适用于将css直接写在HTML标签内的属性

  • 对类名进行操作,需要使用下面这种方式:[  对象.className ]

  • 如果CSS带有横线,如border-top-style,则把横线去除,并且横线后的第一和字母大写,如 [ 对象.borderTopStyle ]

获取对象在内存中计算后的样式

上一节中,obj.style只能取得“内联style”的值,对于<style></style>中的CSS属性值,则无能为力,我们可以用obj.currentStyle和window.getConputeStyle来获取。

注意:只有IE和Opera支持使用currentStyle获取HTML Element的计算后的样式,其他浏览器中不支持,标准浏览器中使用getComputeStyle,IE9及以上也支持getComputeStyle

window.getComputeStyle(obj,伪元素)

参数说明:

  • 第一个参数为要获取计算后的样式的目标元素

  • 第二个参数为期望的伪元素,如":after"、":first-letter"等,一般设为null

考虑兼容性,封装函数

<script>
    function getStyle(){
        return e1.getcurrentStyle ? e1.getcurrentStyle[attr] : getComputeStyle(e1,null)[atttr];
    }
</script>
  • 注意:这2个方法获取的对象是只读的,要该样式,还得靠obj.style

删除节点

  • 找到对象

  • 找到它的父对象parentObj

  • parentObj.removeChild(子对象);

//删除最后一个li
<input type="button" value="删除最后一个li" onclick="del();">
<ul>
    <li>春</li>
    <li>夏</li>
    <li>秋</li>
    <li>冬</li>
</ul>

<script>
    function del(){
        var lis = document.getElementsByTagName(li);
	var lastli = lis[lis.length-1];
	lastli.parentNode.removeChild(lastli);

    }
</script>

创建节点

  • 创建对象

  • 找到父对象parentObj

  • parentObj.addChild(对象);

//添加一个li
<input type="button" value="删除最后一个li" onclick="add();">
<ul>
    <li>春</li>
    <li>夏</li>
    <li>秋</li>
</ul>

<script>
    function add(){
        var li = document.createElement('li');                       //创建节点
        var text = document.createTextNode('冬');                    //创建一个文本节点
        li.appendChild(text);                                        //向节点添加最后一个子节点。
        document.getElementsByTagName('ul')[0].appendChild('li');
    }
</script>

暴力操作节点

innerHTML:代表节点内的内容,能读能写,不是一个W3C规定的标准对象属性,但是,各浏览器支持的很好。

<input type="button" value="添加春夏秋" onclick="add3();">
<input type="button" value="添加冬" onclick="add1();">

<script>
    function add3(){                                           
        var ul = document.getElementsByTagName('ul')[0];
        ui.innerHTML = "<li>春</li><li>夏</li><li>秋</li>";
    }
    
     function add1(){                                           
        var ul = document.getElementsByTagName('ul')[0];
        ui.innerHTML += "<li>冬</li>";
    }
</script>


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议