jquery 学习笔记1
来源:互联网 发布:修改手机型号软件大全 编辑:程序博客网 时间:2024/06/05 00:22
操作
元素选择器$(this).hide()演示 jQuery hide() 函数,隐藏当前的 HTML 元素。$("#test").hide()演示 jQuery hide() 函数,隐藏 id="test" 的元素。$("p").hide()演示 jQuery hide() 函数,隐藏所有 <p> 元素。$(".test").hide()演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。$("p.intro") 选取所有 class="intro" 的 <p> 元素。$("p#demo") 选取所有 id="demo" 的 <p> 元素。属性选择器jQuery 使用 XPath 表达式来选择带有给定属性的元素。$("[href]") 选取所有带有 href 属性的元素。$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。jQuery CSS 选择器把所有 p 元素的背景颜色更改为红色$("p").css("background-color","red");
jQuery 事件
Event 函数 绑定函数至
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
jQuery 效果
隐藏和显示
$(selector).hide(speed,callback);$(selector).show(speed,callback);$(selector).toggle(speed,callback); 这个可以来回切换
淡入淡出
fadeIn(time)fadeOut(time)fadeToggle(time)fadeTo(time,int) fadeto一定的透明度
滑动
$(selector).slideToggle(speed,callback);
动画
1如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute
2当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right
3必需的 params 参数定义形成动画的 CSS 属性。
4 Color Animations 插件支持彩色动画
语法:
$(selector).animate({params},speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
$("button").click(function(){ $("div").animate({left:'250px'});//它把 <div> 元素移动到左边,直到 left 属性等于 250 像素为止:}); 同时进行动画$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' });}); 队列动画$("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow");});相对位置height:'+=150px', 相对当前位置增加150width:'+=150px'
停止动画
$(selector).stop(stopAll,goToEnd);
Chaining
$("#p1").css("color","red") .slideUp(2000) .slideDown(2000);
- jQuery学习笔记1
- jquery学习笔记1
- JQuery学习笔记(1)
- Jquery学习笔记1
- jQuery---学习笔记1
- jquery学习笔记-1
- jQuery学习笔记1
- jQuery学习笔记(1)
- jquery-学习笔记1
- jQuery学习笔记1
- jQuery学习笔记(1)
- jQuery学习笔记-1
- jquery 学习笔记1
- jQuery学习笔记1
- JQuery学习笔记-1
- jquery 学习笔记1
- jQuery学习笔记1
- jquery学习笔记1
- Oracle的下载、安装和配置
- MFC点击按钮,弹出另一个对话框
- 简单的通讯录——第二版(动态版)
- Shell脚本调用java程序 Example
- Jenkins部署
- jquery 学习笔记1
- MFC静态编译
- C++类中的静态成员
- 已解决:Only the original thread that created a view hierarchy can touch its views.
- Android自定义View之基本API(三)
- Java设计模式-单例模式 Singleton Pattern
- 分析当今(2016年12月13日)社交三巨头:微信、whatsapp、line
- 传统式开发模式与嵌入式开发模式(12.10)
- 深入剖析jsonp跨域原理