web前端常用操作有哪些

发布时间:2021-10-08 16:16:28 作者:iii
来源:亿速云 阅读:121

这篇文章主要讲解了“web前端常用操作有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“web前端常用操作有哪些”吧!

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

感谢各位的阅读,以上就是“web前端常用操作有哪些”的内容了,经过本文的学习后,相信大家对web前端常用操作有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐阅读:
  1. MySQL有哪些常用操作
  2. Redis常用操作有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

web前端

上一篇:如何学习ASP.NET

下一篇:如何实现KindEditor图片上传的Asp.net代码

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》