上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图为大家展示,大家可以自行实验. 一.显示隐藏 1.jquery中通过hide() 和 show() 方法来隐藏和显示 HTML 元素: <span style="font-size:18px;">$("#hide").click(function(){ $(…
jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格. 瀑布流的应用: 瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作,瀑布流的主要特性便是错落有致,定宽而不…
几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} .tabbox{margin:10px;} .tabbox ul{list-style:none;display:table;} .tabbox ul li{float:left;width:100px;line-height:30px;padding-left:8px;border:1px solid #a…
操作元素(属性,css,文档处理) 1.1 属性操作 --------------------------属性 $("").attr(); $("").removeAttr(); $("").prop(); $("").removeProp(); --------------------------CSS类 $("").addClass(class|fn) $("").removeCla…
一.事件 click(function(){}) 点击事件 hover(function(){})   悬浮事件,这是jQuery封装的,js没有不能绑定事件 focus(function(){})    聚焦事件,多用于input blur(function(){})   离开聚集事件,与聚焦事件相反 change(function(){}) 内容改变时触发,多用于input,select keyup(function(e){}) $(window)对象获取,键盘抬起时触发,形参为e, e.k…
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $(id){ return document.getElementById(id) } 事件操作 3.BOM user-Agent location.pathname location.href 一.jQuery的介绍 1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.on…
学习内容 jQuery简介 搭建jQuery开发环境 jQuery基本选择器 能力目标 熟悉jQuery开发环境 能编写简单的jQuery代码 本章简介 在前面两章,我们学习了JavaScript面向对象编程,从而对JavaScript这门编程语言有了更进一步的认识.JavaScript是目前世界最流行的编程语言之一,在Web前端开发中,起着无可替代的作用.虽然进过多年的改进,但是开发人员仍然觉得直接使用JavaScript困难重重,为了简化JavaScript并提高开发效率,各种JavaScr…
一: 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); 实例 //点击隐藏 $("#hide").click(function(){ $("p").hide(); }); //点击显示 $("#show").click(function(){ $("p").show(); }); jQuery toggle() 通过 jQuery,您…
基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_wrap"> <div class="wrap_head"> <div id="fragment_title"> </div> </div> <div class="wrap_middle&…
本实例用到了jquery.imgbox.pack.js库.直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content=""…