精华集JS和WEB(抄来的)

最新推荐文章于 2024-10-10 10:50:43 发布

weixin_34313182

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量91

点赞数

文章标签： javascript ruby 数据库 ViewUI

原文链接：http://www.cnblogs.com/z2002m/archive/2008/08/14/1267869.html

版权

Code
<style>
    ruby{}{font-size:14px;}

    rt{}{font-size:11px;}
</style>
<ruby>中国人民万万岁<rt>zhong guo ren min wan wan sui</rt><br>
博客园<rt>bo ke yuan</rt>
</ruby>

使用ruby 和 rt 标签可以实现注音效果，以上代码效果如下图：

2 js相加得到精确的数字。

3 目前的的页面布局都是基于XHTML,通过DIV+CSS布局,实现DHTML的样式。所以这个JavaScript动态的为元素添加事件因此而普遍了。下面我说说怎样通过javascript为元素动态的添加事件.
Javascript为元素动态的添加事件包括两种情况：
不带参数的事件和带参数的事件。
一、不带参数的事件：
两种方式：直接给对象添加事件,节点添加事件
例如给一个id为tab1的添加onclick事件
第一种情况：
var t = document.getElementById("NewTitle");
t.onclick = function showmsg(){
    alert('Hello!World');
}
第二种情况这种情况更加动态，更为实用，而且还能添加多个函数(添加的事件的顺序即执行顺序)，呵呵
   var tb = document.getElementById("NewTitle");
    if(window.addEventListener){ // Mozilla, Netscape, Firefox
        td_value.addEventListener('click', alert('cc'), false);
        td_value.addEventListener('click', alert('cc'), false);
    } else { // IE
        td_value.attachEvent('onclick', function(){alert('changchang');});
        td_value.attachEvent('onclick', function(){alert('changchang');});
    }
二、带参数的事件
这里的functionName就是事件处理函数，如果是带参数的那该怎么办，
有人说是这样:
element.οnclick=function(sb){
        alert(sb);
    }
是不是上面的那种写法呢？答案是不正确的。
解决方法：匿名函数：
    element.οnclick=function() {
        functionName(param);
    };
这样就巧妙的通过匿名方法实现了！

可接收输入的下拉框

    HTML中的下拉框只能提供选择的功能，并不能完全满足需要，有时需要既能提供下拉选项，同时也能接受用户新的选项时，HTML中的简单下拉框便不能满足需求，往往要借助ActivX控件，但控件往往又存在客户的安全限制。下面介绍一种简单的由纯HTML元素组合而成的可输入下拉框。

    <input type=text name=re_name style="width:100px;height:21px;font-size:10pt;"><span style="width:18px;border:0px solid red;"><select name="r00" style="margin-left:-100px;width:118px; background-color:#FFEEEE;" onChange="document.all.re_name.value=this.value;">
                <option value="1">11111111<option>
                <option value="2">222222</option>
                <option value="3">333333</option>
              </select>
              </span>

5 JS的编码

还有JS文件还得存为utf-8型的。

如果web application的编码规则是utf-8，如网页头中的：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
那么js文件中如果有中文输出就会出现乱码，解决此个问题可在引用javascript输出的地方加上charset="gb2312" 或 charset="big5"（假设输出的是Big5繁体字）。

例：
<script type="text/javascript" language="javascript" src="scripts/output.js" charset="gb2312"></script>

PS：另一种解决方法是把js文件保存为utf-8编码。

好几次都忘记了，看来用utf-8也很麻烦

6 js 的Select的

在Web页面中控制其元素的选择状态

    为了在Web页面上使用文本搜索，在文本框内实现选择效果，在页面上屏蔽选择状态等。我们需要使用脚本(如JavaScript)来精确的控制页面中UI元素的选择状态。下面从操作元素选择区和屏蔽元素被选择两个方面来说一说。

    操作元素选择区，我们可以使用对应对象的select()方法选择页面内容，其中包括INPUT元素中的内容、TextRange对象中的文字和controlRange Collection对象中的控件。

    1、 Select Input

< input id ="txb" type ="text" value ="Text Box" />

< a href ="#" onclick ="document.getElementById('txb').select()" > Select </ a >

2、 this is a span. Select Text

< span id ="spn" > this is a span. </ span >

< a href ="#" onclick ="SelectText();" > Select </ a >

< script language ="javascript" >

function SelectText()

{

var range = document.body.createTextRange();

range.findText("this is a span.");

range.select();

}

</ script >

3、selectselect Select Control

< select id ="slt1" > < option > select </ option > </ select >

< select id ="slt2" > < option > select </ option >< / select >

< a href ="#" onclick ="SelectControl();" > Select </ a >

< script language ="javascript" >

function SelectControl()

{

var controlRange = document.body.createControlRange();

controlRange.add(document.getElementById('slt1'));

controlRange.add(document.getElementById('slt2'));

controlRange.select();

}

</ script >

上面是主动操作页面元素的选择状态，下面说说怎么屏蔽页面中的选中状态。

在IE5.5及以上版本中，我们可以使用这两种方便的方法来屏蔽对元素的选择。一是使用元素的属性unselectable，另一种方法是使用元素的事件onselectstart。比如我们让一个span内的文字不能不选择，我们可以使用：

< span unselectable ="on" > 这是一段不能被选中的文本。 </ span >

或者使用：

< span onselectstart ="return false;" > 这也是一段不能被选中的文本。 </ span >

这两种方法有什么异同呢？第一种使用 unselectable属性，只能使该元素内的直接内容不能被选中，如果里面包含子元素，子元素内容不受影响；使用 onselectstart事件，由于IE本身使用bubble up事件处理模型，使用这种方法，将可以屏蔽掉容器元素内任何元素的被选择特性。但是这两个方法却都有一个共同的缺陷，就是如果选择开始于被屏蔽元素之外时，这些被屏蔽的元素还是可以被选中

。看下面的事例：

    这是一段不能被选中的文本。(子元素文本例外)

     这也是一段不能被选中的文本。(子元素文本依旧)

     如果我们使用鼠标在蓝框或绿框内托拽，我们是不能选中内部文本的，同时如果我们选中了其它的元素，点击蓝框内部，不能取消其它元素的选中状态；点击绿框内部则可以取消。可是如果我们使用鼠标从框外开始选取，或者直接按Ctrl+A，这两个本身已经屏蔽选择状态的元素，还是被选中了

。所以我们如果要屏蔽页面的任何选取操作，最简单的方法就是在body元素上添加onselectstart="return false;"。这样就是不管使用什么方法，也不能选中页面里的元素了

。

< body onselectstart ="return false;" >

. . .

</ body >

这样一来似乎是一劳永逸了，可是当我们使用input type=text、textarea等控件时，我们会发现这里面也不能使用选择操作了，真是晕死！怎么办呢？

解铃还须系铃人不是，既然onselectstart使用bubble up特性，那么我们同样在return false之前做检查就行了。比如我们要完全屏蔽页面的选择操作，但是input type=text、textarea内还需要使用选择，解决示例如下：

< body onselectstart ="var srcElmt = event.srcElement; if ( srcElmt && ( srcElmt.tagName != 'INPUT' || srcElmt.tagName != 'TEXTAREA' ) return false;" >

. . .

</ body >

7 最经典的实现字符数控制的方案

下面提供的方案优势：
1)最佳的方法是在文本框中输入时，控制到最大字数，超过时不能进行输入;

2)对于粘帖的情况也要能兼容，以前网上的方法不能控制到paste的情况;

3)对于最后的一个中文字符，宁愿舍去也不能多一个字符，比如50的字符数，在第49个时，最后输入一个中文，会导致最终字数为51,而这种情况，推荐是不能输入中文，保证最终的字符数<=50最佳，因为放弃一个中文字符总比数据库报错要好吧。
4)为了提高开发效率，尽可能的减少代码量,此方案不需要为文本框添加任何事件，而是由脚本块自己解决，因此只需要把脚本块饮包含到页面中就可以了，这应该是相当方便了吧

Code
<script language="javascript">

        </script>

2)在需要控制的控件上添加length="n"(n为要控制的字数)即可，如：
  <INPUT  type="text" length="3"> <TEXTAREA length="20"  rows="2" cols="20"></TEXTAREA> <asp:TextBox id="TextBox1"  runat="server" length="7"></asp:TextBox> <asp:TextBox id="TextBox2" runat="server" TextMode="MultiLine" length="10"></asp:TextBox> 上面是HTML控件与Web控件的例子，只要加一个length就可以了。

尽可能地使用“纯粹”的服务器端控件。例如使用Repeater和ListView，其实写出优秀的页面非常容易。当然，即使这么做，还是会有一些缺点的，例如：

例如Repeater的ItemCommand事件已经无法使用了，因为它会用到ViewState。但是我们开发的大部分的页面甚至连PostBack都不需要，这又有什么关系呢？
使用服务器端控件虽然能让我们对于HTML有十足的控制，但是我们无法避免在客户端生成一个不规则的ID。这一点理论上可能会影响页面样式的开发，但是就我那前台开发人员同事的话来说，除了一些在客户端进行布局的DOM元素之外，几乎不会使用ID来控制样式。就我们工作的结果来看，不规则的ID也并没有造成任何的影响。

如果JavaScript代码完全写在页面上，这样每次加载页面都需要下载这些JavaScript代码，而js文件可以缓存，这样客户端只需要在第一次加载时下载这个文件就可以了

嗯？刚才不是说只有保持ViewState才能使用控件的事件吗？没有ViewState怎么从控件中重新获取状态呢？请注意我之前所说的是“复杂事件”。什么是复杂事件？TextBox的TextChange事件就是“复杂事件”，GridView的Command事件也是复杂事件，但是Button的Click事件就是“简单事件”；与此相对的，GridView里的每一行的数据每一个子控件的状态是“复杂状态”，而TextBox的Text属性则是“简单状态”。“复杂状态”和“复杂事件”需要ViewState，因为与之有关的这些“控件”是ASP.NET“无中生有”的，但是“简单事件”和“简单状态”基于页面中“必然”会提交的数据，它们自然能够还能够使用。在我的ASP.NET开发过程中，使用的几乎都是“简单事件”和“简单状态”，而印象中放弃“复杂事件”和“复杂状态”并没有给我带来任何的困扰。

转载于:https://www.cnblogs.com/z2002m/archive/2008/08/14/1267869.html