JavaScript 框架库 - jQuery
jQuery 是一个 JavaScript 库。
引用 jQuery
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> </head> <body> </body> </html>
一、jQuery 安装
把 jQuery 添加到您的网页
如需使用 jQuery,您需要下载 jQuery 库(会在下面为您讲解),然后把它包含在希望使用的网页中。
jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:
<head> <script src="jquery.js"></script> </head>
请注意,<script> 标签应该位于页面的 <head> 部分。
提示:您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ?
在 HTML5 中,不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言!
下载 jQuery
有两个版本的 jQuery 可供下载:
- Production version - 用于实际的网站中,已被精简和压缩。
- Development version - 用于测试和开发(未压缩,是可读的代码)
这两个版本都可以从 jQuery.com 下载。
提示:您可以把下载文件放到与页面相同的目录中,这样更方便使用。
二、jQuery 选择器
在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例。
关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
选择器允许您对 HTML 元素组或单个元素进行操作。
在 HTML DOM 术语中:
选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
更多的选择器实例
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
三、jQuery 事件
jQuery 是为事件处理特别设计的。
jQuery 事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中:
实例
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){$("button").click(function(){$("p").hide();}); }); </script> </head><body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body></html>
在上面的例子中,当按钮的点击事件被触发时会调用一个函数:
$("button").click(function() {..some code... } )
该方法隐藏所有 <p> 元素:
$("p").hide();
当页面加载完时:才可以触发
$(document).ready(function)
将函数绑定到文档的就绪事件(当文档完成加载时)
四、jQuery 效果
1)jQuery hide() 和 show()隐藏和显示
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();}); }); </script> </head> <body> <p id="p1">如果点击“隐藏”按钮,我就会消失。</p> <button id="hide" type="button">隐藏</button> <button id="show" type="button">显示</button> </body> </html>
2)jQuery fadeToggle() 方法 淡入淡出
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){$("button").click(function(){$("#div1").fadeToggle();$("#div2").fadeToggle("slow");$("#div3").fadeToggle(3000);}); }); </script> </head><body><p>演示带有不同参数的 fadeToggle() 方法。</p> <button>点击这里,使三个矩形淡入淡出</button> <br><br> <div id="div1" style="width:80px;height:80px;"></div> <br> <div id="div2" style="width:80px;height:80px;"></div> <br> <div id="div3" style="width:80px;height:80px;"></div> </body></body> </html>
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){$("button").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000);}); }); </script> </head><body> <p>演示带有不同参数的 fadeIn() 方法。</p> <button>点击这里,使三个矩形淡入</button> <br><br> <div id="div1" style="width:80px;height:80px;display:none;"></div> <br> <div id="div2" style="width:80px;height:80px;display:none;"></div> <br> <div id="div3" style="width:80px;height:80px;display:none;"></div> </body> </html>
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){$("button").click(function(){$("#div1").fadeOut();$("#div2").fadeOut("slow");$("#div3").fadeOut(3000);}); }); </script> </head><body> <p>演示带有不同参数的 fadeOut() 方法。</p> <button>点击这里,使三个矩形淡出</button> <br><br> <div id="div1" style="width:80px;height:80px;"></div> <br> <div id="div2" style="width:80px;height:80px;"></div> <br> <div id="div3" style="width:80px;height:80px;"></div> </body></html>
3)jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){$("button").click(function(){$("div").animate({top:'250px',left:'250px'});/*在这里修改他的动画效果*/}); }); </script> </head><body> <button>开始动画</button> <p>默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div></body> </html>
jQuery animate() - 操作多个属性
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){$("button").click(function(){$("div").animate({left:'250px',opacity:'0.5',height:'150px',width:'150px' /*这里可以修改它的透明效果*/});}); }); </script> </head><body><button>开始动画</button> <p>默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div></body> </html>
转载于:https://www.cnblogs.com/dlexia/p/4505059.html
JavaScript 框架库 - jQuery相关推荐
- 简洁、快速的JavaScript框架/库:jQuery
基础知识 简介 jQuery是一个快速.简洁的JavaScript框架. jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情. jQ ...
- javascript漏洞-检测到目标站点存在javascript框架库漏洞
一般是让升级为最新的版本的脚本文件,但是实际使用过程中,有的插件不兼容,盲目升级会导致网站部分插件不可用. 下面是一种解决方案. 比如漏洞扫描出jquery:2.1.4.作以下处理: 一.根据web应 ...
- javascript框架库_2019年使用的最佳JavaScript框架,库和工具
javascript框架库 似乎有比开发人员更多JavaScript框架,库和工具. 在2018年底, 在GitHub上的快速搜索显示230万个JavaScript项目. npm已成为全球最大的模块系 ...
- JavaScript 框架之jQuery
目录 一.JavaScript 框架之jQuery 二.JavaScript - 测试 jQuery 引用 jQuery jQuery 描述 测试 jQuery 一.JavaScript 框架之jQu ...
- js页面检测到目标站点存在javascript框架库漏洞
一.概述 在系统验收前安全检查时,绿盟检查到系统存在页面检测到目标站点存在javascript框架库漏洞,如下所示: 二.分析处理 这个漏洞是绿盟扫描比较常见的一个漏洞,原因就是jquery版本过低. ...
- Javascript框架库漏洞验证
Javascript框架库漏洞
- JavaScript常用库—jQuery
什么是jQuery jQuery是一个快速.简洁的JavaScript框架 jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:具有高效灵活的CSS选择器,并且可对CSS选择器 ...
- 检测到目标站点存在javascript框架库漏洞 (随手记录)
问题总结: js-cookie 系列解决问题 vue项目里面引用了js-cookie用来存放登录的一些信息了.删除js-cookie重新打包就可以了.至于页面上的数据,那就存放在localstroge ...
- 检测到目标站点存在javascript框架库漏洞
这个漏洞是绿盟扫描比较常见的一个漏洞,原因就是jquery版本过低.升级到3.3以上就可以了. ----------重点专用分割线---------- vue项目并没有所谓的Jquery,为什么还会扫 ...
- 简单博客系统静态页面(html+css+JavaScript+第三方库Jquery mdn)
目录 一.基本构造 1.博客列表页 2.博客详情页 3.登录页 4.博客编辑页 二.文件目录 1.css 文件夹 blog_detail.css blog_edit.css blog_list.css ...
最新文章
- 嵌入式linux程序没有任何提示退出,答网友问:嵌入式Linux执行程序提示Not found的解答...
- 论文笔记:PRIN: Pointwise Rotation-Invariant Networks
- 如何使用 PTS 快速发起微服务压测
- Centos7: 配置IO调度
- 基于docker容器下mongodb 4.0.0 的Replica Sets+Sharded Cluster集群
- Win11系统中的Thumbs.db文件可以删除吗?
- MySQL数据库设置主从同步
- Servlet详细介绍
- 按键消抖的原理与解决方案浅论
- 社交系统中用户好友关系数据库设计
- 一文搞懂 Java 中的 Native 方法
- 酷柚易汛进销存开源版升级来啦
- 免费企业网站模板_学校网站模板_政府网站模板源码下载
- linux中tftp服务器设置及测试
- 02_菜鸟也能懂的 - 音视频基础知识。
- (fuel)openstack 冷迁移+热迁移
- 波士顿房价预测的TensorFlow实现(多元线性回归)
- 黑鹰的学习网站--感兴趣的可以去看看
- 吸烟者问题(有例题!!!)
- 【面试系列】手把手教你如何面试,你要的我都有(简历篇)