jQuery
willard_cui
这个作者很懒,什么都没留下…
展开
-
jQuery 引入,语法,事件冒泡,自定义事件。HTML捕获、设置、元素添加、删除
1、引入jQuery1):下载jQuery库 <script type="text/javascript" scr="jquery1.11.1.js"></jscript>2):从CDN中载入jQuery, http://libs.baidu.com/jquery/1.11.1/jquery.min.js http://ajax.googleapi...原创 2018-07-29 21:06:47 · 334 阅读 · 0 评论 -
jQuery:案例8 推拉门效果
方法:anemate(), stop(), siblings() 动画效果: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>推拉门</title&原创 2018-08-10 22:10:01 · 571 阅读 · 0 评论 -
jQuery:案例四 回到顶部
动画:通过点击侧栏导航,页面到达相应的位置jQuery方法:show(), hide(), animate() 动画效果: <!DOCTYPE html><head> <meta charset="UTF-8"> <title>回到顶部</title> <script src=&quo原创 2018-08-06 22:54:59 · 214 阅读 · 0 评论 -
jQuery: 案例9 计算器
动画效果:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算器</title> <script src="../jquery.min.js"&原创 2018-08-11 22:55:00 · 395 阅读 · 0 评论 -
jQuery:案例10 一个能够计算进制转换的计算器
在案例8的基础上增加了进制转换功能动画效果:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算器</title> <script src="../j原创 2018-08-11 23:01:55 · 842 阅读 · 0 评论 -
jQuery:案例5 图片切换
动画:点击左右按钮实现图片切换jQuery方法:animate(), stop(), first(), last(), siblings(), appendTo(), prependTo(), attr(), addClass(), removeClass(), eq()动画效果:<!DOCTYPE html><html lang="en"><h...原创 2018-08-08 22:52:42 · 974 阅读 · 0 评论 -
jQuery:案例11 放大镜效果
动画:1、鼠标移入显示区图片时,显示选择框;2、放大镜特效,将图片位于选择框内的部分放大显示;3、点击下方小图片和左右移动按钮时正确的显示图片实现方法:1、放大效果:放大区的与显示区使用相同的图片,并设置放大区图片的长宽为显示区的二倍;2、选择框拖动效果:鼠标移动时获得鼠标的坐标,并根据选择框的和图片的offset()属性计算出选择框的新位置。同时修改放大区图片的位置,使其...原创 2018-08-19 12:40:24 · 1814 阅读 · 0 评论 -
分别使用js原生代码和jQuery实现瀑布流效果
瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.。实现瀑布流的核心方法是两个函数(详见代码JS代码和jQuery代码部分)1、图片位置放置函数,该函数将下一张图片摆放在所有已加载图片的距离涌口顶部高度最小的那张图片的下方,主要通过以下几步完成:1)根据窗口的大小和图片的宽度决定一排放置几张图片...原创 2018-08-16 20:52:41 · 222 阅读 · 0 评论 -
jQuery插件扩展
插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护。一、jQuery插件开发方式1、通过$.extend()来扩展jQuery2、通过$.fn 向jQuery添加新的方法3、通过$.widget()应用jQuery UI的部件工厂方式创建 二、三种jQuery插件开发方式说明 1、$.extend()相对简单,一般...转载 2018-08-22 20:23:16 · 499 阅读 · 0 评论 -
jQuery:元素遍历
1、向上遍历DOM树parent() 方法选取被选元素的直接父元素。parents() 方法选取被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。parentsUntil() 方法选取介于两个给定元素之间的所有祖先元素。$("span").parent();//li$("span").parents();//li ul div$("span...原创 2018-08-01 22:45:15 · 843 阅读 · 0 评论 -
jQuery:css操作及jQuery盒子模型
1、jQuery css()方法:设置或返回指定的css属性的值$("div").css("width");//返回div元素的宽度使用css()方法设置元素div的样式方法一:$("div").css("width","100px");$("div").css("height","100px");$("div"原创 2018-08-01 21:34:20 · 395 阅读 · 0 评论 -
jQuery效果之隐藏、显示、淡入淡出、滑动、回调
一、显示、隐藏$(selector).hide(speed,callback);//隐藏,实际上是把元素的height、width、margin、opacity等在给定的时间内逐渐缩小为0最后 //把display设置为 none$(selector).show(speed,callback);//显示,过程与hide相反...原创 2018-07-30 23:04:47 · 357 阅读 · 0 评论 -
jQuery: 使用fadeToggle()制作闪烁效果小动画
根据上节课学到的jquery动画效果,结合js中的window.setInterval()函数制作闪烁效果小动画。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> &原创 2018-07-30 22:16:42 · 2101 阅读 · 1 评论 -
jQuery: 扩展与noConflict
一、扩展jquery:新建一个javaScript文档myjQuery.js。使用如下代码进行扩展jquery方式一:$.myjq1=function(){ alert("hello myjQuery1");}$.fn.myjq2=fcuntion(){ $(this).text("hello myjQuery2");} 然后在页面中调用my...原创 2018-07-30 22:58:22 · 135 阅读 · 0 评论 -
jQuery 动画案例一
动画目的:点击一级目录,展开其二级目录,同时关闭其他一级目录的二级目录。使用的jQuery方法:toggle(),hide(),parent(),siblings(),find()动画效果:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &原创 2018-08-04 22:03:47 · 453 阅读 · 0 评论 -
jQuery: 动画案例二
动画:鼠标移动到一级菜单上时,打开对应的二级菜单,移出时关闭该二级菜单。使用的jQuery方法:slideDown(), slideUp(), stop(), find(), mouseenter(), mouseleave()。<!DOCTYPE html><html lang="en"><head> <meta charset...原创 2018-08-04 22:54:42 · 270 阅读 · 0 评论 -
jQuery:案例三,模仿当当网“独家特供”菜单动画
动画:模仿当当独家特供菜单动画jQuery方法:addClass(),removeClass(),siblings(),find(),show(),hide()动画效果:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&a原创 2018-08-05 21:54:43 · 361 阅读 · 0 评论 -
jQuery插件扩展案例:图片轮播
使用插件实现图片轮播效果:通过设置传入的参数autoScroll,numControl和arrowControl的值可以显示不同的效果图片轮播效果一:设置autoScroll=true,numControl=false,arrowControl=false,图片自动轮播,当鼠标进入时停止轮播,当鼠标移出时继续轮播;图片轮播效果二:设置autoScroll=true,numControl...原创 2018-08-30 13:45:15 · 645 阅读 · 0 评论