Web前端知识技术整理（JS、Html、CSS简单应用）

易之阴阳

已于 2024-03-28 23:19:02 修改

阅读量765

点赞数 18

文章标签：前端 javascript html

于 2024-03-15 09:36:41 首次发布

本文链接：https://blog.csdn.net/liuzk423/article/details/129029146

版权

一、Checkbox多选框全部选中或取消:

不准确的代码：

Jquery1.6以前可以用.attr()方法，jquery1.6以后用.prop()方法

因为在1.6之前的所有版本中都使用一个方法(.attr())来处理attributes和properties。但是老的.attr()方法有一些bug，很难维护。jQuery1.6.1对Attributes模块进行了更新，移除了attributes和properties之间模棱两可的东西，

在不确定jquery版本的情况下可以用以下代码，对需要的选项click()方法。

二、鼠标滑过 :hover

在<a>标签上，鼠标滑过用:hover很正常，但是在<span>，<div>等其他标签时用：hover

有一个前提是：在html文件中添加<!DOCTYPE html >标签才能起作用：

注：在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作

用。在CSS2以后此伪类可以应用于任何对象

三、在IE浏览器里有一种现象，就是鼠标点击的地方会出现虚线，如下

解决的办法是加上一个css样式:

四、input的绚丽效果：

1、内部发光效果

2、外部发光效果

3、阴影效果

五、java里的时间类型通过json传到前台用js接收处理，可以用一下方法：

六、前台的js里定义的数组，通过ajax请求传到后台，后台也用特殊的方法（getParameterValues）获取，如下：

七、在IE浏览器里点击input上传文件

<input type=”file” id=”inputbtn”/>这个标签，鼠标必须点击到这个标签才能起作用，如果是用$(“#inputbtn”).click();这种方法是不能用的，这是IE的一种安全机制，以下是解决方案的例子：

八、一些背景图大小不合适时可以通过background-size这个属性控制背景图片的大小，如图：

九、锚点定位：

十、<canvas> 标签定义图形，比如图表和其他图像。

我们在调整画布大小时，希望画布中的图形保持不变，只是改变画布本身的大小。在Canvas元素的内部存在一个名为2d渲染环境（2d redering context）的对象，所以，通过Css设置画布尺寸会引起奇怪的效果。

解决方案：

通过Html设置画布大小。可以直接在Html页面上设置Canvas元素的大小：

<canvasid="testCanvas" width="200"height="100"></canvas>

也可以通过js设置画布大小：

varcanvas = document.getElementById("testCanvas");

canvas.width= 200;

canvas.height= 100;

第二种方式可以动态设置大小

十一、页面分为左右模式

没有使用框架的情况下，页面一般分为左右样式，但是如果按百分比来确定左右的

宽度，会出现很多问题，最常见的就是右边的被挤的换行了，还有就是，中间和屏幕的

左右两边大部分是用确定宽度的margin来实现的，再加上左右两个模块是用百分比，

这样在不同的分辨率下就不好控制了。所以我建议，左边的可以确定宽度，

然后float:left,右边的设一个最小宽度，再设个margin-left稍大于左边的宽度，

如下：

十二、详情里左边的点击改变颜色，实现代码如下

functionchangerresultcolor(flag){

varalls=flag.parentNode.children;

for(varj=0;j<alls.length;j++){//先清空所有的class

if(alls[j].nodeName == "A"){

alls[j].className="";

}

$(flag).addClass("resultcolora");//添加class

}

这里的class就是单独对需要的元素渲染，

十三、jquery实现的tab页的效果，代码和效果如下：

<scriptsrc="jquery-1.10.2.min.js"type="text/javascript"></script>

<scriptsrc="jquery-ui.js"type="text/javascript"></script>

<linkrel="Stylesheet" type="text/css"href="jquery-ui.css"/>

</head>

<body>

<div>

<divid="tabs">

<ul>

</ul>

<divid="tab1">Content 1</div>

<divid="tab2">Content 2</div>

<divid="tab3">Content 3</div>

</div>

$(document).ready(function(){

$( "#tabs" ).tabs({

activate:function( event, ui ) {}

});

</script>

</div>

</body>

</html>

十四、在展示一些详细信息时对样式把握不好就很乱，以下是总结的一种格式，可以很好展示：

十五、JQuery中each()的使用方法说明

each()函数是基本上所有的框架都提供了的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理。

jQuery和jQuery对象都实现了该方法，对于jQuery对象，只是把each方法简单的进行了委托：把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说：jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用。

十六、判断是否联网

window.navigator.onLine;

返回浏览器的联网状态.正常联网(在线)返回true,不正常联网(离线)返回false.一旦浏览器的联网状态发生改变,该属性值也会随之变化. 当用户点击链接或者脚本进行网络请求时,如果发现浏览器连接不上互联网.则该属性会被赋值为false.

各浏览器对该属性的实现有些不同.

在Chrome和Safari中,如果浏览器连接不上局域网 (LAN)或者路由器,就是离线状态; 其他情况都是在线状态. 所以当该属性值为false的时候,你可以说浏览器不能正常联网, 但如果该属性值为true的时候, 并不意味着浏览器一定能连接上互联网.还有其他一些可能引起误判的原因,比如你的电脑安装了虚拟化软件,可能会有一个虚拟网卡.它总是显示正常联网.因此,如果你想得到浏览器确切的联网状态,应该使用其他额外的检查手段.

2、可以使用加载图片的方法判断

var image = new Image();

image.src="http://www.baidu.com/img/baidu_sylogo1.gif?<%=Math.random()%>";

image.onload = function(){}

image.οnerrοr= function(){}

十七、动态加载js

要实现动态加载JS脚本有4种方法：

1、直接document.write

document.write("<script

src='test.js'><\/script>");

</script>

2、动态改变已有script的src属性

s1.src="test.js"

</script>

3、动态创建script元素

var oHead = document.getElementsByTagName('HEAD').item(0);

var oScript= document.createElement("script");

oScript.type = "text/javascript";

oScript.src="test.js";

oHead.appendChild( oScript);

</script>

　　这三种方法都是异步执行的，也就是说，在加载这些脚本的同时，主页面的脚本继续运行，如果用以上的方法，那下面的代码将得不到预期的效果。

要动态加载的JS脚本：a.js，以下是该文件的内容。

var str = "中国";

alert( "这是a.js中的变量：" + str );

4、原理：用XMLHTTP取得要脚本的内容，再创建 Script 对象。

注意：a.js必须用UTF8编码保存，要不会出错。因为服务器与XML使用UTF8编码传送数据。

<scriptlanguage="JavaScript">

functionGetHttpRequest() {

if ( window.XMLHttpRequest ) // Gecko

return new XMLHttpRequest() ;

else if ( window.ActiveXObject ) // IE

return newActiveXObject("MsXml2.XmlHttp") ;

}

functionAjaxPage(sId, url){

var oXmlHttp = GetHttpRequest() ;

oXmlHttp.OnReadyStateChange =function() {

if ( oXmlHttp.readyState == 4 ) {

if ( oXmlHttp.status == 200 || oXmlHttp.status== 304 ) {

IncludeJS( sId, url,oXmlHttp.responseText );

} else {

alert( 'XML request error: ' +oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ;

}

oXmlHttp.open('GET', url, true);

oXmlHttp.send(null);

}

functionIncludeJS(sId, fileUrl, source) {

if ( ( source != null ) && (!document.getElementById( sId ) ) ){

var oHead =document.getElementsByTagName('HEAD').item(0);

var oScript = document.createElement("script" );

oScript.language ="javascript";

oScript.type ="text/javascript";

oScript.id = sId;

oScript.defer = true;

oScript.text = source;

oHead.appendChild( oScript );

}

AjaxPage("scrA", "b.js" );

alert("主页面动态加载JS脚本。");

alert("主页面动态加载a.js并取其中的变量：" + str );

</script>

注：.处理服务器端的响应

* *XMLHttpRequest对象中有一个readyState属性

* *0 代表未初始化,还没有调用open方法

* *1 代表正在加载,open方法已被调用,但send方法还没有被调用

* *2 代表已经加载完毕,send已经被调用,请求已经开始.

* *3 代表交互中,服务器正在发送数据

* *4 代表完成,响应发送完毕

200:服务器处理成功

304:文件没有被修改

十八、liger ui clone

很多时候同一个div需要重复使用，这时候就需要克隆一下再用，代码如下：

易之阴阳

关注

18
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
Web前端知识技术整理（JS、Html、CSS简单应用）

jQuery和jQuery对象都实现了该方法，对于jQuery对象，只是把each方法简单的进行了委托：把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说：jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。这三种方法都是异步执行的，也就是说，在加载这些脚本的同时，主页面的脚本继续运行，如果用以上的方法，那下面的代码将得不到预期的效果。j++){//先清空所有的class。宽度，会出现很多问题，最常见的就是右边的被挤的换行了，还有就是，中间和屏幕的。
复制链接

扫一扫