jQuery基础知识--选择器与效果
$(this).hide()-----隐藏当前元素
$("p").hide()------隐藏所有段落
$(".test").hide()--隐藏所有class="test"的元素
$("#test").hide()--隐藏所有id="test"的元素
文档就绪函数
$(document).ready(function() {
---------jQuery function go here------------
})
jQuery选择器
选择器允许对元素组或单个元素进行操作。
学习jQuery选择器的关键是学习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"结尾的元素。
jQuery CSS选择器
jQuery CSS选择器可用于改变HTML元素的CSS属性。
jQuery效果
1.jQuery隐藏/显示
hide()----隐藏被选的元素
show()----显示被选的元素
toggle()--对被选元素进行隐藏和显示的切换
2.jQuery淡入淡出
fadeIn()------逐渐改变被选元素的不透明度,从隐藏到可见--$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeOut()-----逐渐改变被选元素的不透明度,从可见到隐藏--$(selector).fadeOut(speed,callback);
fadeToggle()--可以在 fadeIn() 与 fadeOut() 方法之间进行切换。--$(selector).fadeToggle(speed,callback);
fadeTo()------把被选元素逐渐改变至给定的不透明度--$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
3.jQuery滑动
slideDown()----用于向下滑动元素--$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
slideUp()------用于向上滑动元素--$(selector).slideUp(speed,callback);
slideToggle()--可以在 slideDown() 与 slideUp() 方法之间进行切换--$(selector).slideToggle(speed,callback);
4.jQuery动画
jQuery animate()方法允许创建自定义的动画。
语法:
$(selector).animate({params}, speed, callback);
必须的params参数定义形成动画的CSS属性
可选的speed参数规定效果的时长。它可以取以下值:"slow"、"fast"或毫秒
可选的callback参数是动画完成后所执行的函数名称。
5.jQuery stop()
stop()方法用于在动画或效果完成前对它们进行停止。
stop()方法适用于jQuery效果函数,包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll, goToEnd);
可选的stopAll参数规定是否应该清除动画队列。默认是false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的goToEnd参数规定是否立即完成当前的动画。默认是false。
6.jQuery Callback
Callback函数在当前动画100%完成之后执行。
语法:
$(selector).hide(speed, callback)
callback参数是一个在hide操作完成后被执行的函数。
如果您希望在一个涉及动画的函数之后来执行语句,请使用 callback 函数。
7.jQuery Chaining
通过jQuery,你可以把动作/方法链接起来。
Chaining允许我们在一条语句中允许多个jQuery方法(在相同的元素上)。
例如:$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
或 $("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
转载于:https://www.cnblogs.com/dreamfree/p/4014509.html
jQuery基础知识--选择器与效果相关推荐
- jQuery基础知识整理
jQuery基础知识整理 jQuery简介 什么是jQuery(了解) jQuery简化JS代码 jQuery的核心思想:"写的更少,但做的更多"(write less,do mo ...
- jQuery小测试系列之jQuery基础知识
日期:2012-4-17 来源:GBin1.com 这是jQuery小测试系列第一部分:基础知识. 来源:jQuery小测试系列之jQuery基础知识
- JQuery 基础知识学习(详尽版)
JQuery 详尽的基础知识学习 jQuery 语法 jQuery 选择器 jQuery 选择器(大全) jQuery 事件 ready() holdReady() on() off() one() ...
- jQuery基础知识(黑马程序员前端基础必备教程视频笔记)
一.jQuery概述 1.JavaScript库 即library,是一个封装好的特定的集合(方法和函数).从封装的一大堆函数的角度理解库.就是在个库中,封装了很多预先定义好的函数在里面,比如动画an ...
- jQuery基础:选择器、动画、DOM操作和事件等
本文笔记基于「千古壹号」的GitHub项目:https://github.com/qianguyihao/web 文章目录 *1.选择器 1.1 DOM和jQuery比较 1.2 隔行变色 1.3 层 ...
- jquery基础知识(一)
一.JQuery 基础: 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优 ...
- JQuery 基础 jq选择器 dom操作
目录 JQuery 基础: (***) window.onload 和 $(function) 区别 1. 基本选择器 1. 标签选择器(元素选择器) 2. id选择器 3. 类选择器 2. 层级 ...
- jQuery框架-1.jQuery基础知识
jQuery简介 jQuery,顾名思义是JavaScript和查询(Query),jQuery是免费.开源的.它可以简化查询DOM对象.处理事件.制作动画.处理Ajax交互过程且兼容多浏览器的jav ...
- jQuery基础知识笔记一
学习目标 知道jQuery常用选择器的写法 知道jQuery如何操作元素样式 知道jquery的常用事件 知道选项卡的基本实现原理 知道如何制作基本的动画 了解表单验证的基本原理 03-[了解]jqu ...
最新文章
- mount cifs出现cannot allocate memory解决方法
- dell服务器从硬盘引导,就是折腾 篇三:戴尔H710 mini(D1版本)阵列卡刷直通模式 附硬盘引导和还原IR模式办法...
- 海史密斯敏捷企业架构
- 干货!不得不知的UI界面中“行为召唤按钮”设计秘诀
- ajax参数中字符串最大长度_6.7 C++数组名作函数参数 | 求3*4矩阵中最大的值
- Qt Creator运行自动测试
- oracle 监听加密 tcps,通过oracle wallet配置listener tcps加密
- 2016年回顾2017年目标之流水账
- P1024 一道naive的二分
- Flask中制作博客首页的分类功能(一)
- jquery_file_upload in Rails(ajax实现多张图片上传)
- margin-left:10px; 不同浏览器距离为什么不一样?
- python生成颜色数组
- HTML5七夕情人节表白网页制作【蓝色3D动态相册】HTML+CSS+JavaScript 程序员表白3D相册代码 html生日快乐祝福网页制作
- Hadoop开发相关问题
- CF949D Curfew solution
- 情感分类模型介绍CNN、RNN、LSTM、栈式双向LSTM
- 尚硅谷李立超老师讲解web前端---笔记(持续更新)
- 广义表((a,b),c,d)表头和表尾分别是什么?
- 华为nova5里面有用到鸿蒙吗,华为nova7se是不是鸿蒙系统?
热门文章
- 供销大集有潜力吗_社区团购遭点名批评,互联网巨头真的只是惦记那几捆白菜吗?| 吴坚浙商频道...
- 排名算法(三)--排序学习
- 人脸验证(四)--CenterLoss
- C语言——负数据强制类型转换注意事项
- ORACLE数据库测试题(二)
- java什么是适配器类?作用是什么?_浅谈Java适配器模式
- java搜寻范围在哪设定_查找值在Java中的范围
- java ArrayList扩容入门
- Keras Model AttributeError:’str‘ object has no attribute ’call‘
- SpringBoot整合Dubbo案例