jQuery常见用法
jQuery有好多版本本,无法同时引用两个不同的版本,容易造成混乱,用哪一个,调用哪一个.\
jQuery引用到<head></head>中,页面加载时就需要特效调用这些方法.
一.选择器:
JS中原本是 document.getElementById("d1");,在jQuery中变成了这样的:
ID选择器:$("#d1")
class选择器:$(".d1")
标签选择器:$("div")
平级并列:$("#d1,#d2") 加逗号
后代:$(#d1 d11)加空格
class集合中的第一个:$(".d1:first")
class集合中的最后一个:$(".d1:last")
class集合中某一个:$(".d1:eq(索引号)")
class集合中某个索引之前:$(".d1:lt(索引号)")
class集合中某个索引之后:$(".d1:gt(索引号)")
class集合中除某个索引之外:$(".d1:not(索引号)")
class集合中的奇数索引:$(".d1:odd") 1,3,5....
class集合中的偶数索引:$(".d1:even") 0,2,4.....
class集合中属性名值对过滤:$(".d1[id=d1]") 或[id!=d1]
class集合中的内容文字中包含某个字符串:$(".d1:contains('字符串')")
class集合中的某个选择器子集中存在某个选择器:$(".d1:has('id=d0')")
二.事件
基础事件:jQuery 和js的事件区别不是很大,差别主要是jquery事件没有on
复合事件:
把鼠标移入移出两个事件合二为一:$("#d1").hover(function(){移入时发生事件},function(){移出时发生事件})
循环执行的多个点击事件:$("#d1").toggle(function(){第一次点击发生事件},function(){第二次点击发生事件},.....)
未来元素(未来元素是指在页面初次加载时没有存在,在执行某一事件后生成的元素):对象.live("事件名称",function({}));
阻止冒泡事件:return false;
三.DOM操作
1.操作属性
获取属性:$("#d1").attr("属性名称");
设置属性:$("#d1").attr("属性名称","属性的值");
删除属性:$("#d1").removeAttr("属性名称");
2.操作样式
获取样式:$("#d1").css("样式名称");
设置样式:$("#d1").css("样式名称","样式的值");
添加样式:$("#d1").addclass("class名称");
移出样式:$("#d1").removeclass("class名称");
样式来回交替[通过其他事件来实现]:$("#d1").toggleclass("class名称");
3.操作内容
表单元素:
取值:$("#d1").val();
赋值:$("#d1").val("值");
非表单元素:
取值:$("#d1").html();//$("#d1").text();
赋值:$("#d1").html("值");//$("#d1").text("值");
4.操作相关元素:
四.Jquery动画
一、显示和隐藏
hide()、show()
1、show():显示被选的元素
2.hide():隐藏被选的元素
3.toggle():对被选元素进行隐藏和显示的切换
语法:
$(selector).hide(speed,callback); $(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
二、淡入淡出
fadeIn(),fadeOut()
1.fadeIn():用于淡入已隐藏的元素,即逐渐改变被选元素的不透明度,从隐藏到可见
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称,下同
2.fadeOut():用于淡出可见元素,即逐渐改变被选元素的不透明度,从可见到隐藏
语法:
$(selector).fadeOut(speed,callback);
3.fadeToggle():
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
语法:
$(selector).fadeToggle(speed,callback);
4.fadeTo():
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法:
$(selector).fadeTo(speed,opacity,callback);
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
三、上下滑动
slideDown(),slideUp()
1.slideDown() :通过调整高度来滑动显示被选元素
2. slideUp():通过调整高度来滑动隐藏被选元素
四、自定义动画
animate() :用于创建自定义动画。
$(选择器).animate({params},speed,function(){回调函数});
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
function(){回调函数}在动画完成后后执行
$("button").click(function(){
$("div").animate({
left:'250px',//或"left":250
opacity:'0.5',
height:'150px',
width:'150px',
"margin-right":"20px"//或marginRight:20
});
});
色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。
注:停止动画,防止动画积累: .stop(true)
jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
尺寸;
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
jQuery常见用法的更多相关文章
- [转]EasyUI——常见用法总结
原文链接: EasyUI——常见用法总结 1. 使用 data-options 来初始化属性. data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性.通过这个属性,我 ...
- jquery validate用法总结
jquery validate是本人用过的最好用的验证组件,但其文档写的真是不敢恭维,现将一些常见用法总结如下(持续更新). 1. js触发表单验证 //触发整个表单的验证 $('form').val ...
- jQuery $.each用法[转]
jQuery $.each用法 以下内容非原创,来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html 通过它,你可以遍历对象. ...
- Linux中find常见用法
Linux中find常见用法示例 ·find path -option [ -print ] [ -exec -ok command ] {} \; find命令的参数 ...
- php中的curl使用入门教程和常见用法实例
摘要: [目录] php中的curl使用入门教程和常见用法实例 一.curl的优势 二.curl的简单使用步骤 三.错误处理 四.获取curl请求的具体信息 五.使用curl发送post请求 六.文件 ...
- Guava中Predicate的常见用法
Guava中Predicate的常见用法 1. Predicate基本用法 guava提供了许多利用Functions和Predicates来操作Collections的工具,一般在 Iterabl ...
- find常见用法
Linux中find常见用法示例 ·find path -option [ -print ] [ -exec -ok command ] {} \; find命令的参数 ...
- iOS 开发多线程篇—GCD的常见用法
iOS开发多线程篇—GCD的常见用法 一.延迟执行 1.介绍 iOS常见的延时执行有2种方式 (1)调用NSObject的方法 [self performSelector:@selector(run) ...
- iOS开发多线程篇—GCD的常见用法
iOS开发多线程篇—GCD的常见用法 一.延迟执行 1.介绍 iOS常见的延时执行有2种方式 (1)调用NSObject的方法 [self performSelector:@selector(run) ...
随机推荐
- [TopCoder]棍子
题目描述 你有一堆棍子.每个木棒的长度是一个正整数. 你想要一组棍子所有的棍子都有相同的长度.您可以通过执行零个或多个步骤来更改当前集合.每个步骤必须如下所示: 你选择一根棍子.所选棒的长度必须至少为 ...
- 201771010126王燕《面向对象程序设计(Java)》第三周学习总结
实验三 Java基本程序设计(2) 实验时间 2018-9-13 1.实验目的与要求 (1)进一步掌握Eclipse集成开发环境下java程序开发基本步骤: (2)熟悉PTA平台线上测试环境: (3) ...
- shell变量的使用及输入输出
1.shell 中变量名可以由字母,数字,下划线组成,但数字不能作为变量名的第一个数字 2.通过赋值符合“=” 来定义一个变量的值 如 myname='zhangjunjie' #字符串类型,不解析 ...
- 什么是 js 变量提升 (Javascript Hoisting)
Javascript是一门容易遭人误解的语言,但是它的强大毋庸置疑.个人觉得,要想深入理解Javascript语言,首先必须对其基本的概念(例如:Scope,Closure,Hoisting等)要真正 ...
- 《javascript设计模式与开发实践》--- (单一职责原则)
看的这本书叫<JavaScript设计模式与开发实践> 先规划一下看书的顺序,基础知识我已经大概的浏览了一遍了,没有留下笔记,以后有时间还会补上.本来打算顺着看的.但是我感觉我很难短时间内 ...
- iOS HTML特殊字符转译
something about you Bye Bye è; un saluto 我使用NSXMLParser,它是顺利,直到它找到èHTML实体.它要求foundCharacters:为“再见” ...
- disconf安装问题
安装参考文档:https://blog.csdn.net/fengyao1995/article/details/66491226 主要说说遇到的几个问题 1.在步骤6构建的时候,用jdk1.8,进行 ...
- 在队列中join()与task_done()的关联性
1.基础解释: Queue.task_done() 在完成一项工作之后,Queue.task_done()函数向任务已经完成的队列发送一个信号 Queue.join() 实际上意味着等到队列为空,再执 ...
- Cutting Codeforces Round #493 (Div. 2)
Cutting There are a lot of things which could be cut — trees, paper, “the rope”. In this problem you ...
- Spark架构原理