web前端常用操作集(涵盖JS、HTML、CSS)

来源：互联网发布：java一般用来做什么编辑：程序博客网时间：2024/04/28 20:00

取消 ul li 前面的图标

ul    {        list-style-type:none;    }

清空Value值

$("#city").val("");

设置Value值

$("#city").val("北京");

清空标签中间值

$("#ML1").html("");

设置标签中间值

$("#ML1").html("北京");

当对某个标签再次加载值时，常要先清除原有值

区分html()、text()、val()

<input type="aaa" value="bbb">ccc</input>text()输出标签中间的内容：ccc。val()输出value属性的值：bbb。html()输出整段html：<input type="aaa" value="bbb">ccc</input>。val()的写法针对jQuery

设置标签为可编辑状态

$("input").removeAttr("readonly"); //所有input标签可编辑$("textarea").removeAttr("readonly"); //所有textarea(部门简介)标签可编辑$("input:button").removeAttr("disabled"); //所有button(左右框移动)标签不可编辑

设置标签为不可编辑状态

$("input").attr("readonly", "readonly"); //所有input标签不可编辑$("textarea").attr("readonly", "readonly"); //所有textarea(部门简介)标签不可编辑$("input:button").attr("disabled", "disabled"); //所有button(左右框移动)标签不可编辑

Ajax依赖

两个Ajax，一个A，一个B，B要在A执行完毕之后执行

由于Ajax是异步加载，各个Ajax几乎同时执行互不干扰，但有时我们要的效果是一个Ajax的请求要从另一个Ajax的返回值中取值，此时，就会发生这种情况，解决方案有三个：
1、在名为A的Ajax的CallBack中写名为B的Ajax请求；
2、写一个时间间隔函数，监听A的执行，当A执行完毕之后，调用B；
3、将Ajax的async设置为false，但这样又通常要求全部都设置为false。

时间延迟，只执行一次，在指定的毫秒数后调用函数或计算表达式

Var st o= setTimeout(到点要执行的函数或表达式，延迟的毫秒单位时间);window. clearTimeout(sto)使其失效，取消周期执行

时间间隔，执行多次，每隔指定毫秒数后调用函数或计算表达式

varstv= setInterval ("alert('间隔3000ms弹出一次!')",3000);window.clearInterval(stv)使其失效，取消周期执行

jQuery全选/全不选/反选

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>全选，不全选，反选</title><script src="jquery-1.7.1.min.js" type="text/javascript"></script><script language="javascript" type="text/javascript">$(function () {$("#selectAll").click(function () {//全选 $("#ckList :checkbox").attr("checked", true);});$("#unSelect").click(function () {//全不选 $("# ckList:checkbox").attr("checked", false);});$("#reverse").click(function () {//反选 $("# ckList:checkbox").each(function () {$(this).attr("checked", !$(this).attr("checked"));});});}); </script></head><body><div id=" ckList "><input type="checkbox" value="值1" />值1<br /><input type="checkbox" value="值2" />值2<br /><input type="checkbox" value="值3" />值3<br /><input type="checkbox" value="值4" />值4<br /></div><input type="button" value="全选" id="selectAll" /><input type="button" value="全不选" id="unSelectAll" /><input type="button" value="反选" id="reverse" /></body></html>Select-Optin项<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title></title><script src="jquery-1.7.1.min.js" type="text/javascript"></script><script type="text/javascript">//所有function All() {var tt = $("#st")[0];for (var i = 0; i < tt.length; i++) {alert(tt[i].text);}}//当前所选function Aselected() {var tt = $("#st")[0];for (var i = 0; i < tt.length; i++) {if(tt[i].selected) {alert(tt[i].text);alert(tt[i].value);}}}</script></head><body><form id="form1" runat="server"><div><select id = "st" multiple="multiple"><option value="1">aaaaa</option><option value="2">bbbbb</option><option value="3">ccccc</option><option value="4">ddddd</option></select><input type="text" id = "tt"/><input type="button" onclick="All();" value="所有"/><input type="button" onclick="Aselected();" value="当前所选"/></div></form></body></html>

让DIV一直固定在屏幕的某个位置

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title></title><style type="text/css">#low_right{position: fixed;width: 90px;height: 90px;background: #eee;bottom: 40px;right: 20px;background-color: #DCFCE9;border: 8px double #06F867;text-align: center;padding: 10px;margin: 10px;}</style></head><body><script type="text/javascript">for (var i = 0; i < 100; i++) {document.write((i + 1) + "<br />");}</script><div id="low_right">右下角</div></body></html>

左右Select中Option项移动(含取值)

<!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>    <title></title>    <script type="text/javascript">        //从指定Form和指定Select的Id项移动      Begin-----------------------------------        function copyToList(from, to, formNum) //from, to 表示从哪个Id的Select到哪个Id的Select,formNum表示页面中第几个Form(从0开始),是第二个Form中就传数字1过来        {            fromList = eval('document.forms[' + formNum + '].' + from);            toList = eval('document.forms[' + formNum + '].' + to);            if (toList.options.length > 0 && toList.options[0].value == 'temp') {                toList.options.length = 0;            }            var sel = false;            for (i = 0; i < fromList.options.length; i++) {                var current = fromList.options[i];                if (current.selected) {                    sel = true;                    txt = current.text;                    val = current.value;                    toList.options[toList.length] = new Option(txt, val);                    fromList.options[i] = null;                    i--;                }            }            if (!sel) alert('您还没有选择任何项目');        }        //从指定ID的Select中取所有值      Begin-----------------------------------        function Add_Product(selectedId) {//selectedId指定从哪个Select中取值                        var objL = [];            var b = document.getElementById(selectedId);            if (b.length < 1) {                alert("您还未选择任何项!");                return false;            }            var ttt = ""; //组成一个字符串            for (i = 0; i < b.length; i++) {                objL.push(b[i].value);                ttt += b[i].value + ",";            }            //console.log(ttt);            for (var i = 0; i < objL.length; i++) {                alert(objL[i]);            }        }        //从指定ID的Select中取所有值      Ends-----------------------------------    </script></head><body>    <div id="Add_Sell_Product">        <form name="Add_Sell_Product_Form">            <label>                添加销售产品</label>            <table border="0" height="20">                <tr>                    <td>                        <label>                            候选</label>                    </td>                    <td>                    </td>                    <td>                        <label>                            已选</label>                    </td>                </tr>                <tr>                    <td>                        <select id="candidate" name="candidate" size="4" multiple style="width: 140px; height: 160px;">                            <option value="AAA">AAA</option>                            <option value="BBB">BBB</option>                            <option value="CCC">CCC</option>                            <option value="DDD">DDD</option>                        </select>                    </td>                    <td sytle="width:20px;">                        <a href="javascript:copyToList('candidate','selected',0)">添加》</a>                        <br />                        <br />                        <a href="javascript:copyToList('selected','candidate',0)">《移除</a>                    </td>                    <td>                        <select id="selected" name="selected" size="4" multiple style="width: 140px; height: 160px;">                            <option value="EEE">EEE</option>                            <option value="FFF">FFF</option>                            <option value="GGG">GGG</option>                        </select>                    </td>                </tr>            </table>            <input id="sub" name="sub" type="button" onclick="Add_Product('selected');" value="提交" />        </form>    </div></body></html>

一行代码搞定表格单选/多选/全选(含取选择项的值)[此项是对他人代码的再写后封装]

分：Html部分和JavaScript部分

效果图：

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>    <title></title>    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>    <script src="tableJ.js" type="text/javascript"></script>    <script type="text/javascript">        $(document).ready(function () {            lotable("table4", "ckbAll", "writeCkdList"); //要求，1、表要有Id；2、"全选"Checkbox要有Id；        });    </script></head><body>    <table id="table4">        <tr>            <th style="width: 160px;">表头一</th>            <th style="width: 160px;">表头二</th>            <th style="width: 160px;"><input id="ckbAll"  type="checkbox" />全选</th>        </tr>        <tr>            <td>第一行第一列</td>            <td>第一行第二列</td>            <td><input id="ckb1" type="checkbox" value="a" /></td>        </tr>        <tr>            <td>第二行第一列</td>            <td >第二行第二列</td>            <td><input id="ckb2" type="checkbox" value="b" /></td>        </tr>        <tr>            <td>第三行第一列</td>            <td>第三行第二列</td>            <td><input id="ckb3" type="checkbox" value="c" /></td>        </tr>    </table>    <!--表格Id，记录项Id-->    <input type="button" value="提交" onclick="getCheckSum('table4','writeCkdList')"/>    <input type="text" id = "writeCkdList" value="aaa"/></body></html>

JavaScript部分

//------------------------------------------//全选大类[涵盖：全选、全不选、全选项与单项对应关系、按钮得到当前选择项的值]    Begin----------------//此大类参数说明：//tableId:[要作用到的Table的Id]   ckId:["全选" CheckeBox的Id]//初始化表格  function SelectAllTable(tableId, ckId) {    checkOne(tableId, ckId);    $("#" + ckId + "").click(function () {        checkAll("" + tableId + "", "" + ckId + "");    });}//注册影响全选项  function checkOne(tableId, ckId) {    alert("checkOneaaaaa");    $("#" + tableId + " tr:gt(0) td:first-child input:checkbox").die().live("click", function () {        checkOneOper(tableId, ckId);    });}//全选[tableId：为指定表格Id的项注册全选事件]  function checkAll(tableId, ckId) {    var shId;    if ($("#" + ckId + "").attr("checked")) {        $("#" + tableId + " tr:gt(0) td:first-child input:checkbox").attr("checked", true);    }    else {        $("#" + tableId + " tr:gt(0) td:first-child input:checkbox").attr("checked", false);    }}//影响全选项[tableId：受影响表Id]、[ckId：受影响“全选”项的Id]  function checkOneOper(tableId, ckId) {    var i = $("#" + tableId + " tr:gt(0) td:first-child input:checkbox").length;    var c = 0;    $("#" + tableId + " tr:gt(0) td:first-child input:checkbox").each(function () {        if ($(this).attr("checked")) {            c += 1;        }        else {            return false;        }    });    if (i == c) {        $("#" + ckId + "").attr("checked", true);    }    else {        $("#" + ckId + "").attr("checked", false);    }}//取选中项  [要求在页面中要有一个Text或Hidden元素，将把得到的所有当前项的值以A,B,C,的形式存在于其Value属性中]function getCheckSum(tableId, valText) {    var i = 0; //个数      var ckList = []; //列表      var temp = ""; //前台text      $("#" + tableId + " tr:gt(0) td:first-child input:checked").each(function () {        i++;        ckList.push($(this).val());        temp += $(this).val() + ",";    });    $("#writeCkdList").val(temp);    alert(valTe);    //    alert(i);      //    for (var i = 0; i < ckList.length; i++) {      //        alert(ckList[i]);      //    }      return ckList;}//美化CheckedBox未完成function cssCheckebox(curCheckbox, thisobj) {    var o = document.getElementById(obj);    if (o.checked) {        thisobj.style.backgroundImage = "url(checkOff.JPG)";        o.checked = false;    }    else {        thisobj.style.backgroundImage = "url(checkOn.JPG)";        o.checked = true;    }}//全选大类[涵盖：全选、全不选、全选项与单项对应关系、按钮得到当前选择项的值]    End----------------

选择没有name和id属性的父节点

onclick='ck(this)'; function ck(a){$(a).attr('class');}

jQuery创建新元素

var aUpdate = $("<a></a>", {        "href": "javascript:void(0);",        "style": "text-decoration: none"    }).html("更新");aUpdate.bind("click", selectAllcheckbox());aUpdate.appendTo(父节点);

display与visibility的异同

都是控件元素的显示与隐藏，不同的是：
display: none;不显示，不占位置
visibility: hidden;不显示，要占位置

JS对时间戳1381482609687的处理方法

当从后台返回的时间为1381482609687形式时，表示为时间戳，可用(new Date(1381482609687)).format("yyyy/MM/dd")的方式进行处理，处理完后显示：1999/09/09的形式

JS事件冒泡

JS事件冒泡是指对最里层元素操作事件，却会影响到其之外的其它根元素的事件的触发。比如：现有DIVA，里面有DIVB，DIVB里面有DIVC，每个DIV都有一个单击alert事件，当单击DIVC时，不仅DIVC的单击事件会触发，DIVB和DIVA的单击事件也会触发，这就叫JS事件冒泡。但有时我们常常需要的是单击DIVC就只有DIVC的单击事件触发，其它不触发，因此，有以下解决方案：

1、event.stopPropagation();阻止事件冒泡，但不会阻击默认行为；

2、return false:阻止事件冒泡，同时阻止默认行为；

3、event.preventDefault();不阻止事件冒泡，但要阻止默认行为。

移除指定元素后的所有元素

$("#" + folderId + "").nextAll().remove();

移除某个属性

 $("#lib_table tr:gt(0)").removeAttr("class");

改变JS编码(中文乱码)

用记事本打开JS文件，“另存为”时选择编码方式(常UTF-8)

判断是否有某个属性：
通过获取指定属性，判断它是否为undefined来确定

if (typeof ($(this).attr("folderid")) == "undefined") {            //有此属性        } else {           //无此属性        }

JS枚举器

var folderType = {root1:1,root2:2}

使用：

folderType.root1

这样得到的值就会是 1

得到select当前选中项的text

var curMsg = $("#updatehtmlcurentMsgSelect option:selected").text();

jQuery去除前后空格

$.trim("   abc    ");//注意是jQuery，要有$.

这样得的就是："abc" ，而非:" abc　”

判断指定HTML元素是否存在

if($("#divD").length>0){alert("存在");}else{alert("不存在");}

阻止事件冒泡

function(e){e.stopPropagation(); //阻止事件冒泡}

计算时间差[相差天数]

 function DateDiff(sDate1, sDate2) {    //sDate1和sDate2是2006-12-18格式              var aDate, oDate1, oDate2, iDays;        aDate = sDate1.split("-");        oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);   //转换为12-18-2006格式              aDate = sDate2.split("-");        oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);        iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24);    //把相差的毫秒数转换为天数          console.log("iDays + 1");        return iDays + 1;    }

JS数组及对象操作

var a = { };//JSON对象
var b = [ ];//JS数组
a.name='zhangshan';
a.age='23';
b.push(a);

JS数组

1、添加一个或多个元素在数组最后

arr.push("a","b");arr.push("a");

2、删除数组最后一个元素

arr.pop();//直接这句，不用赋值

3、删除数组第一个元素

arr.shift();

4、添加一个或多个元素在数组开头

arr.unshift("c","d");//arr==["c","d","a","b"];

5、将数组元素以指定分隔符分隔到字符串中

var str = arr.join(",");//str=="a,b";

6、数组元素反转

arr.reverse();//arr==["b","a"];

7、从数据中移除指定index的元素

b.splice(index,1);//从index位置开始，移除1个

比较时间大小

date1=new Date("2013/02/02");date2=new Date("2013/05/05");if(date1>date2){...}else{...}

JS原型继承prototype

//应用于JS类型上，当定义后，可一直使用Array.prototype.removeByValue = function(val) {    for (var i = 0; i < val.length; i++) {        if (this[i] == val) {            this.splice(i, 1);            break;        }    }};//这样，所有的Array就都可以点出removeByValue( )出来，移除指定值的元素了//使用var numStr = ["one", "two", "three"];numStr.removeByValue("two");//numStr 的值就为： ["one","three"];

截取指定位的小数

num.toFixed(2);

给文字加alt标签

<span title='这是文字提示的内容'>这是文字</span>//这样，当鼠标移到文字上时，就会alt出“这是文字提示的内容”

让DIV高度不足时显示滚动条

overflow: hidden;overflow-y: auto;

<a />标签的下划线控制

text-decoration：none;无下划线text-decoration:underline;下划线text-decoration:overline;上划线

插入一个DIV到指定DIV的第一个元素

$("#dv1").prependTo($("#dv");$("#dv").prepend("#dv1");

字符超出部分自动换行

对于中文常常是当一超过宽度时，会自动但是对于英文或者数字，则并没有自动换行，需手动添加CSS代码：

word-break: break-all;

字符超出部分隐藏并打点

当在一行中的文本太多时，会自动换行，有的时候想让超出的部分自动隐藏，并在广西行末打点提示后面还有内容，那需要在CSS中添加以下样式：

overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:100px;