<![CDATA[Wxxslt 's blog]]> http://blog.wenxueba.net/index.php en-US http://blog.wenxueba.net/post/174/ <![CDATA[top、posTop、scrollTop、scrollHeight、offsetHeight 的区别]]> wxxslt <wxxslt@qq.com> Tue, 06 Oct 2009 09:12:49 +0000 http://blog.wenxueba.net/post/174/
posTop的数值其实和top是一样的，但区别在于top固定了元素单位为px，而posTop只是一个数值，因此一般使用posTop来进行运算。
[html]<div style="background-color:red; width:100px; height:100px;">

<p id="test" style="background-color:silver; ">测试posTop</p>

</div>

<script>
test.style.posTop = 15+8;
alert("top="+test.style.top);
alert("posTop="+test.style.posTop);
</script>[/html]

2、scrollTop

[html]<div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;">
<p style="background-color:red;">
wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt
</p>
</div>

<script>
container.scrollTop = 12;
</script>[/html]

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

3、scrollHeight 与 offsetHeight

[html]<div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;">
<p style="background-color:red; height:250px; ">
wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt wxxslt
</p>
</div>

<script>
alert(container.offsetHeight);
alert(container.scrollHeight);
</script>[/html]
Tags - ]]> http://blog.wenxueba.net/post/172/ <![CDATA[用 js 模拟 css 属性选择器]]> wxxslt <wxxslt@qq.com> Sun, 04 Oct 2009 12:16:02 +0000 http://blog.wenxueba.net/post/172/

   a[rel~="friend"]{
}

    a[rel="nofollow"]{
}

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

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


为了兼容 IE6 ：


window.onload = function(){
        var list = document.getElementById('list');
        var listA = list.getElementsByTagName('a');
        for(var i = 0; i < listA.length; i++){
                var href = listA[i].href;
                if(href.indexOf('pdf') != -1){
                        listA[i].className = 'haspdf';
                }
        }
}

Tags - ]]> http://blog.wenxueba.net/post/171/ <![CDATA[用jQuery去除链接虚线]]> wxxslt <wxxslt@qq.com> Sun, 04 Oct 2009 12:08:32 +0000 http://blog.wenxueba.net/post/171/
$(function(){
        $('a,input[type="button"],input[type="submit"]').bind('focus',function(){
                if(this.blur){ //如果支持 this.blur
                        this.blur();
                };
        });
});

Tags - , ]]> http://blog.wenxueba.net/jquery-table-filter/ <![CDATA[jQuery表格筛选]]> wxxslt <wxxslt@qq.com> Sun, 04 Oct 2009 11:43:34 +0000 http://blog.wenxueba.net/jquery-table-filter/
[html]<!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">
<!--
* {
  margin:0;
  padding:0;
}
body {
  font:13px Verdana, Arial, Helvetica, sans-serif;
  padding:100px;
}
caption {
  padding:5px;
  font:30px Georgia, "Times New Roman", Times, serif;
  color:#39c;
}
table {
  border-collapse:collapse;
}
th, td {
  border:1px solid #ccc;
  padding:4px;
  font:13px Verdana, Arial, Helvetica, sans-serif;
}
th {
  background:url(images/th-bg.gif) repeat-x;
}
col.name {
  width:250px;
}
.even {
  background:#E8F1FF;
}
.over, .check {
  color:#FFFFFF;
  cursor:pointer;
  background-color:#3366FF;
}
tbody tr:nth-child(odd) {
}
.search-box {
  padding-top:20px;
}
.search {
  border:1px solid #ccc;
  padding:2px;
}
.highlight {
  border:1px solid #fc0;
  background:#ff6;
}
-->
</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>
[/html]
Tags - , , ]]> http://blog.wenxueba.net/jQuery-three-tiers-menu/ <![CDATA[jQuery三级导航菜单]]> wxxslt <wxxslt@qq.com> Mon, 27 Jul 2009 08:15:35 +0000 http://blog.wenxueba.net/jQuery-three-tiers-menu/ <!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">
<!--
  $(document).ready(function(){
    $('#nav li').hover(function(){
      $(this).children('ul').css({'display':'block'});
      $(this).focus().css({'background':'url(imgs/nav-bg.gif) repeat-x 0 -52px'});
    },function(){
      $(this).children('ul').css({'display':'none'});
      $(this).focus().css({'background':'none'});
    });  
    $('input[type=text]').focus(function(){
      $(this).blur();
    });
  });
-->
</script>
<style type="text/css">
<!--
* {
  padding:0;
  margin:0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#000000;
}
body {
  font:12px Georgia, "Times New Roman", Times, serif;
}
#nav {
  height:26px;
  background:url(imgs/nav-bg.gif) repeat-x;
  margin-top:100px;
  margin-bottom:100px;
  padding-left:20px;
}
#nav li {
  float:left;
  position:relative;
}
#nav li a {
  display:block;
  padding:0 20px;
  float:left;
  height:26px;
  line-height:26px;
}
#nav li a:hover {
  background:url(imgs/nav-bg.gif) repeat-x left -26px;
}
#nav li a.arrow {
  background:url(imgs/arrow.gif) no-repeat right center;
}
#nav li a.arrow:hover {
  background:url(imgs/arrow.gif) no-repeat 190px center;
}
#nav li ul {
  position:absolute;
  width:200px;
  background:url(imgs/bg.png);
  border:1px solid black;
  display:none;
}
#nav li ul a {
  width:160px;
}
.secondary-menu {
  left:0;
  top:26px;
}
.third-menu {
  left:200px;
  top:-1px;
}
-->
</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>

[/html]
Tags - , , ]]> http://blog.wenxueba.net/post/164/ <![CDATA[可编辑表格（JQ实现）]]> wxxslt <wxxslt@qq.com> Sat, 18 Jul 2009 12:47:27 +0000 http://blog.wenxueba.net/post/164/ <!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">
<!--
table {
  border-collapse:collapse;
  border:1px #0033FF solid;
  position:absolute;
  left:44%;
  top:44%;
}
td {
  border:1px #0000FF solid;
}
-->
</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>

[/html]
Tags - ]]> http://blog.wenxueba.net/jquery-dom/ <![CDATA[jQuery对象与DOM对象相互转换]]> wxxslt <wxxslt@qq.com> Fri, 13 Mar 2009 04:28:37 +0000 http://blog.wenxueba.net/jquery-dom/ 普通的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 - ]]> http://blog.wenxueba.net/post/151/ <![CDATA[仿VeryCD上的动态标题]]> wxxslt <wxxslt@qq.com> Sun, 22 Feb 2009 02:28:52 +0000 http://blog.wenxueba.net/post/151/

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


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


<script type="text/javascript" src="/title.js" charset="gb2312"></script>



Tags - , ]]> http://blog.wenxueba.net/post/142/ <![CDATA[JS容错代码]]> wxxslt <wxxslt@qq.com> Sun, 18 Jan 2009 04:40:43 +0000 http://blog.wenxueba.net/post/142/       如果你在自己的网页中插入JS代码浏览时弹出错误，又不知那里错误，不想修改的话，可以加下面这个容错代码，这样就不会弹出了。

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide
function killErrors() {
return true;
}
window.onerror = killErrors;
// -->
</SCRIPT>


Tags - ]]> http://blog.wenxueba.net/post/140/ <![CDATA[JS贪食蛇游戏]]> wxxslt <wxxslt@qq.com> Mon, 12 Jan 2009 05:18:43 +0000 http://blog.wenxueba.net/post/140/
http://blog.wenxueba.net/snake.html

绿色方块表示食物，红色表示蛇。
注意：不能走相反方向。
Tags - , , ]]>