JS - Wxxslt 's blog - 你还差得远呢

Oct 6

top、posTop、scrollTop、scrollHeight、offsetHeight 的区别

wxxslt , 17:12 , JS , Comments(0) , Trackbacks(0) , Reads(371) , Via Original

1、posTop

posTop的数值其实和top是一样的，但区别在于top固定了元素单位为px，而posTop只是一个数值，因此一般使用posTop来进行运算。

提示：您可以先修改部分代码再运行

2、scrollTop

提示：您可以先修改部分代码再运行

假如没有设置container.scrollTop属性的话，默认情况下滑块位置在顶端。而设置了scrollTop值为12后，滑块的位置改变了，默认显示是卷过了12个像素的文本。如果设置overflow为hidden，则将会无法显示顶部12个像素的文本。

3、scrollHeight 与 offsetHeight

提示：您可以先修改部分代码再运行

Tags: javascript

Oct 4

用 js 模拟 css 属性选择器

wxxslt , 20:16 , JS , Comments(0) , Trackbacks(0) , Reads(462) , Via Original

传统做法：

   a[rel~="friend"]{
}

    a[rel="nofollow"]{
}

    a[href^="http:"]{
}

    a[href$=".pdf"]{
}

为了兼容 IE6 ：

Tags: javascript

Oct 4

用jQuery去除链接虚线

wxxslt , 20:08 , JS , Comments(0) , Trackbacks(0) , Reads(497) , Via Original

$(function(){
        $('a,input[type="button"],input[type="submit"]').bind('focus',function(){
                if(this.blur){ //如果支持 this.blur
                        this.blur();
                };
        });
});

Tags: jquery , javascript

Oct 4

jQuery表格筛选

wxxslt , 19:43 , JS , Comments(0) , Trackbacks(0) , Reads(546) , Via Original

运行后请再次刷新才有效果！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格筛选</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('tbody > tr:odd').addClass('even');
    $('tbody > tr:has(:checked)').addClass('check');
    $('tbody > tr').hover(function(){
      $(this).addClass('over');
    },function(){
      $(this).removeClass('over');
    }).click(function(){
      if($(this).hasClass('check'))
        $(this).removeClass('check').find(':checkbox').attr('checked',false);
      else
        $(this).addClass('check').find(':checkbox').attr('checked',true);
    });
    $('.search').focus(function(){
      $(this).addClass('highlight');
    }).blur(function(){
      $(this).removeClass('highlight');
    });
    //$('tbody tr td:contains("漳州市")').css({color:'red'});
    $('.search').keyup(function(event){
      var myEvent=event||window.event;
      if(myEvent.keyCode==13){
        $('tbody tr').hide().filter(':contains('+$(this).val()+')').show();
      }
    });
  });
</script>
<style type="text/css">

</style>
</head>
<body>
<table summary="DataTable">
  <caption id="title">
  数据表格
  </caption>
  <colgroup>
  <col class="id" />
  <col class="name" />
  <col class="tall" />
  <col class="from" />
  </colgroup>
  <thead>
    <tr>
      <th id="check"></th>
      <th id="id">I&nbsp;D</th>
      <th abbr="Name" id="name">名&nbsp;字</th>
      <th id="tall">身&nbsp;高</th>
      <th id="from">籍&nbsp;贯</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="5">这是一个数据表！这是底部说明哦！</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td><input type="checkbox" name="choice" value="" /></td>
      <td headers="id">1</td>
      <td headers="name">我叫小明</td>
      <td headers="tall">我的身高是1.67米</td>
      <td headers="from">我来自中国福建省漳州市区</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="choice" value="" /></td>
      <td>2</td>
      <td>我叫小黄</td>
      <td>我的身高是1.70米</td>
      <td>我来自中国福建省厦门市区</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="choice" value="" checked="checked"/></td>
      <td>3</td>
      <td>我叫小张</td>
      <td>我的身高是1.73米</td>
      <td>我来自中国福建省泉州市区</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="choice" value="" /></td>
      <td>4</td>
      <td>我叫小刘</td>
      <td>我的身高是1.64米</td>
      <td>我来自中国福建省漳州市区</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="choice" value="" /></td>
      <td>5</td>
      <td>我叫小王</td>
      <td>我的身高是1.80米</td>
      <td>我来自中国福建省福州市区</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="choice" value="" /></td>
      <td>6</td>
      <td>我叫小狗</td>
      <td>我的身高是1.50米</td>
      <td>我来自美国亚历山大区</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="choice" value="" /></td>
      <td>7</td>
      <td>我叫小留</td>
      <td>我的身高是1.80米</td>
      <td>我来自火星铭哥省福州市区宽马路</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="choice" value="" /></td>
      <td>8</td>
      <td>我叫小沈阳</td>
      <td>我的身高是1.40米</td>
      <td>我来自中国福建省沈阳区，我是一只狗狗</td>
    </tr>
  </tbody>
</table>
<p class="search-box">
  <input type="text" name="search" class="search" id="search" />
</p>
</body>
</html>

提示：您可以先修改部分代码再运行

Tags: jquery , javascript , 表格

Jul 27

jQuery三级导航菜单

wxxslt , 16:15 , JS , Comments(0) , Trackbacks(0) , Reads(1130) , Via Original

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三级导航</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

</script>
<style type="text/css">

</style>
</head>
<body>
<ul id="nav">
  <li><a href="#">金庸</a>
    <ul class="secondary-menu">
      <li><a href="#" class="arrow">小说</a>
        <ul class="third-menu">
          <li><a href="#">《笑傲江湖》</a></li>
          <li><a href="#">《神雕侠侣》</a></li>
          <li><a href="#">《鹿鼎记》</a></li>
          <li><a href="#">《雪山飞狐》</a></li>
          <li><a href="#">《射雕英雄传》</a></li>
        </ul>
      </li>
      <li><a href="#">简介</a></li>
    </ul>
  </li>
  <li><a href="#">古龙</a>
    <ul class="secondary-menu">
      <li><a href="#" class="arrow">小说</a>
        <ul class="third-menu">
          <li><a href="#">《边城浪子》</a></li>
          <li><a href="#">《浣花洗剑录》</a></li>
          <li><a href="#">《剑气严霜》</a></li>
          <li><a href="#">《三少爷的剑》</a></li>
          <li><a href="#">《大旗英雄传》</a></li>
        </ul>
      </li>
      <li><a href="#">简介</a></li>
    </ul>
  </li>
  <li><a href="#">张爱玲</a>
    <ul class="secondary-menu">
      <li><a href="#" class="arrow">小说</a>
        <ul class="third-menu">
          <li><a href="#">《倾城之恋》</a></li>
          <li><a href="#">《心经》</a></li>
          <li><a href="#">《创世纪》</a></li>
          <li><a href="#">《半生缘》</a></li>
          <li><a href="#">《金锁记》</a></li>
        </ul>
      </li>
      <li><a href="#">简介</a></li>
    </ul>
  </li>
  <li><a href="#">余秋雨</a>
    <ul class="secondary-menu">
      <li><a href="#" class="arrow">散文</a>
        <ul class="third-menu">
          <li><a href="#">《借我一生》</a></li>
          <li><a href="#">《霜冷长河》</a></li>
          <li><a href="#">《千年一叹》</a></li>
          <li><a href="#">《行者无疆》</a></li>
          <li><a href="#">《文化苦旅》</a></li>
        </ul>
      </li>
      <li><a href="#">简介</a></li>
    </ul>
  </li>
</ul>
<input name="name" type="text" />
</body>
</html>

提示：您可以先修改部分代码再运行

Tags: jquery , 三级导航 , 菜单

Jul 18

可编辑表格（JQ实现）

wxxslt , 20:47 , JS , Comments(0) , Trackbacks(0) , Reads(693) , Via Original

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可编辑的表格</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script language="javascript">
  $(document).ready(function(){
    //先找到所有td
    var tds=$('td');
    tds.click(clickfn);
    });
      
  function clickfn(){
    var td=$(this);
    var text=td.text();
    td.html('');
    var input=$('<input>');
    input.attr({
    'value':text
    })
    //按下并且弹起
    input.keyup(function(event){
      var myEvent=event||window.event;
      var kcode=myEvent.keyCode;
        if(kcode==13){
          var inputNode=$(this);
          var inputText=inputNode.val();
          var tdNode=input.parent();
          tdNode.html(inputText);
          tdNode.click(clickfn);
          
        }
    });
    td.append(input);
    var inputDom=input.get(0);  //JQ对象转化为DOM对象
    inputDom.select();
    td.unbind('click');
  }

</script>
<style type="text/css">

</style>
</head>
<body>
<table>
  <tbody>
    <tr>
      <td>聂风</td>
      <td>步惊云</td>
      <td>绝无神</td>
    </tr>
    <tr>
      <td>聂风</td>
      <td>步惊云</td>
      <td>绝无神</td>
    </tr>
    <tr>
      <td>聂风</td>
      <td>步惊云</td>
      <td>绝无神</td>
    </tr>
  </tbody>
</table>
</body>
</html>

提示：您可以先修改部分代码再运行

Tags: 可编辑表格

Mar 13

jQuery对象与DOM对象相互转换

wxxslt , 12:28 , JS , Comments(1) , Trackbacks(0) , Reads(1534) , Via Original

1、DOM对象转jQuery对象
普通的Dom对象一般可以通过$()转换成jQuery对象。

如：$(document.getElementById("msg"))
返回的就是jQuery对象，可以使用jQuery的方法。

2、jQuery对象转DOM对象
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项，一般可通过索引取出。
如： $("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]

这些都是Dom对象，可以使用Dom中的方法，但不能再使用jQuery的方法。

以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

Tags: jquery

Feb 22

仿VeryCD上的动态标题

wxxslt , 10:28 , JS , Comments(0) , Trackbacks(0) , Reads(468) , Via Original

js文件代码：

titleTextList = new Array('全国最大的文学交流平台','天下文学迷的网络家园','文学,文学论坛,范文,电影下载');
titleTextID = Math.floor(Math.random()*titleTextList.length);
document.title = '文学吧 - '+titleTextList[titleTextID];

然后在中插入js引用代码：

Tags: 动态标题 , verycd

Wxxslt 's blog

top、posTop、scrollTop、scrollHeight、offsetHeight 的区别

用 js 模拟 css 属性选择器

用jQuery去除链接虚线

jQuery表格筛选

jQuery三级导航菜单

可编辑表格（JQ实现）

jQuery对象与DOM对象相互转换

仿VeryCD上的动态标题

Categories

Calendar

Statistics

Latest Entries

Latest Comments

Links

Archive

Misc

流量统计

< 2010 > < 9 >
Su	Mo	Tu	We	Th	Fr	Sa
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30