javaScript 核心

最新推荐文章于 2024-07-28 20:27:10 发布

咖啡厅阿狸

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量41

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_67836560/article/details/134471191

版权

JavaScript 核心

创建对象:

var obj = {

            Name:'hello',

            Id:'1',

             say(){

               console.log();’

            }

         

 var obj = new Object();

 Obj.name=’hello’

元素节点选择:

 getElemnetsById



getElementsByClass



getElementByTag



getElementByName  这个主要适用于表单元素对里面的input 进行操作



queryslector


 quryselectAll

表单元素的选择

<body>

    <label></label><input type="checkbox" name="ball" value="篮球" checked>篮球</label>

    <label></label><input type="checkbox" name="ball" value="足球">足球</label>

    <label></label><input type="checkbox" name="ball" value="排球">排球</label>

    <label></label><input type="checkbox" name="ball" value="雪球">雪球</label>

<br>

//这里函数的调用需要加括号 onclick="submitcheck()"

    <input style="width: 100px;text-align: center;" onclick="submitcheck()" type="submit" value="提交">

</body>

<script>

function submitcheck(){

    //获取表单元素数组

        var checkboxs = document.getElementsByName("ball");

        console.log(checkboxs);

        let submit="";

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

            if(checkboxs[i].checked){

                 submit+="<span style='color:red; font-size:20px'>"+checkboxs[i].value+"<span>";

            }

        }

        console.log("ok")

        //添加到body下面

        document.body.innerHTML+=submit;



    }

</script>

元素的修改：

<body>

    <div id="em" data="hello">

        <span></span>

    </div>

</body>


<script>

    let em = document.getElementById("#em");

    em.id=1;

    em.style="color:red;backgroundColor:yellow;"

    //data 获取不到
     console.log( em.data);

    //可以通过 getAttribute()

    let data =  em.getAttribute("data");

console.log(data);

   em.className="font";

    em.setAttribute("class","font");

元素的遍历

<body>

    <div>

        <ul>

            <li></li>

        </ul>

        <span></span>

    </div>

</body>



<script>

    let li_tag = document.getElementsByTagName("li");

    let parent =   li_tag[0].parentElement;//获取父元素

    console.log(parent);

    let sibling = parent.nextElementSibling;//获取兄弟元素

    console.log(sibling);

    console.log(parent.firstElementChild);//获取第一个孩子元素

    console.log(parent.lastElementChild);

    console.log(parent.children);//获取孩子元素

</script>

事件

事件的绑定方式有两种：

<body>

    <div>

        <button onclick="add()">ok</button>

    </div>

</body>

<script>

    let click_event = document.getElementsByTagName("button");

    click_event[0].onclick = function () {

        console.log("hello")
    }

    var count = 0;

    function add() {

        count++;

        console.log(count)

    }

</script>

倒计时

1.每隔一段时间执行函数

 window.onload = function () {

        setInterval(Interval, 10000);

    }

    var i=5;

    function Interval() {

        if (i > 0) {

            document.body.innerHTML = "<span>" + i + "<span>";

            i--;

        } else {

            clearInterval();

        }

    }

setTimeOut 只执行一次

  window.onload = function () {

        setInterval(Interval, 10000);

        setTimeout(alert_hello,1000)

    }

    var i=5;



    function Interval() {

        if (i > 0) {

            document.body.innerHTML = "<span>" + i + "<span>";

            i--;

        } else {
            clearInterval();

        }

    }

   

    function  alert_hello(){

        alert("hello")

    }

获取当前页面的URL