jQuery随笔20190711~0713(选择器、事件、效果)
目录
1、jQuery简介
2、下载jQuery
3、jQuery选择器
4、jQuery事件
5、jQuery效果
1）隐藏和显示
2）淡入淡出
3）滑动
4）动画
5）停止动画
6）jQuery链
1、jQuery简介
jQuery是一个JavaScript函数库（write less,do more），它极大地简化了JavaScript编程。jQuery库可以通过一行简单拿的标记被添加到网页中。
jQuery库有以下功能：
HTML元素选取、HTML元素操作、CSS操作、HTML事件函数、JavaScript特效和动画、HTML DOM遍历和修改、AJAX、Utilities，除此之外，jQuery还提供了大量的插件。
2、下载jQuery
jQuery (click me ,download)
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，是可读的代码）
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：
<script src="jquery-3.4.1.js"></script>hint: 将下载的文件，放在网页的同一目录下，就可以使用jQuery了。
或者：采用 Staticfile CDN ，直接引用jQuery。
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>或者：采用 百度CDN ，直接引用jQuery。
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>3、jQuery选择器
jQuery选择器允许对HTML元素组或者单个元素进行操作。他是基于元素的id、类、类型、属性、属性值等“查找”HTML元素的，此外，他还有一些自定义的选择器。jQuery中所有的选择器都是以美元符号开头：$()。
$(this).hide() 隐藏当前HTML元素
$("p").hide() 隐藏所有<p>元素
$("_test").hide() 隐藏所有class = "test"元素
$("#test").hide() 隐藏id= "test"元素
$("*") 选取所有元素
$("p:first") 选取第一个 <p>元素
$("[href]") 选取带有href 属性的元素
文档就绪事件：：：这是为了防止文档在完全加载之前就运行jQuery代码，即在DOM加载完成后才可以对DOM进行操作。
$(document).ready(function(){// 开始写 jQuery 代码...});// 简洁写法
$(function(){// 开始写 jQuery 代码...});提示：如果您的网站有很多页面，并且希望jQuery易于维护，那么可以将jQuery放到独立的.js文件中。通过src属性来引用文件。
<head><script src="jquery-3.4.1.js"></script>
</head>4、jQuery事件
jQuery是为事件处理特别设计的。事件处理程序指的是当HTML中发生某些事件时所调用的方法。
focus() ：当元素获得焦点时，发生focus事件。当通过鼠标点击选中元素或者通过Tab键定位到元素时，该元素就会获得焦点。
blur(): 当元素失去焦点时，发生blur事件。blur() 方法触发blur事件，或规定发生blur事件时运行的函数。
5、jQuery效果
1）隐藏和显示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed:规定了隐藏/显示的速度，可以取 slow ,fast,或毫秒。
可选的callback参数是隐藏/显示完成后所执行的函数名称。
jQuery toggle():切换hide()和slow()方法。即显示被隐藏的元素，隐藏被显示的元素。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.4.1.js"></script><script>$(function(){$("p").click(function(){$(this).hide();});/*** 点击【click me,then hide】按钮时，div隐藏*/$(" .myDiv .hide").click(function(){$(this).parents(".myDiv").hide("slow");});/*** 鼠标离开h1时，div隐藏*/$("h1").mouseleave(function(){$(".myDiv").hide("slow");});/*** 鼠标进入 h1 元素时，div显示*/$("h1").mouseenter(function(){$(".myDiv").show("slow");});/*** 点击【HIDE & SHOW】button ，显示和隐藏 p元素*/$("button").click(function () {$("p").toggle();});});</script><style>div.myDiv{background-color: antiquewhite;padding: 4px;border: solid 1px #34ddff;}</style>
</head>
<body>
<button>HIDE & SHOW</button>
<h1>简单隐藏</h1>
<p>if you click me, i will disapper~~~</p>
<p> click me ,again....</p>
<h1>文本隐藏</h1>
<div class="myDiv"><button class="hide">click me,then hide</button><p>MyTest<br>sample hide && text hide Example~~~~~~~</p>
</div>
</body>
</html>
2）淡入淡出
fadeIn()
fadeOut()
fadeToggle()
fadeTo() ：该方法允许渐变为给定的不透明度(0-1)。
语法：$(selector).fadeTo(speed,opacity,callback);
必需的speed参数规定效果的时长。 slow,fast，毫秒数
必需的opacity参数将淡入淡出设置为给定的不透明度。
可选的callback参数是该函数完成后所执行的函数名称。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery Test</title><script src="jquery-3.4.1.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeOut("slow");$("#div2").fadeOut(3000);$("#div3").fadeIn(2000);$("#div4").fadeIn(5000);$("#div1").fadeToggle(5000);$("#div2").fadeToggle(6000);$("#div3").fadeToggle(7000);$("#div4").fadeToggle(8000);$("#div2").fadeTo(2000,0.8) ;$("#div3").fadeTo(2000,0.7) ;$("#div4").fadeTo(2000,0.6) ;$("#div5").fadeTo(2000,0.2) ;});});</script>
</head>
<body>
<p>jQuery Test</p>
<button>Click Me</button>
<br><br>
<div id="div1" style="width: 100px;height: 100px;background-color: red"></div><br>
<div id="div2" style="width: 100px;height: 100px;background-color: yellow"></div><br>
<div id="div3" style="width: 100px;height: 100px;display:none;background-color: palevioletred"></div><br>
<div id="div4" style="width: 100px;height: 100px;display:none;background-color: green"></div><br>
<div id="div5" style="width: 200px;height: 200px; background-color: slateblue;"></div>
</body>
</html>3）滑动
slideDown()
slideUp()
slideToggle()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery Test</title><script src="jquery-3.4.1.js"></script><script>$(document).ready(function(){/*** click button ,淡入淡出效果*/$("button").click(function(){$("#div1").fadeOut("slow");$("#div2").fadeOut(3000);$("#div3").fadeIn(2000);$("#div4").fadeIn(5000);$("#div1").fadeToggle(5000);$("#div2").fadeToggle(6000);$("#div3").fadeToggle(7000);$("#div4").fadeToggle(8000);$("#div2").fadeTo(2000,0.8) ;$("#div3").fadeTo(2000,0.7) ;$("#div4").fadeTo(2000,0.6) ;$("#div5").fadeTo(2000,0.2) ;});/*** click,slidedown*/$("#slide").click(function(){$("#myDiv").slideDown(3000);});/*** click,slideup*/$("#slide").click(function(){$("#myDiv").slideUp(5000);});/*** click,slideToggle*/$("#slide").click(function(){$("#myDiv").slideToggle(5000);});});</script><style>#myDiv,#slide{padding: 5px;text-align: center;background-color: gray;border: solid 2px #34ddff;}#myDiv{padding: 50px;display: none;}</style>
</head>
<body>
<div id="slide">click me ,show style</div>
<div id="myDiv"><p>jQuery Test</p><button>Click Me</button><br><br><div id="div1" style="width: 100px;height: 100px;background-color: red"></div><br><div id="div2" style="width: 100px;height: 100px;background-color: yellow"></div><br><div id="div3" style="width: 100px;height: 100px;display:none;background-color: palevioletred"></div><br><div id="div4" style="width: 100px;height: 100px;display:none;background-color: green"></div><br><div id="div5" style="width: 200px;height: 200px; background-color: slateblue;"></div>
</div>
</body>
</html>
4）动画
animate() 方法用于创建自定义动画。
语法：$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
5）停止动画
stop() 方法用于停止动画效果。该方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。
语法：$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
6）jQuery链
链chaining：通过jQuery，把动作方法链接在一起。chaining允许在一条语句中运行多个jQuery方法（相同元素上）。
jQuery随笔20190711~0713(选择器、事件、效果)相关推荐
- 70天的JQUERY学习： 选择器+事件+效果。总结篇
运行结果 这是我等下要发的代码.首先去了解Jquery的Apl:APL代码. <!DOCTYPE html> <html class="no-js loading-pr ...
- 视频教程-jQuery交互式前端开发(第一季)：初体验/选择器/事件绑定-jQuery
jQuery交互式前端开发(第一季):初体验/选择器/事件绑定 知识传播美丽,分享传递快乐.作者主要从事Java服务器端技术.前端与移动开发技术的研究和授课,已有10多年从业经验. IT老兵 ¥12. ...
- jQuery基础知识--选择器与效果
$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...
- jQuery框架学习第二天：jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- jQuery的位置信息和事件
一.位置信息 1.宽度和高度 获取宽度: .width() 为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返 ...
- [乐意黎转载]从零开始学习jQuery (二) 万能的选择器
一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显减轻开发人员的工作量. 二.前言 编写任何javascript程 ...
- jQuery 从零开始学习 (二) 选择器
一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显减轻开发人员的工作量. 二.前言 编写任何javascript程 ...
- jQuery实现响应式瀑布流效果（jQuery+flex）
瀑布流原理:是一种常见的网页布局方式,它的特点是将内容以多列的形式呈现,每一列的内容高度不固定,根据内容的大小自适应调整,从而形成了像瀑布一样的流动效果. 瀑布流的实现原理涉及到数据加 ...
最新文章
- 【Netty】入门Netty官方例子解析（一）写个 Discard Server
- 苹果签名分发系统需要什么配置的服务器呢,苹果/IOS超级签名分发系统
- 深度神经网络：WX+b vs XW+b
- 利用PHP-ExcelReader实现PHP导入Excel数据[不通过CSV]
- 中国超细旦丝现状调研及投资前景评估报告2022-2028年版
- shiro的简单入门使用
- 【2018.4.14】模拟赛之四-ssl2394 剪草【dp】
- [swift] LeetCode 234. Palindrome Linked List
- Assembly.Load动态加载程序集而不占用文件
- Ruby First
- DIV+CSS定义及优势
- 非参数统计 作业（第五章第六章）
- Android Assets里的资源保存本地
- 苹果电子邮件怎么注册_电子邮件地址怎么写
- Eclipse使用大全
- HTML+CSS+JavaScript实战——美团首页
- 为什么智能手机中被撕的永远是华为!
- java实现低碳生活大奖赛
- DA （分布式算法）
- 【Arduino】重生之Arduino 学僧（1）----Arduino简介