桂林 门户网站,物联网在生活中的应用,国外做论坛网站,导购网站如何做目前 jQuery 兼容于所有主流浏览器, 包括 IE 6#xff01;开发时常用 jquery.js#xff0c;上线用 jquery.min.js。 jq插件
目前jQuery有三个大版本#xff1a; #xff08;1#xff09;1.x.x: 兼容ie6,7,8#xff0c;使用最为广泛#xff0c;官网只做BUG维护#xff…目前 jQuery 兼容于所有主流浏览器, 包括 IE 6开发时常用 jquery.js上线用 jquery.min.js。 jq插件
目前jQuery有三个大版本 11.x.x: 兼容ie6,7,8使用最为广泛官网只做BUG维护功能不再新增。因此一般项目来说使用1.X版本就可以了最终版本1.12.4 (2016年5月20日) 22.x.x: 不兼容ie6,7,8很少有人使用官方只做BUG维护功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x最终版本2.2.4 (2016年5月20日) 3 3.x.x: 不兼容ie6,7,8只支持最新的浏览器。除非特殊要求一般不会使用3.x版本的很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本3.2.12017年3月20日
目录小标题一、jQuery 下载安装1.1 网页中添加 jQuery1.2 查看版本二、选择器2.1 基本选择器2.2 层次选择器2.3 过滤选择器重点 2.4 内容过滤选择器2.5 可见性过滤选择器2.6 属性过滤选择器2.7 状态过滤选择器2.8 表单选择器三、遍历选择元素的方法3.1 遍历祖先3.2 遍历子孙后代3.3 遍历兄弟同胞3.4 过滤3.5 其他方法clone()四、jQuery动画4.1 隐藏、显示hide()、show()、togger()4.2 渐隐渐显fadeOut()、fadeIn()、fadeToggle()、fadeTo()4.3 上拉下拉slideUp()、slideDown()、lideToggle()4.4 动画animate();
一、jQuery 下载安装
jquery中文网教程也可以看 菜鸟教程。
1.1 网页中添加 jQuery
从 jquery.com 下载 jQuery 库然后保存到本地在本地引用从 CDN 中载入 jQuery如从 Google 中加载 jQueryscript srcjquery-1.10.2.min.js/script 1jquery 官网上的所有版本 2国内常用静态资源库Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 我们也可以在Staticfile CDN、又拍云、新浪、谷歌或微软引用 jQuery具体地址可以查看 菜鸟教程。 我们取他们前面的地址就可以看到里面各自存的库以新浪为例百度不能用了
1.2 查看版本
可以在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用的版本。 二、选择器
2.1 基本选择器
示例说明$(#id)ID选择器$(div)元素选择器$(.classname)类选择器$(.classname,.classname1,#id1)组合选择器
2.2 层次选择器
示例说明$(#id.classname )子元素选择器选择亲儿子$(#id .classname )后代元素选择器$(#id .classname )紧邻下一个元素选择器$(#id ~ .classname )兄弟元素选择器
2.3 过滤选择器(重点)
示例说明$(li:first)第一个li$(li:last)最后一个li$(li:even)挑选下标为偶数的li$(li:odd)挑选下标为奇数的li$(li:eq(4))下标等于 4 的li(第五个 li 元素)$(li:gt(2))下标大于 2 的li$(li:lt(2))下标小于 2 的li$(li:not(#runoob))挑选除 id“runoob” 以外的所有li
2.4 内容过滤选择器
示例说明$(div:contains(Runob))包含 Runob文本的元素可用来做搜索关键字高亮显示。$(td:empty)不包含子元素或者文本的空元素$(div:has(selector))含有选择器所匹配的元素$(td:parent)含有子元素或者文本的元素
2.5 可见性过滤选择器
示例说明$(li:hidden)匹配所有不可见元素或type为hidden的元素$(li:visible)匹配所有可见元素
2.6 属性过滤选择器
示例说明$(div[id])所有含有 id 属性的 div 元素$(div[id123])id属性值为123的div 元素$(div[id!123])id属性值不等于123的div 元素$(div[id^qq])id属性值以qq开头的div 元素$(div[id$zz])id属性值以zz结尾的div 元素$(div[id*bb])id属性值包含bb的div 元素$(input[id][name$man])多属性选过滤同时满足两个属性的条件的元素
2.7 状态过滤选择器
示例说明$(input:enabled)匹配可用的 input$(input:disabled)匹配不可用的 input$(input:checked)匹配选中的 input$(option:selected)匹配选中的 option
2.8 表单选择器
示例说明$(:input)匹配所有 input, textarea, select 和 button 元素$(:text)所有的单行文本框(:text)等价于(:text) 等价于(:text)等价于([typetext])推荐使用$(“input:text”)效率更高下同$(:password)所有密码框$(:radio)所有单选按钮$(:checkbox)所有复选框$(:submit)所有提交按钮$(:reset)所有重置按钮$(:button)所有button按钮$(:file)所有文件域三、遍历选择元素的方法 jQuery 遍历意为移动用于根据其相对于其他元素的关系来查找或选取HTML 元素。 div idboxp classtitle标题tttt/pspan文字/spanspan/spandiv idcontenth2h2标签/h2p classmsg信息xxx/pp段落/p/div
/div3.1 祖先
方法说明举例parent()返回被选元素的直接父元素$(#content).parent();返回 元素#boxparents()返回被选元素的所有祖先元素它一路向上直到文档的根元素 (html)$(#content).parents();返回 元素#box、元素body、元素htmlparentsUntil(元素)返回介于两个给定元素之间的所有祖先元素$(.title).parentsUntil(.msg);返回 元素#box、元素body、元素html
3.2 子孙后代
方法说明举例children()返回被选元素的所有亲儿子效果等价 。$(#box).children();返回 p.tilte、span、span、div#contentfind(元素)返回被选元素的所有后代元素一路向下直到最后一个后代。等价于 后代选择符$(#box).find(p);在 #box 中查找所有的 p 元素
3.3 兄弟同胞
方法说明举例siblings()返回被选元素的所有兄弟元素等价 ~。$(.msg).siblings();返回 h2、pnext()返回被选元素的下一个兄弟元素等价 。$(.msg).next();返回相邻的spannextAll()返回被选元素的所有兄弟元素。$(.msg).nextAll();返回 span、span、div#contentnextUntil(元素)返回被选元素的所有跟随的兄弟元素。$(h2).nextUntil(.content p.msg)返回的是与 h2 同级的所有兄弟元素不包括h2prev()、prevAll() 、prevUntil(元素)类似上面的方法只不过是前面的兄弟元素
3.4 过滤 1. 三个最基本的过滤方法是first()last() 和 eq()它们允许您基于其在一组元素中的位置来选择一个特定的元素。 2. 其他过滤方法比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。 方法说明举例first()返回被选元素的首个元素。$(div p).first();返回 p.tilte。这里的 $(div p) 可以选择到两个一是 #box 中的 p二是 #content 中的 p$(div p).first();选择到的是第一种。last()返回被选元素的最后一个元素。$(div p).last();返回 p.tilte。与上面相反选择的是最后一个p即#content 中的 p。ep(索引)返回被选元素中带有指定索引号的元素从 0 开始。$(#content p).eq(0);返回 p.msg。#content 中索引为0的 p。filter(元素)允许您规定一个标准。等价于指定元素$(p).filter(.msg);效果等同于$(p.msg)。not(元素)返回不匹配标准的所有元素。等价于:not()$(p).not(.msg);返回p.title、p效果等同于p:not(.msg)。
3.5 其他方法clone() 四、jQuery 动画
动画分为三部分内置动画、自定义动画animate、动画的配置 内置动画包含
隐藏、显示hide()、show()、togger()渐隐渐显fadeOut()、fadeIn()、fadeToggle()、fadeTo()上拉下拉slideUp()、slideDown()、lideToggle()
4.1 隐藏、显示hide()、show()、togger()
隐藏hide(speed)、显示show(speed)、隐藏或显示togger(speed) - 类似toggleClass()
参数speed的值slow600毫秒、fast200ms 或 毫秒。默认不写字符即参数为400ms不写为直接显示或隐藏下同。
这三个方法相当于给被选元素添加内置的样式display:none; 和 display:block;
div idboxboxoxbox/div
script$(#box).on(click, function(event){event.stopPropagation(); //阻止冒泡$(#box).hide();})$(document).on(click, function(){$(#box).show();})
/script4.2 渐隐渐显fadeOut()、fadeIn()、fadeToggle()、fadeTo()
渐隐fadeOut(speed)、渐显fadeIn(speed)、渐隐渐显fadeToggle(speed)、渐变到fadeTo(speed, opacity)
参数speedslow、fast 或 毫秒。参数opacity不透明度值介于 0 与 1 之间。
button idbtn1渐隐/button
button idbtn2渐显/button
button idbtn3渐隐或渐显/button
button idbtn4渐变到/button
div stylewidth: 100px;height: 100px;background: red;/div
script$(#btn1).click(function(){$(div).fadeOut();})$(#btn2).click(function(){$(div).fadeIn();})$(#btn3).click(function(){$(div).fadeToggle();})$(#btn4).click(function(){$(div).fadeTo(slow, .2);})
/script4.3 上拉下拉slideUp()、slideDown()、lideToggle()
上拉slideUp(speed)、下拉slideDown(speed)、上拉或下拉lideToggle(speed)
参数speedslow、fast 或 毫秒。
4.4 动画animate()
animate() 中可以接收3个参数分别是对象要变化的样式和值回调函数回调函数中可以是再次对动画进行改变也可以改变样式等、动画的持续时间单位ms。 1. 使用方法 目标元素即要发生变化的元素.animate({要发生变化的属性: 属性值即改变到多少值});
stylediv{position:absolute;width:100px;height:100px;background:red;}
/style
input typebutton idbtn1 value开始/
div/divscript
//将100*100的div的宽高分别增加到 200px、100px且定位位置同时也发生变化。
$(#btn1
).on(click, function(){$(div).animate({width: 200,height: 100,top: 30,left:30});
})
/scriptanimate 中的属性值可以做简单的运算
//在原来的基础上宽度100这里要注意是字符形式
$(div).animate({width: 100,height: 100,top: 30,left:30
});2. 链式运动 1链式运动是同步的最原始的写法
//宽先增加到200px位置变化到 top:30,left:30然后高再变化到200px
$(div).animate({width: 100,height: 100,top: 30,left:30
});
$(div).animate({height: 200
})2可以改写成
//宽先增加到200px位置变化到 top:30,left:30然后高再变化到200px
$(div).animate({width: 100,height: 100,top: 30,left:30
},function(){$(div).animate({height: 200});
});3上面这种方式有简单写法
//宽先增加到200px位置变化到 top:30,left:30然后高再变化到200px
$(div).animate({width: 100,height: 100,top: 30,left:30
}).animate({height: 200})上面3中写法的选择
当链式运动操作的对象元素不是同一个时选择1、2每次动画操作的都是同一个元素时采用连缀的写法3当 css 方法和 animate 方法一起使用时连缀写法会让 css 和 animate 同时生效。如果想要在animate 中的样式执行完之后再去执行 css需要变成写法2【css样式需要在哪个动画后改变就在这个动画后写回调函数】。//连缀写法会在一开始颜色就变成 yellow
$(div).animate({width: 100,height: 100,top: 30,left:30
}).animate({height:200}).css({ background: yellow });//回调函数式写法
$(div).animate({width: 100,height: 100,top: 30,left:30
}).animate({height:200},function(){$(div).css({ background: yellow });
})函数式写法的链式运动
3. 动画的配置 1动画延迟生效.delay(延迟时间ms) 写在动画开始之前。
stylediv{position:absolute;width:100px;height:100px;background:red;top:40px;left: 0;}
/styleinput typebutton idbtn1 value开始/
div/divscript$(#btn1).click(function(){$(div).animate({left:300 },1000).delay(1000).animate({ top:200 } ,1000).animate({ left:0 } ,1000).animate({ top:40 } ,1000)})/script2动画停止.stop(动画队列[布尔值], 当前动画[布尔值])默认为false,false 使用方式与 .delay() 相同 参数一true 表示清除动画队列即清除整个动画效果false表示不清除动画队列。 参数二true 表示直接运行到当前动画的终点false 表示停止当前动画。
stylediv{position:absolute;width:100px;height:100px;background:red;top:40px;left: 0;}
/style
input typebutton idbtn1 value开始/
input typebutton idbtn2 value停止/
div/div
script$(#btn1).click(function(){$(div).animate({ left:300 },1000).animate({ top:200 } ,1000).animate({ left:0 } ,1000).animate({ top:40 } ,1000)});$(#btn2).click(function(){$(div).stop(true, false);})
/script案例放到Github上了https://github.com/hexiling/jq-animate-stop 上面两张图片中第一个是没有关闭动画的效果第二个是关闭了动画.stop() 中的第一个参数传 true 或者 false 都可以。主要.stop(false,false)
3动画递归–动画自动循环播放
stylediv{width:100px;height:100px;background:red;}/stylescript$(#btn1).click(function(){$(div).toggle(1000, function () {$(div).toggle(1000, arguments.callee);})});
/script4动画的全局方法 写在全局位置。
$.fx.interval; 默认13毫秒动画帧数设置帧数越小动画越流畅但是可能会影响性能。使用$.fx.interval 2000;。$.fx.offtrue; 关闭动画设置为 true 时直接到动画的结束位置。
$.fx.interval 2000;$(#btn1).click(function(){$(div).animate({ left:300 },1000).animate({ top:200 } ,1000).animate({ left:0 } ,1000).animate({ top:40 } ,1000)});
