简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jQuery基础语法、春节倒计时（1月21日）
Blogger Information
Blog 7
fans 1
comment 3
visits 6643
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery基础语法、春节倒计时（1月21日）
熊哥的博客
Original
861 people have browsed it

一、jQuery基础语法知识点。

1、jQuery文件引入：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

 

2、文档就绪函数 ready( ) ，也称为jQuery入口函数。作用：为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

$(document).ready(function(){
        // 执行代码
});

//一般简写为:
$(function(){
        // 执行代码
    })

 

3、JavaScript 入口函数。

window.onload = function () {
// 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

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

JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

 

4、jQuery事件

$(document).ready()  当文档完成加载时

$(selector).click()  被选元素的点击事件

$(selector).focus()  被选元素的获得焦点事件

$(selector).mouseover()  当鼠标指针移上被选元素元素时

$(selector).mouseleave()  当鼠标指针离开被选元素元素时

 

jQuery事件原理：当事件被触发时会调用一个函数（事件处理函数）

如:  $(selector).click(function) 我们称之为事件方法;

 

jQuery中的事件方法：就是触发被匹配元素的事件,调用一个函数;或理解为将函数绑定到所有被匹配元素的某个事件上。

$(selector).click(function(){
// 当事件触发时，执行的代码需要执行的代码块
})

 

5、jQuery选择器

jQuery 中所有选择器都以美元符号开头：$(  ),它基于已经存在的 CSS 选择器。

元素选择器、#id选择器、.class类选择器 类型、属性、属性值。

 

6、jQuery遍历：用一种相对的关系来查找html元素

向上查找（祖先元素）

parent() 方法返回被选元素的直接父元素

 

parents() 方法返回被选元素的所有祖先元素

$("span").parents().css("color","red");

 

使用可选参数来过滤对祖先元素的搜索

$("span").parents("ul").css("color","red");

该例返回所有span元素的所有祖先，并且它是ul元素

 

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素

$("span").parentsUntil("div").css("border","2px solid red");

该例返回介于span与div元素之间的所有祖先元素

 

以下为实操源码：

 

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery基础语法</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        div{
            height: 200px; width: 200px; margin: 20px; 
            text-align: center; line-height: 200px;
        }
        .box1{
            background-color: lightcoral; margin-right: 10px;
        }
        textarea{width: 200px; height: 100px; margin: 20px; padding:10px;
             font-size:2em; border-radius: 10px;
             outline:none; /*去掉文本框再带获得焦点样式*/
             resize:none;/*当resize的属性为none时，则禁止拖动*/
          }
    </style>

<script>
        $(function(){
            // 元素选择器: #id选择器、.class选择器
            // 选取id元素
            $('#but1').click(function(){
                $('.box1').hide()
            })

            // 选取class元素
            $('.but2').click(function(){
                $('.box1').show()
            })

            $('.intro').click(function(){
                $('.box1').css('background','lightblue')
            })

            // 类型选择器
            // 选取所有 type="button" 的 <input> 元素 和 <button> 元素
            $(":button").click(function(){
                $('.but2').css('background','pink')
            })

            $('button.intro').click(function(){
                $('.content').text('点击我换所有元素背景色').css('color','red')
            })

           // $(this) 选取当前 HTML 元素
            $('span').click(function(){
                $(this).text('这是新的文字').css('color','blue')
            })

            // $("*") 选取所有元素 
            $('p').click(function(){
                $('*').css('background','lightgreen')
            })

            $('.box1').mousemove(function(){
                $(this).text('鼠标进来了~').css('background','yellow')
            })
            $('.box1').mouseleave(function(){
                $(this).text('鼠标出去了~').css('background','green')
            })

            //文本框获得焦点事件
          $("textarea").focus(function(){
            $(this).css("border","1px solid blue");
          })
          $("textarea").blur(function(){
            $(this).css("border","1px solid #ccc");
          })
          
            //选中textarea的直接父元素 > form标签
            $('textarea').parent().css('border','3px solid pink');

            //parents() 方法返回被选元素的所有祖先元素，parents('div')选中所有祖先中的div元素
            $('textarea').parents('div').css('border','3px solid red');
          
            //parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
            //该例返回介于.box1 与html元素之间的所有祖先元素,即body元素
            $('.box1').parentsUntil('html').css('border','3px solid green');

        })
    </script>
</head>
<body>
    <div class="box1">内容111</div>
    <span id="content2">点击我换文字</span>
    <p class="content"></p>
    <button id="but1">点我隐藏</button>
    <button class="but2">点我显示</button>
    <button class="intro">点我有惊喜</button>
    <div>
        <form>
            <textarea></textarea>
        </form>
    </div>    
</body>
</html>

运行实例 »

jQuery基础.png

 

二、动态显示2019年农历春节倒计时（做法不限），输出格式：2019年农历春节倒计时：天/小时/分钟/秒。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>春节倒计时</title>
    <style>
        div {
            width: 100%;
            height: 600px;
            background-color: lightcoral;
        }
        .content {
            line-height: 600px;
            text-align: center;
            color: white;
            font-size: 2em;
        }
    </style>
    <script>
        function countTime(){
            //获取当前时间  
            var date = new Date();
            var now = date.getTime();
            //设置截止时间  
            var str = "2019/2/4 00:00:00";
            var endDate = new Date(str);
            var end = endDate.getTime();

            //时间差  
            var leftTime = end - now;
            
            //定义变量 d,h,m,s保存倒计时的时间  
            var d, h, m, s;
            if (leftTime >= 0) {
                d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
                h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
                m = Math.floor(leftTime / 1000 / 60 % 60);
                s = Math.floor(leftTime / 1000 % 60);
            }
            //将倒计时赋值到span中  
            document.getElementById("content").innerHTML = d+" 天 "+h+" 小时 "+m+" 分 "+s+" 秒 "; 

            //递归每秒调用countTime方法，显示动态时间效果  
            setTimeout(countTime, 1000);
        
        }
    </script>
</head>

<body onload="countTime()" >
    <div>
        <div class='content'>2019年农历春节倒计时：<span id="content"></span></div>
    </div>
</body>

</html>

运行实例 »

 

Correction status：qualified

Teacher's comments：
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
2 comments
过儿 2019-01-23 10:43:30
好厉害，真仔细！以后向你学习！
2 floor
灭绝师太 2019-01-23 09:55:33
真棒！
1 floor
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！