0%

Google 高级搜索应用技术

语法 说明 演示
+ 搜索结果要求包含两个及两个以上的关键字 网站 +HTML5
- 表示逻辑“非”操作,排除相应的关键字 网站 -java
“”与() 可以用来搜索完整句子,可包括空格 “网站HTML5”
OR(要大些)与 搜索结果至少包含多个关键字中的任意一个
Intitle与allintitle 对网页标题的关键字查询 intitle:网站
Inurl与allinurl 查找网址链接的关键字 inurl:html5 网站
Intext与allintext 之搜索网页body部分中包含的文字 intext:网站
site: 搜索结果局限于某个具体网址或者网站频道 site:ttwinbug.com 网站
filetype与ext 用于文件文档搜索 filetype:pdf 网站
link 搜索所有链接到某个URL地址的网页 link:www.ttwinbug.com
related: 用来搜索结构内容方面相似的网页 related:www.ttwinbug.com
cache: 从Google服务器上缓存页面中查询信息 cache:ttwinbug.com
info: 用来显示与某连接相关的一系列搜索 info:ttwinbug.com

robots.txt写法
robots.txt是网站seo优化中起着很重要的作用,robots.txt是搜索引擎访问网站时需要查看的第一个文件,搜索引擎蜘蛛来到一个站点,首先要检查站点根目录下是否存在robots.txt,如果有,就会按照该文件中的内容确定访问范围,如果该文件不存在就会随意抓取,可能会抓到到重复路径或错误页面。下面我就和大家说说 rotbots.txt写法 ,希望对大家有所帮助。

阅读全文 »

今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式。分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。
什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理,根据客户端提交的callback的参数,返回一个callback(json)的数据,而客户端将会用script的方式处理返回数据,来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。

客户端JQuery.ajax的调用代码示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.ajax({
type : "get",
async:false,
url : "http://www.xxx.com/ajax.do",
dataType : "jsonp",
jsonp: "callbackparam",//服务端用于接收callback调用的function名的参数
jsonpCallback:"success_jsonpCallback",//callback的function名称
success : function(json){
alert(json);
alert(json[0].name);
},
error:function(){
alert('fail');
}
});
阅读全文 »

我们可以利用PC的浏览器来获得具体的位置情报,主要是利用Google Maps和JSON的外部服务来制作。

IP地址的取得

google谷歌已经为我们提供了获取IP地址的服务,我们可以直接利用,首先先添加google谷歌的AJAX API
通过这个API,我们可以获得经度,纬度,国家名,都市名称等信息。

阅读全文 »

IE还真是让设计师恨的牙痒痒的东西,且现在已经有IE6、IE7、IE8、IE9、IE10这个五种不同版本的浏览器,且都有一点小差异。但是没办法,为了让网页在每个浏览器中显示都一样还必须迁就它。

不过现在我基本上都不太愿意对低版本的IE去做兼容了。比如IE6、IE7这些直接忽略!IE8的话还凑合一下。好在IE9和IE10对网络标准支持都比较了,等IE9版本以上的浏览器普及以后就好很好了。

但是不做兼容归不做兼容,还是要简单的处理一下的。幸运的是 jQuery 提供了 browser 标记来让我们能判断现在的访客是用什么浏览器及版本:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var userAgent = window.navigator.userAgent.toLowerCase();
var version = $.browser.version;
$(".info").html(
"<h3>userAgent:</h3>" + userAgent + "<br />" +
"<h3>version:</h3>" + version
);
});
</script>

<body>
<div class="info"></div>
</body>

我用了一点简单的范例来显示目前浏览器的 userAgent 及 jQuery.browser.version,接着在 IE 6~8 中测试,但其中显示的结果还真是让错愕咧!

阅读全文 »

一、开始

写一个插件,首先是要往 jquery.fn 对象中添加一个由你命名的function对象

1
2
3
jQuery.fn.myPlugin = function() {
// code
};

如果要使用我们熟悉的 $ 符号,并不希望它与其他脚本库冲突,那么如下

1
2
3
4
5
(function( $ ) {
$.fn.myPlugin = function() {
// code
};
})( jQuery );
阅读全文 »

jQuery插件的开发包括两种:
一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。

1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展:

1.1 添加一个新的全局函数

添加一个全局函数,我们只需如下定义:

1
2
3
jQuery.foo = function() {   
alert('This is a test. This is only a test.');
};
阅读全文 »

展示图slider插件v 0.1

实现图片或内容在页面中,通过prev,和next按键进行上移动,下移动,左移动,右移动的插件。并实现循环展示。
实现在同一页面上多次调用该插件。
API

1
2
3
4
5
6
7
8
9
pic_box:'.pic_box', //装在图片的框
pic_num:3, //图片总数
pic_box_w:100, //每张图片的宽度
pic_box_h:100,
direction:'left', //方向选择
autodo:false, //是否自动运行
timeout:500, //自动跳转时间
prev:'.prev', //后退
next:'.next' //前进

链接: https://pan.baidu.com/s/1CBTJ6cwMdyTmw2ry-dk0Dw
提取码: d42c

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<SCRIPT LANGUAGE="JavaScript">
function switch_Tab(objTab)
{
//下面tab对于内容div块的id前缀
f_id="div_box_list_";
li_list=objTab.parentNode.getElementsByTagName("li");
//alert(li_list.length);
//alert(li_list[0]);
tagIndex=-1;
//判断鼠标停留在哪个TAB标签区域
for (i=0;i<li_list.length;i++)
{
if (li_list[i]==objTab)
{
tagIndex=i;
break;
}
}
if (tagIndex==-1)
return;

//根据上面找到停留的标签号,修改要显示对应的div块的display属性:block,不是的标签display属性:none.
for (i=0;i<li_list.length;i++)
{

objTagDiv=document.getElementById(f_id+(i+1));

//id="div_box_list_1"id="div_box_list_3",是哪一个tab标签
if (tagIndex==i)
{
objTagDiv.style.display='block';
}
else
{
objTagDiv.style.display='none';
}

}

}
</SCRIPT>



<style type="text/css">
#List_Box {
width: 750px;
height: auto;
}

#List_Box #List_Box_top {
height: 29px;
padding: 11px 0px 0px 15px;
}

#List_Box #List_Box_top ul li {
list-style-type: none;
float: left;
height: 21px;
width: 102px;
padding: 8px 0px 0px 28px;
font-weight: bold;
cursor: default;
}

.TAB_List {
width: 720px;
margin: auto;
height: 310px;
}

#list_box_li1,
#div_box_list_1 {
background-color: #99CC66;
}


#list_box_li2,
#div_box_list_2 {
background-color: #FFFF99;
}

#list_box_li3,
#div_box_list_3 {
background-color: #CC3300;
}
</style>
</head>

<body>

<DIV id="List_Box">
<DIV id="List_Box_top">
<UL>
<LI id="list_box_li1" onclick="switch_Tab(this)">TAB:I型</LI>
<LI id="list_box_li2" onclick="switch_Tab(this)">TAB:II型</LI>
<LI id="list_box_li3" onclick="switch_Tab(this)">TAB:III型</LI>
</UL>
</DIV>
<!-- 初始显示由下列属性决定:style="display: block; " -->
<DIV id="div_box_list_1" class="TAB_List" style="display: block; ">
<p>这是标签1<br />TAB:I型</p>
</DIV>
<DIV id="div_box_list_2" class="TAB_List" style="display: none; ">
<p>这是标签2<br />TAB:II型</p>
</DIV>
<DIV id="div_box_list_3" class="TAB_List" style="display: none; ">
<p>这是标签3<br />TAB:III型</p>
</DIV>
</DIV>
</body>

</html>

使用JS实现的两款不同效果的DIV展开和收缩效果,一个是整块的直接收缩和展开,一个是想舞台幕布一样上升和下降效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content" content="text/html charset=gb2312">
<title>slide文字框缩放伸展效果 站长学院www.pigzz.com</title>
<style type="text/css">
*{margin:0; padding:0;}
ul{list-style:none;}
.box{width:300px; margin:10px; border:1px solid #ccc; overflow:hidden; position:relative; font-size:12px;}
.oHx{height:30px; background:#eee; line-height:30px; font-size:14px; text-indent:14px; cursor:pointer;}
.fold{position:absolute; top:9px; right:12px;}
.box_content{line-height:18px; overflow:hidden; display:none;}
</style>
<script type="text/javascript">
function getElementsByClassName(className,id,tag){
tag = tag || "*";
if(id){
var id = typeof id == "string" ? $(id) : id;
}else{
var id = document.body;
}
var els = id.getElementsByTagName(tag),arr = [];
for(var i=0,n=els.length;i<n;i++){
for(var j=0,k=els[i].className.split(" "),l=k.length;j<l;j++){
if(k[j]==className){
arr.push(els[i]);
break;
}
}
}
return arr;
};
function Slide(slideClass,slideBtn,slideCon,slideSpeed) {
this.oSlides = getElementsByClassName(slideClass);
this.oTimer = null;
this.slideBtn = slideBtn;
this.slideCon = slideCon;
this.slideSpeed = slideSpeed;
}
Slide.prototype = {
oTimer:null,
_init:function (){
this._slideEvent();
},
_slideEvent:function (){
var This = this;
for(var i = 0,n=This.oSlides.length;i<n;i++){
(function(n){
var oSlide = This.oSlides[n];
var oSlideBtn = getElementsByClassName(This.slideBtn,oSlide)[0];
var oSlideCon = getElementsByClassName(This.slideCon,oSlide)[0];
oSlideBtn.onclick = function (){
if(oSlideCon.style.display == "block" && This.oTimer == null){
This._slideClose(oSlideCon);
}else if(!(oSlideCon.style.display == "block" ) && This.oTimer == null){
This._slideOpen(oSlideCon);
}
}
})(i)
}
},
_slideOpen:function (slideCon){
var This = this;
slideCon.style.display = "block";
slideCon.style.height = "auto";
var slideHeight = slideCon.offsetHeight;
slideCon.style.height = 0 + "px";
This.oTimer = setInterval(function (){
if(slideCon.offsetHeight < slideHeight){
slideCon.style.height = slideCon.offsetHeight + 2 + "px";
}else{
clearInterval(This.oTimer);
This.oTimer = null;
}
},This.slideSpeed);
},
_slideClose:function (slideCon){
var This = this;
This.oTimer = setInterval(function (){
if(slideCon.offsetHeight <= 0){
clearInterval(This.oTimer);
slideCon.style.display = "none";
This.oTimer = null;
}else{
slideCon.style.height =slideCon.offsetHeight - 2 + "px";
}
},This.slideSpeed);
}
}
</script>
</head>
<body>
<div class="box">
<div class="oHx slide">收缩2</div>
<div class="box_content">
<ul class="uft" style="padding:10px;">
<li><a href="/soft/11215.shtml" target="_blank">scscms V1.0 阳光企业网站系统</a></li><li><a href="/soft/9686.shtml" target="_blank">24点,VC++游戏源码</a></li><li><a href="/soft/11002.shtml" target="_blank">可记录图像的C#数据库记录单程序</a></li><li><a href="/soft/11134.shtml" target="_blank">jQuery 1.4 参考指南的实例源代码</a></li>
</ul>
</div>
</div>
<div class="box">
<div class="oHx slide">收缩3</div>
<div class="box_content">
<ul class="uft"style="padding:10px;">
<li><a href="/soft/11215.shtml" target="_blank">scscms V1.0 阳光企业网站系统</a></li><li><a href="/soft/9686.shtml" target="_blank">24点,VC++游戏源码</a></li><li><a href="/soft/11002.shtml" target="_blank">可记录图像的C#数据库记录单程序</a></li><li><a href="/soft/11134.shtml" target="_blank">jQuery 1.4 参考指南的实例源代码</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var mySlide = new Slide("box","slide","box_content",10);
mySlide._slideEvent();
</script>
</body>
</html>