web前端开发JQuery常用实例代码片段_jquery_脚本之家

作者:web前端    发布时间:2019-12-18 13:33     浏览次数 :

[返回]

天天都学到一点东西,而往往所学到的是发现昨日学到的是错的,说明你在成长和进步。每天给自己充点能量,你会发现你的知识面原来越宽广。今天主要想分享下前端攻城师之50个DEMO应用。

其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成。这些都是我尽量记住的有着最佳性能的代码段,因此如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中!我希望你在这一文章中能找到有帮助的东西。

本文给大家展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成。这些都是我尽量记住的有着最佳性能的代码段,因此如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中!我希望你在这一文章中能找到有帮助的东西。

1. 如何创建嵌套的过滤器

1. 如何创建嵌套的过滤器:

1. 如何创建嵌套的过滤器

允许你减少集合中的匹配元素的过滤器,只剩下那些与给定的选择器匹配的部分。在这种情况下,查询删除了任何没,包含class为“selected”的子节点。

//允许你减少集合中的匹配元素的过滤器,//只剩下那些与给定的选择器匹配的部分。在这种情况下,//查询删除了任何没//包含class为“selected”的子节点。.filter)")
//允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分。在这种情况下, //查询删除了任何没 //包含class为“selected”的子节点。.filter)")
.filter(":not")

2. 如何重用元素搜索

2. 如何重用元素搜索

2. 如何重用元素搜索

var allItems = $;var keepList = $("div#container1 div.item");//现在你可以继续使用这些jQuery对象来工作了。例如,//基于复选框裁剪“keep list”,复选框的名称//符合< DIV >class names:$(formToLookAt + " input:checked").each { keepList = keepList.filter.attr;< /DIV>
 var allItems = $; var keepList = $("div#container1 div.item"); //现在你可以继续使用这些jQuery对象来工作了。例如, //基于复选框裁剪“keep list”,复选框的名称 //符合 class names: $(formToLookAt + " input:checked").each { keepList = keepList.filter.attr; 
varallItems=$;varkeepList=$("div#container1div.item");//现在你可以继续使用这些jQuery对象来工作了。例如,//基于复选框裁剪“keeplist”,复选框的名称//符合classnames:$(formToLookAt+"input:checked").each{keepList=keepList.filter.attr;

3. 任何使用has()来检查某个元素是否包含某个类或是元素:

3. 任何使用has()来检查某个元素是否包含某个类或是元素

3. 任何使用has()来检查某个元素是否包含某个类或是元素

//jQuery 1.4.*包含了对这一has方法的支持。该方法找出//某个元素是否包含了其他另一个元素类或是其他任何的//你正在查找并要在其之上进行操作的东东。$.has.addClass;
//jQuery 1.4.*包含了对这一has方法的支持。该方法找出 //某个元素是否包含了其他另一个元素类或是其他任何的 //你正在查找并要在其之上进行操作的东东。$.has.addClass;

该方法找出 //某个元素是否包含了其他另一个元素类或是其他任何的 //你正在查找并要在其之上进行操作的东东。

4. 如何使用jQuery来切换样式表

4. 如何使用jQuery来切换样式表

$.has.addClass("email_icon");
//找出你希望切换的媒体类型,然后把href设置成新的样式表。$('link[media='screen']').attr('href', 'Alternative.css');
 //找出你希望切换的媒体类型,然后把href设置成新的样式表。$(‘link[media=”screen”]').attr(‘href', ‘Alternative.css');

4. 如何使用jQuery来切换样式表

5. 如何限制选择范围:

5. 如何限制选择范围

找出你希望切换的媒体类型,然后把href设置成新的样式表。

//尽可能使用标签名来作为类名的前缀,//这样jQuery就不需要花费更多的时间来搜索//你想要的元素。还要记住的一点是,//针对于你的页面上的元素的操作越具体化,//就越能降低执行和搜索的时间。var in_stock = $('#shopping_cart_items input.is_in_stock');
 //尽可能使用标签名来作为类名的前缀, //这样jQuery就不需要花费更多的时间来搜索 //你想要的元素。还要记住的一点是, //针对于你的页面上的元素的操作越具体化, //就越能降低执行和搜索的时间。 var in_stock = $('#shopping_cart_items input.is_in_stock'); 
$(‘link[media=”screen”]').attr(‘href',‘Alternative.css');
  • Item X
  • Item Y
  • Item Z
  • Item X
  • Item Y
  • Item Z

5. 如何限制选择范围

6. 如何正确地使用ToggleClass:

6. 如何正确地使用ToggleClass

尽可能使用标签名来作为类名的前缀,这样jQuery就不需要花费更多的时间来搜索。你想要的元素。还要记住的一点是,针对于你的页面上的元素的操作越具体化,就越能降低执行和搜索的时间。

//切换类允许你根据某个类的//是否存在来添加或是删除该类。//这种情况下有些开发者使用:a.hasClass ? a.removeClass : a.addClass;//toggleClass允许你使用下面的语句来很容易地做到这一点a.toggleClass;
 //切换类允许你根据某个类的 //是否存在来添加或是删除该类。 //这种情况下有些开发者使用: a.hasClass ? a.removeClass : a.addClass;//toggleClass允许你使用下面的语句来很容易地做到这一点a.toggleClass;
varin_stock=$('#shopping_cart_itemsinput.is_in_stock');ItemXItemYItemZ

7. 如何设置IE特有的功能:

7. 如何设置IE特有的功能

6. 如何正确地使用ToggleClass

if  {// Internet Explorer就是个虐待狂}
 if  {// Internet Explorer其实不那么好用}

切换类允许你根据某个类的,是否存在来添加或是删除该类。这种情况下有些开发者使用:

8. 如何使用jQuery来代替一个元素:

8. 如何使用jQuery来代替一个元素

a.hasClass?a.removeClass:a.addClass;//toggleClass允许你使用下面的语句来很容易地做到这一点a.toggleClass;
$.replaceWith;
 $.replaceWith;

7. 如何设置IE特有的功能

9. 如何验证某个元素是否为空:

9. 如何验证某个元素是否为空

if{//InternetExplorer其实不那么好用}
if  == null) {//什么都没有找到;}
 if .trim {//什么都没有找到;}

8. 如何使用jQuery来代替一个元素

10. 如何从一个未排序的集合中找出某个元素的索引号

10. 如何从一个未排序的集合中找出某个元素的索引号

$.replaceWith;
$.click { var index = $.length;});
 $.click { var index = $.length; });

9. 如何验证某个元素是否为空

11. 如何把函数绑定到事件上:

11. 如何把函数绑定到事件上

if.trim{//什么都没有找到;}
$.bind { alert('User clicked on "foo."');});
 $.bind { alert('User clicked on "foo."'); });

10. 如何从一个未排序的集合中找出某个元素的索引号

12. 如何追加或是添加html到元素中:

12. 如何追加或是添加html到元素中

$.click{varindex=$.length;})
$.append;
 $.append;

11. 如何把函数绑定到事件上

13. 在创建元素时,如何使用对象字面量来定义属性

13. 在创建元素时,如何使用对象字面量来定义属性

$.bind('click',function(){alert('Userclickedon"foo."');});
var e = $("", { href: "#", class: "a-class another-class", title: "..." });
 var e = $(“”, { href: “#”, class: “a-class another-class”, title: “…” });

12. 如何追加或是添加html到元素中

14. 如何使用多个属性来进行过滤

14. 如何使用多个属性来进行过滤

$.append;
//在使用许多相类似的有着不同类型的input元素时,//这种基于精确度的方法很有用var elements = $('#someid input[type=sometype][value=somevalue]').get();
 //在使用许多相类似的有着不同类型的input元素时, //这种基于精确度的方法很有用 var elements = $('#someid input[type=sometype][value=somevalue]').get();

13. 在创建元素时,如何使用对象字面量来定义属性

15. 如何使用jQuery来预加载图像:

15. 如何使用jQuery来预加载图像

vare=$(“”,{href:“#”,class:“a-classanother-class”,title:“…”});
jQuery.preloadImages = function() { for(var i = 0; i < arguments.length; i++) { $.attr; }};//用法$.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');
 jQuery.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $.attr; } };//用法 $.preloadImages(‘image1.gif', ‘/path/to/image2.png','some/image3.jpg');

14. 如何使用多个属性来进行过滤

16. 如何为任何与选择器相匹配的元素设置事件处理程序:

16. 如何为任何与选择器相匹配的元素设置事件处理程序

在使用许多相类似的有着不同类型的input元素时,这种基于精确度的方法很有用。

$.live('click', someFunction);//注意,在jQuery 1.4.2中,delegate和undelegate选项//被引入代替live,因为它们提供了更好的上下文支持//例如,就table来说,以前你会用//.live.each{ $.live{ $.toggleClass;//现在用$.delegate("td", "hover", function.toggleClass;
 $.live('click', someFunction);//注意,在jQuery 1.4.2中,delegate和undelegate选项 //被引入代替live,因为它们提供了更好的上下文支持 //例如,就table来说,以前你会用 //.live.each { $.live { $.toggleClass;//现在用 $.delegate("td", "hover", function .toggleClass;
varelements=$('#someidinput[type=sometype][value=somevalue]').get();

17. 如何找到一个已经被选中的option元素:

17. 如何找到一个已经被选中的option元素

15. 如何使用jQuery来预加载图像

$.find;
 $.find;
jQuery.preloadImages=function(){for(vari=0;i16. 如何为任何与选择器相匹配的元素设置事件处理程序$('button.someClass').live('click',someFunction);//delegate和undelegate选项//被引入代替live,因为它们提供了更好的上下文支持//例如,就table来说,以前你会用.live.each{$.live("hover",function.toggleClass;});

$.delegate("td","hover",function.toggleClass;

18. 如何隐藏一个包含了某个值文本的元素:

18. 如何隐藏一个包含了某个值文本的元素

17. 如何找到一个已经被选中的option元素

$("p.value:contains.hide();
 $(“p.value:contains.hide();
$.find(‘option:selected');

19. 如何自动滚动到页面中的某区域

19. 如果自动滚动到页面中的某区域

下一篇:没有了