好的文章顶一个 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top 2 $('a.top').click(function (e) { 3 e.preventDefault(); 4 $(document.body).animate({scrollTop: 0}, 800); 5 }); 1 <!-- Create an anchor tag --> 2 <a class=…

十五个常用的jquery代码段 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top 2 $('a.top').click(function (e) { 3 e.preventDefault(); 4 $(document.body).animate({scrollTop: 0}, 800); 5 }); 1 <!-- Create an anchor tag --> 2 <…

[jquery]常用的jquery获取表单对象的属性与值 1.JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的JS效果. 2.JQuery实现了 代码的分离 不用再网页中加入如:onclick之类的事件来调用函数了,直接引入JQuery类库和自己编写的JQuery代码就可以了: 如: $(function(){ $("Element").click{function(){ alert("…

爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图插件,大部分对开发者来说基本上可以直接拿来使用.今天我们要分享一款可以自动播放动画的jQuery焦点图插件,它在切换图片的时候可以播放对应图片的各种动画效果. 在线预览   源码下载 2.jQuery可自动播放动画的焦点图插件 这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又…

两种常用的jquery事件加载的方法   $(function(){});  window.onload=function(){}  第一个呢,是在DOM结构渲染完成以后调用的,这时候网页中一些资源还没有加载,比如图片等资源,但是DOM结构已经渲染成功了 第二个呢,是在网页DOM结构渲染完成,而且资源已经加载成功以后调用的. 有没有感受出区别来呢,一个是在资源没有加载的时候调用的,一个是在资源加载结束,页面已经渲染之后调用的,所以当我们在$(function(){})调用$('img').wid…

// chinacoder.cn JavaScript Document $(document).ready(function() { //.filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素 // 使用has()来判断一个元素是否包含特定的class或者元素 $("input").has(".email").addClass("email_icon"); /…

虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下次再使用的到时候,会让你如鱼得水,提高开发效率. 1.鼠标移动行变色 $("#table1 tr").hover(function(){ $(this).children("td").addClass("hover") },function(){ $…

网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery.easing.1.3.js jquery.easing.compatibility.js 该插件美化排版后是130行左右,压缩后更小.这个插件弥补了jquery里面的动画效果的不足,是其动画效果更加强悍. X轴表示时间,Y轴表示的是动画效果的变化.查看这些曲线变化,更利于掌握这个插件的效果. 插件支…

部分jQuery常用的动画函数,整理了一下,在做交互式页面的时候挺有用的 .css('a','12px');.css({  a:'12px',  b:'#fff'}); .show();.hide();.toggle(); .fadeIn();.fadeOut();.fadeToggle(); .slideDown();.slideUp();.slideToggle(); .text('string'); .animate({  a:'40px',  b:'ccc'},200) .fadeTo(…

  1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目的:通过九类选择器,能定位web页面(HTML/JSP/XML)中的任何标签 (1)基本选择器[参见01_selector.html] (2)层次选择器[参见02_selector.html] (3)增强基本选择器[参见03_selector.html] (4)内容选择器[参见04_selector…

1. X-editable 这个插件能够让你在页面上创建可编辑的元素.它能够使用任何引擎(bootstrap.jquery-ui.jquery),并且包含弹出式和内联模式. 2. Garlic.js Garlic.js 自动在本地保存表单文本字段的值,直到表单被提交.这样,你的用户如果不小心关闭选项卡或浏览器,也不会失去任何宝贵的数据. 3. Pickadate.js 完全响应式和轻量级的 jQuery 日期输入选择器. 4. jHERE 有了 jHERE,你可以很容易地添加互动地图到您的网站中…

jQuery ui框架很多,除了官方提供的jquery UI(如果你还不知道什么是jQuery UI,请看下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ui框架体积较大,所以很多人都不喜欢用,但不论是官方提供还是第三方提供,他们都是基于jquery核心类库实现的ui框架.     1.jQuery Smart UI 官网地址http://smartui.chinamzz.com JQuery Smart UI是基于JQuery的Ajax开发的一个j…

0.模块化前端框架(http://www.layui.com) 1.拖拽滑动验证码(http://www.geetest.com/,https://github.com/dyh1995/jquery.slideunlock.js) 2.图片裁剪插件 (https://fengyuanchen.github.io/cropper) 3.日期时间选择(https://github.com/xdan/datetimepicker) 4.日期时间段选择(https://github.com/longbi…

1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“selected”(.selected)的子节点. .filter(":not(:has(.selected))") 2. 如何重用元素搜索 var allItems = $("div.item"); var keepList = $("div#container…

1.attr() .removeAttr() .attr() 方法可以传入一个名值对的参数,也可以传入一个包含2个以上名值对的对象参数,例如: .attr('src','images/a.jpg'); .attr({  rel:'www',  id:'zz',  title:'some',  some:'111'}); 当然,也可以移除一个或者一个以上属性.removeAttr('id rel'); 2.prop() 该方法可以取得属性值 传入想要取得的值的属性名(字符串),例如.prop('i…

获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item = $("select[@name=items] option[@selected]").text(); select下拉框的第二个元素为当前选中值 $('#select_id')[0].selectedIndex = 1; radio单选组的第二个元素为当前选中值 $('input[@name=ite…

导读:书到用时方恨少,需要基础知识的时候,才悔恨自己没有总结学习好.前段时间调了好长时间的页面,突然发现自己之前不怎么在意的取值和赋值,真的是自己一个很薄弱的地方,有时候查半天都找不到一个对的,现在用自己的博客总结总结.以后直接查自己的博客,本篇博客纯属笔记性的文章. 一.基本取值和赋值 1.1,比较通用的方法: $("#id").val();和document.getElementById("id").value.$("#id").text()…

1.Jquery遍历祖先 1).parent()  方法返回被选元素的直接父元素. 2).parents()  方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>). 3).parentUntil()     $("span").parentsUntil("div");  span 和div之间的(不包括span 和div,并且是从最内部到最外部) 2. Jquery遍历后代 1).children()   方法返回被选元素的所有…

1. 如何修改jQuery默认编码(例如默认UTF-8改成改GB2312): $.ajaxSetup({ ajaxSettings:{ contentType:"application/x-www-form-urlencoded;chartset=GB2312"} }); 2. 解决jQuery, prototype共存,$全局变量冲突问题: <script src="prototype.js"></script> <script sr…

一.根据后端动态字段,如何把驻点输出在页面上?1.可以提前写好css,设置li的宽度,在页面中通过模板引擎语法动态加载不同的className.2.可以根据驻点个数和位置,用jquery去动态计算赋值. var paths = $('.detail-path'); $.each(paths, function(){ var points = $(this).children(), pointsLen = points.length; $.each(points, function(){ var…

现在web网页jquery应用越来越广泛,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多初学者只需稍微修改就可以使用.本文精选了8款比较强大的jQuery焦点图插件,希望对读者有所帮助. 1.jQuery动画焦点图 可自动播放图片 这是一款最基础的jQuery焦点图插件,包括切换的动画也是最基本的淡入淡出动画特效,但是它很轻巧,而且也比较容易扩展,因此也推荐使用. 在线预览   源码下载 2.jQu…

调试时巧用console.log(),这比用alert()方便多了. jquery易错点:元素拼接的时候,元素还未添加到DOM,就用该预添加元素操作. ajax动态获取的数据,还没有装载html元素,下面就开始用预拼凑的元素操作. <li onclick="Show('10')">    <a href='javascript:void()'>提交</a></li> 这样写,点击“提交”的时候,会报错“Uncaught SyntaxErr…

分享几个jQuery学习的API在线文档 1. 首推 http://hemin.cn/jq/ 原因是全中文文档,文档排列通俗易懂,容易查找,示例清楚. 2. https://www.jquery123.com/ jQuery API中文文档 3. http://jquery.com/ jQuery官方文档 纯英文的,但是所以的知识点都是接近最新的. 欢迎扫描下方二维码,加入群聊,互相交流学习! PS:欢迎扫描下方二维码或点击链接,加入QQ群…

主要是个人在工作中常用到的一些代码,会慢慢添加: 1).enter键时可以触发某些事件,比如登陆事件: $('#loginform').bind('keypress',function(event){ if(event.keyCode == 13) { HX.login('#loginform'); } }); //id为包含登陆信息的div或者form表单的id,而不是登陆按钮的.…

jQuery选择器菜鸟教程:https://www.runoob.com/jquery/jquery-selectors.html 引用jquery2.1.1标签:<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> $(this).hide:演示 jQuery hide() 函数,隐藏当前的 HTML 元素.$("#test").hide():演…

(function(doc){ })(document); $(function(){ }) jQuery(function(){ }) $(document).ready(function(){ }) jQuery(document).ready(function(){ })…

http://www.ligerui.com/ http://www.jeasyui.com/index.php http://www.jqwidgets.com/…

var regexEnum = {  intege:"^-?[1-9]//d*$",     //整数  intege1:"^[1-9]//d*$",     //正整数  intege2:"^-[1-9]//d*$",     //负整数  num:"^([+-]?)//d*//.?//d+$",   //数字  num1:"^([1-9]//d*|0)$",     //正数(正整数 + 0)  num…

使用 <script type="text/javascript"> function validate(){ var reg = new RegExp("^[0-9]*$"); var obj = document.getElementById("name"); if(!reg.test(obj.value)){ alert("请输入数字!"); } if(!/^[0-9]*$/.test(obj.value))…

$(document).ready(): $(document).ready() 方法允许我们在文档完全加载完后执行函数. click(): click() 方法是当按钮点击事件被触发时会调用一个函数. dblclick(): 当双击元素时,会发生 dblclick 事件. mouseenter(): 当鼠标指针穿过元素时,会发生 mouseenter 事件. mouseleave(): 当鼠标指针离开元素时,会发生 mouseleave 事件. mousedown(): 当鼠标指针移动到元素上…