过滤器，绑定事件，动画

一、基本过滤器

语法	描述	返回值
:first	选取第一个元素	单个元素
:last	选取最后一个元素	单个元素
:not(selector)	选取去除所有与给定选择器匹配的元素	集合元素
:even	选取索引是偶数的所有元素(index 从0开始)	集合元素
:odd	选取索引是奇数的所有元素(index 从0开始)	单个元素
:eq(index)	选取索引等于index的元素	集合元素
:gt	选取索引大于index的元素	集合元素
:lt	选取索引小于index的元素	集合元素
:header	选取所有标题元素，如h1~h6	集合元素
:focus	选取当前获取焦点的元素	集合元素

二、可见性过滤选择器

选择器	描述	返回值
:visible	选取所有可见的元素	集合元素
:hidden	选取所有隐藏的元素	集合元素

三、绑定事件与移除事件

为匹配的元素一次性绑定或移除一个或多个事件时，可以使用绑定事件方法bind()和移除事件方法unbind()

eg:实现光棒效果

        //绑定事件 bind  unbind$(function () {$("li").bind("mouseover", function () {$(this).css("background","pink");}).bind("mouseout", function () {$(this).css("background", "");});//移除事件$("li").unbind("mouseover mouseout");})

补充：也可使用on off、live die、delegate undelegate方案实现绑定移除事件

四、jQuery中的动画

1、简单动画

① 控制元素显示与隐藏

show()、hide()

②改变元素透明度

fadeIn()、fadeOut()

③改变元素高度

slideUp()和slideDown()

eg:实现淡入淡出效果

    <title></title><script src="js/jquery-1.11.1.js"></script><script type="text/javascript">$(function () {$("#btnIn").click(function () {$("img").slideDown("slow");});$("#btnOut").click(function () {$("img").slideUp("slow");});})</script>
</head>
<body><img src="img/images/iocns.gif" /><input type="button" value="淡入" id="btnIn"/><input type="button" value="淡出" id="btnOut"/>
</body>

2、复杂动画<animate>

  <title></title><style type="text/css">div {height:20px;border:1px solid red;}</style><script src="js/jquery-1.11.1.js"></script><script src="js/jquery-migrate-1.2.0.js"></script><script type="text/javascript">$(function () {$("[type=button]").click(function () {$("div").animate({width: "70%",height: "300%",borderWidth: 10}).animate({fontSize:"50px"}, {queue:false,duration:5000})})})</script>
</head>
<body><div>我是div</div><input type="button" value="样式"/>
</body>

标签: 过滤器、绑定事件、动画

转载于:https://www.cnblogs.com/WuXuanKun/p/5605451.html

过滤器，绑定事件，动画相关推荐

50 jQuery绑定事件阻止默认事件发生内置动画 each data
主要内容 1 阻止后续事件继续执行 return false: 常用于表单提交 event.preventDefault : 阻止默认事件发生 <body> <form acti ...
jquery动态绑定事件的方法_Jquery绑定事件及动画效果
绑定事件 bind(type, data, fuc) one(type, data, fuc) //只执行一次常见事件类型名称含义blur失去焦点focus获得焦点load加载resize重置大小 ...
jQuery事件动画（四）
目录一,jQuery事件常见的DOM事件有加载DOM的两种方式 1window.onload 2.jquery 绑定事件的两种方式 1.element.on/bind(event,functio ...
Vue中动态加载SVG文件并绑定事件、修改节点数据
大致的流程是这样的:实现这个需求是首先通过一个工具(drawio)去自定义绘制图形,然后导出一个svg格式的文件,后端搞了一下drawio工具的源码,在导出的时候,为绘制的图形上每个节点都去绑定了一个 ...
jQuery事件动画
目录: 一.jQuery事件二.jQuery动画 (一)事件 1.加载Dom两种方式 1.1 window.onload方式(执行时间:整个网页中所有内容(包括图片)加载完成后,才会执行:编写个数: ...
jQuery-04 (事件动画)
一.事件 1.1 加载Dom两种方式 ①window.onload方式执行时间:整个网页中所有内容(包括图片)加载完成后,才会执行编写个数:1个 //1.1 加载DOM两种方式(区别)//原生态J ...
js基础（七）{事件的分类绑定事件函数中的this 字符串函数的传参规则严格模式}
JS中的常用事件什么叫做事件所谓的事件,是浏览器监听用户行为的一种机制. 比如,当用户使用鼠标 "点击" 一个按钮,会触发该按钮的"点击"事件如果此时我们 ...
【js】绑定事件的两种方法
方法一: 为需要绑定事件的标签添加一个属性onclick 代码实现: <input type="button" value="测试按钮" onclick= ...
jQuery绑定事件的三种常见方式（bind、one、【change、click、keydown、hover】）
一.bind(type,[data],fn):为每个匹配元素的特定事件绑定对应的事件处理函数. 也可以同时给一个元素绑定多个事件,我们来看一下例子: <!DOCTYPE html> < ...

过滤器，绑定事件，动画

过滤器，绑定事件，动画相关推荐

最新文章

热门文章