Modify a site's jQuery code with Greasemonkey

How do I modify or override a site's jQuery code with Greasemonkey. The jQuery library is already loaded by the site and the jQuery custom code is something I would like to change/modify. How do I override it with Greasemonkey?

For instance I would like to override this code (written by website):

  $('.side-nav-flyout').hover(function() {
        $(this).children('ul').fadeIn();
    }, function() {
        $(this).children('ul').fadeOut();
    });

With this (my override):

 $('.side-nav-flyout').hover(function() {
    $(this).children('ul').show();
}, function() {
    $(this).children('ul').hide();
});

开发者_如何学Python

Specifically where do you put the override code in the userscript and do I wrap it in a document.ready?

---

What if you were to unbind the hover event, then re-bind it with yours?

$('.side-nav-flyout').unbind('hover').hover(function() {
    $(this).children('ul').show();
}, function() {
    $(this).children('ul').hide();
});

---

If you're okay with completely clobbering the page's .fadeIn() and .fadeOut() methods, you can always take the "brute force" approach:

unsafeWindow.$.fn.fadeIn = unsafeWindow.$.fn.show;
unsafeWindow.$.fn.fadeOut = unsafeWindow.$.fn.hide;

---

According to Greasemonkey's FAQs...

Greasemonkey lets you add JavaScript code (called "user scripts") to any web page, which will run when its HTML code has loaded.

This won't allow you to replace any code that is executed prior to Greasemonkey's scripts. It does allow you to overwrite anything that will be accessed or run in the future like global variables, object properties and functions. I always think of it like "Once the page has loaded, I want to change X, Y and Z". Using your example, if that code was in a function like this:

function ShowItems() {
    $("div.fadeList").each(function() {
        $(this).children('ul').fadeIn();
    });
}

you could overwrite it so that subsequent calls would run your code...

function ShowItems() {
    $("div.fadeList").each(function() {
        $(this).children('ul').show();
    });
}

If you're just looking to alter the page to your liking, you could just do something like this:

$("div.fadeList ul).show();