JQUERY代码没有生效，先检查是否被引入到html代码中

> 在一个 html 页面中想使用 javascript 代码是很容易的，
> 只要在 html 代码中插入 <SCript> </script>标签，
> 再往里面放上要执行的 JavaScript 代码就行了。

JQUERY代码没有生效，先检查是否被引入
$ 就是jquery的简写，如果带 $ 的代码没有执行，
就需要先检查是否有引入JQUERY到当前的 html 代码中。

引入的方式有两种，本地引入和在线引入，
下面是在线引入的方法：

<script src="https://code.jquery.com/jquery-3.7.1.js">
</script>

这里需要注意的一点是，通常要在引入的代码下方另起一个 script 标签，然后在其中放入 jQuery 的代码。
不要在引入 jQuery 的代码的 script 标签中直接放 jQuery 的代码。
举例：
body 标签里有一个列表如下，

<ul>
    <li>0 Bell</li>
    <li>1 Umbrella</li>
    <li>2 Stone</li>
    <li>3 Fan</li>
    <li>4 Axe</li>
</ul>

如下的 jQuery 代码是不生效的，因为它跟引入 jQuery 在同一个 script 标签 中了，所以是不会生效的。

<script src="https://code.jquery.com/jquery-3.7.1.js">
    $(document).ready(function(){
        var ul=$('ul');
        var lis=ul.find('li');
        var li=lis.eq(2);
        alert(li.text());
    })
</script>

要将 jQuery 代码和引入 jQuery 分开放到不同的 script 标签里，
如下：

<script src="https://code.jquery.com/jquery-3.7.1.js">
</script>

<SCript> 
$(document).ready(function(){
   var ul=$('ul');
   var lis=ul.find('li');
   var li=lis.eq(2);
   alert(li.text());
})

这样，jQuery 的代码才会生效。

————————————————————————————
另外，如果你要使用 jQuery 的 $(document).ready(function(){}，请注意， $(document).ready(function(){}
里面不要包含超过一个功能的代码，
换句话说， $(document).ready(function(){} 里面只能有一个功能的代码，

举例如下：
功能一：

var ul=$(‘ul’); var lis=ul.find(‘li’); var li=lis.eq(2);
alert(li.text());

取列表中的第三个元素，并在弹出的窗口中显示其内容。

功能二：

var text=$('ul li:eq(1)').text();
alert(text);

使用 jQuery 的代码获取列表中的第二个元素，并在弹出的窗口中显示其内容。

那么如下错误的代码

$(document).ready(function(){
    var ul=$('ul');
    var lis=ul.find('li');
    var li=lis.eq(2);
    alert(li.text());

    var text=$('ul li:eq(1)').text();
    alert(text);
})

错误的将两个功能的代码放到 一个 $(document).ready(function()
就只会执行第一个功能的 jQuery 代码，而第二个功能代码就会被忽略。

正确的代码如下：

$(document).ready(function(){
     var ul=$('ul');
     var lis=ul.find('li');
     var li=lis.eq(2);
     alert(li.text());
})

$(document).ready(function(){
    var text=$('ul li:eq(1)').text();
    alert(text);
})

每个 $(document).ready(function() 只放一个功能代码，就会被执行。
即，不同的功能的代码放在不同的 $(document).ready(function() 里面，就不会出现问题了。

July2024the10thWednesday