Blogger Information
Blog 17
fans 0
comment 0
visits 11726
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JavaScript基础知识(一)
指纹指恋的博客
Original
715 people have browsed it

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>


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post