Как добавить jquery в проект laravel

Я новичок в laravel framework. Я хочу использовать jQuery в веб-приложении, построенном с использованием laravel framework.

Но не знаю, как связать с библиотекой jQuery в проекте laravel.

Ответы

Ответ 1

вы можете использовать онлайн-библиотеку

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

или загрузите библиотеку и добавьте css в папку css и jquery в папке js folder.both, которую вы храните в общей папке laravel, тогда вы можете установить ссылку, как показано ниже.

<link rel="stylesheet" href="{{asset('css/bootstrap-theme.min.css')}}">
<script src="{{asset('js/jquery.min.js')}}"></script>

или еще

{{ HTML::style('css/style.css') }}
{{ HTML::script('js/functions.js') }}

Ответ 2

Для тех, кто использует npm для установки пакетов, вы можете установить jquery через npm install jquery, а затем использовать elixir для компиляции jquery и других пакетов npm в один файл (например, vendor.js). Здесь пример gulpfile.js

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix

    .scripts([
        'jquery/dist/jquery.min.js',
        // list your other npm packages here
    ],
    'public/js/vendor.js', // 2nd param is the output file
    'node_modules')        // 3rd param is saying "look in /node_modules/ for these scripts"

    .scripts([
        'scripts.js'       // your custom js file located in default location: /resources/assets/js/
    ], 'public/js/app.js') // looks in default location since there no 3rd param

    .version([             // optionally append versioning string to filename
        'js/vendor.js',    // compiled files will be in /public/build/js/
        'js/app.js'
    ]);

});

Ответ 3

Вы можете связывать библиотеки с cdn (сеть доставки контента):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Или локально свяжите библиотеки, добавьте файлы css в папку css и jquery в папку js. Вы должны сохранить обе папки в общей папке laravel, тогда вы можете связать, как показано ниже:

<link rel="stylesheet" href="{{asset('css/bootstrap-theme.min.css')}}">
<script src="{{asset('js/jquery.min.js')}}"></script>

или еще

{{ HTML::style('css/style.css') }}
{{ HTML::script('js/functions.js') }}

Если вы связываете файлы js и css файлы локально (как в двух последних примерах), вам нужно добавить файлы js и css в папки js и css, которые находятся в public\js или public\css не в resources\assets.

Ответ 4

JQuery уже включен в Laravel просто добавьте

<script src="{{ asset('js/app.js') }}"></script>

Если это не сработает, попробуйте также:

npm install
npm run dev