首页 > 代码库 > jquery 点点滴滴小记

jquery 点点滴滴小记

字符截取显示var text = $(".content").text();var textNum = text.length;var textInt = text.slice(0,140);$(".content").each(function () {if (textNum >= 160) {$(this).html(textInt + "…" + "详细")$(".dis_btn").click(function () {$(".content").text(text);});return false;} else {$(".content").each(function () {$(this).text(text);})}}) div做链接$(".pane-list li").click(function(){    window.location=$(this).find("a").attr("href");return false;}); 简单的炸屏效果$(document).ready(function(){setTimeout("showBanner();",5000);});function showBanner(){$(".banner p:eq(0)").slideUp(1000,function(){$(".banner p:eq(1)").slideDown(1000);});} 单条滚动的新闻写法1function scroll_news(){$(function(){      $(‘#dvmq li‘).eq(0).fadeOut(‘slow‘,function(){     // alert($(this).clone().html()); //克隆:不用克隆的话,remove()就没了。            $(this).clone().appendTo($(this).parent()).fadeIn(‘slow‘);            $(this).remove();        });     });}setInterval(‘scroll_news()‘,1000); 单条滚动的新闻写法2function AutoScroll(obj){$(obj).find("ul:first").animate({marginTop:"-25px"},1000,function(){$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);});}$(document).ready(function(){setInterval(‘AutoScroll("#scrollDiv")‘,3000)}); 验证QQ号码var qq=/^[1-9]\d{4,8}$/;var user_qq =$("#user_qq").val()if(!qq.test(user_qq)){alert("请输入正确的QQ");return false;} 验证邮编var linkzipcode =$(".form input[name=‘linkzipcode‘]").val();var zipcode=/\d{6}/if(!zipcode.test(linkzipcode)){alert("请输入正确的邮编");return false;} 验证手机号码    var reg0=/^13\d{9}$/;    var reg1=/^153\d{8}$/;    var reg2=/^159\d{8}$/;    var reg3=/^158\d{8}$/;    var reg4=/^150\d{8}$/;var phone=reg0||reg1||reg2||reg3||reg4var linkphone =$(".form input[name=‘linkphone‘]").val();if(!phone.test(linkphone)){alert("请输入正确的手机号码");return false;} 验证中文var isChn = /^[\u4e00-\u9fa5]+$/ivar linkname =$(".form input[name=‘linkname‘]").val();if(!isChn.test(linkname)){alert("请输入真实的联系人名称");return false;} jquery实现div等高效果function SetSameHeight(obj1,obj2){     var h1 = $(obj1).outerHeight(); //获取对象1的高度     var h2 = $(obj2).outerHeight();  //获取对象2高度     var mh = Math.max( h1, h2); //比较一下     $(obj1).height(mh);     $(obj2).height(mh);}在页面用调用:jQuery(document).ready(function($) {     SetSameHeight(".left",".line");    SetSameHeight(".right_main",".line");//如果有3个div 就加这一行代码,再适应一次.}  使用jquery操作iframeiframe id="leftiframe"iframe id="mainiframeleftiframe中jQuery改变mainiframe的src代码: $("#mainframe",parent.document.body).attr("src","http://www.radys.cn") JQuery获取浏览器窗口的高度和宽度$(document).ready(function(){alert($(window).height()); //浏览器时下窗口可视区域高度alert($(document).height()); //浏览器时下窗口文档的高度alert($(document.body).height());//浏览器时下窗口文档body的高度alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度包括border padding marginalert($(window).width()); //浏览器时下窗口可视区域宽度alert($(document).width());//浏览器时下窗口文档对于象宽度alert($(document.body).width());//浏览器时下窗口文档body的高度alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度包括border padding margin1}) jQuery 离开页面时提示//绑定beforeunload事件$(window).bind(‘beforeunload‘,function(){    return ‘您输入的内容尚未保存,确定离开此页面吗?‘;});//解除绑定$(window).unbind(‘beforeunload‘); 图片不完全按比例自动缩小jQuery(document).ready(function(){$(window).load(function(){$(‘#content img‘).each(function(){var x = 200; //填入目标图片宽度var y = 140; //填入目标图片高度var w=$(this).width(), h=$(this).height();//获取图片宽度、高度if (w > x) { //图片宽度大于目标宽度时var w_original=w, h_original=h;h = h * (x / w); //根据目标宽度按比例算出高度w = x; //宽度等于预定宽度if (h < y) { //如果按比例缩小后的高度小于预定高度时w = w_original * (y / h_original); //按目标高度重新计算宽度h = y; //高度等于预定高度}}$(this).attr({width:w,height:h});});});}); jQuery得到用户IP$.getJSON("http://jsonip.appspot.com?callback=?", function (data) {    alert("Your ip: " + data.ip);}); jQuery查看图片的宽度和高度var theImage = new Image();theImage.src = $(‘#imageid‘).attr("src");alert("Width: " + theImage.width);alert("Height: " + theImage.height); jQuery控制IFRAME 父页面控制子窗口DOM方法:父窗口操作 IFRAME:window.frames["iframeSon"].documentIFRAME操作父窗口: window.parent.documentjquery方法:在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["iframeSon"].document).find(":text");在IFRAME中操作 选中父窗口中的所有输入框:$(window.parent.document).find(":text");iframe框架的HTML:iframe src="test.html" id="iframeSon" width="700″ height="300″ frameborder="0″ scrolling="auto"细心的朋友一下就能理解,原理其实很简单,就是用到了$(DOM对象)转换成 jquery对象。用jQuery在IFRAME里取得父窗口的某个元素的值只好用DOM方法与jquery方法结合的方式实现了1.在父窗口中操作 选中IFRAME中的所有单选钮$(window.frames["iframe1"].document).find("input[@type=‘radio‘]").attr("checked","true");2.在IFRAME中操作 选中父窗口中的所有单选钮$(window.parent.document).find("input[@type=‘radio‘]").attr("checked","true");iframe框架的:iframe src=http://www.mamicode.com/"test.html" id="iframe1″ width="700″ height="300″ frameborder="0″ scrolling="auto"IE7中测试通过jquery判断是否滚动到最后一个var $next =  $current.next().length ? $current.next() : $("#slideshow div:first"); jquery仿淘宝搜索滚动固定$(function(){var s= $(‘#nav‘).position().top;var t=80;$(window).scroll(function (){ if($(window).scrollTop()>215){$("#nav").animate({top:$(window).scrollTop()-t+"px"},{queue:false,duration:400});}else{$("#nav").animate({top:$(window).scrollTop()+s+"px"},{queue:false,duration:400});}});//nav必须用position:absolute;nav的父容器必须position:relative;}) jquery修复IE position:fixedfunction fixedPosition (element,top,right){$(element).css("display","block")if(!$.browser.msie){$(element).css("position","fixed")    }else{$(element).css("position","absolute")$("body").css({"height":"100%","overflow":"auto","margin":"0″});$("html").css({"overflow-x":"auto","overflow-y":"hidden"});}$(element).css({"top":top,"right":right})};$(function(){fixedPosition(test,150 ,40); })方法2#fixed {position: fixed;_position: absolute;bottom: 0;right:0.75em;top:20%;} (function(){var overlay = document.getElementById(‘fixed‘),t;window.onscroll = function() {t && clearTimeout(t);t = setTimeout(function() {var t=document.documentElement.scrollTop; t=t+156;overlay.style.top=t+"px";},0);};})();  jquery each 遍历常用方法下面提一下jQuery的each方法的几种常用的用法Js代码 var arr = [ "one", "two", "three", "four"];      $.each(arr, function(){         alert(this);      });     //上面这个each输出的结果分别为:one,two,three,four        var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]     $.each(arr1, function(i, item){        alert(item[0]);     });     //其实arr1为一个二维数组,item相当于取每一个一维数组,   //item[0]相对于取每一个一维数组里的第一个值   //所以上面这个each输出分别为:1   4   7        var obj = { one:1, two:2, three:3, four:4};     $.each(obj, function(key, val) {         alert(obj[key]);           });   //这个each就有更厉害了,能循环每一个属性     //输出结果为:1   2  3  4  还可以省略function的参数,这个时候this可以得到遍历的当前元素的值var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1];       $.each(arr, function() { alert(this); }); js 判断浏览器是否启用cookie$(document).ready(function () {    document.cookie = "cookieid=1; expires=60″;    var result = document.cookie.indexOf("cookieid=") != -1;    if (!result) {        alert("浏览器未启用cookie");    }}); jQuery检测键盘按键$(document).ready(function () {    $(this).keypress(function (e) {        switch (e.which) {            case 13:                alert("您按下了回车键");                break;            //more detect        }    });}); jQuery 滚动到顶部/底部//滚动到顶部$("html, body").animate({ scrollTop: "0px" }, 1000);//滚动到底部//$("#container"):要滚动的元素$("html, body").animate({    scrollTop: $("#container").height()}, 1000); jQuery 判断元素是否存在怎么使用 jQuery 判断元素是否存在,相信不少 jQuery 学习者都会问这个问题,方法很简单,如下:if ($(" #elementid").length) {    //元素存在} jQuery 禁用鼠标右键$(document).ready(function() {    $(document).bind("contextmenu", function() {        return false;    });}); 向由setTimeout()调用的方法中传参$(document).ready(function() {    timeout = setTimeout(function() {        showMess("succeed")    }, 2000);});function showMess(m) {    alert(m);} jQuery 倒计时$(document).ready(function () {    var count = 10;    countdown = setInterval(function () {        $("p.countdown").html(count + " 秒后将跳转!");        if (count == 0) {            clearInterval(countdown)            window.location = ‘http://google.com‘;        }        count–;    }, 1000);}); jQuery 判断浏览器类型及版本号jQuery 判断浏览器类型及版本号非常简单,可以直接使用 $.browser 方法进行判断。但我自己试验时发现在判断 Chrome 浏览器时,返回的是 Safari,在网上找了下,于是有了下边的代码:var browserName = navigator.userAgent.toLowerCase();mybrowser = {    version: (browserName.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [0, ‘0‘])[1],    safari: /webkit/i.test(browserName) && !this.chrome,    opera: /opera/i.test(browserName),    firefox: /firefox/i.test(browserName),    msie: /msie/i.test(browserName) && !/opera/.test(browserName),    mozilla: /mozilla/i.test(browserName) && !/(compatible|webkit)/.test(browserName) && !this.chrome,    chrome: /chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)}$(document).ready(function () {    if (mybrowser.msie) {        alert("浏览器为:Internet Explorer 版本号为:" + $.browser.version);    }    else if (mybrowser.mozilla) {        alert("浏览器为:Firefox 版本号为:" + $.browser.version);    }    else if (mybrowser.opera) {        alert("浏览器为:Opera 版本号为:" + $.browser.version);    }    else if (mybrowser.safari) {        alert("浏览器为:Safari 版本号为:" + $.browser.version);    }    else if (mybrowser.chrome) {        alert("浏览器为:Chrome 版本号为:" + mybrowser.version);    }    else {        alert("神马");    }}); jQuery 元素居中显示//写成了插件形式(function ($) {    jQuery.fn.center = function () {        this.css(‘position‘, ‘absolute‘);        this.css(‘top‘, ($(window).height() – this.height()) /2 +$(window).scrollTop() + ‘px‘);        this.css(‘left‘, ($(window).width() – this.width()) / 2 + $(window).scrollLeft() + ‘px‘);        return this;    }})(jQuery);$(document).ready(function () {    //调用    $("#somediv").center();}); jQuery 判断图像是否被完全加载进来$("#demoImg").attr("src", "demo.jpg").load(function() {      alert("图片加载完成");  });  jQuery仿微博字数统计功能jq(‘#content‘).bind(‘focus keyup input paste‘,function(){  //采用几个事件来触发(已增加鼠标粘贴事件)   jq(‘#num‘).text(140 – jq(this).attr("value").length)  //获取评论框字符长度并添加到ID="num"元素上  }); jQuery 实现左右两列一样高$(function () {    var left = $(‘#left‘).height();    var right = $(‘#right‘).height();    left > right ? $(‘#right‘).height(left) : $(‘#left‘).height(right);}); jQuery 操作 select 小结//移除value为"2″的option$("#id option[value=http://www.mamicode.com/‘2‘]").remove();//获取select option选中值$("#id").val();//设置value为"2″的option为当前选中$("#id").val("2″);//获取select option选中text$("#id :selected").text() Javascript 实现字符串补"0″join() 方法用于把数组中的所有元素放入一个字符串,元素是通过指定的分隔符进行分隔的,缺省时为逗号(",")。function padZero(str, length) {    var strLen = str.length;    return length > strLen ? new Array(length – strLen + 1).join("0″) + str : str;} jQuery 双击时不选中文本//清理选中var clearSelection = function () {    if (document.selection && document.selection.empty) {        document.selection.empty();    }    else if (window.getSelection) {        var sel = window.getSelection();        sel.removeAllRanges();    }}$("#content").dblclick(function(e) {    clearSelection();}); jQuery 选中文本框值和取消选中当光标移动到文本框上边时,将文本框的值选中,离开时取消选中,这样方便了用户修改文本框的值,提高了用户体验。或许你也有兴趣看看 jQuery设置和移除文本框默认值,当然在 HTML5 中我们可直接使用 "placeholder" 属性。$("input[type=‘text‘]").hover(function () {    $(this).select();}, function () {    $(this).val($(this).val());});