简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jQuery第1课：基础语法_倒计时_2019.4.1
Blogger Information
Blog 12
fans 0
comment 0
visits 7493
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课：基础语法_倒计时_2019.4.1
风雨中的脚步的博客
Original
432 people have browsed it

1.引入Jquery库：

本地引入：<script type=’text/javascript’ src=’jquery-3.3.1.min.js’></script>

线上引入：<script src=’https://code.jquery.com/jquery-3.3.1.min.js’></script>

2.测试引入是否成功

If(typeof $==‘undefined’){

alert(‘jQuery未加载’)

}else{

alert(‘jQuery已加载’)

}

3.基本语法：$(选择器).方法()

4.jQuery文档就绪函数（入口函数）

标准写法：$(document).ready(function(){执行的代码块})

简写：$(function(){执行的代码块})

和JS的区别：JS入口函数是等所有加载完成后加载（包括外部资源）

JQ入口函数是等所有标签加载完成后加载（必须写）

5.选择器

标签选择器：$(‘标签名’).css(‘属性名’,’属性值’)

ID选择器：$(‘#ID名’).css(‘属性名’,’属性值’)

class选择器：$(‘.class名’).css(‘属性名’,’属性值’)

匹配多个选择器：$(‘选择器1,选择器2’).css(‘属性名’,’属性值’)

类型选择器：$(‘li.list’).css(‘属性名’,’属性值’) 选中li下面的list

属性选择器：$(‘[属性名]’).css(‘属性名’,’属性值’)

属性值选择器：$(“标签名[属性名=’属性值’]”).css(‘属性名’,’属性值’)

      注：内部有单引号的外部应使用双引号

  属性有连接符的可直接使用（建议使用驼峰写法）

层级选择器：子选择器$(‘标签名>子标签’).css(‘属性名’,’属性值’)

后代选择器$(‘标签名 子标签’).css(‘属性名’,’属性值’)

比较选择器：选择大于下标值的$(‘标签名:gt(下标)’).css(‘属性名’,’属性值’)

选择小于下标值的$(‘标签名:lt(下标)’).css(‘属性名’,’属性值’)

选择等于下标值的$(‘标签名:eq(下标)’).css(‘属性名’,’属性值’)

6.事件（当事件被触发会调用一个函数，我们称之为事件方法也叫事件处理函数）

基本语法：$(选择器).事件()

focus   元素获得焦点             blur   元素失去焦点

click    单击事件                 dblclick    双击事件

keydown 某个键盘按键被按下      keyup 某个键盘按键被松开

mouseover 鼠标移到某元素之上

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Jquery01作业</title>
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<style>
		*{margin:0; padding:0;}
		p{width:850px; height:150px; background:rgba(0,255,255,0.3); font-size:36px; margin:50px auto; line-height:150px; padding-left:30px; position:relative;}
		.ms{position:absolute; left:732px;}
	</style>
</head>
<body>
	<p>距离春节时间剩余：<span class='djs'></span><span class='ms'>毫秒</span></p>

	<script>
		if(typeof $=='undefined'){   //判断jQuery数据类型是否为空
			alert('加载失败');      //如果为空证明未加载
		}else{
			alert('加载成功');     //否则为已加载状态
		}
		$(function(){     //文档就绪函数(入口函数)
			function Ro(){   //倒计时函数
				var d=Date.parse('Jan 24,2020');   //获取以往至春节的总时间数(毫秒)
				// var date=new Date();            //获取当前时间数(毫秒)
				var dd=new Date().getTime();       //获取以往至当前的总时间数(毫秒)
				var rd=Math.floor(d-dd);           //获取剩余毫秒数
				var days=Math.floor(rd/86400000);  //获取剩余天数
				var hours=Math.floor(rd%86400000/3600000);    //获取剩余小时数
				var minus=Math.floor(rd%3600000/60000);     //获取剩余分钟数
				var second=Math.floor(rd%60000/1000);     //获取剩余秒数
				var hm=Math.floor(rd%1000);             //获取剩余毫秒数
				$('.djs').text(days+'天'+hours+'时'+minus+'分'+second+'秒'+hm);  //拼装时间样式
			}
			setInterval(Ro,1);   //以毫秒数调用函数(刷新作用)
		})
	</script>
</body>
</html>

运行实例 »

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


Correction status：Uncorrected

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
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！