学习笔记 之 JQuery 基础语法
jQuery 库 - 特性
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
1. 页面添加 jQuery 库
jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。
可以通过下面的标记把 jQuery 添加到网页中:
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
请注意,<script> 标签应该位于页面的 <head> 部分。
2. jQuery 语法实例
- $(this).hide()
- 演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
- $("#test").hide()
- 演示 jQuery hide() 函数,隐藏 id="test" 的元素。
- $("p").hide()
- 演示 jQuery hide() 函数,隐藏所有 <p> 元素。
- $(".test").hide()
- 演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。
- this 当前 #id .class "标签" [ ] 属性
- Query 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
-
基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
$(document).ready(function(){--- jQuery functions go here ----});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
3. jQuery 事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中:
$("button").click(function() {..some code... } )
该方法隐藏所有 <p> 元素:
$("p").hide();
Event 函数 绑定函数至 $(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时) $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件 $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件 $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 4. 单独文件中的函数
如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。
当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件):
实例
<head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="my_jquery_functions.js"></script> </head>
5. jQuery hide() 和 show()
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
$(selector).hide(speed,callback);$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
jQuery toggle()
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素,并隐藏已显示的元素:
$("button").click(function(){$("p").toggle(); });
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
6. jQuery Fading 方法
通过 jQuery,您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法:
实例
$("button").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000); });
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法:
实例
$("button").click(function(){$("#div1").fadeOut();$("#div2").fadeOut("slow");$("#div3").fadeOut(3000); });
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
语法:
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法:
实例
$("button").click(function(){$("#div1").fadeToggle();$("#div2").fadeToggle("slow");$("#div3").fadeToggle(3000); });
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法:
实例
$("button").click(function(){$("#div1").fadeTo("slow",0.15);$("#div2").fadeTo("slow",0.4);$("#div3").fadeTo("slow",0.7); });
转载于:https://www.cnblogs.com/halfleaf/p/9669141.html
学习笔记 之 JQuery 基础语法相关推荐
- 前端学习笔记之CSS3基础语法与盒模型(二)
前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...
- 大数据HiveSQL学习笔记三-查询基础语法以及常用函数
大数据HiveSQL学习笔记三-查询基础语法以及常用函数 一.基础语法 1.SELECT -列名- FROM -表名- WHERE -筛选条件- 如:需要根据城市,性别找出匹配的10个用户 user_ ...
- python基础论文_北大博士Python学习笔记,Python基础语法总结,一篇文章带你入门...
image.png 网上现在Python学习资料有很多,但是很杂.很多初学Python的朋友就不知道该怎么去抉择,那些是自己当下所需要的. 刚好朋友是北大的博士,在IT行业也工作八年了.就把他学习Py ...
- 前端学习笔记之1 基础语法及标签
引言 : 博主目前是一名iOS开发者, 所会的语言有Objective-C 和 Swift, 目前正在学习前端, 增强一下技术能力, 等学会点皮毛之后打算接触一下React Native; 这篇文章只 ...
- 【学习笔记】JS基础语法一小时通
内容整理自<从0到1Javascript快速上手>上半部分-基础语法篇
- Vue的完整学习笔记(介绍,基础语法,组件开发与通信,模块化概念,webpack,vue-cli,vue-router,vuex,axios)
前端发展和架构 先聊一下前端开发模式的发展. 静态页面 最初的网页以HTML为主,是纯静态的网页.网页是只读的,信息流只能从服务端到客户端单向流通.开发人员也只关心页面的样式和内容即可. 异步刷新,操 ...
- Java基础学习笔记三 Java基础语法
Scanner类 Scanner类属于引用数据类型,先了解下引用数据类型. 引用数据类型的使用 与定义基本数据类型变量不同,引用数据类型的变量定义及赋值有一个相对固定的步骤或格式. 数据类型 变量名 ...
- C#学习笔记第二天——基础语法
注释符 注销:代码不再运行 // Console.WriteLine("Hello, World!"); 解释:解释代码作用 //这行代码的作用是将Hello,word!打印到控制 ...
- java冰法_Java基础学习笔记二 Java基础语法
注释 注释用来解释和说明程序的文字,注释是不会被执行的. 单行注释 //这是一条单行注释 public int i; 多行注释 /*这是 * 一段注释, * 它跨越了多个行*/ public void ...
最新文章
- 六年磨一剑,全时发布音视频会议平台TANG,多款新品亮相
- 博图读取温度的指令_1200读取温度巡检仪 16路
- [INSHack2018]Tricky-Part1
- Repeater控件的分隔线
- Vue 左右翻页,点赞动画
- ie6、ie7下overflow失效
- 【代码笔记】Web-ionic单选框
- java 百度地图 经纬度_Java百度地图经纬度纠偏
- 天天学习: 关于美资,台资和国企比较分析
- 微信小程序整合Vant Weapp 步骤
- 单片机基础项目(上)
- 固态硬盘的坏块管理,你知道和不知道的
- 国家开放大学2021春2623中医药学概论题目
- Days14 ContentProvider ContentResolver
- 基于live555的视频直播
- Centos 8.0 安装图形化界面(超详细)
- 获取星期一,获取第几周
- 卡塔尔世界杯壁纸已上线,下载的壁纸清晰度不够?教你修复清晰
- html5论坛苹果三星再次谈判
- 在没SQL Server数据库情况下怎么打开.MDF文件?
热门文章
- 你还在为文件读写而烦恼?Python已经轻松帮你解决了(建议学习)
- 程序员们之间的“鄙视链”,程序员底之间无声的战争
- mysql5.7单表最大容量_mysql 5.7单表300万数据,性能严重下降,如何破?
- 2021年,深度学习还有哪些有潜力且处于上升期的研究方向?
- 浙江大学最美学习笔记赏析!我太吃惊了
- C++ Primer 第五版 第6章 6.7——函数指针阅读笔记
- 计算机网络封装过程图,网络传输过程是怎样的?网络数据传输的过程图解
- 给python小白的几个小练习(附答案详解哦)
- 深度学习与TensorFlow:VGG论文复现
- pads元件类型如何修改_pads logic元件库修改了,怎样更新到原理图