JQuery

JQuery

前端优秀代码片段

前端开发zkbhj 发表了文章 • 0 个评论 • 2935 次浏览 • 2016-09-19 15:38 • 来自相关话题

 //购物车控制显示
$("#head_car").hover(function(){
$(this).css("background", "#FBFEE9");
$(".head_car_text").css("color", "#ff6700");
$("#car_content").css({"width":"300px"}).animate({
height:"100px"
},400).finish();
},function(){
$(this).css("background", "#424242");
$(".head_car_text").css("color", "#b0b0b0");
$("#car_content").css({"width":"300px"}).animate({
height:"0px"
},400);
})
//导航栏控制显示
$(".menu_li").hover(function(){
$("#menu_content_bg").css("border","1px solid #D0D0D0");
$(this).css("color","#ff6700");
$("#"+$(this).attr("control")).show();
$("#menu_content_bg").height(230);
},function(){
$("#"+$(this).attr("control")).hide();
$(this).css("color"," #424242");
$("#menu_content_bg").height(0);
$("#menu_content_bg").css("border","0px solid #D0D0D0");
})
//搜索框失去和获取焦点border颜色改变
$("#find_input").focus(function(){
$("#find_wrap").css("border","1px solid #ff6700");
$("#find_but").css("border-left","1px solid #ff6700");
})
$("#find_input").blur(function(){
$("#find_wrap").css("border","1px solid #F0F0F0");
$("#find_but").css("border-left","1px solid #F0F0F0");
})
//搜索按钮的背景颜色改变
$("#find_but").hover(function(){
$(this).css({"background":"#ff6700",color:"#fff"});
},function(){
$(this).css({"background":"#fff",color:"#424242"});
})
//菜单栏的显示
$("#banner_menu_wrap").children().hover(function(){
$(this).css("background","#ff6700");
$(this).children(".banner_menu_content").css("border","1px solid #F0F0F0").show();
},function(){
$(this).css("background","none");
$(this).children(".banner_menu_content").css("border","0px solid #F0F0F0").hide();
}) 查看全部
 
//购物车控制显示
$("#head_car").hover(function(){
$(this).css("background", "#FBFEE9");
$(".head_car_text").css("color", "#ff6700");
$("#car_content").css({"width":"300px"}).animate({
height:"100px"
},400).finish();
},function(){
$(this).css("background", "#424242");
$(".head_car_text").css("color", "#b0b0b0");
$("#car_content").css({"width":"300px"}).animate({
height:"0px"
},400);
})

//导航栏控制显示
$(".menu_li").hover(function(){
$("#menu_content_bg").css("border","1px solid #D0D0D0");
$(this).css("color","#ff6700");
$("#"+$(this).attr("control")).show();
$("#menu_content_bg").height(230);
},function(){
$("#"+$(this).attr("control")).hide();
$(this).css("color"," #424242");
$("#menu_content_bg").height(0);
$("#menu_content_bg").css("border","0px solid #D0D0D0");
})

//搜索框失去和获取焦点border颜色改变
$("#find_input").focus(function(){
$("#find_wrap").css("border","1px solid #ff6700");
$("#find_but").css("border-left","1px solid #ff6700");
})
$("#find_input").blur(function(){
$("#find_wrap").css("border","1px solid #F0F0F0");
$("#find_but").css("border-left","1px solid #F0F0F0");
})

//搜索按钮的背景颜色改变
$("#find_but").hover(function(){
$(this).css({"background":"#ff6700",color:"#fff"});
},function(){
$(this).css({"background":"#fff",color:"#424242"});
})

//菜单栏的显示
$("#banner_menu_wrap").children().hover(function(){
$(this).css("background","#ff6700");
$(this).children(".banner_menu_content").css("border","1px solid #F0F0F0").show();
},function(){
$(this).css("background","none");
$(this).children(".banner_menu_content").css("border","0px solid #F0F0F0").hide();
})

jquery中ajax请求error函数和及其参数详细说明

前端开发zkbhj 发表了文章 • 0 个评论 • 1504 次浏览 • 2016-09-19 10:38 • 来自相关话题

使用jquery的ajax方法向服务器发送请求的时候,常常需要使用到error函数进行错误信息的处理,本文详细的说明了ajax中error函数和函数中各个参数的用法。

一般error函数返回的参数有三个: function(jqXHR jqXHR, String textStatus, String errorThrown)。常见调用代码如下:
$.ajax({
url: '/Home/AjaxGetData',
success: function (data) {
alert(data);
},
error: function (jqXHR, textStatus, errorThrown) {
/*错误信息处理*/
}
});这里对这三个参数做详细说明。
 
第一个参数 jqXHR jqXHR:这里的jqXHR是一个jqXHR对象,在Jquery1.4和1.4版本之前返回的是XMLHttpRequest对象,1.5版本以后则开始使用jqXHR对象,该对象是一个超集,就是该对象不仅包括XMLHttpRequest对象,还包含其他更多的详细属性和信息。

这里主要有4个属性:
readyState :当前状态,0-未初始化,1-正在载入,2-已经载入,3-数据进行交互,4-完成。status  :返回的HTTP状态码,比如常见的404,500等错误代码。statusText :对应状态码的错误信息,比如404错误信息是not found,500是Internal Server Error。responseText :服务器响应返回的文本信息
第二个参数 String textStatus:返回的是字符串类型,表示返回的状态,根据服务器不同的错误可能返回下面这些信息:"timeout"(超时), "error"(错误), "abort"(中止), "parsererror"(解析错误),还有可能返回空值。
 
第三个参数 String errorThrown:也是字符串类型,表示服务器抛出返回的错误信息,如果产生的是HTTP错误,那么返回的信息就是HTTP状态码对应的错误信息,比如404的Not Found,500错误的Internal Server Error。
 
示例代码:
 
$.ajax({
url: '/AJAX请求的URL',
success: function (data) {
alert(data);
},
error: function (jqXHR, textStatus, errorThrown) {
/*弹出jqXHR对象的信息*/
alert(jqXHR.responseText);
alert(jqXHR.status);
alert(jqXHR.readyState);
alert(jqXHR.statusText);
/*弹出其他两个参数的信息*/
alert(textStatus);
alert(errorThrown);
}
});
官方文档地址:http://api.jquery.com/jQuery.ajax/ 查看全部
使用jquery的ajax方法向服务器发送请求的时候,常常需要使用到error函数进行错误信息的处理,本文详细的说明了ajax中error函数和函数中各个参数的用法。

一般error函数返回的参数有三个: function(jqXHR jqXHR, String textStatus, String errorThrown)。常见调用代码如下:
$.ajax({
url: '/Home/AjaxGetData',
success: function (data) {
alert(data);
},
error: function (jqXHR, textStatus, errorThrown) {
/*错误信息处理*/
}
});
这里对这三个参数做详细说明。
 
第一个参数 jqXHR jqXHR:这里的jqXHR是一个jqXHR对象,在Jquery1.4和1.4版本之前返回的是XMLHttpRequest对象,1.5版本以后则开始使用jqXHR对象,该对象是一个超集,就是该对象不仅包括XMLHttpRequest对象,还包含其他更多的详细属性和信息。

这里主要有4个属性:
  • readyState :当前状态,0-未初始化,1-正在载入,2-已经载入,3-数据进行交互,4-完成。
  • status  :返回的HTTP状态码,比如常见的404,500等错误代码。
  • statusText :对应状态码的错误信息,比如404错误信息是not found,500是Internal Server Error。
  • responseText :服务器响应返回的文本信息

第二个参数 String textStatus:返回的是字符串类型,表示返回的状态,根据服务器不同的错误可能返回下面这些信息:"timeout"(超时), "error"(错误), "abort"(中止), "parsererror"(解析错误),还有可能返回空值。
 
第三个参数 String errorThrown:也是字符串类型,表示服务器抛出返回的错误信息,如果产生的是HTTP错误,那么返回的信息就是HTTP状态码对应的错误信息,比如404的Not Found,500错误的Internal Server Error。
 
示例代码:
 
$.ajax({
url: '/AJAX请求的URL',
success: function (data) {
alert(data);
},
error: function (jqXHR, textStatus, errorThrown) {
/*弹出jqXHR对象的信息*/
alert(jqXHR.responseText);
alert(jqXHR.status);
alert(jqXHR.readyState);
alert(jqXHR.statusText);
/*弹出其他两个参数的信息*/
alert(textStatus);
alert(errorThrown);
}
});

官方文档地址:http://api.jquery.com/jQuery.ajax/

JS如何判断接口返回值中是否存在某个字段?

回复

前端开发zkbhj 回复了问题 • 1 人关注 • 1 个回复 • 6625 次浏览 • 2016-09-14 10:11 • 来自相关话题

如何为动态刷新出来的元素绑定JQuery事件?

回复

前端开发zkbhj 回复了问题 • 1 人关注 • 1 个回复 • 2864 次浏览 • 2016-09-08 10:04 • 来自相关话题

jPlayer中Playlist相关方法参数

前端开发zkbhj 发表了文章 • 0 个评论 • 1585 次浏览 • 2016-09-07 15:35 • 来自相关话题

The constructor

The playlist in this demo is instanced with 1 item in it and uses the{supplied:"ogv,m4v,oga,mp3"}supplied:"ogv,m4v,oga,mp3"} option to enable a media player that accepts audio and video.
 
var myPlaylist = new jPlayerPlaylist({ myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_N",
cssSelectorAncestor: "#jp_container_N"
}, [
{
title:"Cro Magnon Man",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
}
], {
playlistOptions: {
enableRemoveControls: true
},
swfPath: "/js",
supplied: "ogv, m4v, oga, mp3",
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: true // Allows the audio poster to go full screen via keyboard
});The constructor might look scary to JavaScript newcomers, but it is really just 1 line of JavaScript, laid out in an easy to read manner. JSON (JavaScript Object Notation) is used in this demo to create the objects and arrays passed to the constructor. The parameters are an object, an array and an object:
// This is pseudo-code.
var myPlaylist = new jPlayerPlaylist({cssSelector}, [playlist], {options});The parameters can be created outside the constructor to suit your goal. In particular, the options may be common to all your instances on a page. The playlist could be generated through an AJAX call to a JSON or XML url.
var cssSelector = { jPlayer: "#jquery_jplayer_N", cssSelectorAncestor: "#jp_container_N" }; cssSelector = { jPlayer: "#jquery_jplayer_N", cssSelectorAncestor: "#jp_container_N" };
var playlist = []; // Empty playlist
var options = { swfPath: "/js", supplied: "ogv, m4v, oga, mp3" };
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
Defining the css selectors

The first parameter is an object used to define the css selectors that point at the jPlayer and container HTML elements. The jPlayer element is where the video output is displayed and the container, cssSelectorAncestor, is the outter divider of the player skin HTML.

To use the default values, use an empty object, {}. The defaults are:
{
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}
Defining the playlist content

The second parameter is an Array of Objects used to define the playlist. The object elements are used by the jPlayer setMedia command, so follow the rules for suppling the formats defined in thesupplied option. The title, artist and free properties are used by jPlayerPlaylist to display each item. To start with an empty playlist, use an empty array, []. A playlist with a single audio item looks like:
[
{
title:"The Title",
artist:"The Artist", // Optional
free: Boolean, // Optional - Generates links to the media
mp3:"MP3 URL", // Dependant on supplied option
oga:"OGA URL", // Dependant on supplied option
poster: "Poster URL" // Optional
}
]
Defining the jPlayer and playlist options

The third parameter is an object to define the jPlayer options and jPlayerPlaylist options. This object is passed to jPlayer, and is used to setup the basic jPlayer options, such as solution, supplied and the all important swfPath. You can define all options, except for the cssSelectorAncestor and therepeat event handler, which are overridden by the jPlayerPlaylist code. Remember that event handlers are not really options. The playlist code binds event handlers to jPlayer events, such asready and ended, which might interact with your event handlers in unexpected ways. Example options are:
{
playlistOptions: {
autoPlay: true,
enableRemoveControls: true
},
swfPath: "/js",
supplied: "mp3, oga"
}
Default playlist options:
playlistOptions: {: {
autoPlay: false,
loopOnPrevious: false,
shuffleOnLoop: true,
enableRemoveControls: false,
displayTime: 'slow',
addTime: 'fast',
removeTime: 'fast',
shuffleTime: 'slow'
}
Control flag descriptions:

autoPlay : Boolean : Will auto-play when instanced on the page, and when a new playlist is given using setPlaylist()(). Remember that mobile devices require a gesture before anything will play. Recommend leaving this as false initially... And change it later if you want when changing the playlist through a user gesture. eg., They clicked on a link to change the playlist and your click handler changes autoPlay to true before you setPlaylist().
loopOnPrevious : Boolean : If loop is active, the playlist will loop back to the end when executingprevious()().
shuffleOnLoop : Boolean : If loop and shuffle are active, the playlist will shuffle when executingnext()() on the last item.
enableRemoveControls : Boolean : Displays the remove controls for each item.


Animation timing controls:

These options use jQuery animation timings, where the time is in milliseconds and also the strings 'slow' and 'fast' can be used. To make changes instant, set the time to zero, which removes the animation effect.

displayTime : Number/String : The period of the slide-up and slide-down animations when a new playlist is displayed.
addTime : Number/String : The period of the slide-down animation when a new item is added.
removeTime : Number/String : The period of the slide-up animation when a item is removed.
shuffleTime : Number/String : The period of the slide-up and slide-down animations when a playlist is shuffled.


jPlayerPlaylist methods:

setPlaylist(playlist:Array) : Void
Change the playlist. (See playlistOptions.autoPlay.autoPlay to cause it to play automatically.)
myPlaylist.setPlaylist([.setPlaylist([
{
title:"Cro Magnon Man",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
},
{
title:"Hidden",
artist:"Miaow",
free: true,
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
}
]);
add(media:Object, [playNow:Boolean]) : Void
Add a media item to the end of the playlist. Optional playNow param to start it playing after adding it.
myPlaylist.add({.add({
title:"Your Face",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
});
 remove([index:Number]) : Boolean
Removes the item from the playlist. Removes all items if no param is given. A positive index removes items from the start of the playlist while a negative index removes items from the end.
// Examples of usage:
myPlaylist.remove(); // Removes all items
myPlaylist.remove(0); // Removes the 1st item
myPlaylist.remove(1); // Removes the 2nd item
myPlaylist.remove(-1); // Removes the last item
if( myPlaylist.remove(0) ) {
alert("1st item removed successfully!");
} else {
alert("Failed to remove 1st item!"); // A remove operation is being animated.
}
select(index:Number) : Void
Selects the item in the playlist. A positive index selects items from the start of the playlist while a negative index selects items from the end.
// Examples of usage:
myPlaylist.select(0); // Selects the 1st item
myPlaylist.select(1); // Selects the 2nd item
myPlaylist.select(-1); // Selects the last item
play([index:Number]) : Void
Plays the item in the playlist. Plays the current item if no param is given. A positive index plays items from the start of the playlist while a negative index plays items from the end.
// Examples of usage:
myPlaylist.play(); // Plays the currently selected item
myPlaylist.play(0); // Plays the 1st item
myPlaylist.play(1); // Plays the 2nd item
myPlaylist.play(-1); // Plays the last item
shuffle([shuffled:Boolean], [playNow:Boolean]) : Void
Shuffle the playlist. Toggles shuffled setting if no param is given. True always shuffles the playlist. False will un-shuffle if it was shuffled. The playNow param will cause the first item to play automatically. (playNow can only be used if the first param is given. Use shuffle(undefined,true) to toggle and play.)
// Examples of usage:
myPlaylist.shuffle(); // Toggles shuffle state
myPlaylist.shuffle(true); // Shuffle the playlist
myPlaylist.shuffle(false); // Un-shuffle the playlist
myPlaylist.shuffle(true, true); // Shuffle the playlist and plays
next() : Void
Move to and play the next item in the playlist. The behaviour for the last item depends on the loop state, the shuffle state and the playlistOptions.shuffleOnLoop.shuffleOnLoop option.
myPlaylist.next();
.next();
previous() : Void
Move to and play the previous item in the playlist. The behaviour for the first item depends on the loop state and the playlistOptions.loopOnPrevious.loopOnPrevious option. (The playlist is never shuffled when looping back to the last item.)
myPlaylist.previous();
.previous();
pause() : Void
Pause the current item.
myPlaylist.pause();
.pause();
option(option:String, [value:Mixed]) : Void
Set or get the playlist option.
// Examples of usage:
var controls = myPlaylist.option("enableRemoveControls"); // Get option
myPlaylist.option("enableRemoveControls", true); // Set option
The HTML Structure

The playlist looks for the class jp-playlist-playlist within the cssSelectorAncestor element. A <ul> element is expected here, which is used to generate the item list.
<div id="jp_container_N"> id="jp_container_N">
<div class="jp-playlist">
<ul>
<li></li> <!-- Empty <li> so your HTML conforms with the W3C spec -->
</ul>
</div>
</div>
The playlist is automatically added as <li> elements to the <ul> element. The jp-free-media-free-media span is only generated when the playlist item has its free property set.
<li>
<div>
<a class="jp-playlist-item-remove" href="javascript:;">&times;</a>
<span class="jp-free-media">
(<a tabindex="1" href="http://www.jplayer.org/audio/m ... ot%3B class="jp-playlist-item-free">mp3</a> )
</span>
<a tabindex="1" class="jp-playlist-item" href="javascript:;">Cro Magnon Man <span class="jp-artist">by The Stark Palace</span></a>
</div>
</li>
The Techie Bit

The jPlayerPlaylist code is enclosed in a self-executing function that protects the jQuery variable within its scope, thus allowing the $ shortcut to be used within its code without conflicting with other JavaScript libraries. jPlayer does this too of course, which allowsjQuery.noConflict().noConflict() to be used.

The jPlayerPlaylist is an add-on to jPlayer. It is not a jQuery plugin, but a JavaScript object definition. You instance it like any other object, using the new operator.

jPlayerPlaylist is the only variable added to Javascript's global namespace.

When using jPlayerPlaylist with the animations and issuing comands from JavaScript, be aware that the animations take time to complete. Bombarding the playlist with many JavaScript commands may well give unexpected results unless you set all the animation timings to zero.

While this demo gives a poster image for all videos, in practice the video poster is only displayed if the Video item is first and autoPlay is false. 查看全部
The constructor

The playlist in this demo is instanced with 1 item in it and uses the{supplied:"ogv,m4v,oga,mp3"}supplied:"ogv,m4v,oga,mp3"} option to enable a media player that accepts audio and video.
 
var myPlaylist = new jPlayerPlaylist({ myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_N",
cssSelectorAncestor: "#jp_container_N"
}, [
{
title:"Cro Magnon Man",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
}
], {
playlistOptions: {
enableRemoveControls: true
},
swfPath: "/js",
supplied: "ogv, m4v, oga, mp3",
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: true // Allows the audio poster to go full screen via keyboard
});
The constructor might look scary to JavaScript newcomers, but it is really just 1 line of JavaScript, laid out in an easy to read manner. JSON (JavaScript Object Notation) is used in this demo to create the objects and arrays passed to the constructor. The parameters are an object, an array and an object:
// This is pseudo-code.
var myPlaylist = new jPlayerPlaylist({cssSelector}, [playlist], {options});
The parameters can be created outside the constructor to suit your goal. In particular, the options may be common to all your instances on a page. The playlist could be generated through an AJAX call to a JSON or XML url.
var cssSelector = { jPlayer: "#jquery_jplayer_N", cssSelectorAncestor: "#jp_container_N" }; cssSelector = { jPlayer: "#jquery_jplayer_N", cssSelectorAncestor: "#jp_container_N" };
var playlist = []; // Empty playlist
var options = { swfPath: "/js", supplied: "ogv, m4v, oga, mp3" };
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);

Defining the css selectors

The first parameter is an object used to define the css selectors that point at the jPlayer and container HTML elements. The jPlayer element is where the video output is displayed and the container, cssSelectorAncestor, is the outter divider of the player skin HTML.

To use the default values, use an empty object, {}. The defaults are:
{
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}

Defining the playlist content

The second parameter is an Array of Objects used to define the playlist. The object elements are used by the jPlayer setMedia command, so follow the rules for suppling the formats defined in thesupplied option. The title, artist and free properties are used by jPlayerPlaylist to display each item. To start with an empty playlist, use an empty array, []. A playlist with a single audio item looks like:
[
{
title:"The Title",
artist:"The Artist", // Optional
free: Boolean, // Optional - Generates links to the media
mp3:"MP3 URL", // Dependant on supplied option
oga:"OGA URL", // Dependant on supplied option
poster: "Poster URL" // Optional
}
]

Defining the jPlayer and playlist options

The third parameter is an object to define the jPlayer options and jPlayerPlaylist options. This object is passed to jPlayer, and is used to setup the basic jPlayer options, such as solution, supplied and the all important swfPath. You can define all options, except for the cssSelectorAncestor and therepeat event handler, which are overridden by the jPlayerPlaylist code. Remember that event handlers are not really options. The playlist code binds event handlers to jPlayer events, such asready and ended, which might interact with your event handlers in unexpected ways. Example options are:
{
playlistOptions: {
autoPlay: true,
enableRemoveControls: true
},
swfPath: "/js",
supplied: "mp3, oga"
}

Default playlist options:
playlistOptions: {: {
autoPlay: false,
loopOnPrevious: false,
shuffleOnLoop: true,
enableRemoveControls: false,
displayTime: 'slow',
addTime: 'fast',
removeTime: 'fast',
shuffleTime: 'slow'
}

Control flag descriptions:

autoPlay : Boolean : Will auto-play when instanced on the page, and when a new playlist is given using setPlaylist()(). Remember that mobile devices require a gesture before anything will play. Recommend leaving this as false initially... And change it later if you want when changing the playlist through a user gesture. eg., They clicked on a link to change the playlist and your click handler changes autoPlay to true before you setPlaylist().
loopOnPrevious : Boolean : If loop is active, the playlist will loop back to the end when executingprevious()().
shuffleOnLoop : Boolean : If loop and shuffle are active, the playlist will shuffle when executingnext()() on the last item.
enableRemoveControls : Boolean : Displays the remove controls for each item.


Animation timing controls:

These options use jQuery animation timings, where the time is in milliseconds and also the strings 'slow' and 'fast' can be used. To make changes instant, set the time to zero, which removes the animation effect.

displayTime : Number/String : The period of the slide-up and slide-down animations when a new playlist is displayed.
addTime : Number/String : The period of the slide-down animation when a new item is added.
removeTime : Number/String : The period of the slide-up animation when a item is removed.
shuffleTime : Number/String : The period of the slide-up and slide-down animations when a playlist is shuffled.


jPlayerPlaylist methods:

setPlaylist(playlist:Array) : Void
Change the playlist. (See playlistOptions.autoPlay.autoPlay to cause it to play automatically.)
myPlaylist.setPlaylist([.setPlaylist([
{
title:"Cro Magnon Man",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
},
{
title:"Hidden",
artist:"Miaow",
free: true,
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
}
]);

add(media:Object, [playNow:Boolean]) : Void
Add a media item to the end of the playlist. Optional playNow param to start it playing after adding it.
myPlaylist.add({.add({
title:"Your Face",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
});

 remove([index:Number]) : Boolean
Removes the item from the playlist. Removes all items if no param is given. A positive index removes items from the start of the playlist while a negative index removes items from the end.
// Examples of usage:
myPlaylist.remove(); // Removes all items
myPlaylist.remove(0); // Removes the 1st item
myPlaylist.remove(1); // Removes the 2nd item
myPlaylist.remove(-1); // Removes the last item
if( myPlaylist.remove(0) ) {
alert("1st item removed successfully!");
} else {
alert("Failed to remove 1st item!"); // A remove operation is being animated.
}

select(index:Number) : Void
Selects the item in the playlist. A positive index selects items from the start of the playlist while a negative index selects items from the end.
// Examples of usage:
myPlaylist.select(0); // Selects the 1st item
myPlaylist.select(1); // Selects the 2nd item
myPlaylist.select(-1); // Selects the last item

play([index:Number]) : Void
Plays the item in the playlist. Plays the current item if no param is given. A positive index plays items from the start of the playlist while a negative index plays items from the end.
// Examples of usage:
myPlaylist.play(); // Plays the currently selected item
myPlaylist.play(0); // Plays the 1st item
myPlaylist.play(1); // Plays the 2nd item
myPlaylist.play(-1); // Plays the last item

shuffle([shuffled:Boolean], [playNow:Boolean]) : Void
Shuffle the playlist. Toggles shuffled setting if no param is given. True always shuffles the playlist. False will un-shuffle if it was shuffled. The playNow param will cause the first item to play automatically. (playNow can only be used if the first param is given. Use shuffle(undefined,true) to toggle and play.)
// Examples of usage:
myPlaylist.shuffle(); // Toggles shuffle state
myPlaylist.shuffle(true); // Shuffle the playlist
myPlaylist.shuffle(false); // Un-shuffle the playlist
myPlaylist.shuffle(true, true); // Shuffle the playlist and plays

next() : Void
Move to and play the next item in the playlist. The behaviour for the last item depends on the loop state, the shuffle state and the playlistOptions.shuffleOnLoop.shuffleOnLoop option.
myPlaylist.next();
.next();

previous() : Void
Move to and play the previous item in the playlist. The behaviour for the first item depends on the loop state and the playlistOptions.loopOnPrevious.loopOnPrevious option. (The playlist is never shuffled when looping back to the last item.)
myPlaylist.previous();
.previous();

pause() : Void
Pause the current item.
myPlaylist.pause();
.pause();

option(option:String, [value:Mixed]) : Void
Set or get the playlist option.
// Examples of usage:
var controls = myPlaylist.option("enableRemoveControls"); // Get option
myPlaylist.option("enableRemoveControls", true); // Set option

The HTML Structure

The playlist looks for the class jp-playlist-playlist within the cssSelectorAncestor element. A <ul> element is expected here, which is used to generate the item list.
<div id="jp_container_N"> id="jp_container_N">
<div class="jp-playlist">
<ul>
<li></li> <!-- Empty <li> so your HTML conforms with the W3C spec -->
</ul>
</div>
</div>

The playlist is automatically added as <li> elements to the <ul> element. The jp-free-media-free-media span is only generated when the playlist item has its free property set.
<li>
<div>
<a class="jp-playlist-item-remove" href="javascript:;">&times;</a>
<span class="jp-free-media">
(<a tabindex="1" href="http://www.jplayer.org/audio/m ... ot%3B class="jp-playlist-item-free">mp3</a> )
</span>
<a tabindex="1" class="jp-playlist-item" href="javascript:;">Cro Magnon Man <span class="jp-artist">by The Stark Palace</span></a>
</div>
</li>

The Techie Bit

The jPlayerPlaylist code is enclosed in a self-executing function that protects the jQuery variable within its scope, thus allowing the $ shortcut to be used within its code without conflicting with other JavaScript libraries. jPlayer does this too of course, which allowsjQuery.noConflict().noConflict() to be used.

The jPlayerPlaylist is an add-on to jPlayer. It is not a jQuery plugin, but a JavaScript object definition. You instance it like any other object, using the new operator.

jPlayerPlaylist is the only variable added to Javascript's global namespace.

When using jPlayerPlaylist with the animations and issuing comands from JavaScript, be aware that the animations take time to complete. Bombarding the playlist with many JavaScript commands may well give unexpected results unless you set all the animation timings to zero.

While this demo gives a poster image for all videos, in practice the video poster is only displayed if the Video item is first and autoPlay is false.

JS数组的操作集合

前端开发zkbhj 发表了文章 • 0 个评论 • 1314 次浏览 • 2016-09-07 14:41 • 来自相关话题

1、数组的创建
var arrayObj = new Array(); //创建一个数组

var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度

var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); //创建一个数组并赋值要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。
 
2、数组的元素的访问
var testGetArrValue=arrayObj[1]; //获取数组的元素值

arrayObj[1]= "这是新值"; //给数组元素赋予新的值
3、数组元素的添加
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾,并返回数组新长度

arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度

arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。
4、数组元素的删除
arrayObj.pop(); //移除最后一个元素并返回该元素值

arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移

arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素
5、数组的截取和合并
arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组
6、数组的拷贝
arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向

arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向
7、数组元素的排序
arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址

arrayObj.sort(); //对数组元素排序,返回数组地址
8、数组元素的字符串化
arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。

toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用
二、数组对象的3个属性

1、length 属性

    Length属性表示数组的长度,即其中元素的个数。因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。和其他大多数语言不同的是,JavaScript数组的length属性是可变的,这一点需要特别注意。当length属性被设置得更大时,整个数组的状态事实上不会发生变化,仅仅是length属性变大;当length属性被设置得比原来小时,则原先数组中索引大于或等于length的元素的值全部被丢失。下面是演示改变length属性的例子:
var arr=[12,23,5,3,25,98,76,54,56,76];

//定义了一个包含10个数字的数组

alert(arr.length); //显示数组的长度10

arr.length=12; //增大数组的长度

alert(arr.length); //显示数组的长度已经变为12

alert(arr[8]); //显示第9个元素的值,为56

arr.length=5; //将数组的长度减少到5,索引等于或超过5的元素被丢弃

alert(arr[8]); //显示第9个元素已经变为"undefined"

arr.length=10; //将数组长度恢复为10

alert(arr[8]); //虽然长度被恢复为10,但第9个元素却无法收回,显示"undefined"
 由上面的代码我们可以清楚的看到length属性的性质。但length对象不仅可以显式的设置,它也有可能被隐式修改。JavaScript中可以使用一个未声明过的变量,同样,也可以使用一个未定义的数组元素(指索引超过或等于length的元素),这时,length属性的值将被设置为所使用元素索引的值加1。例如下面的代码:
var arr=[12,23,5,3,25,98,76,54,56,76];

alert(arr.length);

arr[15]=34;

alert(arr.length);
    代码中同样是先定义了一个包含10个数字的数组,通过alert语句可以看出其长度为10。随后使用了索引为15的元素,将其赋值为15,即 arr[15]=34,这时再用alert语句输出数组的长度,得到的是16。无论如何,对于习惯于强类型编程的开发人员来说,这是一个很令人惊讶的特性。事实上,使用new Array()形式创建的数组,其初始长度就是为0,正是对其中未定义元素的操作,才使数组的长度发生变化。

    由上面的介绍可以看到,length属性是如此的神奇,利用它可以方便的增加或者减少数组的容量。因此对length属性的深入了解,有助于在开发过程中灵活运用。


2、prototype 属性

返回对象类型原型的引用。prototype 属性是 object 共有的。

objectName.prototype

objectName 参数是object对象的名称。

说明:用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。

    对于数组对象,以以下例子说明prototype 属性的用途。

    给数组对象添加返回数组中最大元素值的方法。要完成这一点,声明一个函数,将它加入 Array.prototype, 并使用它。
function array_max()

{

var i,
max = this[0];

for (i = 1; i < this.length; i++)

{

if (max < this[i])

max = this[i];


}

return max;


}

Array.prototype.max = array_max;

var x = new Array(1, 2, 3, 4, 5, 6);

var y = x.max();
该代码执行后,y 保存数组 x 中的最大值,或说 6。


3、constructor 属性

表示创建对象的函数。

object.constructor //object是对象或函数的名称。

说明:constructor 属性是所有具有 prototype 的对象的成员。它们包括除 Global 和 Math 对象以外的所有 JScript 固有对象。constructor 属性保存了对构造特定对象实例的函数的引用。

例如:
x = new String("Hi");

if (x.constructor == String) // 进行处理(条件为真)。
或者
function MyFunc {

// 函数体。

}
y = new MyFunc;

if (y.constructor == MyFunc) // 进行处理(条件为真)。
对于数组来说:
y = new Array(); 查看全部

1、数组的创建
var arrayObj = new Array(); //创建一个数组

var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度

var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); //创建一个数组并赋值
要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。
 
2、数组的元素的访问
var testGetArrValue=arrayObj[1]; //获取数组的元素值

arrayObj[1]= "这是新值"; //给数组元素赋予新的值

3、数组元素的添加
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾,并返回数组新长度

arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度

arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。

4、数组元素的删除
arrayObj.pop(); //移除最后一个元素并返回该元素值

arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移

arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素

5、数组的截取和合并
arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组

6、数组的拷贝
arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向

arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向

7、数组元素的排序
arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址

arrayObj.sort(); //对数组元素排序,返回数组地址

8、数组元素的字符串化
arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。

toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用

二、数组对象的3个属性

1、length 属性

    Length属性表示数组的长度,即其中元素的个数。因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。和其他大多数语言不同的是,JavaScript数组的length属性是可变的,这一点需要特别注意。当length属性被设置得更大时,整个数组的状态事实上不会发生变化,仅仅是length属性变大;当length属性被设置得比原来小时,则原先数组中索引大于或等于length的元素的值全部被丢失。下面是演示改变length属性的例子:
var arr=[12,23,5,3,25,98,76,54,56,76];

//定义了一个包含10个数字的数组

alert(arr.length); //显示数组的长度10

arr.length=12; //增大数组的长度

alert(arr.length); //显示数组的长度已经变为12

alert(arr[8]); //显示第9个元素的值,为56

arr.length=5; //将数组的长度减少到5,索引等于或超过5的元素被丢弃

alert(arr[8]); //显示第9个元素已经变为"undefined"

arr.length=10; //将数组长度恢复为10

alert(arr[8]); //虽然长度被恢复为10,但第9个元素却无法收回,显示"undefined"

 由上面的代码我们可以清楚的看到length属性的性质。但length对象不仅可以显式的设置,它也有可能被隐式修改。JavaScript中可以使用一个未声明过的变量,同样,也可以使用一个未定义的数组元素(指索引超过或等于length的元素),这时,length属性的值将被设置为所使用元素索引的值加1。例如下面的代码:
var arr=[12,23,5,3,25,98,76,54,56,76];

alert(arr.length);

arr[15]=34;

alert(arr.length);

    代码中同样是先定义了一个包含10个数字的数组,通过alert语句可以看出其长度为10。随后使用了索引为15的元素,将其赋值为15,即 arr[15]=34,这时再用alert语句输出数组的长度,得到的是16。无论如何,对于习惯于强类型编程的开发人员来说,这是一个很令人惊讶的特性。事实上,使用new Array()形式创建的数组,其初始长度就是为0,正是对其中未定义元素的操作,才使数组的长度发生变化。

    由上面的介绍可以看到,length属性是如此的神奇,利用它可以方便的增加或者减少数组的容量。因此对length属性的深入了解,有助于在开发过程中灵活运用。


2、prototype 属性

返回对象类型原型的引用。prototype 属性是 object 共有的。

objectName.prototype

objectName 参数是object对象的名称。

说明:用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。

    对于数组对象,以以下例子说明prototype 属性的用途。

    给数组对象添加返回数组中最大元素值的方法。要完成这一点,声明一个函数,将它加入 Array.prototype, 并使用它。
function array_max()

{

var i,
max = this[0];

for (i = 1; i < this.length; i++)

{

if (max < this[i])

max = this[i];


}

return max;


}

Array.prototype.max = array_max;

var x = new Array(1, 2, 3, 4, 5, 6);

var y = x.max();

该代码执行后,y 保存数组 x 中的最大值,或说 6。


3、constructor 属性

表示创建对象的函数。

object.constructor //object是对象或函数的名称。

说明:constructor 属性是所有具有 prototype 的对象的成员。它们包括除 Global 和 Math 对象以外的所有 JScript 固有对象。constructor 属性保存了对构造特定对象实例的函数的引用。

例如:
x = new String("Hi");

if (x.constructor == String) // 进行处理(条件为真)。

或者
function MyFunc {

// 函数体。

}

y = new MyFunc;

if (y.constructor == MyFunc) // 进行处理(条件为真)。

对于数组来说:
y = new Array();

Jquery使用Ajax获取后台返回的Json数据处理

前端开发zkbhj 发表了文章 • 0 个评论 • 2217 次浏览 • 2016-08-15 14:35 • 来自相关话题

<script type="text/javascript">
$(function () {
$.ajax({
url: 'jsondata.ashx',
type: 'GET',
dataType: 'json',
timeout: 1000,
cache: false,
beforeSend: LoadFunction, //加载执行方法
error: erryFunction, //错误执行方法
success: succFunction //成功执行方法
})
function LoadFunction() {
$("#list").html('加载中...');
}
function erryFunction() {
alert("error");
}
function succFunction(tt) {
$("#list").html('');

//eval将字符串转成对象数组
//var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" };
//json = eval(json);
//alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email);

var json = eval(tt); //数组
$.each(json, function (index, item) {
//循环获取数据
var name = json[index].Name;
var idnumber = json[index].IdNumber;
var sex = json[index].Sex;
$("#list").html($("#list").html() + "<br>" + name + " - " + idnumber + " - " + sex + "<br/>");
});
}
});
</script> 查看全部
<script type="text/javascript">  
$(function () {
$.ajax({
url: 'jsondata.ashx',
type: 'GET',
dataType: 'json',
timeout: 1000,
cache: false,
beforeSend: LoadFunction, //加载执行方法
error: erryFunction, //错误执行方法
success: succFunction //成功执行方法
})
function LoadFunction() {
$("#list").html('加载中...');
}
function erryFunction() {
alert("error");
}
function succFunction(tt) {
$("#list").html('');

//eval将字符串转成对象数组
//var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" };
//json = eval(json);
//alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email);

var json = eval(tt); //数组
$.each(json, function (index, item) {
//循环获取数据
var name = json[index].Name;
var idnumber = json[index].IdNumber;
var sex = json[index].Sex;
$("#list").html($("#list").html() + "<br>" + name + " - " + idnumber + " - " + sex + "<br/>");
});
}
});
</script>

前端优秀代码片段

前端开发zkbhj 发表了文章 • 0 个评论 • 2935 次浏览 • 2016-09-19 15:38 • 来自相关话题

 //购物车控制显示
$("#head_car").hover(function(){
$(this).css("background", "#FBFEE9");
$(".head_car_text").css("color", "#ff6700");
$("#car_content").css({"width":"300px"}).animate({
height:"100px"
},400).finish();
},function(){
$(this).css("background", "#424242");
$(".head_car_text").css("color", "#b0b0b0");
$("#car_content").css({"width":"300px"}).animate({
height:"0px"
},400);
})
//导航栏控制显示
$(".menu_li").hover(function(){
$("#menu_content_bg").css("border","1px solid #D0D0D0");
$(this).css("color","#ff6700");
$("#"+$(this).attr("control")).show();
$("#menu_content_bg").height(230);
},function(){
$("#"+$(this).attr("control")).hide();
$(this).css("color"," #424242");
$("#menu_content_bg").height(0);
$("#menu_content_bg").css("border","0px solid #D0D0D0");
})
//搜索框失去和获取焦点border颜色改变
$("#find_input").focus(function(){
$("#find_wrap").css("border","1px solid #ff6700");
$("#find_but").css("border-left","1px solid #ff6700");
})
$("#find_input").blur(function(){
$("#find_wrap").css("border","1px solid #F0F0F0");
$("#find_but").css("border-left","1px solid #F0F0F0");
})
//搜索按钮的背景颜色改变
$("#find_but").hover(function(){
$(this).css({"background":"#ff6700",color:"#fff"});
},function(){
$(this).css({"background":"#fff",color:"#424242"});
})
//菜单栏的显示
$("#banner_menu_wrap").children().hover(function(){
$(this).css("background","#ff6700");
$(this).children(".banner_menu_content").css("border","1px solid #F0F0F0").show();
},function(){
$(this).css("background","none");
$(this).children(".banner_menu_content").css("border","0px solid #F0F0F0").hide();
}) 查看全部
 
//购物车控制显示
$("#head_car").hover(function(){
$(this).css("background", "#FBFEE9");
$(".head_car_text").css("color", "#ff6700");
$("#car_content").css({"width":"300px"}).animate({
height:"100px"
},400).finish();
},function(){
$(this).css("background", "#424242");
$(".head_car_text").css("color", "#b0b0b0");
$("#car_content").css({"width":"300px"}).animate({
height:"0px"
},400);
})

//导航栏控制显示
$(".menu_li").hover(function(){
$("#menu_content_bg").css("border","1px solid #D0D0D0");
$(this).css("color","#ff6700");
$("#"+$(this).attr("control")).show();
$("#menu_content_bg").height(230);
},function(){
$("#"+$(this).attr("control")).hide();
$(this).css("color"," #424242");
$("#menu_content_bg").height(0);
$("#menu_content_bg").css("border","0px solid #D0D0D0");
})

//搜索框失去和获取焦点border颜色改变
$("#find_input").focus(function(){
$("#find_wrap").css("border","1px solid #ff6700");
$("#find_but").css("border-left","1px solid #ff6700");
})
$("#find_input").blur(function(){
$("#find_wrap").css("border","1px solid #F0F0F0");
$("#find_but").css("border-left","1px solid #F0F0F0");
})

//搜索按钮的背景颜色改变
$("#find_but").hover(function(){
$(this).css({"background":"#ff6700",color:"#fff"});
},function(){
$(this).css({"background":"#fff",color:"#424242"});
})

//菜单栏的显示
$("#banner_menu_wrap").children().hover(function(){
$(this).css("background","#ff6700");
$(this).children(".banner_menu_content").css("border","1px solid #F0F0F0").show();
},function(){
$(this).css("background","none");
$(this).children(".banner_menu_content").css("border","0px solid #F0F0F0").hide();
})

JS如何判断接口返回值中是否存在某个字段?

回复

前端开发zkbhj 回复了问题 • 1 人关注 • 1 个回复 • 6625 次浏览 • 2016-09-14 10:11 • 来自相关话题

如何为动态刷新出来的元素绑定JQuery事件?

回复

前端开发zkbhj 回复了问题 • 1 人关注 • 1 个回复 • 2864 次浏览 • 2016-09-08 10:04 • 来自相关话题

前端优秀代码片段

前端开发zkbhj 发表了文章 • 0 个评论 • 2935 次浏览 • 2016-09-19 15:38 • 来自相关话题

 //购物车控制显示
$("#head_car").hover(function(){
$(this).css("background", "#FBFEE9");
$(".head_car_text").css("color", "#ff6700");
$("#car_content").css({"width":"300px"}).animate({
height:"100px"
},400).finish();
},function(){
$(this).css("background", "#424242");
$(".head_car_text").css("color", "#b0b0b0");
$("#car_content").css({"width":"300px"}).animate({
height:"0px"
},400);
})
//导航栏控制显示
$(".menu_li").hover(function(){
$("#menu_content_bg").css("border","1px solid #D0D0D0");
$(this).css("color","#ff6700");
$("#"+$(this).attr("control")).show();
$("#menu_content_bg").height(230);
},function(){
$("#"+$(this).attr("control")).hide();
$(this).css("color"," #424242");
$("#menu_content_bg").height(0);
$("#menu_content_bg").css("border","0px solid #D0D0D0");
})
//搜索框失去和获取焦点border颜色改变
$("#find_input").focus(function(){
$("#find_wrap").css("border","1px solid #ff6700");
$("#find_but").css("border-left","1px solid #ff6700");
})
$("#find_input").blur(function(){
$("#find_wrap").css("border","1px solid #F0F0F0");
$("#find_but").css("border-left","1px solid #F0F0F0");
})
//搜索按钮的背景颜色改变
$("#find_but").hover(function(){
$(this).css({"background":"#ff6700",color:"#fff"});
},function(){
$(this).css({"background":"#fff",color:"#424242"});
})
//菜单栏的显示
$("#banner_menu_wrap").children().hover(function(){
$(this).css("background","#ff6700");
$(this).children(".banner_menu_content").css("border","1px solid #F0F0F0").show();
},function(){
$(this).css("background","none");
$(this).children(".banner_menu_content").css("border","0px solid #F0F0F0").hide();
}) 查看全部
 
//购物车控制显示
$("#head_car").hover(function(){
$(this).css("background", "#FBFEE9");
$(".head_car_text").css("color", "#ff6700");
$("#car_content").css({"width":"300px"}).animate({
height:"100px"
},400).finish();
},function(){
$(this).css("background", "#424242");
$(".head_car_text").css("color", "#b0b0b0");
$("#car_content").css({"width":"300px"}).animate({
height:"0px"
},400);
})

//导航栏控制显示
$(".menu_li").hover(function(){
$("#menu_content_bg").css("border","1px solid #D0D0D0");
$(this).css("color","#ff6700");
$("#"+$(this).attr("control")).show();
$("#menu_content_bg").height(230);
},function(){
$("#"+$(this).attr("control")).hide();
$(this).css("color"," #424242");
$("#menu_content_bg").height(0);
$("#menu_content_bg").css("border","0px solid #D0D0D0");
})

//搜索框失去和获取焦点border颜色改变
$("#find_input").focus(function(){
$("#find_wrap").css("border","1px solid #ff6700");
$("#find_but").css("border-left","1px solid #ff6700");
})
$("#find_input").blur(function(){
$("#find_wrap").css("border","1px solid #F0F0F0");
$("#find_but").css("border-left","1px solid #F0F0F0");
})

//搜索按钮的背景颜色改变
$("#find_but").hover(function(){
$(this).css({"background":"#ff6700",color:"#fff"});
},function(){
$(this).css({"background":"#fff",color:"#424242"});
})

//菜单栏的显示
$("#banner_menu_wrap").children().hover(function(){
$(this).css("background","#ff6700");
$(this).children(".banner_menu_content").css("border","1px solid #F0F0F0").show();
},function(){
$(this).css("background","none");
$(this).children(".banner_menu_content").css("border","0px solid #F0F0F0").hide();
})

jquery中ajax请求error函数和及其参数详细说明

前端开发zkbhj 发表了文章 • 0 个评论 • 1504 次浏览 • 2016-09-19 10:38 • 来自相关话题

使用jquery的ajax方法向服务器发送请求的时候,常常需要使用到error函数进行错误信息的处理,本文详细的说明了ajax中error函数和函数中各个参数的用法。

一般error函数返回的参数有三个: function(jqXHR jqXHR, String textStatus, String errorThrown)。常见调用代码如下:
$.ajax({
url: '/Home/AjaxGetData',
success: function (data) {
alert(data);
},
error: function (jqXHR, textStatus, errorThrown) {
/*错误信息处理*/
}
});这里对这三个参数做详细说明。
 
第一个参数 jqXHR jqXHR:这里的jqXHR是一个jqXHR对象,在Jquery1.4和1.4版本之前返回的是XMLHttpRequest对象,1.5版本以后则开始使用jqXHR对象,该对象是一个超集,就是该对象不仅包括XMLHttpRequest对象,还包含其他更多的详细属性和信息。

这里主要有4个属性:
readyState :当前状态,0-未初始化,1-正在载入,2-已经载入,3-数据进行交互,4-完成。status  :返回的HTTP状态码,比如常见的404,500等错误代码。statusText :对应状态码的错误信息,比如404错误信息是not found,500是Internal Server Error。responseText :服务器响应返回的文本信息
第二个参数 String textStatus:返回的是字符串类型,表示返回的状态,根据服务器不同的错误可能返回下面这些信息:"timeout"(超时), "error"(错误), "abort"(中止), "parsererror"(解析错误),还有可能返回空值。
 
第三个参数 String errorThrown:也是字符串类型,表示服务器抛出返回的错误信息,如果产生的是HTTP错误,那么返回的信息就是HTTP状态码对应的错误信息,比如404的Not Found,500错误的Internal Server Error。
 
示例代码:
 
$.ajax({
url: '/AJAX请求的URL',
success: function (data) {
alert(data);
},
error: function (jqXHR, textStatus, errorThrown) {
/*弹出jqXHR对象的信息*/
alert(jqXHR.responseText);
alert(jqXHR.status);
alert(jqXHR.readyState);
alert(jqXHR.statusText);
/*弹出其他两个参数的信息*/
alert(textStatus);
alert(errorThrown);
}
});
官方文档地址:http://api.jquery.com/jQuery.ajax/ 查看全部
使用jquery的ajax方法向服务器发送请求的时候,常常需要使用到error函数进行错误信息的处理,本文详细的说明了ajax中error函数和函数中各个参数的用法。

一般error函数返回的参数有三个: function(jqXHR jqXHR, String textStatus, String errorThrown)。常见调用代码如下:
$.ajax({
url: '/Home/AjaxGetData',
success: function (data) {
alert(data);
},
error: function (jqXHR, textStatus, errorThrown) {
/*错误信息处理*/
}
});
这里对这三个参数做详细说明。
 
第一个参数 jqXHR jqXHR:这里的jqXHR是一个jqXHR对象,在Jquery1.4和1.4版本之前返回的是XMLHttpRequest对象,1.5版本以后则开始使用jqXHR对象,该对象是一个超集,就是该对象不仅包括XMLHttpRequest对象,还包含其他更多的详细属性和信息。

这里主要有4个属性:
  • readyState :当前状态,0-未初始化,1-正在载入,2-已经载入,3-数据进行交互,4-完成。
  • status  :返回的HTTP状态码,比如常见的404,500等错误代码。
  • statusText :对应状态码的错误信息,比如404错误信息是not found,500是Internal Server Error。
  • responseText :服务器响应返回的文本信息

第二个参数 String textStatus:返回的是字符串类型,表示返回的状态,根据服务器不同的错误可能返回下面这些信息:"timeout"(超时), "error"(错误), "abort"(中止), "parsererror"(解析错误),还有可能返回空值。
 
第三个参数 String errorThrown:也是字符串类型,表示服务器抛出返回的错误信息,如果产生的是HTTP错误,那么返回的信息就是HTTP状态码对应的错误信息,比如404的Not Found,500错误的Internal Server Error。
 
示例代码:
 
$.ajax({
url: '/AJAX请求的URL',
success: function (data) {
alert(data);
},
error: function (jqXHR, textStatus, errorThrown) {
/*弹出jqXHR对象的信息*/
alert(jqXHR.responseText);
alert(jqXHR.status);
alert(jqXHR.readyState);
alert(jqXHR.statusText);
/*弹出其他两个参数的信息*/
alert(textStatus);
alert(errorThrown);
}
});

官方文档地址:http://api.jquery.com/jQuery.ajax/

jPlayer中Playlist相关方法参数

前端开发zkbhj 发表了文章 • 0 个评论 • 1585 次浏览 • 2016-09-07 15:35 • 来自相关话题

The constructor

The playlist in this demo is instanced with 1 item in it and uses the{supplied:"ogv,m4v,oga,mp3"}supplied:"ogv,m4v,oga,mp3"} option to enable a media player that accepts audio and video.
 
var myPlaylist = new jPlayerPlaylist({ myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_N",
cssSelectorAncestor: "#jp_container_N"
}, [
{
title:"Cro Magnon Man",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
}
], {
playlistOptions: {
enableRemoveControls: true
},
swfPath: "/js",
supplied: "ogv, m4v, oga, mp3",
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: true // Allows the audio poster to go full screen via keyboard
});The constructor might look scary to JavaScript newcomers, but it is really just 1 line of JavaScript, laid out in an easy to read manner. JSON (JavaScript Object Notation) is used in this demo to create the objects and arrays passed to the constructor. The parameters are an object, an array and an object:
// This is pseudo-code.
var myPlaylist = new jPlayerPlaylist({cssSelector}, [playlist], {options});The parameters can be created outside the constructor to suit your goal. In particular, the options may be common to all your instances on a page. The playlist could be generated through an AJAX call to a JSON or XML url.
var cssSelector = { jPlayer: "#jquery_jplayer_N", cssSelectorAncestor: "#jp_container_N" }; cssSelector = { jPlayer: "#jquery_jplayer_N", cssSelectorAncestor: "#jp_container_N" };
var playlist = []; // Empty playlist
var options = { swfPath: "/js", supplied: "ogv, m4v, oga, mp3" };
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
Defining the css selectors

The first parameter is an object used to define the css selectors that point at the jPlayer and container HTML elements. The jPlayer element is where the video output is displayed and the container, cssSelectorAncestor, is the outter divider of the player skin HTML.

To use the default values, use an empty object, {}. The defaults are:
{
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}
Defining the playlist content

The second parameter is an Array of Objects used to define the playlist. The object elements are used by the jPlayer setMedia command, so follow the rules for suppling the formats defined in thesupplied option. The title, artist and free properties are used by jPlayerPlaylist to display each item. To start with an empty playlist, use an empty array, []. A playlist with a single audio item looks like:
[
{
title:"The Title",
artist:"The Artist", // Optional
free: Boolean, // Optional - Generates links to the media
mp3:"MP3 URL", // Dependant on supplied option
oga:"OGA URL", // Dependant on supplied option
poster: "Poster URL" // Optional
}
]
Defining the jPlayer and playlist options

The third parameter is an object to define the jPlayer options and jPlayerPlaylist options. This object is passed to jPlayer, and is used to setup the basic jPlayer options, such as solution, supplied and the all important swfPath. You can define all options, except for the cssSelectorAncestor and therepeat event handler, which are overridden by the jPlayerPlaylist code. Remember that event handlers are not really options. The playlist code binds event handlers to jPlayer events, such asready and ended, which might interact with your event handlers in unexpected ways. Example options are:
{
playlistOptions: {
autoPlay: true,
enableRemoveControls: true
},
swfPath: "/js",
supplied: "mp3, oga"
}
Default playlist options:
playlistOptions: {: {
autoPlay: false,
loopOnPrevious: false,
shuffleOnLoop: true,
enableRemoveControls: false,
displayTime: 'slow',
addTime: 'fast',
removeTime: 'fast',
shuffleTime: 'slow'
}
Control flag descriptions:

autoPlay : Boolean : Will auto-play when instanced on the page, and when a new playlist is given using setPlaylist()(). Remember that mobile devices require a gesture before anything will play. Recommend leaving this as false initially... And change it later if you want when changing the playlist through a user gesture. eg., They clicked on a link to change the playlist and your click handler changes autoPlay to true before you setPlaylist().
loopOnPrevious : Boolean : If loop is active, the playlist will loop back to the end when executingprevious()().
shuffleOnLoop : Boolean : If loop and shuffle are active, the playlist will shuffle when executingnext()() on the last item.
enableRemoveControls : Boolean : Displays the remove controls for each item.


Animation timing controls:

These options use jQuery animation timings, where the time is in milliseconds and also the strings 'slow' and 'fast' can be used. To make changes instant, set the time to zero, which removes the animation effect.

displayTime : Number/String : The period of the slide-up and slide-down animations when a new playlist is displayed.
addTime : Number/String : The period of the slide-down animation when a new item is added.
removeTime : Number/String : The period of the slide-up animation when a item is removed.
shuffleTime : Number/String : The period of the slide-up and slide-down animations when a playlist is shuffled.


jPlayerPlaylist methods:

setPlaylist(playlist:Array) : Void
Change the playlist. (See playlistOptions.autoPlay.autoPlay to cause it to play automatically.)
myPlaylist.setPlaylist([.setPlaylist([
{
title:"Cro Magnon Man",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
},
{
title:"Hidden",
artist:"Miaow",
free: true,
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
}
]);
add(media:Object, [playNow:Boolean]) : Void
Add a media item to the end of the playlist. Optional playNow param to start it playing after adding it.
myPlaylist.add({.add({
title:"Your Face",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
});
 remove([index:Number]) : Boolean
Removes the item from the playlist. Removes all items if no param is given. A positive index removes items from the start of the playlist while a negative index removes items from the end.
// Examples of usage:
myPlaylist.remove(); // Removes all items
myPlaylist.remove(0); // Removes the 1st item
myPlaylist.remove(1); // Removes the 2nd item
myPlaylist.remove(-1); // Removes the last item
if( myPlaylist.remove(0) ) {
alert("1st item removed successfully!");
} else {
alert("Failed to remove 1st item!"); // A remove operation is being animated.
}
select(index:Number) : Void
Selects the item in the playlist. A positive index selects items from the start of the playlist while a negative index selects items from the end.
// Examples of usage:
myPlaylist.select(0); // Selects the 1st item
myPlaylist.select(1); // Selects the 2nd item
myPlaylist.select(-1); // Selects the last item
play([index:Number]) : Void
Plays the item in the playlist. Plays the current item if no param is given. A positive index plays items from the start of the playlist while a negative index plays items from the end.
// Examples of usage:
myPlaylist.play(); // Plays the currently selected item
myPlaylist.play(0); // Plays the 1st item
myPlaylist.play(1); // Plays the 2nd item
myPlaylist.play(-1); // Plays the last item
shuffle([shuffled:Boolean], [playNow:Boolean]) : Void
Shuffle the playlist. Toggles shuffled setting if no param is given. True always shuffles the playlist. False will un-shuffle if it was shuffled. The playNow param will cause the first item to play automatically. (playNow can only be used if the first param is given. Use shuffle(undefined,true) to toggle and play.)
// Examples of usage:
myPlaylist.shuffle(); // Toggles shuffle state
myPlaylist.shuffle(true); // Shuffle the playlist
myPlaylist.shuffle(false); // Un-shuffle the playlist
myPlaylist.shuffle(true, true); // Shuffle the playlist and plays
next() : Void
Move to and play the next item in the playlist. The behaviour for the last item depends on the loop state, the shuffle state and the playlistOptions.shuffleOnLoop.shuffleOnLoop option.
myPlaylist.next();
.next();
previous() : Void
Move to and play the previous item in the playlist. The behaviour for the first item depends on the loop state and the playlistOptions.loopOnPrevious.loopOnPrevious option. (The playlist is never shuffled when looping back to the last item.)
myPlaylist.previous();
.previous();
pause() : Void
Pause the current item.
myPlaylist.pause();
.pause();
option(option:String, [value:Mixed]) : Void
Set or get the playlist option.
// Examples of usage:
var controls = myPlaylist.option("enableRemoveControls"); // Get option
myPlaylist.option("enableRemoveControls", true); // Set option
The HTML Structure

The playlist looks for the class jp-playlist-playlist within the cssSelectorAncestor element. A <ul> element is expected here, which is used to generate the item list.
<div id="jp_container_N"> id="jp_container_N">
<div class="jp-playlist">
<ul>
<li></li> <!-- Empty <li> so your HTML conforms with the W3C spec -->
</ul>
</div>
</div>
The playlist is automatically added as <li> elements to the <ul> element. The jp-free-media-free-media span is only generated when the playlist item has its free property set.
<li>
<div>
<a class="jp-playlist-item-remove" href="javascript:;">&times;</a>
<span class="jp-free-media">
(<a tabindex="1" href="http://www.jplayer.org/audio/m ... ot%3B class="jp-playlist-item-free">mp3</a> )
</span>
<a tabindex="1" class="jp-playlist-item" href="javascript:;">Cro Magnon Man <span class="jp-artist">by The Stark Palace</span></a>
</div>
</li>
The Techie Bit

The jPlayerPlaylist code is enclosed in a self-executing function that protects the jQuery variable within its scope, thus allowing the $ shortcut to be used within its code without conflicting with other JavaScript libraries. jPlayer does this too of course, which allowsjQuery.noConflict().noConflict() to be used.

The jPlayerPlaylist is an add-on to jPlayer. It is not a jQuery plugin, but a JavaScript object definition. You instance it like any other object, using the new operator.

jPlayerPlaylist is the only variable added to Javascript's global namespace.

When using jPlayerPlaylist with the animations and issuing comands from JavaScript, be aware that the animations take time to complete. Bombarding the playlist with many JavaScript commands may well give unexpected results unless you set all the animation timings to zero.

While this demo gives a poster image for all videos, in practice the video poster is only displayed if the Video item is first and autoPlay is false. 查看全部
The constructor

The playlist in this demo is instanced with 1 item in it and uses the{supplied:"ogv,m4v,oga,mp3"}supplied:"ogv,m4v,oga,mp3"} option to enable a media player that accepts audio and video.
 
var myPlaylist = new jPlayerPlaylist({ myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_N",
cssSelectorAncestor: "#jp_container_N"
}, [
{
title:"Cro Magnon Man",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
}
], {
playlistOptions: {
enableRemoveControls: true
},
swfPath: "/js",
supplied: "ogv, m4v, oga, mp3",
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: true // Allows the audio poster to go full screen via keyboard
});
The constructor might look scary to JavaScript newcomers, but it is really just 1 line of JavaScript, laid out in an easy to read manner. JSON (JavaScript Object Notation) is used in this demo to create the objects and arrays passed to the constructor. The parameters are an object, an array and an object:
// This is pseudo-code.
var myPlaylist = new jPlayerPlaylist({cssSelector}, [playlist], {options});
The parameters can be created outside the constructor to suit your goal. In particular, the options may be common to all your instances on a page. The playlist could be generated through an AJAX call to a JSON or XML url.
var cssSelector = { jPlayer: "#jquery_jplayer_N", cssSelectorAncestor: "#jp_container_N" }; cssSelector = { jPlayer: "#jquery_jplayer_N", cssSelectorAncestor: "#jp_container_N" };
var playlist = []; // Empty playlist
var options = { swfPath: "/js", supplied: "ogv, m4v, oga, mp3" };
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);

Defining the css selectors

The first parameter is an object used to define the css selectors that point at the jPlayer and container HTML elements. The jPlayer element is where the video output is displayed and the container, cssSelectorAncestor, is the outter divider of the player skin HTML.

To use the default values, use an empty object, {}. The defaults are:
{
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}

Defining the playlist content

The second parameter is an Array of Objects used to define the playlist. The object elements are used by the jPlayer setMedia command, so follow the rules for suppling the formats defined in thesupplied option. The title, artist and free properties are used by jPlayerPlaylist to display each item. To start with an empty playlist, use an empty array, []. A playlist with a single audio item looks like:
[
{
title:"The Title",
artist:"The Artist", // Optional
free: Boolean, // Optional - Generates links to the media
mp3:"MP3 URL", // Dependant on supplied option
oga:"OGA URL", // Dependant on supplied option
poster: "Poster URL" // Optional
}
]

Defining the jPlayer and playlist options

The third parameter is an object to define the jPlayer options and jPlayerPlaylist options. This object is passed to jPlayer, and is used to setup the basic jPlayer options, such as solution, supplied and the all important swfPath. You can define all options, except for the cssSelectorAncestor and therepeat event handler, which are overridden by the jPlayerPlaylist code. Remember that event handlers are not really options. The playlist code binds event handlers to jPlayer events, such asready and ended, which might interact with your event handlers in unexpected ways. Example options are:
{
playlistOptions: {
autoPlay: true,
enableRemoveControls: true
},
swfPath: "/js",
supplied: "mp3, oga"
}

Default playlist options:
playlistOptions: {: {
autoPlay: false,
loopOnPrevious: false,
shuffleOnLoop: true,
enableRemoveControls: false,
displayTime: 'slow',
addTime: 'fast',
removeTime: 'fast',
shuffleTime: 'slow'
}

Control flag descriptions:

autoPlay : Boolean : Will auto-play when instanced on the page, and when a new playlist is given using setPlaylist()(). Remember that mobile devices require a gesture before anything will play. Recommend leaving this as false initially... And change it later if you want when changing the playlist through a user gesture. eg., They clicked on a link to change the playlist and your click handler changes autoPlay to true before you setPlaylist().
loopOnPrevious : Boolean : If loop is active, the playlist will loop back to the end when executingprevious()().
shuffleOnLoop : Boolean : If loop and shuffle are active, the playlist will shuffle when executingnext()() on the last item.
enableRemoveControls : Boolean : Displays the remove controls for each item.


Animation timing controls:

These options use jQuery animation timings, where the time is in milliseconds and also the strings 'slow' and 'fast' can be used. To make changes instant, set the time to zero, which removes the animation effect.

displayTime : Number/String : The period of the slide-up and slide-down animations when a new playlist is displayed.
addTime : Number/String : The period of the slide-down animation when a new item is added.
removeTime : Number/String : The period of the slide-up animation when a item is removed.
shuffleTime : Number/String : The period of the slide-up and slide-down animations when a playlist is shuffled.


jPlayerPlaylist methods:

setPlaylist(playlist:Array) : Void
Change the playlist. (See playlistOptions.autoPlay.autoPlay to cause it to play automatically.)
myPlaylist.setPlaylist([.setPlaylist([
{
title:"Cro Magnon Man",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
},
{
title:"Hidden",
artist:"Miaow",
free: true,
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
}
]);

add(media:Object, [playNow:Boolean]) : Void
Add a media item to the end of the playlist. Optional playNow param to start it playing after adding it.
myPlaylist.add({.add({
title:"Your Face",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
});

 remove([index:Number]) : Boolean
Removes the item from the playlist. Removes all items if no param is given. A positive index removes items from the start of the playlist while a negative index removes items from the end.
// Examples of usage:
myPlaylist.remove(); // Removes all items
myPlaylist.remove(0); // Removes the 1st item
myPlaylist.remove(1); // Removes the 2nd item
myPlaylist.remove(-1); // Removes the last item
if( myPlaylist.remove(0) ) {
alert("1st item removed successfully!");
} else {
alert("Failed to remove 1st item!"); // A remove operation is being animated.
}

select(index:Number) : Void
Selects the item in the playlist. A positive index selects items from the start of the playlist while a negative index selects items from the end.
// Examples of usage:
myPlaylist.select(0); // Selects the 1st item
myPlaylist.select(1); // Selects the 2nd item
myPlaylist.select(-1); // Selects the last item

play([index:Number]) : Void
Plays the item in the playlist. Plays the current item if no param is given. A positive index plays items from the start of the playlist while a negative index plays items from the end.
// Examples of usage:
myPlaylist.play(); // Plays the currently selected item
myPlaylist.play(0); // Plays the 1st item
myPlaylist.play(1); // Plays the 2nd item
myPlaylist.play(-1); // Plays the last item

shuffle([shuffled:Boolean], [playNow:Boolean]) : Void
Shuffle the playlist. Toggles shuffled setting if no param is given. True always shuffles the playlist. False will un-shuffle if it was shuffled. The playNow param will cause the first item to play automatically. (playNow can only be used if the first param is given. Use shuffle(undefined,true) to toggle and play.)
// Examples of usage:
myPlaylist.shuffle(); // Toggles shuffle state
myPlaylist.shuffle(true); // Shuffle the playlist
myPlaylist.shuffle(false); // Un-shuffle the playlist
myPlaylist.shuffle(true, true); // Shuffle the playlist and plays

next() : Void
Move to and play the next item in the playlist. The behaviour for the last item depends on the loop state, the shuffle state and the playlistOptions.shuffleOnLoop.shuffleOnLoop option.
myPlaylist.next();
.next();

previous() : Void
Move to and play the previous item in the playlist. The behaviour for the first item depends on the loop state and the playlistOptions.loopOnPrevious.loopOnPrevious option. (The playlist is never shuffled when looping back to the last item.)
myPlaylist.previous();
.previous();

pause() : Void
Pause the current item.
myPlaylist.pause();
.pause();

option(option:String, [value:Mixed]) : Void
Set or get the playlist option.
// Examples of usage:
var controls = myPlaylist.option("enableRemoveControls"); // Get option
myPlaylist.option("enableRemoveControls", true); // Set option

The HTML Structure

The playlist looks for the class jp-playlist-playlist within the cssSelectorAncestor element. A <ul> element is expected here, which is used to generate the item list.
<div id="jp_container_N"> id="jp_container_N">
<div class="jp-playlist">
<ul>
<li></li> <!-- Empty <li> so your HTML conforms with the W3C spec -->
</ul>
</div>
</div>

The playlist is automatically added as <li> elements to the <ul> element. The jp-free-media-free-media span is only generated when the playlist item has its free property set.
<li>
<div>
<a class="jp-playlist-item-remove" href="javascript:;">&times;</a>
<span class="jp-free-media">
(<a tabindex="1" href="http://www.jplayer.org/audio/m ... ot%3B class="jp-playlist-item-free">mp3</a> )
</span>
<a tabindex="1" class="jp-playlist-item" href="javascript:;">Cro Magnon Man <span class="jp-artist">by The Stark Palace</span></a>
</div>
</li>

The Techie Bit

The jPlayerPlaylist code is enclosed in a self-executing function that protects the jQuery variable within its scope, thus allowing the $ shortcut to be used within its code without conflicting with other JavaScript libraries. jPlayer does this too of course, which allowsjQuery.noConflict().noConflict() to be used.

The jPlayerPlaylist is an add-on to jPlayer. It is not a jQuery plugin, but a JavaScript object definition. You instance it like any other object, using the new operator.

jPlayerPlaylist is the only variable added to Javascript's global namespace.

When using jPlayerPlaylist with the animations and issuing comands from JavaScript, be aware that the animations take time to complete. Bombarding the playlist with many JavaScript commands may well give unexpected results unless you set all the animation timings to zero.

While this demo gives a poster image for all videos, in practice the video poster is only displayed if the Video item is first and autoPlay is false.

JS数组的操作集合

前端开发zkbhj 发表了文章 • 0 个评论 • 1314 次浏览 • 2016-09-07 14:41 • 来自相关话题

1、数组的创建
var arrayObj = new Array(); //创建一个数组

var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度

var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); //创建一个数组并赋值要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。
 
2、数组的元素的访问
var testGetArrValue=arrayObj[1]; //获取数组的元素值

arrayObj[1]= "这是新值"; //给数组元素赋予新的值
3、数组元素的添加
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾,并返回数组新长度

arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度

arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。
4、数组元素的删除
arrayObj.pop(); //移除最后一个元素并返回该元素值

arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移

arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素
5、数组的截取和合并
arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组
6、数组的拷贝
arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向

arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向
7、数组元素的排序
arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址

arrayObj.sort(); //对数组元素排序,返回数组地址
8、数组元素的字符串化
arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。

toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用
二、数组对象的3个属性

1、length 属性

    Length属性表示数组的长度,即其中元素的个数。因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。和其他大多数语言不同的是,JavaScript数组的length属性是可变的,这一点需要特别注意。当length属性被设置得更大时,整个数组的状态事实上不会发生变化,仅仅是length属性变大;当length属性被设置得比原来小时,则原先数组中索引大于或等于length的元素的值全部被丢失。下面是演示改变length属性的例子:
var arr=[12,23,5,3,25,98,76,54,56,76];

//定义了一个包含10个数字的数组

alert(arr.length); //显示数组的长度10

arr.length=12; //增大数组的长度

alert(arr.length); //显示数组的长度已经变为12

alert(arr[8]); //显示第9个元素的值,为56

arr.length=5; //将数组的长度减少到5,索引等于或超过5的元素被丢弃

alert(arr[8]); //显示第9个元素已经变为"undefined"

arr.length=10; //将数组长度恢复为10

alert(arr[8]); //虽然长度被恢复为10,但第9个元素却无法收回,显示"undefined"
 由上面的代码我们可以清楚的看到length属性的性质。但length对象不仅可以显式的设置,它也有可能被隐式修改。JavaScript中可以使用一个未声明过的变量,同样,也可以使用一个未定义的数组元素(指索引超过或等于length的元素),这时,length属性的值将被设置为所使用元素索引的值加1。例如下面的代码:
var arr=[12,23,5,3,25,98,76,54,56,76];

alert(arr.length);

arr[15]=34;

alert(arr.length);
    代码中同样是先定义了一个包含10个数字的数组,通过alert语句可以看出其长度为10。随后使用了索引为15的元素,将其赋值为15,即 arr[15]=34,这时再用alert语句输出数组的长度,得到的是16。无论如何,对于习惯于强类型编程的开发人员来说,这是一个很令人惊讶的特性。事实上,使用new Array()形式创建的数组,其初始长度就是为0,正是对其中未定义元素的操作,才使数组的长度发生变化。

    由上面的介绍可以看到,length属性是如此的神奇,利用它可以方便的增加或者减少数组的容量。因此对length属性的深入了解,有助于在开发过程中灵活运用。


2、prototype 属性

返回对象类型原型的引用。prototype 属性是 object 共有的。

objectName.prototype

objectName 参数是object对象的名称。

说明:用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。

    对于数组对象,以以下例子说明prototype 属性的用途。

    给数组对象添加返回数组中最大元素值的方法。要完成这一点,声明一个函数,将它加入 Array.prototype, 并使用它。
function array_max()

{

var i,
max = this[0];

for (i = 1; i < this.length; i++)

{

if (max < this[i])

max = this[i];


}

return max;


}

Array.prototype.max = array_max;

var x = new Array(1, 2, 3, 4, 5, 6);

var y = x.max();
该代码执行后,y 保存数组 x 中的最大值,或说 6。


3、constructor 属性

表示创建对象的函数。

object.constructor //object是对象或函数的名称。

说明:constructor 属性是所有具有 prototype 的对象的成员。它们包括除 Global 和 Math 对象以外的所有 JScript 固有对象。constructor 属性保存了对构造特定对象实例的函数的引用。

例如:
x = new String("Hi");

if (x.constructor == String) // 进行处理(条件为真)。
或者
function MyFunc {

// 函数体。

}
y = new MyFunc;

if (y.constructor == MyFunc) // 进行处理(条件为真)。
对于数组来说:
y = new Array(); 查看全部

1、数组的创建
var arrayObj = new Array(); //创建一个数组

var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度

var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); //创建一个数组并赋值
要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。
 
2、数组的元素的访问
var testGetArrValue=arrayObj[1]; //获取数组的元素值

arrayObj[1]= "这是新值"; //给数组元素赋予新的值

3、数组元素的添加
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾,并返回数组新长度

arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度

arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。

4、数组元素的删除
arrayObj.pop(); //移除最后一个元素并返回该元素值

arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移

arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素

5、数组的截取和合并
arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组

6、数组的拷贝
arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向

arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向

7、数组元素的排序
arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址

arrayObj.sort(); //对数组元素排序,返回数组地址

8、数组元素的字符串化
arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。

toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用

二、数组对象的3个属性

1、length 属性

    Length属性表示数组的长度,即其中元素的个数。因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。和其他大多数语言不同的是,JavaScript数组的length属性是可变的,这一点需要特别注意。当length属性被设置得更大时,整个数组的状态事实上不会发生变化,仅仅是length属性变大;当length属性被设置得比原来小时,则原先数组中索引大于或等于length的元素的值全部被丢失。下面是演示改变length属性的例子:
var arr=[12,23,5,3,25,98,76,54,56,76];

//定义了一个包含10个数字的数组

alert(arr.length); //显示数组的长度10

arr.length=12; //增大数组的长度

alert(arr.length); //显示数组的长度已经变为12

alert(arr[8]); //显示第9个元素的值,为56

arr.length=5; //将数组的长度减少到5,索引等于或超过5的元素被丢弃

alert(arr[8]); //显示第9个元素已经变为"undefined"

arr.length=10; //将数组长度恢复为10

alert(arr[8]); //虽然长度被恢复为10,但第9个元素却无法收回,显示"undefined"

 由上面的代码我们可以清楚的看到length属性的性质。但length对象不仅可以显式的设置,它也有可能被隐式修改。JavaScript中可以使用一个未声明过的变量,同样,也可以使用一个未定义的数组元素(指索引超过或等于length的元素),这时,length属性的值将被设置为所使用元素索引的值加1。例如下面的代码:
var arr=[12,23,5,3,25,98,76,54,56,76];

alert(arr.length);

arr[15]=34;

alert(arr.length);

    代码中同样是先定义了一个包含10个数字的数组,通过alert语句可以看出其长度为10。随后使用了索引为15的元素,将其赋值为15,即 arr[15]=34,这时再用alert语句输出数组的长度,得到的是16。无论如何,对于习惯于强类型编程的开发人员来说,这是一个很令人惊讶的特性。事实上,使用new Array()形式创建的数组,其初始长度就是为0,正是对其中未定义元素的操作,才使数组的长度发生变化。

    由上面的介绍可以看到,length属性是如此的神奇,利用它可以方便的增加或者减少数组的容量。因此对length属性的深入了解,有助于在开发过程中灵活运用。


2、prototype 属性

返回对象类型原型的引用。prototype 属性是 object 共有的。

objectName.prototype

objectName 参数是object对象的名称。

说明:用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。

    对于数组对象,以以下例子说明prototype 属性的用途。

    给数组对象添加返回数组中最大元素值的方法。要完成这一点,声明一个函数,将它加入 Array.prototype, 并使用它。
function array_max()

{

var i,
max = this[0];

for (i = 1; i < this.length; i++)

{

if (max < this[i])

max = this[i];


}

return max;


}

Array.prototype.max = array_max;

var x = new Array(1, 2, 3, 4, 5, 6);

var y = x.max();

该代码执行后,y 保存数组 x 中的最大值,或说 6。


3、constructor 属性

表示创建对象的函数。

object.constructor //object是对象或函数的名称。

说明:constructor 属性是所有具有 prototype 的对象的成员。它们包括除 Global 和 Math 对象以外的所有 JScript 固有对象。constructor 属性保存了对构造特定对象实例的函数的引用。

例如:
x = new String("Hi");

if (x.constructor == String) // 进行处理(条件为真)。

或者
function MyFunc {

// 函数体。

}

y = new MyFunc;

if (y.constructor == MyFunc) // 进行处理(条件为真)。

对于数组来说:
y = new Array();

Jquery使用Ajax获取后台返回的Json数据处理

前端开发zkbhj 发表了文章 • 0 个评论 • 2217 次浏览 • 2016-08-15 14:35 • 来自相关话题

<script type="text/javascript">
$(function () {
$.ajax({
url: 'jsondata.ashx',
type: 'GET',
dataType: 'json',
timeout: 1000,
cache: false,
beforeSend: LoadFunction, //加载执行方法
error: erryFunction, //错误执行方法
success: succFunction //成功执行方法
})
function LoadFunction() {
$("#list").html('加载中...');
}
function erryFunction() {
alert("error");
}
function succFunction(tt) {
$("#list").html('');

//eval将字符串转成对象数组
//var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" };
//json = eval(json);
//alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email);

var json = eval(tt); //数组
$.each(json, function (index, item) {
//循环获取数据
var name = json[index].Name;
var idnumber = json[index].IdNumber;
var sex = json[index].Sex;
$("#list").html($("#list").html() + "<br>" + name + " - " + idnumber + " - " + sex + "<br/>");
});
}
});
</script> 查看全部
<script type="text/javascript">  
$(function () {
$.ajax({
url: 'jsondata.ashx',
type: 'GET',
dataType: 'json',
timeout: 1000,
cache: false,
beforeSend: LoadFunction, //加载执行方法
error: erryFunction, //错误执行方法
success: succFunction //成功执行方法
})
function LoadFunction() {
$("#list").html('加载中...');
}
function erryFunction() {
alert("error");
}
function succFunction(tt) {
$("#list").html('');

//eval将字符串转成对象数组
//var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" };
//json = eval(json);
//alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email);

var json = eval(tt); //数组
$.each(json, function (index, item) {
//循环获取数据
var name = json[index].Name;
var idnumber = json[index].IdNumber;
var sex = json[index].Sex;
$("#list").html($("#list").html() + "<br>" + name + " - " + idnumber + " - " + sex + "<br/>");
});
}
});
</script>