web前端常用操作整理(含JS/HTML/CSS等方面知识)
web前端常用操作整理(含JS/HTML/CSS等方面知识)
发布时间:2016-12-27 来源:查字典编辑
摘要:取消ulli前面的图标1清空Value值1设置Value值1清空标签中间值1设置标签中间值1区分html()、text()、val()。1设...

取消 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" value="所有"/>

<input type="button" 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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新心得技巧学习
热门心得技巧学习
网页设计子分类