做一个点击指定元素切换指定内容的页面模块（TAB切换），要切换的内容是独立的swiper.js轮播插件模块，如果先swiper初始化轮播内容，然后实现tab切换就会出现各轮播模块冲突，比如前进后退按钮异常、分页器异常、切换时内容加载异常等。可以避免各轮播模块冲突的方法是点击切换时再初始化当前的swiper轮播，其它的swiper轮播则注销掉。 HTML代码： <script src="js/swiper-bundle.min.js"></script> <div class="videos"> <div class="ta...
向下滑动显示slideDown()和向上滑动隐藏slideUp()是jquery内置的常用方法，现在再自定义增加一组向右滑动显示slideRight()和向左滑动隐藏的方法slideLeft()，其实也是一个简单的jquery插件。 代码如下： jQuery.fn.slideLeft = function( speed, callback ) { this.animate({ width : "hide", paddingLeft : "hide", paddingRight : "hide...
使用 $.ajax 请求本地静态文件数据，数据明明是JSON格式，但返回值的数据类型却是字符串，这是因为在数据传输过程中，JSON是以文本（即字符串）的形式传递的，所以返回的值也就是字符串类型，因此在操作返回的JSON数据时，需要先把JSON字符串转换为JSON对象，也就是解析，即反序列化（简单地理解）。 涉及基础 简单地理解，序列化就是把JSON对象转化成JSON字符串类型的过程；反序列化则是把JSON格式的字符串转化为JSON对象的过程。 在jQuery中可以使用 $.parseJSON(data) 实现标准格式的JSON字符串反序列化为JSON对...
animation 动画是经常会使用到的CSS3样式属性，通常是用来运行 @keyframes 定义动画，在网页开发过程中，想暂停 animation 动画要怎么做？CSS3 提供了 animation-play-state 属性，该属性的作用是运行或者暂停动画，支持该属性的浏览器版本 Chrome 43+(4.0 -webkit-)、IE10+、Firefox 16+(5.0 -moz-)、Safari 9.0+、Opera 30+(12.0 -o-)。 语法 animation-play-state: paused|running; 参数 ...
在 resize() 方法中添加 click 事件，点击一下会触发两次，会导致使用 toggle 类型的方法有异常。 示例： $(window).resize(function(){ $('button').click(function(){ $('p').fadeToggle('fast'); }); }).trigger('resize'); 上面的代码点击一下 button 后，p 标签的内容会显示后立即隐藏，这是因为连续触发了两次的 button 点击。 解决方法是在点击前，先取消 click 事件，然后再继续点击。 ...
$().each和$.each()是两个名称相似的jquery方法，它们的区别是前者用于处理DOM对象，后者用于处理数据对象。 方法结构 $().each $(selector).each(function(index,element){ //执行代码 }); $.each() $.each(dataArray, function(index,element){ //执行代码 }); 方法示例 使用$().each处理DOM HTML代码 <ul> <li>北京<...
定义一个value，在select下拉选项选中与该值相同的option，设置为选中状态。 html代码 <div class="setSelect"> <select> <option value="1">阿里云</option> <option value="2">腾讯</option> <option value="3">网易</option> <option value="4">百度</option> </s...
通过:contains匹配select下拉选项的option文本值，把和指定文本相同的option设置为选中状态。 html代码 <div class="setSelect"> <select> <option value="1">阿里云</option> <option value="2">腾讯</option> <option value="3">网易</option> <option value="4">百度</option...
在js中，click、mouseove等称为事件。事件冒泡即是触发了这些事件产生的效果，禁止事件冒泡即是就算触发了这些事件也不会产生事件原有的效果。 事件冒泡大致分为两种，一种是HTML标签的默认行为，如a标签超链接跳转、form表单提交等；另一种是人为的给元素绑定某类事件，如click点击事件。因此阻止事件冒泡也分为两种代码 HTML代码： <div class="go"> <a href="https://www.tddx.net/">跳转</a> </div> <div class="c...
$.inArray()方法用于在数组中搜索指定的值，并返回数组中该指定值的索引值，如果数组中不存在指定的值，则返回-1。 语法 $.inArray( value, array [, fromIndex ] ) 示例一： 返回索引值 var arrayStr = ['a','b','c']; alert($.inArray('a', arrayStr)); 返回索引值为0 示例二： 判断指定值是否存在 var arrayStr = ['a','b','c']; if($.inArray('a',a...
slice() 把匹配元素集合缩减为指定的指数范围的子集。模仿了 JavaScript 数组对象的 .slice() 方法。它所模仿的特性之一是向 start 或 end 参数传递负数的能力。如果提供负数，则指示的是从集合结尾开始的一个位置，而非从开头。 语法： $('element').slice(selector,end) selector - 基于 0 的整数值，指示开始选取元素的位置。如果是负数，则指示从集合末端开始的偏移量。 end - 基于 0 的整数值，指示结束选取元素的位置。如果是负数，则指示从集合末端开始的偏移量。如果省略，则选取范围会在...
CSS属性值是逐渐改变的，这样就可以创建动画效果。因此只有数字值可创建动画，比如margin:30px 而字符串值无法创建动画，比如background-color:red 要实现animate滚动到页面指定id的位置，就要获取ID的数字值，也就是距离顶部的距离，再通过animate的scrollTop滚动 $(document).ready(function($){ $('#comt').click(function(){ $('html,body').animate({scrollTop:$('#comments').offset().top}, 80...