javascript - 无法在 WordPress 子主题中使用 jQuery

Question

我不知道如何在我的 WordPress 子主题脚本中使用 jQuery。来 self 的 research on SO ，我已经将我的外部 JavaScript 文件排入队列，并尝试在 NoConflict 模式下编写 jQuery 命令，但没有成功。这是我现在正在试验的准系统模板(它本质上是一个空白 page.php，我在底部添加了一个按钮和段落):

<?php
/**
 *
 * Template Name: My JQ Template
 *
 * @package GeneratePress
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

get_header(); ?>

<?php
    global $wpdb;

    $course_result = $wpdb->get_results('SELECT * FROM SC_COURSES ORDER BY COURSE_NAME');
?>

<div id="primary" <?php //generate_content_class();?>>

</div>

<main id="main" <?php generate_main_class(); // Page title and content ?>> 
    <?php
    do_action( 'generate_before_main_content' );

    while ( have_posts() ) : the_post();
        get_template_part( 'content', 'page' );
        // If comments are open or we have at least one comment, load up the comment template.
        if ( comments_open() || '0' != get_comments_number() ) : ?>
            <div class="comments-area">
                <?php comments_template(); ?>
            </div>
        <?php endif;
    endwhile;

    do_action( 'generate_after_main_content' );
    ?>
    <br>    
    <div class="container">
        <div>       
            <input id="testbutton" type="button" onClick="myFunction()" value="POP!">
            <p>This is a test</p>
        </div>  

    </div><!-- container -->

</main><!-- #main -->

    <?php
    do_action( 'generate_after_primary_content_area' );

    get_footer();
    ?>

在 functions.php 中，我有以下内容:

<?php
function enqueue_child_theme_styles() {
    if ( is_page_template( 'jqtemplate.php' ) ) {
        //deregister the parent bootstrap style and script  
        wp_deregister_style( 'bootstrap' );
        wp_deregister_script( 'bootstrap' );
        wp_deregister_script( 'mycustomjs' );

        //enqueue my child theme stylesheet
        wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('theme') );

        //enqueue bootstrap in the child theme 
        wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri().'/bootstrap/js/bootstrap.min.js', array('jquery'), NULL, true);
        wp_enqueue_style('bootstrap-css', get_stylesheet_directory_uri().'/bootstrap/css/bootstrap.min.css', false, NULL, 'all');

        //Enqueue the custom jQuery specific scripts
        wp_enqueue_script('mycustomjs', get_stylesheet_directory_uri().'/js/mycustomjs.js', array('jquery'), NULL, true);
    }
}

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX); 

在 mycustomjs.js 中，我有以下内容:

jquery(document).ready(function(){
    jquery("p").mouseenter(function(){
        jquery("p").text("This is some new text");
    });
}); 


function myFunction() {
    var txt;
    if (confirm("Press a button, mkay!")) {
        txt = "You pressed OK!";
    } else {
        txt = "You pressed Cancel!";
    }
    document.getElementById("testbutton").value = txt;
}

我肯定脚本正在加载，因为更改按钮文本的小演示有效。我知道正在加载 Bootstrap 样式和脚本，因为在生产版本中它们是可见的。

不过，我不能让 jQuery 做任何事情。我尝试添加 var j = jQuery.noConflict(); 然后使用 j 而不是 jquery，如 here 所述，我已将 jquery 更改为 jQuery，并且尝试将 jQuery 行直接放入 jqtemplate.php header 中，但没有成功。

我知道 WordPress 包含 jQuery，那么我在这里缺少什么？

Answer 1

WordPress 确实包含 jQuery。但它仍然必须是 loaded .

加载 jQuery 后，您只需确保使用 jQuery 而不是 jquery。像这样:

jQuery( document ).ready( function() {

    alert( 'test to see if this is working' );

    jQuery("p").mouseenter( function() {

        jQuery("p").text("This is some new text"); 
    }); 
});