[英]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:然后我尝试在我的按钮上单击 function:
<script>
$(document).ready(function (){
function jfn1(){
$("jbtn").fadetoggle()
}
})
</script>
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.我不确定您要实现什么,但是使用下面的代码,单击带有 class 'jbtn' 的按钮将使其淡出。
$(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>
Welcome to StackOverflow, Chisom.欢迎来到 StackOverflow,Chisom。
All you did was define that function, you didn't actually call it.你所做的只是定义 function,你实际上并没有调用它。 Also it needs to be " fadeToggle ", not " fadetoggle ".
它还需要是“ fadeToggle ”,而不是“ 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.这将在加载 DOM 树时调用“fadeToggle”。 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>
.此外
$("jbtn")
只会找到看起来像这样的 HTML 元素: <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")
.如果您想引用 class (
<HTML_ELEMENT class="jtbn"></HTML_ELEMENT>...
),您应该在其前面加上一个点,如下所示: $(".jbtn")
。
Good luck!祝你好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.