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);
jQuery基础知识--选择器与效果的更多相关文章
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
- JQuery基础知识(1)
JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的 ...
- JQuery基础知识(2)
JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...
- 0417 jQuery基础知识
jQuery基础知识 jQuery需要引入一个js文件,并且这个文件在所有js代码之前(包括引入的其他js文件) 基础操作(对比js): 1.找标签: js:document.getElement.. ...
- JQuery基础知识梳理篇
这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...
- 【JQuery基础知识/statusCode(状态码)】---初学者必备
今天,给大家分享一下JQuery的基础知识,简单介绍一下JQuery高级_Ajax,和我们常见的一些statusCode(状态码)~~~ 如果存在错误,请大家多多指正留言~小女子在此谢过! 一.JQu ...
- jQuery基础---常规选择器
内容摘要: 1.简单选择器 2.进阶选择器 3.高级选择器 发文不易,转载请注明出处! jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元素的标签名.属性名. ...
- jQuery语法、选择器、效果等使用
1.jQuery语法 1.1 基础语法:$(selector).action( ) 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery 的 acti ...
随机推荐
- 解决WinForm(C#)中MDI子窗体最大化的问题
“用MDI方式打开一个子窗口体后,总是不能最大化显示,明明子窗口体的WindowState设置为Maximized?”,相信有很多人会遇到这的样问题,请按下面的方法设置即可使MDI子窗体最大化: 1. ...
- POJ 2182【树状数组】
题意: 每头牛有编号,他们乱序排成一排,每头牛只知道前边比自己序号小的有几位. 思路: 递推,最后一只牛的编号是确定的,然后不断进行区间更新,直到找到某个空位前方恰好有n个空位. 这题跟某道排队的题思 ...
- nyoj 90 整数划分
点击打开链接 整数划分 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 将正整数n表示成一系列正整数之和:n=n1+n2+-+nk, 其中n1≥n2≥-≥nk≥1,k≥ ...
- (easy)LeetCode 219.Contains Duplicate II
Given an array of integers and an integer k, find out whether there there are two distinct indices i ...
- 【转】关系映射文件***.hbm.xml详解
http://blog.sina.com.cn/s/blog_7ffb8dd5010144yo.html 附.Oracle使用标准.可变长度的内部格式来存储数字.这个内部格式精度可以高达38位. NU ...
- MySQL数据的主从复制、半同步复制和主主复制详解-转
一.MySQL复制概述 ⑴.MySQL数据的复制的基本介绍 目前MySQL数据库已经占去数据库市场上很大的份额,其一是由于MySQL数据的开源性和高性能,当然还有重要的一条就是免费~不过不知道还能免费 ...
- IE条件注释
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![ ...
- Windows操作 - Photoshop为图片添加透明立体水印
原文地址:http://design.yesky.com/photoshop/252/2427752.shtml 本文我们介绍用Photoshop为图片添加透明立体水印的方法和技巧. 原图: 打开原图 ...
- Cocos2d-x下Lua调用自定义C++类和函数的最佳实践[转]
Cocos2d-x下Lua调用C++这事之所以看起来这么复杂.网上所有的文档都没讲清楚,是因为存在5个层面的知识点: 1.在纯C环境下,把C函数注册进Lua环境,理解Lua和C之间可以互相调用的本质 ...
- 剑指Offer:面试题8——旋转数组的最小值(java实现)
题目描述: 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入 一个递增排序的数组的一个旋转 输出 旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的 ...