jQuery下几个你可能没用过的函数

1.创建自己的dropdownlist说到下拉列表，你会想到复制html中的代码如下： select option hello 1/option/select，但是它的显示效果会不太好。我们可以用div ul自己做一个下拉列表，它有很苦的上下滑动功能。第八号国际环境协定的效果比较：

首先说说思路，很简单。a .需要将下拉列表中所选记录显示的容器替换为Div，并通过偏移量获取该Div应该显示的位置，即offtset.top和offset.left. B .通过ul及其子级li模拟下拉框。在这里，我们需要注意几个问题。i:必须把UL放在一个新创建的Div中，这个Div的位置离top data上一步中的topiDiv.height of div(我们称之为iDiv)。每次单击li组件时，都必须清除它，否则下拉列表会越来越长。Iii:当鼠标点击别处时，有必要隐藏下拉列表。我将用代码一步一步来解释如何实现这个功能：1。创建iDiv作为下拉列表中选定值的容器。在创建iDiv之前，我们需要获取显示该下拉列表的位置：复制代码如下：//使用offset、width和height varoffset=$('获取选择列表的位置。选择_ CSS’)。offset()；var width=$('。select_css ')。宽度()；var height=$('。select_css ')。高度()；下一步是创建iDivb，并使用css()方法向iDiv添加格式。复制代码如下： varidiv=$(' div ID=' IDIV ' class=' IDIV ' ')。CSS ({'top' :Offset.top，' left' 3360Offset.left，' width' :Width，' height': height，' border': '1px实线#aaaaaa '，' fontSize': '12px '，' textIndent': '4px '，' cursor': 'default' })。文字(' hello ')；IDiv还增加了一个class='iDiv '，本来是不需要的，但是后来发现jQuery的css()无法修复背景图片的不重复属性，而且google之后很长时间都没有外国人的例子，所以只由这个class=' IDiv '设置：复制代码如下：idiv { background-image 3360 URL(' images//)。背景-位置：右侧；背景-repeat : no-repeat；}效果如下；

2.创建一个下拉框，并在iDiv中发生点击事件时使用下拉效果。首先我们需要创建一个cDiv并添加到html的正文中，它的位置正好在iDiv的下方，所以我们需要创建如下的cDiv:复制代码如下：VAR CDIV=$ ('div ID=' CDIV ' ')。CSS ({'position' :' absolute '，' width': width，' top': offset.top 22，' left': offset.left，' background ' : ' # f7f7f7 '，' border': '1px纯银' })。hide()；默认情况下，我们希望它被隐藏。有了这个cDiv，我们只需要在iDiv中发生Click事件时创建一个UL列表，然后将其追加到cDiv中。副本代码如下：VAR UL=$ ('UL风格='列表风格：Nonemargin:0划水：0；/ul ')。附录(CDIv)；for(var I=1；i 10I){ $(' Li style=' test indent :4 px；高度：20 px；lineheight:20pxcursor:pointer指针；'').附录(UL)。文字(‘你好’I)。mouseover(function () { $(this))。css({ 'color': 'white '，' background ' : ' gray ' })；}).mouseout(函数(){ $(this))。css({ 'color': 'black '，' background ' : ' white ' })；}).单击(function(){//disvisable)CDIv，并将选定的crrent li的文本设置为iDiv的text $('#cDiv ')。向上滑动()。hide()；$('#iDiv ')。html($(this)。html())；});} //幻灯片现在显示CDIv $(' # CDIv ')。向下滑动(“慢”)；您可以看到每个li记录都添加了鼠标悬停、鼠标移出和点击事件。当点击事件发生时，我们不仅要把cDiv给slideUp，还要把它隐藏起来，在下次点击iDiv之前清空cDiv。这两点很重要。如果你不做这两件事，你可以试试会发生什么。点击li时，不要忘记将Li当前的html内容复制到iDiv，否则我们的控制将没有实际效果。3.使用Ajax从服务器获取下拉列表的值。很多情况下，我们需要从服务器动态获取下拉列表的值，所以我们需要在点击iDiv的时候通过jQuey的ajax方法(或者其他ajax方法)从服务器加载数据，然后在数据加载完成的时候我们就开始创建UL列表。我使用wcfservice ce作为ajax请求的数据源。

为了增加用户友好性，当从服务器获取数据时，我们让iDiv显示为负载图片。。

代码下载：http://xiaozai . JB 51 . net/201008/马援/jqueryajaxcallwcfservice . rar

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

。以前有个迷你网站需要这个。我只是试着研究它，它真的有效。http://haokan.lafaso.com/pretty.html,你可以看看。我不把这算作广告。每个人基本上都是男人。基本上，他们不会看这个。哈哈。就是这个方法。我想你将来可能会用到它。由于这些播放器都是嵌入式控件，我们可以通过替换嵌入式的src属性来播放不同的视频。例如：

通过使用jQuery的append()方法，我们可以替换embed的src，再次替换div1的html，就像在页面上使用ajax技术一样。复制代码如下： $(“# div 1 embed”)。empty()；var Placeholder=$(' div/')；var tempParent=$(' div/')；var embed=$(' # div 1 embed ')；embedded . replace with(Placeholder)；tempParent.append(嵌入)；embed.attr('src '，http://player . ku6.com/refer/DMFZdNYzKDEosiPG/v . swfauto=1)；placeholder . replace with(TempParent . html())；Iii .使用jQuery实现HTML的页眉和页脚功能。在php和ASP中。NET中，有页眉和页脚这样的控件。在PHP中，我们使用include，而在ASP.NET，我们可以使用master或ascx。用html？我相信从来没有。但是客户要求我们做的页面必须是html，说怕用户太多。使用页脚和页眉的好处是，当我们需要修改这些部分的内容时，我们只需要修改一页，所有的页面都会改变。后来，我找到了一种使用jquery的load()方法的方法。首先，我们需要在html中添加两个div，一个在正文的顶部，一个在正文的底部，最好是一个Id='header '，一个id='footer '。然后在服务器端，我们只需要创建一个header.html和一个footer.html。页面加载后，我们将使用jquery的load方法来到loadheader.html和footer.html。

代码：复制代码如下： $ ('# header ')。load ('controls/header.html '，function (response，status，xhr){ if(status==' error '){ varmsg='服务器数据传输错误，请刷新页面'；//$('#error ')。html(msg xhr . status ' ' xhr . status text)；警报(msg)；} });//从服务器$ ('# footer ')加载页脚。load ('controls/footer.html '，function (response，status，xhr){ if(status==' error '){ varmsg='服务器数据传输错误，请刷新页面'；//$('#error ')。html(msg xhr . status ' ' xhr . status text)；警报(msg)；} });以后有可能的话，我会总结一下jQuery的一些技巧，分享给大家。以及下拉框的代码。我稍后会向您提供下载地址。Cheers Nic代码下载：http://xiaozai . JB 51 . net/201008/马援/jqueryajxcallwcfservice . rar。