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

发布时间：2013-11-07 16:10:53 作者：佚名

web前端包括JS、HTML、CSS等等方面，本文整理了前端的常用操作，善用可提高工作效率，个人感觉还不错，喜欢的朋友可以参考下

取消 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：WEB前端

15 个为编程初学者准备的网站(都是国外的一些网站)
今天的文章，我们将分享15个可以学习编程的网站，这些网站上提供了很多编程教程，图书以及编程练习，希望对你有用
2024-11-02
web开发中的长度单位小结
这篇文章主要介绍了web开发中的长度单位主要包括px,pt，em等,需要的朋友可以参考下
2023-08-06
网页前端开发的一些尺寸单位(px,rem单位)
px单位是绝对单位，一般用于pc端网页开发,因为是绝对单位所以在移动端上的使用体验并不是很好,rem它是描述相对于当前根元素字体尺寸，是相对单位,它可以根据根元素的变换而
2023-08-06
WEB前端优化必备js/css压缩工具YUI-compressor详解与集成用法
压缩工具层次不穷，各有优点，选择适合的压缩工具为将来做项目开发使用是一件很重要的事情！！在这介绍YUI-compressor,需要的朋友可以参考下
2023-06-21
html,css,javascript是怎样变成页面的
浏览器是多进程的，有浏览器主进程，网络进程，渲染进程，插件进程等，在将html，css，javascript解析成一个页面的时候，就需要多个进程的分工合作
2023-05-01
常用Mime类型汇总
本文为大家整理了常用的文件对应的MIME类型，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
这篇文章介绍了postman中form-data、x-www-form-urlencoded、raw、binary的区别，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-12-28
网页中使用Unicode字符的介绍(&#,\u等)
国际组织制定了可以容纳世界上所有文字和符号的字符编码方案，称为Unicode，是通用字符集Universal Character Set的缩写，用以满足跨语言、跨平台进行文本转换、处理的要求
2021-11-27
前端实现字符串GBK与GB2312的编解码(小结)
这篇文章主要介绍了前端实现字符串GBK与GB2312的编解码(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2020-12-02
告别硬编码让你的前端表格自动计算的实例代码
这篇文章主要介绍了告别硬编码让你的前端表格自动计算,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-09-27

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

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容