web前端常用操作集(涵盖JS、HTML、CSS)
2013-11-06 10:33
981 查看
取消 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;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- WEB前端性能优化:HTML,CSS,JS和服务器端优化
- web前端，html+css常用元素，属性总结
- HTML+DIV+CSS+JSweb前端基础
- Web前端HTML+CSS+JS初级入门视频课程 001
- JS + HTML + JQUERY + CSS WEB前端技术积累
- web前端html+css常用布局05列表布局
- WEB前端（HTML、XML、CSS、JS）学习笔记
- Web前端：HTML~CSS~JS
- 自己总结前端web知识学习——太多太多（html/css/js/php)
- Web前端：HTML~CSS~JS
- gVIM+zencoding快速开发HTML/CSS/JS（适用WEB前端）
- WEB前端html、css、js分离开发简谈
- Web前端html中通过CSS来设置div背景颜色透明度
- 一节前端课：html+css+js做个计算器
- 前端js,html,css等问题
- JS+CSS+HTML 前端开发(三)
- [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
- j2ee学习笔记之前端（js、jQuery、html、html5、webService、ajax、css）—— 一直会补充
- 【从入门到放弃】WEB前端之HTML+CSS基础02
- web前端开发企业级CSS常用命名，书写规范总结