Js使用小记录
1>给下拉列表赋值，下拉列表选择操作
html
<table> <tr> <td> <select id="Country"> <option value="AU">Australia</option> <option value="NZ">New Zealand</option> <option value="KR">Korea</option> </select> </td> <td> <input type="text" id="CountryCode" disabled="disabled" /> </td> </tr> </table>
jq
<script type="text/javascript">
//两种为 select 赋值方式
$("#Country").val("KR");
//$("#Country").children("[value='KR']").attr("selected", "selected");
//select 选择 后 将值赋到文本框内
$("#Country").change(function () {
$("#CountryCode").val($("#Country").children("[selected='selected']").val());
});
</script>
图片
注意：$("#Country").children("[selected='selected']").val()获取值的时候对于引入的jq版本有要求，我用1.5.1版不行(undefined)，1.7.2版本就可以。
2>JQuery Chosen Plugin 一款选择插件
网站：http://davidwalsh.name/demo/jquery-chosen.php 下载地址：http://dl.vmall.com/c0mwva1ozj
下载完成后将chosen-sprite.png、chosen.css和chosen.jquery.js添加到你的文件中(chosen.proto.js的作用暂时没搞懂)
代码如下：
这里添加了一个 mutiple=“true” 属性
<select class="chosen" multiple="true" style="width:400px;"> <option>Choose...</option> <option>jQuery</option> <option >MooTools</option> <option>Prototype</option> <option >Dojo Toolkit</option> </select>
js代码
<script type="text/javascript"> jQuery(document).ready(function () { jQuery(".chosen").data("placeholder", "Select Frameworks...").chosen(); }); </script>
3>一个简易的百度搜索框
html
<input type="text" id="searchValue"/> <div id="searchShow"></div>
js
//后面用来 选择获取到的值时会用到 $(document).ready(function () { $("#searchValue") .keyup(function (ev) { //ev 用户按下的键盘上的键 //this.value 文本框的值 doLiveSearch(ev, this.value); }); }); function doLiveSearch(ev, keywords) { //backspace 的键盘值是8 if (ev.keyCode == 8) { $("#searchShow").show(); } //enter 的键盘值是13 if (ev.keyCode == 13) { $("#searchShow").hide(); } //如果按键是 ↑(ev.keyCode == 38)或者↓(ev.keyCode == 40),调用upDownEvent函数 if (ev.keyCode == 38 || ev.keyCode == 40) { upDownEvent(ev); return false; } //删除上一次 生成的ul，达到动态显示的效果，否则ul会越来越多 $('#searchul').remove(); updown = -1; //对输入值的长度 的一个限制 if (keywords == "" || keywords.length < 5) return false; //添加一个ajax异步，根据keywords取出相关数据,然后在success中赋值 $.ajax({ type: "POST", url: "/LogNet/Search", dataType: "json", data: { key: keywords }, success: function (data) { var eList = $("<ul id='searchul'></ul>"); $.each(data.result, function (index, re) { var eListElem = $("<li></li>"); var eLink = $("<a id='" + re.key + "' href='javascript:void(0)'>" + re.key + "</a>").click( function () { $("#searchValue").val($(this).attr("id")); $("#searchShow").hide(); return; } ); eListElem.append(eLink); eList.append(eListElem); }); $("#searchShow").append(eList); } }); return true; }; function upDownEvent(ev) { //获取 ul 和 文本框 var elem = document.getElementById('searchul'); if (elem) { var length = elem.childNodes.length - 1; if (updown != -1 && typeof (elem.childNodes[updown]) != 'undefined') { $(elem.childNodes[updown]).removeClass('highlighted'); } // Up if (ev.keyCode == 38) { updown = (updown > 0) ? --updown : updown; } else if (ev.keyCode == 40) { updown = (updown < length) ? ++updown : updown; } if (updown >= 0 && updown <= length) { $(elem.childNodes[updown]).addClass('highlighted'); var text = elem.childNodes[updown].childNodes[0].text; if (typeof (text) == 'undefined') { text = elem.childNodes[updown].childNodes[0].innerText; } $("#searchValue").val(text); } } return false; }; var updown = -1;
css
#searchul { margin-left:50px; padding:5px; position:absolute; background-color: #fff; list-style-type: none; z-index: 12; border:1px solid #000; } #searchul li { float:none; } #searchul a, #searchul a:visited, #searchul a:hover { color: #000; text-decoration: none; } #searchul a:hover { color: #000; } #searchul li:hover { background-color: #555; } #searchul .highlighted { background-color: #555; }
4>JavaScript实现数据验证
var temp=document.getElementById("xxxx");
var myreg=/^xxxxx$/; //这里是要验证的正则表达式
if(!temp.value.match(myreg))
{
//如果不匹配，提示！
}
5>JQ弹框提示
if (confirm("是否取消！")) {
}
6>火狐不支持window.document.onkeydown
首先这里要说的是，要监控键盘的点击事件，要用window.document.onkeydown，用Jquery好像是不行的，比如tab会跳转，监控不到。下面这段代码是为了兼容火狐浏览器的一段按键监控js代码，就是加了一个event参数。
window.document.onkeydown = function (event) { event = event || window.event; var keycode = event.keyCode; if (keycode == 13) { return false; } };
6>一个简单的category分类显示
<div id="category"> <ul> <li> <a id="A" href="javascript:void(0)">A</a> </li> <li> <a id="B" href="javascript:void(0)">B</a> </li> <li> <a id="C" href="javascript:void(0)">C</a> </li> <li> <a id="D" href="javascript:void(0)">D</a> </li> <li> <a id="E" href="javascript:void(0)">E</a> </li> </ul> </div> <script src="~/Scripts/jquery-1.7.1.js"></script> <script> $("a").click(function () { GetCategory($(this).attr("id")); }); function GetCategory(id) { var parent = $("#" + id).parent(); $.ajax({ type: "POST", url: "@Url.Action("GetCategory","Category")", dataType: "json", data: { categoryId:id }, success: function (data) { var newUl = $("<ul></ul>"); $.each(data, function (index, category) { var newLi = $("<li></li>"); var newA = $("<a id=" + category.ChildrenCategoryId + " href='javascript:void(0)' >" + category.CategoryName + "</a>").click(function () { GetCategory($(this).attr("id")); }); newA.appendTo(newLi); newLi.appendTo(newUl); }); $("#" + id).parent("li").find("ul").remove(); $("#" + id).parent("li").siblings("li").find("ul").remove(); newUl.appendTo(parent); } }); } </script>
6>一个简单的下拉框依次出现效果
<script> $(function () { $("select").change(function () { if ($("#createSelect tbody tr:last-child select").attr("name") == $(this).attr("name")) { selectFunction(); } }); }); var selectFunction = function () { var num = parseInt($("#numberHide").val()); var newTr = $("<tr></tr>"); var newTd1 = $("<td class='tdlabel' >Level" + (num + 2) + ":</td>"); var newTd2 = $("<td class='tdvalue' ></td>"); var newSelect = $("<select name='MerchantReps[" + (num + 1) + "].RepID' class='selectClass'></select>").change(function () { if ($("#createSelect tbody tr:last-child select").attr("name") == $(this).attr("name")) { selectFunction(); } }); newSelect.append($("#merchantrepsOne").children().clone()); newTd2.append(newSelect); newTr.append(newTd1); newTr.append(newTd2); $("#createSelect").append(newTr); $("#numberHide").val(num + 1); }; </script>
7>截取字符串中的数字
.replace(/[^0-9]/ig, "")
8>获取select 被选中的option的值
$("#id option:selected").text()
http://tympanus.net
9>select的禁用与启用
.attr("disabled", "disabled")
.attr("disabled", false)
