「基础篇」20个有用的 JQuery 代码片段

私信我或关注微信号：猿来如此呀，回复：学习，获取免费学习资源包。

滚动到页面顶部

$(document).ready(function() {
 $("a.scrolltop").click(function() {
 $("html, body").animate({ scrollTop: 0 }, "slow");
 return false;
 });
});

重置/清除表单

$(document).ready(function() {
 $('#formID')[0].reset();
});

防止用户二次提交表单

$(document).ready(function() {
 var $myForm = $("#formID");
 $myForm.submit(function() {
 $myForm.submit(function() {
 return false;
 });
 });
});

表格隔行变色

$(document).ready(function() {
 $("table tr:even").addClass('zebra');
});

在新标签/窗口打开链接

$(document).ready(function(){
 $( 'a[href^="http://"], a[href^="https://"]' ).attr( 'target', '_blank' ); //均在所有链接在新窗口中打开
 $( 'a.external' ).attr( 'target', '_blank' ); });

检查值是否存在于数组中

$(document).ready(function() {
 var arr = [ 4, "Pete", 8, "John" ];
 jQuery.inArray("value", arr);
 if( jQuery.inArray("4", arr) != -1 ) {
 return true
 };
});

获取客户端IP地址

$(document).ready(function() {
 $.getJSON("http://jsonip.com/?callback=?", function(data) {
 console.log(data);
 alert(data.ip);
 });
});

检查元素是否隐藏

$(document).ready(function() {
 $(element).is(":visible");
});

获取窗口或文档大小

$(window).height(); // 返回浏览器可视区高度
$(document).height(); // 返回HTML文档高度
$(window).width(); 
$(document).width(); 
//获取屏幕大小需要使用内置的 screen 对象
screen.height;
screen.width;

检查是否存在某个HTML元素

$(document).ready(function() {
 if ($(element).length > 0) {
 alert("exists");
 } else {
 alert("doesn't exist");
 }
});

计算表格的行数

$(document).ready(function () {
 var rowCount = $('#myTable tr').length;
});

阻止右键菜单

$(document).ready(function() {
 $(this).bind("contextmenu", function(e) {
 e.preventDefault();
 });
});

获取表单数据

$(document).ready(function() {
 $('form').serialize() // returns a string
 $('form').serializeArray() // returns an array
});

表单整体提交

$(document).ready(function() {
 $("form").submit(function(e) {
 e.preventDefault();
 var formData = new FormData(this);
 $.post($(this).attr("action"), formData, function(data) {
 alert(data);
 });
 });
});

在 iFrame 中访问父级窗口的元素

$(document).ready(function () {
 $('element', window.parent.document).html();
});

获得字符串的长度

$(document).ready(function() {
 $('#selector').val().length;
 $('.selector').val().length;
});

字符串的大小写

$(document).ready(function () {
 $('#selector').val().toLowerCase();
 $('#selector').val().toUpperCase();
});

判断是否存在某个类名

$(document).ready(function() {
 $("#selector").hasClass(className);
 $(".selector").hasClass(className);
});

图片上传到服务器之前预览图片

function readURL(input) {
 if (input.files && input.files[0]) {
 var reader = new FileReader();
 reader.onload = function(e) {
 $('#preview').attr('src', e.target.result);
 }
 reader.readAsDataURL(input.files[0]);
 }
}
$(document).ready(function () {
 $("#upload").change(function() {
 readURL(this);
 });
});
//html
<form id="form">
 <input type='file' id="upload" />
 <img id="preview" src="#" />
</form>

来源网络侵权联系删除

私信我或关注微信号：猿来如此呀，回复：学习，获取免费学习资源包。