搜尋
首頁web前端js教程jQuery下的几个你可能没用过的功能_jquery

一.创建一个自己的dropdownlist
说到dropdown list,在html中你会想到
复制代码 代码如下:



但是它的显示会不大好看,我们可以使用div+ul来自己做一个drop down list,而且有很苦的slidedown和slideup功能。

在IE8下的效果对比:
jQuery下的几个你可能没用过的功能_jquery
首先说说思路,很简单的思路,

a. 需要用一个Div来代替drop down list中选中记录显示的那个容器,通过offset来得到这个Div应该显示的位置,offtset.top和offset.left。

b. 通过一个UL以及它的孩子们li来模拟下拉框。这里需要注意几个问题,

i:一定要把UL放在一个新建好的Div里面,而且这个Div的位置距离top的数据上一步中的Div(我们叫它iDiv)的top+iDiv.height;

ii:每次在点击一个li元件后一定要清空它,不然你的drop down list会越来越长。。。

iii:当鼠标在别的地方点击时,一点要隐藏掉dropdown list。

下面我来一步一步结合代码来给说明如何实现这个功能:

1.创建iDiv来作为drop down list选中值的容器。
在创建iDiv之前我们需要先来得到要显示这个drop down list的位置:
复制代码 代码如下:

// get the select list 's position using offset,width and height
var offset = $(".select_css").offset();
var width = $(".select_css").width();
var height = $(".select_css").height();

接下来是创建iDivb并使用css()方法来为iDiv添加格式。
复制代码 代码如下:

var iDiv = $("
").css({
'top': offset.top,
'left': offset.left,
'width': width,
'height': height,
'border': '1px solid #aaaaaa',
'fontSize': '12px',
'textIndent': '4px',
'cursor': 'default' }).text("hello");

iDiv也给加了个class='iDiv',本来不需要的,但是后来我发现jQuery的css()无法去搞定背景图片的no-repeat 属性,google了半天老外也没有例子,所以只有通过这个clas='iDiv'来设定:
复制代码 代码如下:

.iDiv
{
background-image:url('images/select_right.gif');
background-position:right;
background-repeat:no-repeat;
}

效果如下;
jQuery下的几个你可能没用过的功能_jquery
2.在iDiv发生点击事件时,来创建一个下拉框,并使用slidedown效果。
首先我们需要创建一个cDiv并把它添加到html的body,它的位置刚好是在iDiv的下面,所以需要cDiv的创建如下:
复制代码 代码如下:

var cDiv = $("
").css({
'position': 'absolute',
'width': width,
'top': offset.top + 22,
'left': offset.left,
'background': '#f7f7f7',
'border': '1px solid silver'
}).hide();

而且默认我们要它隐藏掉。



有了这个cDiv,我们只需要在iDiv发生Click事件时创建一个UL列表,并把它append倒cDiv。
复制代码 代码如下:

var UL = $("
    ").appendTo(cDiv);
    for (var i = 1; i $("
  • ").appendTo(UL).text("hello" + i).mouseover(function () {
    $(this).css(
    {
    'color': 'white',
    'background': 'gray'
    }
    );
    }).mouseout(function () {
    $(this).css(
    {
    'color': 'black',
    'background': 'white'
    });
    }).click(function () {
    // disvisualble the cDiv and set the selected crrent li's text as iDiv's text
    $("#cDiv").slideUp().hide();
    $("#iDiv").html($(this).html());
    });
    }
    // slide show the cDiv now
    $("#cDiv").slideDown('slow');

  • 可以看到在添加每条li记录时都为它添加了mouseover,mouseout和click事件。

    在click事件发生时,我们不仅要把cDiv给slideUp还需要把它隐藏掉,并且在下次点击iDiv之前先清空cDiv。这两点非常重要。你可以试试不做这两点时会出现什么效果。

    在click li时别忘了把当前li的html内容复制给iDiv,不然我们的控件就没实际作用啦。。。。。

    3.使用Ajax从服务器获取下拉列表的值。
    很多时候我们需要动态的从服务器获取下拉列表的值,这样就需要在点击iDiv时先通过jQuey的ajax方法(或者其他的ajax方法)从服务器load数据,在数据load完成时我们才开始创建UL列表。

    我这里使用的是WCF Servece作为ajax请求的数据源。

       image

    为了增加用户友好型,在从服务器取数据时,我们让iDiv显示为一个load的图片。。。。。。。。。。。。

    image

    代码下载:http://xiazai.jb51.net/201008/yuanma/jQueryAJAXCallWCFService.rar

    二.使用jQuery的append功能来无刷新切换播放的视频文件(flash或Silverlight播放器)。

    之前有个minisite需要用到这个东西。我就试着研究了下,还真行的通。

    http://haokan.lafaso.com/pretty.html 大家可以看一下。我这个不算做广告吧,大家基本都是男的基本上不会看这个的。呵呵。只是这个方法我觉得你说不定以后可以用到的。

    由于这些播放器都是一个embed控件,所以我们可以通过替换embed的src属性来播放不同的视频。例如:

    image

    使用jQuery的append()方法我们来个偷梁换柱,就可以把embed的src给换掉,并重新把div1的html给换掉,在页面上就像是使用ajax技术。

    复制代码 代码如下:

    $("#div1 embed").empty();
    var placeHolder = $("
    ");
    var tempParent = $("
    ");
    var embed = $("#div1 embed");
    embed.replaceWith(placeHolder);
    tempParent.append(embed);
    embed.attr("src", http://player.ku6.com/refer/DMFZdNYzKDEosiPG/v.swf&auto=1);
    placeHolder.replaceWith(tempParent.html());


    三.用jQuery来为HTML实现header和footer功能。
    在php,asp.net中都有header和footer这种控件,php中用include,而在asp.net中我们用master或者是ascx都行。

    在html中呢?我相信一直没有。但是客户要求我们做的页面必须是html,说是怕用户太多。。。。。

    用footer和header的好处就是当需要修改这些部分的内容时,我们只需要修改一个页面,所有的页面就都会变化。

    后来找到个办法是使用jquery的load()方法。

    首先我们需要在html中添加两个Div一个在的最上面,一个在最下面,最好是一个Id='header',一个id='footer'。

    然后在服务器端我们只需要创建一个header.html和一个footer.html。

    在页面加载时我们会用jquery的load方法来loadheader.html和footer.html。

    image
    代码:
    复制代码 代码如下:

    $("#header").load("controls/header.html", function (response, status, xhr) {
    if (status == "error") {
    var msg = "服务器数据传输错误,请刷新页面";
    // $("#error").html(msg + xhr.status + " " + xhr.statusText);
    alert(msg);
    }
    });
    // load footer from server
    $("#footer").load("controls/footer.html", function (response, status, xhr) {
    if (status == "error") {
    var msg = "服务器数据传输错误,请刷新页面";
    // $("#error").html(msg + xhr.status + " " + xhr.statusText);
    alert(msg);
    }
    });

    后面有可能的话我会接着总结点jQuery的技巧和大家分享。。。。。。。。还有那个下拉框的代码我稍后给大家提供下载地址。
    Cheers
    Nic  
    代码下载:http://xiazai.jb51.net/201008/yuanma/jQueryAJAXCallWCFService.rar
    陳述
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    jquery实现多少秒后隐藏图片jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

    实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

    axios与jquery的区别是什么axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

    区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

    jquery怎么修改min-height样式jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

    修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

    jquery怎么在body中增加元素jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

    增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

    jquery中apply()方法怎么用jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

    在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

    jquery怎么删除div内所有子元素jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

    删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

    jquery on()有几个参数jquery on()有几个参数Apr 21, 2022 am 11:29 AM

    on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

    jquery怎么去掉只读属性jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

    去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

    See all articles

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序,用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    AI Hentai Generator

    AI Hentai Generator

    免費產生 AI 無盡。

    熱門文章

    R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
    3 週前By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.最佳圖形設置
    3 週前By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.如果您聽不到任何人,如何修復音頻
    3 週前By尊渡假赌尊渡假赌尊渡假赌

    熱工具

    SublimeText3 英文版

    SublimeText3 英文版

    推薦:為Win版本,支援程式碼提示!

    MantisBT

    MantisBT

    Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

    mPDF

    mPDF

    mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    SublimeText3 Linux新版

    SublimeText3 Linux新版

    SublimeText3 Linux最新版