常用html、demo代码

发布时间：2015-10-15, 14:45:06 分类：HTML | 编辑 off 网址 | 辅助

图集1/30

正文 9756字数 27,233,147阅读

暗网网址导航hidden wiki

http://zqktlwi4fecvo6ri.onion

Run code

Cut to clipboard

HTML特殊字符编码对照表


console.log(allnum);
javascript:;
vertical-align:middle;
strconv=yes+js
echo str_ireplace("WORLD","Shanghai","Hello world!");//不区分大小写
<a href="javascript:scroll(0,0)">返回顶部</a>
jquery多个节点绑定同一个事件
$('#begin,#end') 用逗号隔开

target="_blank"
index.php?g=Admin&m=Login
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
 location.href = url;

autocomplete="off"
<form name="input" action="html_form_action.asp" method="get">
Username: 
<input type="text" name="user" />
<input type="submit" value="提交" />
<input type="button" value="提交">
</form>

$.ajax({
	type: "POST",
	url:'/index.php?g=User&m=Post&a=Message&ajax=ajax',
	data:$('#myform').serialize(),
	error: function(request) {
		alert("提交失败");
	},
	success: function(data) {
		if(data>0){
			alert('留言提交成功！');
			location.reload();
		}else alert("提交失败");
		
	}
});

function ajaxpost(tel,pass){
    $.ajax( {
        url:"/index.php/Home/Register/is_login.html", 
        type: "post", 
        data:"tel="+tel+"&pass="+pass,
        //dataType: "json",
        //cache: false,
        //async: false,
        beforeSend: function(){
         // Handle the beforeSend event
        },
        success: function(data){
            
        }
    });
}

 <a href="javascript:scroll(0,0)">顶部</a> <a href="#copy">底部</a>

<meta charset="UTF-8" />

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

Run code

Cut to clipboard

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="icon" href="/favicon.ico">
<meta name="keywords" content="常用代码">
<meta name="description" content="isWTF's blog!!">
</head>

<body>

</body>

</html>

Run code

Cut to clipboard

$.ajax( {
	url: '/index.php?s=/addon/WeiSite/WeiSite/ForgetPassword/tel/'+shoujihao+'/codeddd/'+codeddd+'.html', //这里是静态页的地址
	type: "GET", //静态页用get方法，否则服务器会抛出405错误
	//dataType: "json",
	//cache: false,
	//async: false,
	beforeSend: function(){
	 // Handle the beforeSend event
	},
	success: function(data){
		//var result = $(data).find("另一个html页面的指定的一部分").html();
	}
});

Run code

Cut to clipboard

<link rel="apple-touch-icon" size="72x72" href="/icon-ipad.png" />
<link rel="apple-touch-icon" size="114x114" href="/icon-iphone4.png" />
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<meta name="keywords" content="常用代码">
<meta name="description" content="isWTF's blog!!">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />

Run code

Cut to clipboard

I('post.id',0,'intval'); // 用intval过滤$_POST['id']
I('get.title','','strip_tags'); // 用strip_tags过滤$_GET['title']

Run code

Cut to clipboard

UC 浏览器的部分私有Meta 属性
设置屏幕方向为横屏还是竖屏
<meta name="screen-orientation" content="portrait|landscape">
设置是否全屏，yes表示强制浏览器全屏
<meta name="full-screen" content="yes">
缩放不出滚动条
<meta name="viewport" content="uc-fitscreen=no|yes"/>
设置no后用户缩放与标准浏览器缩放一直，设置为yes后，用户缩放金放到图片和文字，不出现横向滚动条。
排版
<meta name="layoutmode" content="fitscreen|standard" />
  fitscreen模式简化页面处理，适合页面阅读节省流量，standard模式和标准浏览器一致；一旦设置layoutmode meta后，用户使用浏览器提供的的排版模式选项将会无效。
夜间模式
<meta name="nightmode" content="enable|disable"/>
nightmode的值设置为disable后，即使用户使用浏览器的夜间模式，页面的表现也仍然是非夜间模式。
强制图片显示
<meta name="imagemode" content="force"/>
 UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode， 不影响子页面。通过META设置图片加载方式会作用于整个页面，如果希望对单个图片进行设置，那么可以使用这个
<img src="..." show="force">
应用模式
<meta name="browsermode" content="application"/>
使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。

QQ 浏览器x5内核定制标签说明
设置屏幕方向
<meta name="x5-orientation" content="portrait|landscape" />
设置全屏
<meta name="x5-fullscreen" content="true" />
设置屏幕模式
<meta name="x5-page-mode" content="app" />

对于控制全屏的meta 标签，UC 跟QQ 处理的方式稍有不同：区别在于处理系统状态栏，UC 是直接覆盖系统状态栏，而QQ 仍然保留之。

Run code

Cut to clipboard


$("p").css("color","red");
//同时设置字体大小和背景色   
$("p").css({"fontSize":"30px" ,"backgroundColor":"#ccc"});
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

Run code

Cut to clipboard

header('Content-Type:text/html;charset=utf-8'); //避免输出乱码 

<img  title="点击刷新" src="cache/yzm.php" align="absbottom" onclick="this.src='cache/yzm.php?'+Math.random();" />

Run code

Cut to clipboard

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

<link rel="stylesheet" href="http://lizhenqiu.com/templates/default/style.css" type="text/css" media="screen">

<script type="text/javascript">jQuery(".slideTxtBox").slide(); </script>

Run code

Cut to clipboard

Yourphp手册
简单文本编辑器

data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;font-family:georgia;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;"> lizhenqiu.com

Run code

Cut to clipboard

Chrome提供了一个简单的方法。首先，按“F12”打开控制台，然后输入：

document.designMode = "on"

Run code

Cut to clipboard

添加到收藏夹URL填写下面的即可在当前页面点击收藏夹编辑页面

javascript:(function(){document.designMode = "on" })();

Run code

Cut to clipboard

接下来，你就可以编辑屏幕上的文本内容了。

编辑器

data:text/html, <html contenteditable>

Run code

Cut to clipboard

如果你想找回不小心关闭的Tab页面，只需要同时按下“Control"（Mac用户请按“Command”）、“Shift"和“T”。

js随机数

function getRandom(n){
        return Math.floor(Math.random()*n+1)
        }

Run code

Cut to clipboard

top.location.href 和 localtion.href 有什么不同

top.location.href=”url”

Run code

Cut to clipboard

在顶层页面打开url（跳出框架）　　

self.location.href=”url”

Run code

Cut to clipboard

仅在本页面打开url地址　　

parent.location.href=”url”

Run code

Cut to clipboard

　
在父窗口打开Url地址　　

this.location.href=”url”

Run code

Cut to clipboard

　　
用法和self的用法一致
if (top.location == self.location) 判断当前location 是否为顶层来禁止frame引用　如果页面当中有自定义的frame的话，也可以将parent self top换为自定义frame的名称效果就是在自定义frame窗口打开url地址

实际中可能这样使用

if(top !== self){ top.location.href = location.href; }

Run code

Cut to clipboard

禁止frame引用
以下是从网上找到的一个例子，不是很直观，我加了上面那三行代码，可以先去掉，再加上，看一下效果，就很清楚了以下是top.htm 代码

<script language=javascript> function rs(){

        if(top !== self){             top.location.href = location.href;         }   parent.left.location.href="top.htm" parent.bot.location.href="top.htm" } < /script> < input type=button name=name value="ksdj" onclick=rs();>

Run code

Cut to clipboard

以下是一个随意文件名的htm文件:

<FRAMESET COLS="150,*"> < FRAME SRC="left.htm" name=left> < FRAMESET ROWS="150,*"> < FRAME SRC="top.htm" name=top> < FRAME SRC="bot.htm" name=bot> < /FRAMESET> < /FRAMESET>

Run code

Cut to clipboard

你自己试试,我想你要的可能就是这样的效果!

top表示主窗口，location表示当前窗口，如果你的文件只有一个框架，没有iframe和frmaeset，那么是完全一致的，没有区别。

top.location是在顶层frame中打开新页
window.location是在当前frame中打开新页
parent.location 在当前窗口的父窗口打开Url地址

<select id="isAudit" name="isAudit"> 
<option value="2">全部</option> 
<option value="1" selected = "selected">通过</option> 
<option value="0">未通过</option> 
</select>

Run code

Cut to clipboard

修改ID增加ID属性，修改class同理
$('.div').attr('id','newid');

如果是给标签添加class样式可以这样
$('#div').addClass('css类名');

strtotime("-1 week")， strtotime("-n days");可以很方便的获取当前日期的前n天、周、月的时间戳

Run code

Cut to clipboard

舒适网页配色方案
px像素转换rem单位工具

（支付宝）给作者钱财以资鼓励（微信）→

标签: 常用20 html22 demo2 代码58

有过 279 条评论 »

广西南宁市 2017-05-17, 10:52:03

和区别
在早先发布的html规范中 /<hr>/<img>等标记元素是无需“封闭自身”的，这就造成了html规范本身的不严谨，所以后来参考了更规范的XML语言的语法推出了xhtml。
在xhtml中所有类似br这样的孤立标签都需要自行封闭，具体的做法就是在标签名字的后面跟个“/”，例如 ，因此，是没有这个写法的。从逻辑上讲 = ...，这样做的目的是为了尽量减少网页的代码量，同时保持逻辑严谨。

reply | quote | #¹⁵⁴

广西南宁市 2017-05-17, 10:52:41

TCP协议与UDP协议的区别
首先咱们弄清楚，TCP协议和UCP协议与TCP/IP协议的联系，很多人犯糊涂了，一直都是说TCP/IP协议与UDP协议的区别，我觉得这是没有从本质上弄清楚网络通信！
TCP/IP协议是一个协议簇。里面包括很多协议的。UDP只是其中的一个。之所以命名为TCP/IP协议，因为TCP,IP协议是两个很重要的协议，就用他两命名了。
TCP/IP协议集包括应用层,传输层，网络层，网络访问层。
其中应用层包括:
超文本传输协议(HTTP):万维网的基本协议.
文件传输(TFTP简单文件传输协议):
远程登录(Telnet),提供远程访问其它主机功能,它允许用户登录
internet主机,并在这台主机上执行命令.
网络管理(SNMP简单网络管理协议),该协议提供了监控网络设备的方法,以及配置管理,统计信息收集,性能管理及安全管理等.
域名系统(DNS),该系统用于在internet中将域名及其公共广播的网络节点转换成IP地址.
其次网络层包括:
Internet协议(IP)
Internet控制信息协议(ICMP)
地址解析协议(ARP)
反向地址解析协议(RARP)
最后说网络访问层:网络访问层又称作主机到网络层(host-to-network).网络访问层的功能包括IP地址与物理地址硬件的映射,以及将IP封装成帧.基于不同硬件类型的网络接口,网络访问层定义了和物理介质的连接.
当然我这里说得不够完善，TCP/IP协议本来就是一门学问，每一个分支都是一个很复杂的流程，但我相信每位学习软件开发的同学都有必要去仔细了解一番。
下面我着重讲解一下TCP协议和UDP协议的区别。
TCP（Transmission Control Protocol，传输控制协议）是面向连接的协议，也就是说，在收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来，其中的过程非常复杂，只简单的描述下这三次对话的简单过程：主机A向主机B发出连接请求数据包：“我想给你发数据，可以吗？”，这是第一次对话；主机B向主机A发送同意连接和要求同步（同步就是两台主机一个在发送，一个在接收，协调工作）的数据包：“可以，你什么时候发？”，这是第二次对话；主机A再发出一个数据包确认主机B的要求同步：“我现在就发，你接着吧！”，这是第三次对话。三次“对话”的目的是使数据包的发送和接收同步，经过三次“对话”之后，主机A才向主机B正式发送数据。
详细点说就是：（文章部分转载http://zhangjiangxing-gmail-com.iteye.com，主要是这个人讲解得很到位，的确很容易使人理解！）
TCP三次握手过程
1 主机A通过向主机B 发送一个含有同步序列号的标志位的数据段给主机B ,向主机B 请求建立连接,通过这个数据段,
主机A告诉主机B 两件事:我想要和你通信;你可以用哪个序列号作为起始数据段来回应我.
2 主机B 收到主机A的请求后,用一个带有确认应答(ACK)和同步序列号(SYN)标志位的数据段响应主机A,也告诉主机A两件事:
我已经收到你的请求了,你可以传输数据了;你要用哪佧序列号作为起始数据段来回应我
3 主机A收到这个数据段后,再发送一个确认应答,确认已收到主机B 的数据段:"我已收到回复,我现在要开始传输实际数据了
这样3次握手就完成了,主机A和主机B 就可以传输数据了.
3次握手的特点
没有应用层的数据
SYN这个标志位只有在TCP建产连接时才会被置1
握手完成后SYN标志位被置0

TCP建立连接要进行3次握手,而断开连接要进行4次

1 当主机A完成数据传输后,将控制位FIN置1,提出停止TCP连接的请求
2 主机B收到FIN后对其作出响应,确认这一方向上的TCP连接将关闭,将ACK置1
3 由B 端再提出反方向的关闭请求,将FIN置1
4 主机A对主机B的请求进行确认,将ACK置1,双方向的关闭结束.
由TCP的三次握手和四次断开可以看出,TCP使用面向连接的通信方式,大大提高了数据通信的可靠性,使发送数据端
和接收端在数据正式传输前就有了交互,为数据正式传输打下了可靠的基础
名词解释
ACK TCP报头的控制位之一,对数据进行确认.确认由目的端发出,用它来告诉发送端这个序列号之前的数据段
都收到了.比如,确认号为X,则表示前X-1个数据段都收到了,只有当ACK=1时,确认号才有效,当ACK=0时,确认号无效,这时会要求重传数据,保证数据的完整性.
SYN 同步序列号,TCP建立连接时将这个位置1
FIN 发送端完成发送任务位,当TCP完成数据传输需要断开时,提出断开连接的一方将这位置1
TCP的包头结构：
源端口 16位
目标端口 16位
序列号 32位
回应序号 32位
TCP头长度 4位
reserved 6位
控制代码 6位
窗口大小 16位
偏移量 16位
校验和 16位
选项 32位(可选)
这样我们得出了TCP包头的最小长度，为20字节。

UDP（User Data Protocol，用户数据报协议）
（1） UDP是一个非连接的协议，传输数据之前源端和终端不建立连接，当它想传送时就简单地去抓取来自应用程序的数据，并尽可能快地把它扔到网络上。在发送端，UDP传送数据的速度仅仅是受应用程序生成数据的速度、计算机的能力和传输带宽的限制；在接收端，UDP把每个消息段放在队列中，应用程序每次从队列中读一个消息段。
（2）由于传输数据不建立连接，因此也就不需要维护连接状态，包括收发状态等，因此一台服务机可同时向多个客户机传输相同的消息。
（3） UDP信息包的标题很短，只有8个字节，相对于TCP的20个字节信息包的额外开销很小。
（4）吞吐量不受拥挤控制算法的调节，只受应用软件生成数据的速率、传输带宽、源端和终端主机性能的限制。
（5）UDP使用尽最大努力交付，即不保证可靠交付，因此主机不需要维持复杂的链接状态表（这里面有许多参数）。
（6）UDP是面向报文的。发送方的UDP对应用程序交下来的报文，在添加首部后就向下交付给IP层。既不拆分，也不合并，而是保留这些报文的边界，因此，应用程序需要选择合适的报文大小。
我们经常使用“ping”命令来测试两台主机之间TCP/IP通信是否正常，其实“ping”命令的原理就是向对方主机发送UDP数据包，然后对方主机确认收到数据包，如果数据包是否到达的消息及时反馈回来，那么网络就是通的。
UDP的包头结构：
源端口 16位
目的端口 16位
长度 16位
校验和 16位

小结TCP与UDP的区别：
1.基于连接与无连接；
2.对系统资源的要求（TCP较多，UDP少）；
3.UDP程序结构较简单；
4.流模式与数据报模式；
5.TCP保证数据正确性，UDP可能丢包，TCP保证数据顺序，UDP不保证。

#1634, 和区别
在早先发布的html规范中 /<hr>/<img>等标记元素是无需“封闭自身”的，这就造成了html规范本身的不严谨，所以后来参考了更规范的XML语言的语法推出了xhtml。
在xhtml中所有类似br这样的孤立标签都需要自行封闭，具体的做法就是在标签名字的后面跟个“/”，例如 ，因此，是没有这个写法的。从逻辑上讲 = ...，这样做的目的是为了尽量减少网页的代码量，同时保持逻辑严谨。

#,广西南宁市,2017-05-17,10:53:21, 很有帮助，不过PING命令似乎是基于ICMP的而非UDP？

#,广西南宁市,2017-05-17,10:53:45,@1, 确实是基于 ICMP协议的 “Echo Request” 报文进行工作

#,广西南宁市,2017-05-17,11:03:07, TCP(传输控制协议)：

1)提供IP环境下的数据可靠传输(一台计算机发出的字节流会无差错的发往网络上的其他计算机，而且计算机A接收数据包的时候，也会向计算机B回发数据包，这也会产生部分通信量)，有效流控，全双工操作(数据在两个方向上能同时传递)，多路复用服务，是面向连接，端到端的传输;

2)面向连接：正式通信前必须要与对方建立连接。事先为所发送的数据开辟出连接好的通道，然后再进行数据发送，像打电话。

3)TCP支持的应用协议：Telnet(远程登录)、FTP(文件传输协议)、SMTP(简单邮件传输协议)。TCP用于传输数据量大，可靠性要求高的应用。

UDP(用户数据报协议，User Data Protocol)

1)面向非连接的(正式通信前不必与对方建立连接，不管对方状态就直接发送，像短信，QQ)，不能提供可靠性、流控、差错恢复功能。UDP用于一次只传送少量数据，可靠性要求低、传输经济等应用。

2) UDP支持的应用协议：NFS(网络文件系统)、SNMP(简单网络管理系统)、DNS(主域名称系统)、TFTP(通用文件传输协议)等。

总结：

TCP：面向连接、传输可靠(保证数据正确性,保证数据顺序)、用于传输大量数据(流模式)、速度慢，建立连接需要开销较多(时间，系统资源)。

UDP：面向非连接、传输不可靠、用于传输少量数据(数据包模式)、速度快。

#,广西南宁市,2017-05-17,11:09:54, QQ 为什么以 UDP 协议为主，以 TCP 协议为辅？

reply | quote | #¹⁵⁵

广西南宁市 2017-05-17, 16:54:13

TextArea里Placeholder换行使用jQuery的watermark控件 jquery.watermark.js
问题
　　页面上使用TextArea控件时，会时不时的想给个提示，比如按照一定方式操作之类的。正常情况下，会使用Placeholder，但这样的提示是不会换行的，无论是用\r\n，还是用 ，都不起作用。

　　前段时间碰到这个问题，一直没有解决，所有页面上的Placeholder都是一行到底，丑死了。

　　无意中，一个朋友提供了一个方法，完美的解决了问题，贴出来和大家分享一下：

　　CSS：

#text1::-webkit-input-placeholder::after {
    display:block;
    content:"Line 2\A Line 3";
}

#text2::-webkit-input-placeholder::before {
    color:#666;
    content:"Line 1\A Line 2\A Line 3\A";
}

Run code

Cut to clipboard

火狐和其他浏览器不兼容，有自己专门的方法(以下)：

textarea::-moz-placeholder:after{
  content:"line@ \A line#";/*  \A 表示换行  */
  color:red;
};

Run code

Cut to clipboard

实际测试了一下，还是不能用。

reply | quote | #¹⁵⁶

广西南宁市 2017-05-17, 17:23:09

说明：
scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。

#,广西南宁市,2017-05-17,17:24:01, scrollHeight返回元素的完整的高度，以像素为单位.
当一个元素拥有滚动条时（比如由于 CSS 的 overflow 属性），这些属性和 offsetHeight 不同，offsetHeight只是报告元素的可见部分的大小。这是非标准的但却得到很好支持的属性。
这个属性是非标准的，所以在不同浏览器中可能会存在差异，例如：
在Firefox浏览器中：
scrollHeight就是滚动条可滚动的部分还要加上border的高度还要加上横向滚动条不可用的高度,与clientHeight比起来,多个border的高度跟横向滚动条不可用的高度.
在IE浏览器中：
指这个对象它所包含的对象的高度加上border的高度和margin

#,广西南宁市,2017-05-17,17:26:07, 详情请看这个jsfiddle：http://jsfiddle.net/1hzhrwLs/

<style>body { padding: 50px; }
div { width: 120px; border: 1px solid gray; }
.long { width: 400px !important; }
.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
}</style>

<div class="operateTarget ellipsis"></div>
<div class="operateTarget ellipsis long"></div>
<div class="operateTarget"></div>
<div class="ellipsis"></div>

<script>
$("div").text('very_very_very_very_long_text');

$(".operateTarget").map(function() {
    if (this.offsetWidth < this.scrollWidth) {
        $(this).css("color", "red");
    }
});
</script>

Run code

Cut to clipboard

reply | quote | #¹⁵⁷

广西南宁市 2017-05-18, 17:25:39

冒泡排序算法的可视化

<!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <style>/* Styles go here */

.value-line{
  margin-bottom:1px;
  background:green;
  color:white;
  
}

</style>
    <script>// Code goes here

function ctrl($scope,$timeout){
  var defaultData=[37,28,29,24,21,11,5,10,4,3,8,1,25,12,20,30];

 $scope.reset=function(){
    $scope.data=defaultData.map(function(i){
      return i;
    });
    pointer=0;
    checklen=$scope.data.length;
	  $scope.alertMsg="";
   
  }
	 
  
  var sorting=function(){
    var data=$scope.data;
  
    
    if(data[pointer]>data[pointer+1])
    {
      var tmp=data[pointer]; 
      data[pointer]=data[pointer+1];
      data[pointer+1]=tmp;
    }
    
   pointer++;
    if( pointer>=checklen){
      checklen--;
      pointer=0;
    }
    
    if(checklen <=0){
     $scope.alertMsg="排序结束";
    }else{
      $timeout(sorting,100);
    }
   
   };
 
  $scope.start=function(){
    $timeout(sorting,100);
   
  }
		
		$scope.reset();
  
}</script>
  </head>

  <body>
    <h1>冒泡排序算法视觉化</h1>
  
  
  <div ng-controller="ctrl">
    <div class="value-line" ng-repeat="i in data" style="width:{{i*10}}px;">{{i}}</div>
    
    <button ng-click="start()">排序</button>
    <button ng-click="reset()">重置</button>
    <span style="color:red">{{alertMsg}}</span>
    
  </div>
  
  
  </body>

</html>

Run code

Cut to clipboard

reply | quote | #¹⁵⁸

广西南宁市 2017-05-19, 18:47:23

jQuery实现高亮显示网页关键词的方法

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery文字高亮显示</title>
<style type="text/css">
.highlight {
  background-color: #fff34d;
  -moz-border-radius: 5px; /* FF1+ */
  -webkit-border-radius: 5px; /* Saf3-4 */
  border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
}
.highlight {
  padding:1px 4px;
  margin:0 -4px;
}
</style>
</head>
<body>
Search: <input type="text" id="text-search" />
<p>This can include web design, web content development, client liaison, client-side/server-side scripting, web server and network security configuration, and e-commerce development. However, among web professionals, "web development" usually refers to the main non-design aspects of building web sites: writing markup and coding. Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, or social ntwork services.</p>
(Text from Wikipedia)
<script type="text/javascript" src="https://lizhenqiu.com/templates/default/jquery.min.js"></script>
<script type="text/javascript">
jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {
 var skip = 0;
 if (node.nodeType == 3) {
  var pos = node.data.toUpperCase().indexOf(pat);
  if (pos >= 0) {
  var spannode = document.createElement('span');
  spannode.className = 'highlight';
  var middlebit = node.splitText(pos);
  var endbit = middlebit.splitText(pat.length);
  var middleclone = middlebit.cloneNode(true);
  spannode.appendChild(middleclone);
  middlebit.parentNode.replaceChild(spannode, middlebit);
  skip = 1;
  }
 }
 else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
  for (var i = 0; i < node.childNodes.length; ++i) {
  i += innerHighlight(node.childNodes[i], pat);
  }
 }
 return skip;
 }
 return this.each(function() {
 innerHighlight(this, pat.toUpperCase());
 });
};
jQuery.fn.removeHighlight = function() {
 function newNormalize(node) {
  for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {
    var child = children[i];
    if (child.nodeType == 1) {
      newNormalize(child);
      continue;
    }
    if (child.nodeType != 3) { continue; }
    var next = child.nextSibling;
    if (next == null || next.nodeType != 3) { continue; }
    var combined_text = child.nodeValue + next.nodeValue;
    new_node = node.ownerDocument.createTextNode(combined_text);
    node.insertBefore(new_node, child);
    node.removeChild(child);
    node.removeChild(next);
    i--;
    nodeCount--;
  }
 }
return this.find("span.highlight").each(function() {
  var thisParent = this.parentNode;
  thisParent.replaceChild(this.firstChild, this);
  newNormalize(thisParent);
 }).end();
};
</script>
<script type="text/javascript">
$(function() {
  $('#text-search').bind('keyup change', function(ev) {
    // pull in the new value
    var searchTerm = $(this).val();
    // remove any old highlighted terms
    $('body').removeHighlight();
    // disable highlighting if empty
    if ( searchTerm ) {
      // highlight the new term
      $('body').highlight( searchTerm );
    }
  });
});
</script>
</body>
</html>

Run code

Cut to clipboard

reply | quote | #¹⁵⁹

广西南宁市 2017-05-20, 16:09:08

使用jquery修改css中带有!important的样式属性
通过 $("div.test").css("width","100px");和 $("div.test").css("width","100px !important");是无效的
要想修改div的width，可以通过如下这种方式：

$("div.test").css("cssText", "width:650px !important;");

Run code

Cut to clipboard

要想修改多个属性，可以这么做：

$("div.test").css("cssText", "width:650px !important;overflow:hidden !important");

Run code

Cut to clipboard

reply | quote | #¹⁶⁰

广西南宁市 2017-05-20, 16:09:41

jquery单引号和双引号的区别及使用注意
可以执行的语法：$("ul li a").filter(":contains('佳能'),:contains('松下'),:contains('卡西欧')").css("color","red");
错误的语法：$("ul li a").filter(":contains("佳能"),:contains("松下"),:contains("卡西欧")").css("color","red");
据资料显示在js中单引号和双引号都是一样的，但是在使用是去碰到了问题，于是乎百度给我答案，说是平时使用的时候尽量用单引号，只有碰到嵌套的时候才会同时用两种引号。即外面是单引号的时候里面就要用双引号，外面是双引号的时候里面就要用单引号，总之不能同时用双引号或者是单引号；

#,广西南宁市,2017-05-20,16:11:10, 从代码编译的角度说的话，单引号在JS中被浏览器（IE，Chrome，Safari）编译的速度更快（在FireFox中双引号更快）

#,广西南宁市,2017-05-20,16:11:34, 双引号需要按住shift键才能输入，比起单引号输入起来要麻烦。

#,广西南宁市,2017-05-20,16:11:51, 个人习惯，在js中我都用单引号，在json中，我都用双引号。

#,广西南宁市,2017-05-20,16:12:26, 建议用单引号，HTML 中用双引号，需要创建 HTML 组件的时候，随时复制黏贴就搞定了

#,广西南宁市,2017-05-20,16:12:37, 如果是一个人做开发，没有顾忌，可以跟随自己的喜好，JavaScript 同时支持两种引号，很大程度上跟你的输出有关，如果你需要输出双引号，那么外面就用单引号套，反之亦然

reply | quote | #¹⁶¹

广西南宁市 2017-05-22, 16:13:42

用canvas做画板，用 <input type="color">来控制颜色

<input type="color" name="" id="colorSelect" value="" />
<canvas  id="canvas" width="320" height="200" style="border:1px solid #eee;">您的浏览器不支持canvas</canvas>
<script>     
        var selector = document.getElementById("colorSelect");
        selector.onchange = function(){
            var color = this.value;
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var w = canvas.width , h = canvas.height;
            ctx.fillStyle = color;
            ctx.fillRect(0, 0, w, h);
        }
</script>

Run code

Cut to clipboard

#,广西南宁市,2017-05-22,16:14:38,

<input type="color" name="" id="newcolorSelect" value="" />
<script>     
        var selector = document.getElementById("newcolorSelect");
        selector.onchange = function(){
            var newcolor = this.value;
			alert(newcolor);
        }
</script>

Run code

Cut to clipboard

#,广西南宁市,2017-05-22,16:26:13, JquerySimpleColor颜色选择器 11个JavaScript颜色选择器插件

reply | quote | #¹⁶²

Records:279 18/31 «‹14 15 16 17 18 19 20 21 22 ›»

lizhenqiu blog

常用html、demo代码

相关日志

有过 279 条评论 »

留下評論