// Fade$(‘.btn’).click(function () {$(‘.element’).fadeToggle(‘slow’);});// Toggle$(‘.btn’).click(function () {$(‘.element’).slideToggle(‘slow’);});
9、简单的手风琴
这是一个可快速生成手风琴的简单方法:
// Close all panels$(‘#accordion’).find(‘.content’).hide();// Accordion$(‘#accordion’).find(‘.accordion-header’).click(function () {var next = $(this).next();next.slideToggle(‘fast’);$(‘.content’).not(next).slideUp(‘fast’);return false;});
通过添加这个脚本 , 你真正需要做的仅仅是在页面上添加必要的HTML元素 , 这样它就可以运行工作了 。
10、让两个div高度相同
有时候 , 你需要让两个div无论包含什么内容都拥有相同的高度:
$(‘.div’).css(‘min-height’, $(‘.main-div’).height());
设置 min-height , 这意味着它可以比主div大但绝对不能比主div小 。不过 , 还有一种更灵活的方法是遍历一组元素 , 然后将高度设置为最高的那个元素的高度:
var $columns = $(‘.column’);var height = 0;$columns.each(function () {if ($(this).height() > height) {height = $(this).height();}});$columns.height(height);
如果你希望所有列的高度相同:
var $rows = $(‘.same-height-columns’);$rows.each(function () {$(this).find(‘.column’).height($(this).height());});
11、在新标签页/窗口打开外部链接
在一个新的浏览器tab或窗口中打开外部链接 , 并确保同一个来源的链接能在同一个tab或者窗口中打开:
$(‘a[href^=”http”]’).attr(‘target’, ‘_blank’);$(‘a[href^=”//”]’).attr(‘target’, ‘_blank’);$(‘a[href^=”‘ + window.location.origin + ‘”]’).attr(‘target’, ‘_self’);
注意:window.location.origin 在IE10中无效 。修复的时候要小心这个问题 。
12、通过文本查找元素
通过使用jQuery中的contains() 选择器 , 你可以找到元素内容的文本 。如果文本不存在 , 那就隐藏该元素:
var search = $(‘#search’).val();$(‘div:not(:contains(“‘ + search + ‘”))’).hide();
13、在改变Visibility时触发
当用户不再关注某个tab , 或重新聚焦原来的那个tab上时 , 触发JavaScript:
$(document).on(‘visibilitychange’, function (e) {if (e.target.visibilityState === “visible”) {console.log(‘Tab is now in view!’);} else if (e.target.visibilityState === “hidden”) {console.log(‘Tab is now hidden!’);}});
14、AJAX调用错误处理
当Ajax调用返回404或500错误时 , 就执行错误处理程序 。如果没有定义处理程序 , 其他的jQuery代码或会就此罢工 。定义一个全局的Ajax错误处理程序:
$(document).ajaxError(function (e, xhr, settings, error) {console.log(error);});
15、链式插件调用
jQuery允许“链式”插件的方法调用 , 以减轻反复查询DOM并创建多个jQuery对象的过程 。比方说 , 下面的代码片段代表了你的插件方法调用:
$(‘#elem’).show();$(‘#elem’).html(‘bla’);$(‘#elem’).otherStuff();
通过使用链式 , 可以大大改善:
$(‘#elem’).show().html(‘bla’).otherStuff();
还有一种方法是在(前缀$)变量中高速缓存元素:
var $elem = $(‘#elem’);$elem.hide();$elem.html(‘bla’);$elem.otherStuff();
以上关于本文的内容,仅作参考!温馨提示:如遇健康、疾病相关的问题,请您及时就医或请专业人士给予相关指导!
「四川龙网」www.sichuanlong.com小编还为您精选了以下内容,希望对您有所帮助:- html标签属性大全 text标签设置文本
- 笔记本重装系统安装教程 电脑桌面黑屏但是能打开任务管理器
- 江南STYLE百科:鸟叔江南style歌词的中文翻译?
- 网页制作登录注册页面 html登陆页面代码
- iPhone有自带解压软件推荐 苹果rar文件怎么打开
- tomcat控制台中文乱码 eclipse运行tomcat项目
- 联想笔记本电脑各个按键说明 笔记本的键盘灯怎么打开
- 手机在线查看html源代码 查看网页源码大全
- 恢复硬盘到出厂状态 win10计算机在哪里打开
- html调整图片大小的代码 bootstrap图片居中展示