Develop Reference

How to add jQuery to html

I tried this:
<script src="js/jQuery.js"type="text/JavaScript"></script>
Then I tried to call a click function on my button:
<script>
$(document).ready(function (){
function jfn1(){
$("jbtn").fadetoggle()
}
})
</script>

Welcome to StackOverflow, Chisom.
All you did was define that function, you didn't actually call it. Also it needs to be "fadeToggle", not "fadetoggle".
/**
* Define function to fade button in/out
*/
function jfn1 () {
$("jbtn").fadeToggle() // "fadeToggle", not "fadetoggle"
}
/**
* On document ready (DOM loaded)
*/
$(document).ready(function (){
// Call function on document ready
jfn1()
})
This will call "fadeToggle" when the DOM tree is loaded. If you want to call it when clicked, it needs to look like this:
/**
* On document ready (DOM loaded)
*/
$(document).ready(function (){
// On button clicked
$("jbtn").click(function () {
// "this" is the function context
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
$(this).fadeToggle()
});
})
Also $("jbtn") will only find HTML elements that look like this: <jtbn>...</jtbn>. If you want to refer to a class (<HTML_ELEMENT class="jtbn"></HTML_ELEMENT>...), you should prefix it with a dot like this: $(".jbtn").
Good luck! 😊

I'm not sure what you're trying to achieve but with the code below, clicking on the button with class 'jbtn' will make it fade out.
$(document).ready(function (){
$('.jbtn').click(function() {
$( this ).fadeToggle();
});
})
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<button class="jbtn">Hey!</button>

equivalent of onclick="update_x(this)" in jquery? (call function)

I have a function in html:
<script>
function update_x(obj) {
...
}
</script>
and I call it on click in html with onclick="update_x(this)" (inside of <div class="aaa">).
How can be the same achieved in jquery? I've tried some stuff, like:
$('.aaa').click(update_x);
});
and
$('.aaa').click(function () {
$(this).update_x(1, false);
});
neither won't work...

This would be equivalent:
$('.aaa').click(function () {
update_x(this);
});
But you don't need to use that. Just change your function to
function update_x(event_obj) {
// 'this' will be the clicked object automatically
// plus, you have further info in the event object
}
$('.aaa').click(update_x);
Make sure $('.aaa').click(update_x) is called after the element with class "aaa" exists in the DOM. You can wrap that code in a document.ready handler, or use event delegation.

how to call function in jquery from javascript

<script type="text/javascript" src="jscripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("funciton");
$(function(){
$.fn.gotof(){
alert("I am calling form jquery");
}
});
});
</script>
<input type="button" onclick="dofunc();">
<script type="text/javascript">
function dofunc(){
gotof();
}
</script>
how do i call gotof() that is present in jquery
and below is the code written over jsfiddle

There are a few errors in your code. Fixed it should look like this:
$.fn.gotof = function() { // has to be defined as a function, does not need to be inside a nested document ready function
alert("I am calling form jquery");
};
$(document).ready(function() {
alert("function is ready to use now");
});
function dofunc() {
$.fn.gotof(); // can call it using $.fn.gotof(), but it should really be called properly via a selector $('div').gotof();
}
http://jsfiddle.net/pSJL4/8/

Check out http://docs.jquery.com/Plugins/Authoring - this should answer your questior. You also are not defining your function correctly; instead of
$.fn.gotof(){
alert("I am calling form jquery");
}
you need
$.fn.gotof = function(){
alert("I am calling from jquery");
};

jquery: function to end another function

$('#start') executes the function myFunction() and $('#stop') end it. How do I stop myFunction() from executing?
function myFunction() {
$(document).mousemove(function(e) {
$('#field').html(e.pageY)
});
}
$('#start').click(function() {
myFunction();
});
$('#stop').click(function() {
//stop myFunction
});

As Daniel pointed out, you actually want to unbind the event handler. You can use unbind for this:
$('#stop').click(function() {
$(document).unbind('mousemove');
});
But this will also remove all other mousemove event handlers, that might be attached by other plugins or similar (I mean, you attach to the document element not a "custom" element, so it can be that other JavaScript code also binds handlers to this element).
To prevent this, you can use event namespaces. You would attach the listener with:
function myFunction() {
$(document).bind('mousemove.namespace', function(e) {
$('#field').html(e.pageY);
});
}
and unbind:
$('#stop').click(function() {
$(document).unbind('mousemove.namespace');
});
This would only remove your specific handler.

You want to use the jQuery bind and unbind methods. For example:
function myFunction() {
$(document).mousemove(function(e) {
$('#field').html(e.pageY)
});
}
$('#start').bind('click.myFunction', function() {
myFunction();
});
$('#stop').bind('click', function() {
$('#start').unbind('click.myFunction');
});

You're not stopping the function from executing. Your myFunction() simply attaches a callback to an event listener, which is called whenever the mouse is moved on the document. The callback function is invoked and is terminated immediately.
You'd simply want to unbind the callback from the event listener. Check out the other answers for concrete examples.

A better way would be to use bind and unbind, like so:
function myFunction() {
$(document).mousemove(function(e) {
$('#field').html(e.pageY)
});
}
$('#start').bind('click', myFunction);
$('#stop').click(function() {
$('#start').unbind('click', myFunction);
});

I can't get my JavaScript eventlistener to work properly

This has got me stumped, I've tried lots of different things, but I can't get this to work.
Can anyone help? No matter what I try I can't get the click eventlistener on the link to fire. The code is in a greasemonkey script. I believe I have to use the closure method to be able to refer to the function dropit in the greasemonkey script, as it is not available to the code on the page.
dropit = function (e) {
e.preventDefault();
alert(e.target.textContent);
}
document.getElementById('newlink').addEventListener('click',
function (e){
return function (){
dropit(e);
}
}(),false);

You have to have your Greasemonkey script write the code into a new <script> tag in the page. Once that's done, then your in-page event handler setup can proceed as normally. At least, that's the only way I've ever known to do it.

<a id='mylink' href='http://www.google.com'>google</a> the link
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script>
YUI().use('event', function(Y){
Y.one('#mylink').on('click', function(e){
e.halt();
alert(this.get('href'));
});
});
</script>

here is the non YUI version
<a id='mylink' href='#'>google</a> the link
<script>
(function(){
var dropit = function (e) {
e.preventDefault();
alert(e.target.textContent);
}
document.getElementById('mylink').addEventListener('click', dropit, false);
}());
</script>

e must be passed into second function inside addEventListener, not first.
Like this:
dropit = function (e) {
e.preventDefault();
alert(e.target.textContent);
}
document.getElementById('newlink').addEventListener('click',
function (e){
return function (e){
dropit(e);
}
}(e),false);