1、js实现placeholder效果
Html代码:
- <form name="testForm" action="" method="">
- <input type="text" name="hotGoods" class="text1">
- </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]('hover');
- });
复制代码
注:直接使用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>
- <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();
- });
复制代码