找回密码
当前位置：前端开发者 > jQuery > 正文

常用的前端开发 jQuery代码段

2018-07-25 分类：jQuery 阅读(778) 评论(0)
前端开发苹果和安卓色差|前端开发 如何单元测试|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
前端开发中如何解决兼容性问题|安卓前端开发尺寸|安卓开发和前端
赞(0)
前端开发者 » 常用的前端开发 jQuery代码段
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论