js与jquery知识点总结(1)

最新推荐文章于 2023-10-24 17:55:40 发布

gang456789

最新推荐文章于 2023-10-24 17:55:40 发布

阅读量698

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/gang456789/article/details/78165764

版权

js window.location.href=’url’的用法及arguments.callee的使用，详情请看我的arguments.callee这一博客

<div id="demo"></div>
<script>
    var demo = document.getElementById('demo')
    var count = 5
    var speed = 1000
    setTimeout(function () {
        count--
        demo.innerHTML = "<a href='http://www.baidu.com'>本页面将在第"+count+"秒钟之后跳转页面</a>"
        if (count <= 0) {
            window.location.href = 'http://www.baidu.com'
        } else {
            setTimeout(arguments.callee, speed)
        }
    },speed)
</script>

js new Date的基本使用

<body>
    <h1 id="aa"></h1>
<script>
    window.onload=function () {
        var h1 = document.getElementById('aa')
        setInterval(function () {
            var date = new Date()
            var y= date.getFullYear();
            var m = date.getMonth()+1;
            var d = date.getDate();
            var h = date.getHours();
            var i = date.getMinutes();
            var s = date.getSeconds();
            var str = y + '年' + m + '月' + d + '日' + h + '时' + i + '分' + s + '秒';
            h1.innerHTML = str;
        },1000)
    }
</script>

发送短信倒计时的写法最核心的是this.disabled = true

<input type="text">
<button id="btn">点击发送短信</button>
<script>
    var btn =document.getElementById('btn')
    var count = 60
    var timer = null
    btn.onclick = function () {
        clearInterval(timer)
        this.disabled = true
        var that = this
        timer = setInterval(function () {
            count--
            if(count>0) {
                that.innerHTML = '还剩余' + count + '秒'
            } else {
                that.innerHTML = '重新发送短信'
                that.disabled = false
                clearInterval(timer)
                count = 60
            }
        }, 1000)
    }
</script>

js字符串大写转化

<h1 id="big">这是大写</h1>
    <h1 id="small">这是小写</h1>
    <input type="text" id="txt">
    <button id="btn">按钮</button>
    <script>
        function $(id) {return document.getElementById(id)}
        $('btn').onclick=function () {
            $('big').innerHTML = $('txt').value.toUpperCase()
            $('small').innerHTML = $('txt').value.toLowerCase()
        }
    </script>

上传文件时提示格式是否正确的写法

<input type="file" name="" id="file"><span></span>
<script>
    var file = document.getElementById('file')
    file.onchange = function () {
        var path= this.value
        var pathname = path.substr(path.lastIndexOf('.')).toUpperCase()
        //lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
        //substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
        // toUpperCase()是将字符转化为大写
        if (pathname == '.JPG' || pathname == '.PNG') {
            this.nextSibling.innerHTML = '格式正确'
        } else {
            this.nextSibling.innerHTML = '格式是错误的'
            // nextSibling属性返回指定节点之后紧跟的节点，在相同的树层级中
        }
    }
</script>

jquery的排他思想 siblings()

    <script src="jquery-1.11.3.js"></script>
    <script>
        $(function () {
            $('img').click(function () {
                $(this).css('border','5px solid red').siblings().css('border','0px solid')
            })
        })
    </script>
</head>
<body>
<img src="images/19/1.jpg" alt="">
<img src="images/19/2.jpg" alt="">
<img src="images/19/3.jpg" alt="">
<img src="images/19/4.jpg" alt="">
<img src="images/19/5.jpg" alt="">

选中元素的索引值 $(this).index()

$(function(){
        $("li").click(function () {
            console.log($(this).index());
        });
    });

hide()的使用，括号里面写的是消失所需要的事件，例如

$(function () {
            $('.ad span').click(function () {
                $(this).parent().hide(1000)
            })
        })
    </script>
</head>
<body>
    <div class="ad left_ad">
        <a href=""><img src="images/18/left.jpg" alt=""></a>
        <span>X</span>
    </div>
    <div class="ad right_ad">
        <a href=""><img src="images/18/right.jpg" alt=""></a>
        <span>X</span>

jquery修改style的样式 $('img').css({width:'200px',height:'200px',border:'1px solid red'})与标签自带属性的区别$ (‘a’).attr(‘href’,’http://www.taobao.com‘)

 $(function () {
            $('#btn').click(function () {
                $('body').css({backgroundColor:'pink'})
                $('img').css({width:'200px',height:'200px',border:'1px solid red'})
                $('a').attr('href','http://www.taobao.com')
            })
            $('#btn2').click(function () {
                alert($('a').attr('href'))
            })
        })
    </script>
</head>
<body>
    <button id="btn">修改</button>
    <button id="btn2">访问</button>
    <div>
        <img src="./images/1.jpg" alt="">
        <a href="http://www.baidu.com">haha</a>
    </div>

gang456789

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js与jquery知识点总结(1)

js window.location.href=’url’的用法及arguments.callee的使用，详情请看我的arguments.callee这一博客<div id="demo"></div><script> var demo = document.getElementById('demo') var count = 5 var speed = 10
复制链接

扫一扫