Как подключить к локальному файлу page.html jquery? Что бы работали jquery скрипты на локальной странице
Пробовал:
- Подключить через файл в папке с page.html
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
- Подключить через этот же файл через интернет ресурс
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
Толку все равно нет, не работает ... Подскажите в чем может быть дело?
Система: Mac OS High Sierra
Браузеры: Chrome, Safari, Mozila
Тестирую работу jquery на данном скрипте:
spoilerhtml:
<html>
<head>
<!--Подключаем библиотеку-->
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="style2.css">
<script type="text/javascript" src="base2.js"></script>
<meta charset="utf-8">
</head>
<body>
<p class="Zagalovok" >Главная</p>
<title>Главная</title>
<div class="bookmarkList">
<h2>
Bookmark List
</h2>
</div>
<div class="vidBx">
<button class="getTime appp" onclick="javascript:;">click here</button>
<video id="videoElement" autoplay controls width="100%">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
<p>Your browser does not support the video tag.</p>
</video>
</div>
<BR><BR><BR>
</body>
</html>
base2.js:
var myVid = document.getElementById('videoElement');
$('.getTime').on('click', function() {
var mycurrentTime = myVid.currentTime;
$(".bookmarkList").append("<a href='javascript:;' rel='" + mycurrentTime + "' class='bookmarkLink'>" + mycurrentTime + "sec - Click to Play</a>");
$('.bookmarkList a').click(function() {
myVid.currentTime = $(this).attr('rel');
myVid.play();
});
});
style2.css:
.getTime {
background: #f36e65;
color: #fff;
font-size: 12px;
text-align: center;
padding: 8px 10px;
text-decoration: none;
display: block;
width: 150px;
margin: 0;
font-family: Arial;
text-transform: uppercase;
position: absolute;
top: 0px;
right: 0px;
z-index:9;
}
.bookmarkList {
background: #fff;
color: #111;
padding: 0;
border: 1px solid #f36e65;
margin-bottom: 1em;
font-family: Arial;
font-size: 13px;
}
.bookmarkList a {
display: block;
margin-bottom: 0;
color: #f36e65;
text-decoration: none;
border-bottom: 1px solid #f36e65;
padding: 5px 10px;
}
.vidBx {
position: relative;
}
.bookmarkList h2{text-transform:uppercase; font-weight:normal; font-size:14px; font-family:Arial; color:#fff; background:#f36e65; padding:5px; margin:0;}
.appp{
display:inline-block;
}
Тот же код на jsfiddle.net
https://jsfiddle.net/cp89db4u/1/
Там работает, а если запускать в mac os, - скрипт не срабатывает, кнопка не вызывает никаких действий