博客列表 >jQuery入门第一课:引入方法、基本语法、选择器、事件--2019.4.1

jQuery入门第一课:引入方法、基本语法、选择器、事件--2019.4.1

斜杠菜鸟的博客
斜杠菜鸟的博客原创
2019年04月23日 14:02:25781浏览

一、什么是jQuery?

  • jQuery是一个快速、简洁的JavaScript框架

1、封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式;

2、极大的简化了JavaScript编程;

  • jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对css选择器进行扩展,优化html文档操作、时间处理、动画设计和ajax交互。

二、jQuery引入方法

  • 本地

将下载的文件放在网页的同一目录下,就可以使用jQuery (外部引入js);

示例:

<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>

  • 线上

示例:

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

实例

<!DOCTYPE html>
<html>
<head>
	<title>jQuery第一节课</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
	if(typeof $=='undefined'){
		alert('jQuery 未加载')
	}else{
		alert('jQuery 已加载')
	}

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

运行实例 »

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

总结:以上代码测试线上jQuery代码是否引入成功。

三、jQuery基本语法

  • jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作

示例:

$(选择器).action()

  •  ready() :文档就绪函数 ready() (也称为jQuery入口函数) 作用: 为了防止文档在完全加载(就绪)之前运行 jQuery 代码

示例:

$(document).ready(function(){

执行的代码块

})

示例、简写方法:

$(function(){

// 执行的代码块

})

  • ready与window.onload的区别是,ready是标签加载完毕就可以执行代码块;而window.onload是等所有内容包括图片等全部加载完毕后才开始执行代码块。

实例

<!DOCTYPE html>
<html>
<head>
	<title>jQuery第一节课</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
	$(document).ready(function(){
		
	})

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

运行实例 »

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

四、选择器

  • jQuery中所有选择器都以美元符号开头:$(),它基于已经存在的css选择器;

  • $('#id名')根据id来匹配元素

  • $('.class名')根据class名匹配元素

  • $('element')根据标签名匹配元素

  • $('*')匹配所有元素

  • $('#id名,class名,element')匹配到多个选择器

  • $('父级元素>子级元素')给定的父级元素下匹配所有的子元素

  • $('祖先元素 后代元素')给定的祖先元素下匹配所有的后代元素

  • $('prev+next')(同级的元素)匹配紧跟在prev元素后面的next元素

  • $('prev~siblings')匹配prev元素后面所有的siblings元素

五、事件方法

  • jQuery事件原理:当事件被触发时会调用一个函数我们称之为事件方法;(即事件处理函数)

  • 基础事件方法

  • focus      元素获得焦点。

  • blur       元素失去焦点。

  • click      当用户点击某个对象时调用的事件句柄。

  • keydown    某个键盘按键被按下。

  • keyup      某个键盘按键被松开。

  • mouseover  鼠标移到某元素之上。

六、倒计时案例

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>案例:倒计时</title>
	<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
	<style type="text/css">
	*{margin: 0;padding: 0;}
	div{
       font-size: 30px;
       width: 1200px;
       height: 580px;
       margin: 100px auto;
       background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556006568357&di=ab697171b37b18279ddcec87b4e30733&imgtype=0&src=http%3A%2F%2Fthumb.takefoto.cn%2Fwp-content%2Fuploads%2F2014%2F12%2F201412180636229475.jpg) no-repeat;
       background-size: 100%;
       text-align: center;
       color: #4395FF;
       padding-top: 1px;
	}
	p{
		border:1px solid #4395FF;
		border-radius: 3px;
		box-shadow: 5px 5px 20px #4395FF;
		width: 900px;
		display: block;
		line-height: 50px;
        margin: 30px auto;
	}
    </style>
    <script type="text/javascript">
    	$(function(){
          function Ro(){
          	var d=Date.parse("Apr 23,2019")
          	var date=new Date()
          	var dd=date.getTime()
          	var rd=Math.floor((d-dd)/1000)
          	var days=Math.floor(rd/86400)
          	var hours=Math.floor(rd%86400/3600)
          	// console.log(hours)
          	var minus=Math.floor(rd%3600/60)
          	var secos=Math.floor(rd%60)
          	$('span').text(days+'天'+hours+'小时'+minus+'分钟'+secos+'秒')
          }
          setInterval(Ro,1)
    	})
    </script>
</head>
<body>
<div>
	<p>2019年海军70周年阅兵倒计时:<span> </span></p>
</div>
</body>
</html>

运行实例 »

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

以上代码演示了海军阅兵倒计时!

倒计时.JPG

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