率先,用到的框架当然是本身的框架mass
Framework,当然你用别样框架也得以,如jQuery,未有啥样复杂的事物。只要弄懂原理,一下子就会搞出来。想必,以往你们办事也超过做找寻框的活计。

比方说有取缔右键点击、隐蔽搜索文本框文字、在新窗口中开发链接、检查评定浏览器、预加载图片、页面样式切换、全体列等高、动态调整页面字体大小、获得鼠标指针的X值Y值、验证成分是不是为空、替换来分、延迟加载、验证成分是不是存在于Jquery集结中、使DIV可点击、克隆对象、使成分居中、总结成分个数、使用谷歌主机上的Jquery类库、禁止使用Jquery效果、消释Jquery类库与别的Javascript类库冲突难题。

由于自身从未后端,因而取用贰个对象作为当地数据库。而作者前几天要做的,其实远远比suggest高档,相符IDE的语法提醒的事物。当前成品已放置github上。

切切实实如下:

好了,我们初始吧。首先是构造层,装了FF的同窗能够在百度首页查看源码,当输入多少个假名时,会动态变化了那几个HTML。可是怎能够,其成功是二个DIV放到寻找栏的下方,里面放了三个table,table动态贮存候选词。何况候选词借使不是客商输入的一些,也正是说,JS自动补充的部分它会把它们放到四个b标签加粗呈现出来。然而,
作者感觉用table太重量化,改用了ul列表,为了让IE6也支持擦过变色效果,笔者还在其间套了多少个a标签。为了放便取词,作者还为它,加多了叁脾性质,专门用来寄存补充元整后的词汇。大概是以此样子:复制代码 代码如下:

  1. 禁止右键点击
  • 客商输入部分 自动唤醒有个别
  • 顾客输入部分 机动提示有些

复制代码 代码如下:

看风流倜傥看构造,其实正是两有个别,div#search_wrapper为可见,div#suggest_wrapper为“不可以看到”(只要个中未有li成分,它就不占空间,展现不出去了)。input寻找框有个属性autocomplete,用于关掉浏览器自带的提醒意义。关于data-value,这种命名情势是HTML5引入的章程,用于定义要缓存的数额,data-*在新锐浏览器中会放到一个叫dataset的对象中。比方:
复制代码 代码如下:

$(document).ready(function(){
$(document).bind(“contextmenu”,function(e){
return false;
});
});

12:00

  1. 隐身寻觅文本框文字

我们得以透过如下方式访谈到它: 复制代码
代码如下: var el= document.getElementById; alert; alert(
el.dataset.meal提姆e 卡塔尔;
当然,你也得以不要安装属性,直接取a标签的innerText或textContext。
注意:完整的词汇 = 顾客输入部分 +
自动提醒某些。因而你绝不在a标签里面加这么多东西,幸免现身空格什么的,招致检索战败!
接着是体制部分,可是不详述了。相当的轻便: 复制代码 代码如下: #search_wrapper {
height:50px; } #search{ width:300px; } #suggest_wrapper{
position:relative; } #suggest_list{ position:absolute; z-index:100;
list-style: none; margin:0; padding:0; background:#fffafa; border:1px
solid #ccc; border-bottom:0 none; } #suggest_list li a{ display:
block; height:20px; width:304px; color: #000; border-bottom:1px solid
#ccc; line-height:20px; text-decoration: none; } #suggest_list li
a:hover, .glow_suggest { background:#ffff80; }
好了,到第一了。由于作者从未后台,要选用四个当地对象作为本土数据库。那对象自然是个JS对象了。大家遍历对象平常都是obj.aaa.bbb.ccc,那样平素点下去,其实每到多少个点号时,正是用for
in
循环进行遍历。由此大家监听文本内容的输入的处境,生机勃勃但产生变化就拿走输入框的剧情,然后在for
in
循环中比较。假若是与那些输入值早先的品质就抽出来,放到贰个数组中,一直取够13个,然后把那些数组的剧情拼接成上述描绘的li成分格式,风华正茂并贴到ul成分之内。当中,大家还要注意点中,假如意气风发开首就输入点号,我们就取window对象的12个属性吧,现在遇到点号就切换那些指标。
好了,初阶写码,由于用到本人的框架,大家能够到这里去下。在类型首页有README,教您是怎么设置微型.Net服务器与查看文书档案的。意气风发最早,你就姑且把它就是是增加了模块加载功能的jQuery,API
十分九神似。大家要用到它的平地风波模块与天性模块,它会把有关信任加载好的,再增添ready参数,它就能够在domReady后进行。大家筛选输入框后为它绑定多个input事件,那是二个标准浏览器都帮忙的风云,IE下自家的框架已经相当好了,用jQuery与原生的同窗请用propertychange事件模拟。
复制代码 代码如下: //by 司徒正美
$.require(“ready,event,attr”,function(卡塔尔{ var search = $, hash = window,
prefix = “”, fixIE = NaN; search.addClass; search.input{//监听输入 var
input = this.value,//原始值 val = input.slice,//比较值 output = [];
//用来放置输出内容 if{ return
//IE下肃使是透进程序改动输入框里面包车型地铁值也会触发propertychange事件,导致大家力不能支进展上下翻操作
} for{ if === 0 卡塔尔(قطر‎{//得到以输入值开首的API if( output.push( ‘

复制代码 代码如下:

‘+ input + “” + .slice +”

$(document).ready(function() {
$(“input.text1”).val(“Enter your search text here”);
textFill($(‘input.text1’));
});
function textFill(input){ //input focus text function
var originalvalue = input.val();
input.focus( function(){
if( $.trim(input.val()) == originalvalue ){ input.val(”); }
});
input.blur( function(){
if( $.trim(input.val()) == ” ){ input.val(originalvalue); }
});
}

” 卡塔尔 == 10卡塔尔(قطر‎{ break; } } } //倘若向前境遇点号,或向后收回点号 if(
val.charAt === “.” || { var arr = input.split; hash = window; for(var j
= 0; j < arr.length; j++卡塔尔(英语:State of Qatar){ var el = arr[j]; if{ hash = hash[ el
];//重新安装要遍历API的靶子 } } prefix = input == “.” ? “” : input;
for{ if( output.push( ‘

3 在新窗口中开采链接

‘+ input + “” + .slice +”

复制代码 代码如下:

” 卡塔尔(英语:State of Qatar) == 10卡塔尔国{ break; } } } $.html; if{//重新初始化全体 hash = window; fixIE =
prefix = output = []; } }卡塔尔; }卡塔尔;
当提示列表出来后,我们就监听上下翻效果。也正是点击键盘的方位键时,会上下高亮提醒的条目款项,况且它填进寻找框中。这时候要求绑定keyup事件,检查其keyCode,标准浏览器管它为which,能够看自个儿的那篇博文《javascript
键盘事件下结论》。达成原理很简单,定义一个外面包车型大巴变量,用于存放高亮之处,然后用上翻时就减风姿罗曼蒂克,用下翻时就加生机勃勃,然后拿走指示列表中的全数a标签,用索引值定位到某一个a标签中,高亮它,然后去掉原先高亮的a标签。
复制代码 代码如下: //by 司徒正美
$.require(“ready,event,attr”,function(卡塔尔{ var search = $, hash = window,
prefix = “”; search.input{//监听输入 //….. }卡塔尔(قطر‎; var glowIndex = -1;
$.keyup{//监听上下翻 if(/search_target/i.test{//只代理特定成分,进步质量var upOrdown = 0 if(e.which === 38 || e.which === 104卡塔尔(قطر‎{ //up 8 upOrdown
–; }else if(e.which === 40 || e.which === 98卡塔尔(英语:State of Qatar){//down 2 upOrdown ++; }
if{ var list = $; //转移高亮的栏目 list.eq.removeClass; glowIndex +=
upOrdown; var el = list.eq.addClass; fixIE = el.attr search.val
if(glowIndex === list.length – 1卡塔尔{ glowIndex = -1; } } } }卡塔尔(قطر‎; }卡塔尔国;
最后是回车提交。笔者又写到四个keyup事件中去。当然你们能够想尽把四个keyup合成一个,小编如此写纯粹是为着教学的供给。
复制代码 代码如下: //by 司徒正美
$.require(“ready,event,attr”,function(卡塔尔(قطر‎{ var search = $, hash = window,
prefix = “”; search.input{//监听输入 //….. }卡塔尔(قطر‎; var glowIndex = -1;
$.keyup{//监听上下翻 //….. }卡塔尔(英语:State of Qatar); search.keyup{//监听提交 var input =
this.value; if(input && (e.which == 13 || e.which == 108卡塔尔(英语:State of Qatar)卡塔尔(قطر‎{
//即便按下ENTE奥德赛键
alert//实际项目中,应该是开展页面跳转,跑到搜索结果页中去的! } }卡塔尔(قطر‎; }卡塔尔(英语:State of Qatar);
到此,suggest效果就到位了。借使下了自己的框架的同窗,开启服务器,展开文书档案首页就能够观望那个功效。而在实际上项目,suggest其实更简便些,正是当输入框文本变化时,AJAX诉求后台贰个数组,然后再把它拼接成li成分的格式就行了。

$(document).ready(function() {
//Example 1: Every link will open in a new window
$(‘a[href^=””, “_blank”);
//Example 2: Links with the rel=”external” attribute will only open in a
new window
$(‘a[@rel$=’external’]’).click(function(){
this.target = “_blank”;
});
});
// how to use
<A href=”” rel=external>open
link</A>

4 检查测验浏览器
注: 在本子jQuery 1.4中,$.support 替换掉了$.browser 变量。

复制代码 代码如下:

$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= “1.8” ){
// do something
}
// Target Safari
if( $.browser.safari ){
// do something
}
// Target Chrome
if( $.browser.chrome){
// do something
}
// Target Camino
if( $.browser.camino){
// do something
}
// Target Opera
if( $.browser.opera){
// do something
}
// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
// do something
}
// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
// do something
}
});

5 预加载图片

复制代码 代码如下:

$(document).ready(function() {
jQuery.preloadImages = function()
{
for(var i = 0; i”).attr(“src”, arguments[i]);
}
};
// how to use
$.preloadImages(“image1.jpg”);
});

6 页面样式切换

复制代码 代码如下:

$(document).ready(function() {
$(“a.Styleswitcher”).click(function() {
//swicth the LINK REL attribute with the value in A REL attribute
$(‘link[rel=stylesheet]’).attr(‘href’ , $(this).attr(‘rel’));
});
// how to use
// place this in your header
<LINK href=”default.css” type=text/css rel=stylesheet>
// the links
<A class=Styleswitcher href=”#” rel=default.css>Default
Theme</A>
<A class=Styleswitcher href=”#” rel=red.css>Red Theme</A>
<A class=Styleswitcher href=”#” rel=blue.css>Blue
Theme</A>
});

7 列中度同样
只要接收了七个CSS列,使用此种格局可以是两列的莫斯中国科学技术大学学学一年级致。

复制代码 代码如下:

$(document).ready(function() {
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
// how to use
$(document).ready(function() {
equalHeight($(“.left”));
equalHeight($(“.right”));
});
});

8 动态调整页面字体大小
客商可以更动页面字体大小

复制代码 代码如下:

$(document).ready(function() {
// Reset the font size(back to default)
var originalFontSize = $(‘html’).css(‘font-size’);
$(“.resetFont”).click(function(){
$(‘html’).css(‘font-size’, originalFontSize);
});
// Increase the font size(bigger font0
$(“.increaseFont”).click(function(){
var currentFontSize = $(‘html’).css(‘font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(‘html’).css(‘font-size’, newFontSize);
return false;
});
// Decrease the font size(smaller font)
$(“.decreaseFont”).click(function(){
var currentFontSize = $(‘html’).css(‘font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(‘html’).css(‘font-size’, newFontSize);
return false;
});
});

9 重临页面顶上部分效用

复制代码 代码如下:

$(document).ready(function() {
$(‘a[href*=#]’).click(function() {
if (location.pathname.replace(/^\//,”) ==
this.pathname.replace(/^\//,”)
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $(‘[name=’ + this.hash.slice(1) +’]’);
if ($target.length) {
var targetOffset = $target.offset().top;
$(‘html,body’)
.animate({scrollTop: targetOffset}, 900);
return false;
}
}
});
// how to use
// place this where you want to scroll to
<A name=top></A>
// the link
<A href=”#top”>go to top</A>
});

10 拿到鼠标指针XY值

复制代码 代码如下:

$(document).ready(function() {
$().mousemove(function(e){
//display the x and y axis values inside the div with the id XY
$(‘#XY’).html(“X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
});
// how to use
<DIV id=XY></DIV>
});

11 验证元素是或不是为空

复制代码 代码如下:

$(document).ready(function() {
if ($(‘#id’).html()) {
// do something
}
});

12 替换来分

复制代码 代码如下:

$(document).ready(function() {
$(‘#id’).replaceWith(‘
<DIV>I have been replaced</DIV>
‘);
});

13 jQuery延时加载作用

复制代码 代码如下:

$(document).ready(function() {
window.setTimeout(function() {
// do something
}, 1000);
});

14 移除单词作者用

复制代码 代码如下:

$(document).ready(function() {
var el = $(‘#id’);
el.html(el.html().replace(/word/ig, “”));
});

15 验证元素是不是存在于Jquery对象集结中

复制代码 代码如下:

$(document).ready(function() {
if ($(‘#id’).length) {
// do something
}
});

16 使整个DIV可点击

复制代码 代码如下:

$(document).ready(function() {
$(“div”).click(function(){
//get the url from href attribute and launch the url
window.location=$(this).find(“a”).attr(“href”); return false;
});
// how to use
<DIV><A href=”index.html”>home</A></DIV>
});

17 ID与Class之间转变当退换Window大时辰,在ID与Class之间切换

复制代码 代码如下:

$(document).ready(function() {
function checkWindowSize() {
if ( $(window).width() > 1200 ) {
$(‘body’).addClass(‘large’);
}
else {
$(‘body’).removeClass(‘large’);
}
}
$(window).resize(checkWindowSize);
});

18 克隆对象

复制代码 代码如下:

$(document).ready(function() {
var cloned = $(‘#id’).clone();
// how to use
<DIV id=id></DIV>
});

19 使成分居荧屏中间地点

复制代码 代码如下:

$(document).ready(function() {
jQuery.fn.center = function () {
this.css(“position”,”absolute”);
this.css(“top”, ( $(window).height() – this.height() ) /
2+$(window).scrollTop() + “px”);
this.css(“left”, ( $(window).width() – this.width() ) /
2+$(window).scrollLeft() + “px”);
return this;
}
$(“#id”).center();
});

20 写本身的选取器

复制代码 代码如下:

$(document).ready(function() {
$.extend($.expr[‘:’], {
moreThen1000px: function(a) {
return $(a).width() > 1000;
}
});
$(‘.box:moreThen1000px’).click(function() {
// creating a simple js alert box
alert(‘The element that you have clicked is over 1000 pixels wide’);
});
});

21 总结成分个数

复制代码 代码如下:

$(document).ready(function() {
$(“p”).size();
});

22 使用本身的 Bullets

复制代码 代码如下:

$(document).ready(function() {
$(“ul”).addClass(“Replaced”);
$(“ul > li”).prepend(“‒ “);
// how to use
ul.Replaced { list-style : none; }
});

23 援引Google主机上的Jquery类库Let Google host the jQuery script for
you. This can be done in 2 ways.

复制代码 代码如下:

//Example 1
<SCRIPT src=”;
<SCRIPT type=text/javascript>
google.load(“jquery”, “1.2.6”);
google.setOnLoadCallback(function() {
// do something
});
</SCRIPT><SCRIPT
src=””
type=text/javascript></SCRIPT>
// Example 2:(the best and fastest way)
<SCRIPT
src=””
type=text/javascript></SCRIPT>

  1. 禁用Jquery(动画)效果

复制代码 代码如下:

$(document).ready(function() {
jQuery.fx.off = true;
});

25.与别的Javascript类库冲突技术方案

复制代码 代码如下:

$(document).ready(function() {
var $jq = jQuery.noConflict();
$jq(‘#id’).show();
});

  1. Load(卡塔尔国 函数的使用(页面载入提示):

> 首先写好 CSS,相对定位到页面右上角。

复制代码 代码如下:

#loading {
    position:absolute;    z-index:900;text-align:center;
    background-color:#eef2fa;border:1px solid #d8e3e8;
    color:#000;font-size:12px;padding:3px;width:80px;
    right:0;top:0;
}

> 然后用 jQuery 然后在具有图片载入完结之后,隐敝 Loading DIV。
> 别忘记载入 jQuery 库哈,刚才测量试验代码的时候地址写错了,差少之甚少疯掉。

复制代码 代码如下:

<script>
jQuery(document).ready(function($){
$(‘img’).load(function(){
        $(‘#loading’).css(“display”,”none”);
});
});
</script>

> 随意某处插入多少个 DIV 就能够,O(∩_∩)O 哈哈。

admin 服务器运维

发表评论

电子邮件地址不会被公开。 必填项已用*标注