很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。
首先需要在顶部添加如下html元素:<p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可以实现返回顶部的效果了。
要想让返回顶部的图片显示在右侧,还需要一些css样式,如下:/*returnTop*/
p#back-to-top{position:fixed;display:none;bot...
<span style="font-size:24px;color:#ff0000;">部长练习全选-取消-反选-显示选择内容等功能代码:</span><!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>部长练习全选-取消-反选-显示选择内容等功能</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(e) {//实现全选功能$(':input[value=全选]').click(function(){//alert($(this).val()); $('form :checkbox').p...
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="./assets/js/jquery.js"></script></head><style></style><script type="text/javascript"> var t; var speed = 2;//图片切换速度 var nowlan=0;//图片开始时间 function changepic() { var imglen = $("div[name=‘pic‘]").find("div").length;//获取DIV 下的滚动条数 ...
<script type="text/javascript"> jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(this); opts = jQuery.extend({ Img: "Image1", Width: 100, Height: 100, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { } ...
1.直接全选(复选框名字要统一)<input type="CHECKBOX" id="cbSelectAll" onclick="$(‘input[name=privilegeIds]‘).attr(‘checked‘,this.checked)"/> <label for="cbSelectAll">全选</label> <ul id="privilegeTree"> <s:iterator value="privilegeList"> <li> <input id="cb_${id }" <s:property value="id in privilegeIds ? ‘checked‘ : ‘‘ "/> value...
// 扩展的实用功能
jQuery.extend({// http://www.w3school.com.cn/jquery/core_noconflict.asp// 释放$的 jQuery 控制权// 很多 JavaScript 库使用 $ 作为函数或变量名,jQuery 也一样。// 在 jQuery 中,$ 仅仅是 jQuery 的别名,因此即使不使用 $ 也能保证全部功能性。// 假如我们须要使用 jQuery 之外的还有一 JavaScript 库,我们能够通过调用 $.noConflict() 向该库返回控制权。// 通过向该方法传递參数 true,我们能够将 $ ...
1.引入jQuery文件2.添加jquery.refresh.js文件,代码如下: 1/**2 * Created by Silver on 2015/11/27.3*/ 4 5 (function ($) {6 $.refreshData = function (options) {7var defaults = {8 url: ‘/order/ajax_new_count‘,//提交的地址 9 contentData: {},
10 time: 15,
11 home: false12 };
13var opts = $.extend({}, defaults, options);
1415 $.refreshDat...
使用clipboardjs插件实现鼠标点击复制功能;官网:https://clipboardjs.com/使用示例:1.引入<script type="text/javascript" th:src="@{/static/js/clipboard.min.js}"></script>2.按钮元素:<button class="btn" onlick="copyBtn();">点击复制<button/>function copyBtn() {new ClipboardJS(‘.btn‘,{ text:function(trigger) { return ‘这里是复制的文本信息‘; } });}原文:https://www.cnblogs.com/dwb91/p/10400093.h...
原文:jquery实现替代iframe的功能使用iframe能很好的嵌入其他的网页或者网站,但是iframe每次加载都会浪费好多的时间,且会阻止其他元素的加载,搜索引擎也不能识别页面ifram框架中被调用的链接、文本、图片等等内容的。Html代码<ul class="list-side"><li><a target="a.html" >about</a></li><li><a target="b.html" >news</a></li><li><a target="c.html" >product</a></li><li><a href="http://ucmic.blogspot.com/" target="_b...
项目中使用了jquery datatables 作为我们的数据表格组件,但是分页上没有跳转到指定页,需要自己重新写。解决方法如下:在设置dataTables的默认属性里设置它的drawCallback方法来在后面拼接跳转元素,本方法是datatables 1.10往后的版本本代码是针对spring mybatis pageHelper插件返回的PageInfo来进行处理的,返回的结构是{success:true, data : pageInfo},如果只是看自定义跳转,只需要看里面的drawCallback方法/*** 设置jquery ...
1.$.boxModel<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>var sBox = $.boxModel ? "标准W3C":"IE";
document.write("您的页面目前支持:"+sBox+"盒子模型"); </script>
</head>
<body></body>
</html>运行结果:您的页面目前支持:IE盒子模型 2.$.each() 遍历<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>var aArray = [...
最近在做一个图片上传到服务器的功能,之前基本没有什么JS的经验,用的也是网上的插件。做了一个星期才把他弄好,现在做一下总结,方便以后查看。用的插件是WebUploader,上面有很多例子,我找的例子如下图: 在实例化WebUploader的时候需要修改upload.js文件中的server的地址,这样才能将指定的图片上传到服务器代码如下:// 实例化uploader = WebUploader.create({pick: {id: ‘#filePicker‘,label: ‘点击选择图片‘},formDat...
LigerUI框架Tree于Tab标签动态使用,当点击Tree后动态创建Tab标签,和通常用的iframe框架功能类似Tree中的关键代码//Tree初始化$("#tree1").ligerTree({nodeWidth: 112, //Tree控件宽度data: createData(), //Tree数据源checkbox: false, //是否使用CheckboxidFieldName: ‘id‘, //绑定idisExpand: 2, //是否展开节点 FALSE为不展开 TRUE展示所有节点 指定数字为展开指定节点slide: false, //节点展开效果False无效果 TRUE缓慢展开...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>js数量加减</title><script type="text/javascript" src="http://www.jb51.net/Public/js/jquery.min.js"></script><script type="text/javascript">
$(function(){$(...
获取元素jQuery的基本设计思想和主要用法,就是选择某个网页元素,然后对其进行操作。
css选择器$(document) 选择整个文档
$(‘#myId‘) 选择id为#id的网页元素
$(‘div.myClass‘) 选择class为myClass的选择器
$(‘input[name=mine]‘) 选择name属性等于mine的input元素
jQuery特有的表达式$(‘a:firt‘) 选择网页第一个a元素
$(‘tr:odd‘) 选择表格的奇数行
$(‘#myForm :input‘)选择表单中的input元素
$(‘div:visible‘) 选择...