1、下拉菜单的制作方法
$('#nav .nav >li').mouseover(function(){ $(this).children('ul').show(); }).mouseout(function(){ $(this).children('ul').hide(); })
2、输入框的文字提示
var tmp; $('.user').focus(function(){ tmp = $(this).val(); if($(this).val() == '用户名') $(this).val(''); }).blur(function(){ if($(this).val() == '') $(this).val(tmp); })
说明:1、如果不输入还是会显示为提示字符
如果输入了就不会再消失
3、一个技巧,显示当前的菜单状态
<script type="text/javascript"> var key = "home"; //使用<php? echo $key; > $("#"+key).addClass('active'); </script>
4、文本框加减,如果使用了html5 的number直接就可以了
$(function(){ //获得文本框对象 var t = $("#text_box"); //数量增加操作 $("#add").click(function(){ t.val(parseInt(t.val())+1) if (parseInt(t.val())!=1){ $('#text_box').attr('disabled',false); } }) //数量减少操作 $("#min").click(function(){ t.val(parseInt(t.val())-1); if (parseInt(t.val()) <=0){ //节点操作 t.val(1); } }) })
5、unload请求一次数据
2中方法
1、设置ajax为同步
2、使用open window会浏览器拦截,
var i = new Image(1,1); i.src='url';
上面这种方法很巧妙
智能浮动的jquery 插件
$.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(function() { var scrolls = $(this).scrollTop(); if (scrolls > top) { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 0 }); } else { element.css({ top: scrolls }); } }else { element.css({ position: "absolute", top: top }); } }); }; return $(this).each(function() { position($(this)); }); }; $(".sp-list").smartFloat();
获取radio值的方法
var ck = $("input[name='ck']:checked").val()
多文件文件上传的插件
官方demo
http://blueimp.github.io/jQuery-File-Upload/
5、自适应内容宽度
(function ($) { var loadImg = function (url, fn) { var img = new Image(); img.src = url; if (img.complete) { fn.call(img); } else { img.onload = function () { fn.call(img); img.onload = null; }; }; }; $.fn.imgAutoSize = function (padding) { var maxWidth = this.innerWidth() - (padding || 0); return this.find('img').each(function (i, img) { loadImg(this.src, function () { if (this.width > maxWidth) { var height = maxWidth / this.width * this.height, width = maxWidth; img.width = width; img.maxHeight = height; }; }); }); }; })(jQuery);
6、一个相当简单的语音搜索技巧
<input type="text" class="text" name="value_2" id="value_2" x-webkit-speech>
就可以实现语音搜索,当然只是web-kit浏览器