web前端常用操作整理(含JS/HTML/CSS等方面知识)

当前位置 : 首页 > 网页制作 > 心得技巧 > web前端常用操作整理(含JS/HTML/CSS等方面知识)

web前端常用操作整理(含JS/HTML/CSS等方面知识)

来源:互联网 作者:脚本宝典 时间:2015-08-28 13:33
取消 ul li 前面的图标 1 清空Value值 1 设置Value值 1 清空标签中间值 1 设置标签中间值 1 区分html()、text()、val()。 1 设置标签为可编辑状态 1 设置标签为不可编辑状态 1 两个Ajax,一个A,一

取消 ul li 前面的图标 1 
清空Value值 1 
设置Value值 1 
清空标签中间值 1 
设置标签中间值 1 
区分html()、text()、val()。 1 
设置标签为可编辑状态 1 
设置标签为不可编辑状态 1 
两个Ajax,一个A,一个B,B要在A执行完毕之后执行 2 
时间间隔,只执行一次,在指定的毫秒数后调用函数或计算表达式 2 
时间间隔,执行多次,每隔指定毫秒数后调用函数或计算表达式 2 
jQuery全选/全不选/反选 2 
Select-Optin项 3 
让DIV一直固定在屏幕的某个位置 4 

取消 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()输出标签中间的内容:1234。 
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,一个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

<input type="checkbox" value="值2" />值2

<input type="checkbox" value="值3" />值3

<input type="checkbox" value="值4" />值4

</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) + "
"); 

</script> 
<div id="low_right"> 
右下角 
</div> 
</body> 
</html> 


Tag:
网友评论

<