博客列表 >JQuery引用及选择器 (实例)2019年1月21日 20:00

JQuery引用及选择器 (实例)2019年1月21日 20:00

默默然O_o的博客
默默然O_o的博客原创
2019年01月25日 14:14:42792浏览

jQuery 是一个 JavaScript 库

jQuery 极大地简化了 JavaScript 编程


JQuery 的引用(线上库 和本地库 引用)

实例

//线上引用
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
//本地引用
<script src="/js/jquery-3.1.1.min.js"></script>


jQuery入口函数


实例

   $(document).ready(function(){

        // 执行代码

    });

    或者简写为:

    $(function(){

        // 执行代码
   });


 javascript入口函数


实例

window.onload = function () {

        // 执行代码

    }


jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。

javascript 的入口函数是在 所有内容全部加载完 就会去执行。


jQuery的事件


$(document).ready()当文档完成加载时;
$(selector).click()被选元素的点击事件;
$(selector).focus()被选元素的获得焦点事件;
$(selector).mouseover()当鼠标指针移上被选元素元素时;
$(selector).mouseleave()当鼠标指针离开被选元素元素时;
(selector 选择器)
jQuery事件原理:当事件被触发时会调用一个函数;

实例

$('.btn').click(function(){
   //点击class为btn 执行的操作
});

jQuery 选择器

jQuery 选择器 :基于CSS选择器,元素选择器、#id选择器、.class类选择器 类型、属性、属性值;


实例

            //id选择器
            $('#but').click(function(){
                $('.content').css('display',"none")
            }) 

            //类型选择器   选择所有按钮
            // $(':button').click(function(){
            //     $('.content').css('background',"red")
            // })

            //选择选择器 中class为intro的
            $('button.intro').click(function(){
                $('.content').css('background','red')
            })

            // $(this)this指选取当前HTML元素


实例练习:动态显示2019年农历春节倒计时(做法不限)
输出格式:2019年农历春节倒计时:天/小时/分钟/秒


效果图

gettime.png


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>春节倒计时</title>
    <style>
        div {
            width: 800px;height: 333px;
            background: url(http://bpic.588ku.com//back_water_img/18/12/27/21d85323b34e5a4bb0d1c4089524494913.jpg) no-repeat ;
            margin:auto;
            line-height: 300px;
            text-align: center;
            font-size: 30px;
            color:red;
            box-shadow: 5px 5px 5px #ccc;
           
        }
    </style>
</head>
<body>

    <div></div>
        <script>

            timer = null;
            timer = setInterval(function (){
                var timeNow = new Date().getTime(); //获取13位时间戳
                console.log(timeNow);
                var timeSpring = new Date('2019/2/5 00:00:00').getTime();
                console.log(timeSpring);
                //算出时间差 (毫秒)
                var time = timeSpring - timeNow;
                console.log(time);
                //一天等于 24小时*60分钟*60秒*1000 毫秒
                dayx = 24*60*60*1000 ;
                hourx = 60*60*1000;
                minx = 60*1000;
                senx = 1000; 


                //计算出天数
                var day = Math.floor(time/(dayx));  // Math.floor取整
                console.log(day)
                //计算小时
                var hour1 = time%dayx;
                var hour = Math.floor(hour1/hourx);
                console.log(hour);

                //计算分钟
                var min1 = time%hourx
                var min = Math.floor(min1/minx)
                console.log(min);
                //计算秒
                var sen1 = time%minx;
                var sen = Math.round(sen1/senx);
                console.log(sen)

                springTime ='2019年农历春节倒计时:'+ day +'天' + hour + '小时' + min +'分' + sen +'秒' ;

                var div = document.querySelector('div');
                div.innerText = springTime;

            },100)

        </script>
        
        
    
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例











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