js 基础的学习内容

时间：2020-01-06 12:58:45 阅读：77 评论：0 收藏：0 [点我收藏+]

<!DOCTYPE html> <!--文档声明-->
<html lang="en"> <!--根节点-->
   <head><!--树枝节点--><!--父节点-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title><!--子节点-->
    <script>
        //get 获取 Element 元素 ById 根据Id
        //如果id不存在,返回null
        //var div = document.getElementById(‘a‘);
        //console.log(div);
        //alert(123123);
        //文档是从上往下依次执行，当执行到此位置时候，div 还没有生成，所以找不到，返回null
       //var div = document.getElementById(‘box‘);
       // console.log(div);
    </script>
   </head>
   <style>
       .hide{
           display:none;
       }
   </style>
   <body>
       //1 概念
       // Api
       // web api
       // dom
       // 节点、元素、属性、注释、文档
       //2 dom常见的操作
       //获取元素
       //操作元素（设置元素的属性或者调用元素方法)
       // 动态创建元素
       // 事件（当什么时候做什么事情）
       //3 获取元素
       // document.getElementById()
       // document.getElementsByTagName()
       // document.getElementsByName();
       // doucument.getElementsByClassName();
       // doucument.querySelector();
       // doucument.querySelectorAll();
       // 4 事件(当什么时候做什么事情)
       // 三要素：事件源、事件名称、事件处理程序
       // 5 元素的属性
       // 元素的属性 包括对应标签的属性
       // 非表单元素的属性 id src title href alt
       // 表单元素的属性 name value type disabled cheked selected
       // 超链接 取消默认行为的执行 return false;

       <!-- 文档：一个网页可以称为文档html文件抽象为一个对象，文档中所有的内容都是节点 -->
       <!-- 节点包含属性节点，元素就是标签，文本节点 -->
       <!-- 事件就是当什么时候做什么操作 -->
       <!-- 获取元素， 操作元素设置对象的属性和方法，动态创建元素，事件 -->
       <div> hello </div>
      <div id="box">  word </div>
       <div>  黑马 </div>
       <p id="p">ppppp</p>
       <div>11111111</div>
       <div>2222</div>
       <div>3333</div>
       <div>pppp</div>
       <form id="frm" action="1.php">
       <input type="text" name="name"><br>
       <input type="text" name="pwd"><br>
       <input type="radio" name="sex"><br>
        <input  class="i" type="radio" name="sex"><br>
       <input type="submit" value="登录"><br>
       </form>
       <input type="text" name="test"><br>
       <div class="a">333</div>
       <div class="a">333</div>
       <div class="b">pppp</div>
       <span>span</span>
       <input type="button" value="点我" id="btn"><br>

       <a id="link" href="http://www.baidu.com">baidu</a>

       <a id="link" href="http://www.baidu.com" title="baidu">百度</a>
       <img class="hide" id="img" src="1.jpg" alt="图片">
    <script>
        // 1 获取非标单元素的属性
        var link = getElementById(‘link‘);
        var img = getElementById(‘img‘);
        console.log(link.id);
        console.log(link.href);
        console.log(link.title);
        console.log(img.src);
        console.log(img.alt);

        // 2 修改元素的属性
        img.src = ‘2.jpg‘;
        link.title =‘我改过的title‘;
        link.href = "http://www.cnbeta.com";
        img.className = ‘hide‘;

        //获取超链接  getElementsByTagName()返回的是元素的集合，获取某一个元素的时候用下标
        var link = document.getElementById(‘link‘);
        // var link1 = document.getElementsByTagName(‘a‘);
        //注册事件
        link.onclick = function(){
            alert(‘hello‘);
            //取消后续内容(默认行为)的执行 
            return false;
        }
        // link1[0].onclick = function(){
        //     alert(‘hello‘)
        // }

    var obj={
    name:‘zs‘,
    say:function(){
    
     }
    };
    //js的动态特性 可以随时给对象增加成员 手动调用
    obj.test = function(){
    
    } 
    //事件
    //获取id获取按钮元素
    var btn = document.getElementById(‘btn‘);
    //给按钮注册事件
    // on 当什么时候 click 点击 function 是系统调用的
    btn.onclick = function(){
    //没有命名的函数叫匿名函数
     alert(‘别点我，疼‘);
    }
    
    
    //事件三要素
    //事件源： 触发事件的元素btn
    //事件名称 click
    //事件处理函数： 触发事件之后做的事情function·
    
    //返回的是集合
    //var div=document.getElementsByClassName();
    //HTML5 中新增的获取元素的方法IE8以后执行
    //query 查询 Selector 选择器 如果class=‘a‘有两个也只会返回一个元素
    //查找一个元素，如果页面上有多个符合元素条件的元素也只返回一个元素
    var div = document.querySelector(‘.a‘);
    console.log(div);
    //返回的是NodeList 节点的集合  放的也是当前元素的集合
     var divs = document.querySelectorAll(‘.a‘);
     console.log(divs);
     
     //IE8以后执行
     var frm = document.querySelector(‘#frm‘)
     var texts = frm.querySelectorAll(‘input[type=text]‘);
     console.log(texts)
    
    
    //根据name来获取元素
    //var frm = getElementById(‘frm‘);
    //获取到的是form中的所有input标签
    //var radios = document.getElementsByTagName(‘input‘)
    //console.log(radios);
    
    
    //NodeList 节点的集合 getElementsByName 放的也是元素
    var radios1 = document.getElementsByName(‘sex‘);
    console.log(radios1);
    
    //IE9以后支持，兼容性问题
    // HTMLCollection  元素集合
    var iclass = document.getElementsByClassName(‘i‘)
    console.log(iclass);
    
    
    
    //根据标签的名字来获取元素
    //HTMLCollection html元素集合 getElementsByTagName
    //伪数组
    var divs=document.getElementsByTagName(‘div‘);
    console.log(divs);
    for(var i =0; i<divs.length; i++)
    {
        var div=divs[i];
        console.dir(div);
    }
    //根据id来获取元素
     var box = document.getElementById(‘box‘);
      //输出的是元素对应的标签的内容
       //console.log(box);
       console.dir(box);//打印对象
       //如何获取对象的类型--对象是有类型的
       //typeof 不能获取对象的具体类型，获取对象类型始终返回object
       var arr=[];
       console.log(arr);
       console.log(typeof box);
       
       //认为构造函数就是对象的类型
       console.log(arr.constructor);
       console.log(box.constructor);
       
       //获取p标签 对应的元素
       // HTMLParagraphElement 段落
       var p = document.getElementById(‘p‘);
       console.dir(p);
    </script>
   </body>
</html>

<!DOCTYPE html> <html lang="en">  <head> <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> //get 获取 Element 元素 ById 根据Id//如果id不存在,返回null//var div = document.getElementById(‘a‘); //console.log(div);//alert(123123);//文档是从上往下依次执行，当执行到此位置时候，div 还没有生成，所以找不到，返回null //var div = document.getElementById(‘box‘); // console.log(div); </script> </head> <style> .hide{ display:none; } </style> <body> //1 概念 // Api // web api // dom // 节点、元素、属性、注释、文档 //2 dom常见的操作 //获取元素 //操作元素（设置元素的属性或者调用元素方法) // 动态创建元素 // 事件（当什么时候做什么事情） //3 获取元素 // document.getElementById() // document.getElementsByTagName() // document.getElementsByName(); //doucument.getElementsByClassName(); //doucument.querySelector(); // doucument.querySelectorAll(); // 4 事件(当什么时候做什么事情) // 三要素：事件源、事件名称、事件处理程序 // 5 元素的属性 // 元素的属性包括对应标签的属性 // 非表单元素的属性 id src title href alt // 表单元素的属性 name value type disabled cheked selected // 超链接取消默认行为的执行 return false;
    <div> hello </div> <div id="box"> word </div> <div> 黑马 </div> <p id="p">ppppp</p> <div>11111111</div> <div>2222</div> <div>3333</div> <div>pppp</div> <form id="frm" action="1.php"> <input type="text" name="name"><br> <input type="text" name="pwd"><br> <input type="radio" name="sex"><br> <input class="i" type="radio" name="sex"><br> <input type="submit" value="登录"><br> </form> <input type="text" name="test"><br> <div class="a">333</div> <div class="a">333</div> <div class="b">pppp</div> <span>span</span> <input type="button" value="点我" id="btn"><br>
<a id="link" href="http://www.baidu.com">baidu</a>
<a id="link" href="http://www.baidu.com" title="baidu">百度</a> <img class="hide" id="img" src="1.jpg" alt="图片"> <script>// 1 获取非标单元素的属性var link = getElementById(‘link‘);var img = getElementById(‘img‘);console.log(link.id);console.log(link.href);console.log(link.title);console.log(img.src);console.log(img.alt);
// 2 修改元素的属性img.src = ‘2.jpg‘;link.title =‘我改过的title‘;link.href = "http://www.cnbeta.com";img.className = ‘hide‘;
//获取超链接 getElementsByTagName()返回的是元素的集合，获取某一个元素的时候用下标var link = document.getElementById(‘link‘);// var link1 = document.getElementsByTagName(‘a‘);//注册事件link.onclick = function(){alert(‘hello‘);//取消后续内容(默认行为)的执行 return false;}// link1[0].onclick = function(){// alert(‘hello‘)// }
var obj={name:‘zs‘,say:function(){ }};//js的动态特性可以随时给对象增加成员手动调用obj.test = function(){}//事件//获取id获取按钮元素var btn = document.getElementById(‘btn‘);//给按钮注册事件// on 当什么时候 click 点击 function 是系统调用的btn.onclick = function(){//没有命名的函数叫匿名函数 alert(‘别点我，疼‘);}//事件三要素//事件源：触发事件的元素btn//事件名称 click//事件处理函数：触发事件之后做的事情function·//返回的是集合//var div=document.getElementsByClassName();//HTML5 中新增的获取元素的方法IE8以后执行//query 查询 Selector 选择器如果class=‘a‘有两个也只会返回一个元素//查找一个元素，如果页面上有多个符合元素条件的元素也只返回一个元素var div = document.querySelector(‘.a‘);console.log(div);//返回的是NodeList 节点的集合放的也是当前元素的集合 var divs = document.querySelectorAll(‘.a‘); console.log(divs); //IE8以后执行 var frm = document.querySelector(‘#frm‘) var texts = frm.querySelectorAll(‘input[type=text]‘); console.log(texts)//根据name来获取元素//var frm = getElementById(‘frm‘);//获取到的是form中的所有input标签//var radios = document.getElementsByTagName(‘input‘)//console.log(radios);//NodeList 节点的集合 getElementsByName 放的也是元素var radios1 = document.getElementsByName(‘sex‘);console.log(radios1);//IE9以后支持，兼容性问题// HTMLCollection 元素集合var iclass = document.getElementsByClassName(‘i‘)console.log(iclass);//根据标签的名字来获取元素//HTMLCollection html元素集合 getElementsByTagName//伪数组var divs=document.getElementsByTagName(‘div‘);console.log(divs);for(var i =0; i<divs.length; i++){ var div=divs[i]; console.dir(div);}//根据id来获取元素 var box = document.getElementById(‘box‘); //输出的是元素对应的标签的内容 //console.log(box); console.dir(box);//打印对象 //如何获取对象的类型--对象是有类型的 //typeof 不能获取对象的具体类型，获取对象类型始终返回object var arr=[]; console.log(arr); console.log(typeof box); //认为构造函数就是对象的类型 console.log(arr.constructor); console.log(box.constructor); //获取p标签对应的元素 // HTMLParagraphElement 段落 var p = document.getElementById(‘p‘); console.dir(p);</script> </body></html>

js 基础的学习内容

标签：属性 lse har 查找 jpg 概念匿名 ios 具体类

原文地址：https://www.cnblogs.com/awjbky/p/12155581.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行