web前端开发常见实际操作梳理(含JS/HTML/CSS等层面

2021-01-20 21:15 jianzhan
撤销 ul li 前面的标志 1
清空Value值 1
设定Value值 1
清空标识正中间值 1
设定标识正中间值 1
区别html()、text()、val()。 1
设定标识为可编写情况 1
设定标识为不能编写情况 1
两个Ajax,1个A,1个B,B要在A实行结束以后实行 2
時间间距,只实行1次,在特定的毫秒数后启用涵数或测算表述式 2
時间间距,实行数次,每隔特定毫秒数后启用涵数或测算表述式 2
jQuery全选/全不选/反选 2
Select-Optin项 3
让DIV1直固定不动在显示屏的某个部位 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,1个A,1个B,B要在A实行结束以后实行
因为Ajax是多线程载入,各个Ajax基本上另外实行互不影响,但有时大家要的实际效果是1个Ajax的恳求要从另外一个Ajax的回到值中赋值,此时,就会产生这类状况,处理计划方案有3个:
1、 在名为A的Ajax的CallBack中写名为B的Ajax恳求;
2、 写1个時间间距涵数,监视A的实行,当A实行结束以后,启用B;
3、 将Ajax的async设定为false,但这样又一般规定所有都设定为false。

時间延迟时间,只实行1次,在特定的毫秒数后启用涵数或测算表述式

拷贝编码
编码以下:

Var st o= setTimeout(到点要实行的涵数或表述式,延迟时间的毫秒企业時间);
window. clearTimeout(sto)使其无效,撤销周期实行

時间间距,实行数次,每隔特定毫秒数后启用涵数或测算表述式

拷贝编码
编码以下:

varstv= setInterval ("alert('间距3000ms弹出1次!')",3000);
window.clearInterval(stv)使其无效,撤销周期实行

jQuery全选/全不选/反选

拷贝编码
编码以下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>全选,不全选,反选</title>
<script src="jquery⑴.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⑴.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>

让DIV1直固定不动在显示屏的某个部位

拷贝编码
编码以下:

<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>