常用的前端开发 jQuery代码段

前端开发苹果和安卓色差|前端开发 如何单元测试|0基础如何学好前端开发
1、js实现placeholder效果
html代码:<form name=”testForm” action=”” method=””>
<input type=”text” name=”hotGoods” class=”text1″ placeholder=”请输入您要搜索的内容”>
</form>
js代码:
<script type=”text/javascript”>
$(document).ready(function() {
$(“input.text1”).val(‘请输入您要搜索的内容’).css(‘color’,’#ccc’);
textFill($(‘input.text1’));
});
function textFill(input){
var originalvalue = input.val(); //请输入您要搜索的内容
// console.log(originalvalue);
input.focus( function(){
if( $.trim(input.val()) == originalvalue ){
input.css(‘color’, ‘#333’);
input.val(”);
}
});
input.blur( function(){
if( $.trim(input.val()) == ” ){
input.css(‘color’, ‘#ccc’);
input.val(originalvalue);
}
});
}
</script>
2、预加载图片–此代码主要用在页面图片较多的情况下,阻止页面一次性加载所有图片
代码如下:<script type=”text/javascript”>
$(document).ready(function() {
jquery.preloadImages = function(){
// console.log(arguments); //[“images/1.jpg”, “images/2.jpg”, “images/3.jpg”, “images/4.jpg”]
// console.log(arguments.length); //4
for(var i = 0; i<arguments.length; i++){
console.log($(‘<img>’).attr(‘src’, arguments[i]));
$(‘.img_box’).append($(‘<img>’).attr(‘src’, arguments[i]));
}
}
// 使用
$.preloadImages(“images/1.jpg”,”images/2.jpg”,”images/3.jpg”,”images/4.jpg”);
});
</script>
3、页面样式切换
html代码:<ul class=”styleSwitch”>
<li><a href=”#” rel=”style1.css”>样式一</a></li>
<li><a href=”#” rel=”style2.css”>样式二</a></li>
<li><a href=”#” rel=”style3.css”>样式三</a></li>
</ul>
js代码:<script type=”text/javascript”>
$(function(){
$(‘.styleSwitch li a’).click(function(){
$(‘link[rel=”stylesheet”]’).attr(‘href’,’css/’+$(this).attr(‘rel’));
})
})
4、返回顶部按钮
html代码:<a href=”javascript:void;” class=”top”>回顶部</a>
js代码:$(‘a.top’).click(function () {
$(document.body).animate({scrollTop: 0}, 800);
return false;
});
5、获得鼠标当前的X、Y值
代码如下:<script type=”text/javascript”>
$(function(){
$(document).mousemove(function(e){
$(‘.xy’).html(‘当前鼠标坐标:(‘ + e.pageX + ‘,’ +e.pageY +’)’);
});
})
</script>
6、自动修复破损图片
如果在你的网站上发现了破碎的图片链接,你可以用一个不易被替换的图像来代替它们
代码如下:$(‘img’).on(‘error’, function () {
$(this).prop(‘src’, ‘img/broken.png’);
});
即使你的网站没有破碎的图像链接,添加这段代码也没有任何害处。
7、鼠标悬停(hover)切换class属性
代码如下:$(‘.btn’).hover(function () {
$(this).[color=DarkOrange]toggleClass/color;
});
注:直接使用CSS实现该效果可能是更好的解决方案,但你仍然有必要知道该方法
8、禁用input字段
代码如下:有时你可能需要禁用表单的 submit 按钮或者某个 input 字段,直到用户执行了某些操作(例如,检查“已阅读条款”复选框)。可以添加 disabled 属性,直到你想启用它时:
$(‘input[type=”submit”]’).prop(‘disabled’, true);
你要做的就是执行 removeAttr 方法,并把要移除的属性作为参数传入:
$(‘input[type=”submit”]’).removeAttr(‘disabled’);
9、验证元素是否为空
代码如下:$(document).ready(function() {
if ($(‘#id’).html()) {
// do something
}
});
10、使元素居于屏幕中间位置
html代码:<div class=”center” style=”width:200px;height:200px;background:#ccc;”>我现在在屏幕的中间位置哦!</div>
js代码:<script type=”text/javascript”>
$(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;
}
$(‘.center’).center();
})
</script>
注:此代码可用于页面弹出框的位置控制
11、引用谷歌主机上的jquery类库(也可以用百度CDN)
代码如下:
方法一:<script src=”http://www.google.com/jsapi”></script&gt;
<script type=text/javascript>
google.load(“jquery”, “1.2.6”);
google.setOnLoadCallback(function() {
// do something
});
</script>
<script type=text/javascript src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js”></script>
方法二:(更快更有效)
<script type=text/javascript src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js”></script>
12、与其他Javascript类库冲突解决方案
代码如下:$(document).ready(function() {
var $jq = jQuery.noConflict();
$jq(‘#id’).show();
});
相关代码文件链接:http://pan.baidu.com/s/1dDHNxVN
前端开发中如何解决兼容性问题|安卓前端开发尺寸|安卓开发和前端
» 本文来自:前端开发者 » 《常用的前端开发 jQuery代码段》
» 本文链接地址:https://www.rokub.com/4832.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!