mootools

mootools

Many of you probably already know this but I like to consider myself a bit of a JavaScript chameleon. If you know that then you probably know I'm a MooTools fanatic that periodically dabbles with jQuery. I'm happy to announce that I was able to join Elijah Manor and Ralph Whitbeck on the jQuery podcast this past week to talk jQuery, MooTools, and web development in general. Head on over to the jQuery blog for more information or iTunes to grab the podcast.

你们中的许多人可能已经知道这一点，但是我想把自己当作JavaScript变色龙。 如果您知道这一点，那么您可能知道我是MooTools的狂热者，它定期使用jQuery。 我很高兴地宣布，上周我能够加入Elijah Manor和Ralph Whitbeck的jQuery播客中，讨论jQuery，MooTools和一般的Web开发。 请访问jQuery博客以获取更多信息，或访问iTunes以获得播客 。

As an extension of my podcast appearance, I wanted to share a few code snippets to make your introduction to MooTools or jQuery easier.

作为我播客外观的扩展，我想分享一些代码片段，以使您对MooTools或jQuery的介绍更加容易。

特色jQuery和MooTools片段 (Featured jQuery & MooTools Snippets)

一起使用jQuery和MooTools (Using jQuery and MooTools Together)

Did you know that you can use jQuery and MooTools within the same page? It's easy to!

您是否知道可以在同一页面中使用jQuery和MooTools？ 很容易！

<script type="text/javascript" src="moo1.2.4.js"></script> <script type="text/javascript" src="jquery-1.4.js"></script> <script type="text/javascript"> window.addEvent('domready',function() { //moo stuff $('p').css('border','1px solid #fc0'); //jquery }); </script>

在MooTools中使用Sizzle (Using Sizzle Within MooTools)

Prefer to use jQuery's selector engine within MooTools? No problem -- here's how:

更喜欢在MooTools中使用jQuery的选择器引擎？ 没问题-方法如下：

//just as reader "Ryan" mentioned.... Window.$$ = function(selector){ return new Elements(new Sizzle(selector)); }

jQuery和MooTools链接链接 (jQuery and MooTools Link Nudging)

Link nudging is a classy, subtle effect that makes your websites more dynamic.

链接轻推是一种优雅的，微妙的效果，可让您的网站更加动态。

/* jquery */ $.fn.nudge = function(params) { //set default parameters params = $.extend({ amount: 20, duration: 300, property: 'padding', direction: 'left', toCallback: function() {}, fromCallback: function() {} }, params); //For every element meant to nudge... this.each(function() { //variables var $t = $(this); var $p = params; var dir = $p.direction; var prop = $p.property + dir.substring(0,1).toUpperCase() + dir.substring(1,dir.length); var initialValue = $t.css(prop); /* fx */ var go = {}; go[prop] = parseInt($p.amount) + parseInt(initialValue); var bk = {}; bk[prop] = initialValue; //Proceed to nudge on hover $t.hover(function() { $t.stop().animate(go, $p.duration, '', $p.toCallback); }, function() { $t.stop().animate(bk, $p.duration, '', $p.fromCallback); }); }); return this; }; /* jquery usages */ $(document).ready(function() { /* usage 1 */ $('#nudgeUs li a').nudge(); /* usage 2 */ $('#nudgeUs2 li a').nudge({ property: 'margin', direction: 'left', amount: 30, duration: 400, toCallback: function() { $(this).css('color','#f00'); }, fromCallback: function() { $(this).css('color','#000'); } }); }); /* mootols link nudge */ window.addEvent('domready',function() { $$('#nudges a').addEvents({ 'mouseenter': function() { this.tween('padding-left',20); }, 'mouseleave': function() { this.tween('padding-left',0); } }); }); View jQuery Demo 查看jQuery演示 View MooTools Demo 查看MooTools演示

jQuery和MooTools搜索书签 (jQuery and MooTools Search Bookmarklets)

These bookmarklets will allow you to highlight text on a page and search the jQuery or MooTools websites to learn more about the phrase.

这些书签使您可以突出显示页面上的文本，并搜索jQuery或MooTools网站以了解有关该短语的更多信息。

jQuery Bookmarklet jQuery书签 MooTools Bookmarklet MooTools书签

 

MooTools中的jQuery事件 (jQuery Events within MooTools)

The following MooTools snippet allows you to use jQuery-style syntax for event listening.

以下MooTools片段允许您使用jQuery样式的语法进行事件侦听。

//hash the element.natives so we can do stuff with it var hash = new Hash(Element.NativeEvents); //remove items that need to be replaced, add their replacements hash.erase('mouseover').erase('mouseout').erase('DOMMouseScroll'); hash.include('mouseenter',1).include('mouseleave',1); //initialize this var eventHash = new Hash({}); //for every event type, add to our hash hash.getKeys().each(function(event){ eventHash[event] = function(fn) { this.addEvent(event,fn); return this; } }); //make it happen Element.implement(eventHash);

 

JavaScript FTW！ (JavaScript FTW!)

Here are a few other MooTools and jQuery tutorials you may like:

这是您可能喜欢的其他一些MooTools和jQuery教程：

Sexy Opacity Animation with MooTools or jQuery

MooTools或jQuery的性感不透明动画

Google-Style Element Fading Using MooTools or jQuery

使用MooTools或jQuery的Google风格元素淡入

iPhone Click Effect Using MooTools or jQuery

使用MooTools或jQuery的iPhone单击效果

Record Text Selections Using MooTools or jQuery AJAX

使用MooTools或jQuery AJAX记录文本选择

Remove Broken Images Using MooTools or jQuery

使用MooTools或jQuery删除损坏的图像

Duplicate the jQuery Homepage Tooltips Using MooTools

使用MooTools复制jQuery主页工具提示

All jQuery Tutorials

所有jQuery教程

All MooTools Tutorials

所有MooTools教程

All MooTools & jQuery Demos

所有MooTools和jQuery演示

Isn't the JavaScript community great? MooTools FTW!

JavaScript社区不是很好吗？ MooTools FTW！

翻译自: https://davidwalsh.name/jquery-podcast

mootools

相关资源：jdk-8u281-windows-x64.exe