jquery — Блог по программированию http://ot7.ru Курсы по веб дизайну, программированию, графике и дизайну Fri, 29 Jun 2018 10:57:37 +0000 ru-RU hourly 1 https://wordpress.org/?v=6.7.2 https://ot7.ru/wp-content/uploads/2019/11/cropped-it2-32x32.jpg jquery — Блог по программированию http://ot7.ru 32 32 Урок 2. JQuery. Изменение стилей и AJAX в JQuery. Валидация форм с помощью JQuery https://ot7.ru/2018/06/25/%d1%83%d1%80%d0%be%d0%ba-2-jquery-%d0%b8%d0%b7%d0%bc%d0%b5%d0%bd%d0%b5%d0%bd%d0%b8%d0%b5-%d1%81%d1%82%d0%b8%d0%bb%d0%b5%d0%b9-%d0%b8-ajax-%d0%b2-jquery/ Mon, 25 Jun 2018 11:21:39 +0000 http://manuscript.ikurs.kz/?p=2258 Материалы урока прикреплены ниже.

 

ajaxJQuery 

]]> JQuery. Урок 1. Начинаем работать с эффектами JQUERY https://ot7.ru/2018/06/22/jquery-%d1%83%d1%80%d0%be%d0%ba-1-%d0%bd%d0%b0%d1%87%d0%b8%d0%bd%d0%b0%d0%b5%d0%bc-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%82%d1%8c-%d1%81-%d1%8d%d1%84%d1%84%d0%b5%d0%ba%d1%82%d0%b0%d0%bc%d0%b8-jque/ Fri, 22 Jun 2018 11:08:13 +0000 http://manuscript.ikurs.kz/?p=2253 Видео к уроку

Ссылка на код к уроку.

JQUERY

]]> Date range picker for bootstrap russian localization. Выбор диапазона дат для бутстрап с русской локализацией. https://ot7.ru/2017/04/18/date-range-picker-for-bootstrap-russian-localisation-%d0%b2%d1%8b%d0%b1%d0%be%d1%80-%d0%b4%d0%b8%d0%b0%d0%bf%d0%b0%d0%b7%d0%be%d0%bd%d0%b0-%d0%b4%d0%b0%d1%82-%d0%b4%d0%bb%d1%8f-%d0%b1%d1%83%d1%82/ Tue, 18 Apr 2017 11:10:01 +0000 http://manuscript.ikurs.kz/?p=2151 Скачать  date range picker на русском языке.

daterangepicker — по этой ссылке вы можете скачать пример и протестировать его у себя. Jquery date range picker with russian localisation.

Jquery плагин для выбор диапазона дат.

Код примера.

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />

<script type="text/javascript">
$(function() {
$('input[name="daterange"]').daterangepicker({
 "locale": {
        "format": "MM/DD/YYYY",
        "separator": " - ",
        "applyLabel": "Применить",
        "cancelLabel": "Отмена",
        "fromLabel": "От",
        "toLabel": "До",
        "customRangeLabel": "Свой",
        "daysOfWeek": [
            "Вс",
            "Пн",
            "Вт",
            "Ср",
            "Чт",
            "Пт",
            "Сб"
        ],
        "monthNames": [
            "Январь",
            "Февраль",
            "Март",
            "Апрель",
            "Май",
            "Июнь",
            "Июль",
            "Август",
            "Сентябрь",
            "Октябрь",
            "Ноябрь",
            "Декабрь"
        ],
        "firstDay": 1
    }
});});

</script>

 

]]> Альтернативная красивая функция alert для jQuery. User friendly alert message jQuery. https://ot7.ru/2017/03/31/%d0%b0%d0%bb%d1%8c%d1%82%d0%b5%d1%80%d0%bd%d0%b0%d1%82%d0%b8%d0%b2%d0%bd%d0%b0%d1%8f-%d0%ba%d1%80%d0%b0%d1%81%d0%b8%d0%b2%d0%b0%d1%8f-%d1%84%d1%83%d0%bd%d0%ba%d1%86%d0%b8%d1%8f-alert-%d0%b4%d0%bb/ Thu, 30 Mar 2017 18:19:51 +0000 http://manuscript.ikurs.kz/?p=2115 alert = function(what){ // if the element hasn't been appended to the body element if($("#alert_bar").length==0){ // customize the bar with css var bar = $("<div/>").css({ 'display':'none', 'position':'fixed', 'top':'0px', 'left':'0px', 'zIndex':'99950', 'width':'100%', 'margin':'0px', 'padding':'5px auto 9px auto', 'textAlign':'center', 'fontSize':'16px', 'background':'#fff', 'color':'red', 'borderBottom':'solid 1px #333' }) bar.attr("id","alert_bar") $('body').prepend(bar) } // close button $("#alert_bar").html('<div style="text-align:right;font-size:10px;color:red"><span style="cursor:pointer" onclick="$(\'#alert_bar\').slideUp()"></span></div><div>'+what+'</div>') $("#alert_bar").slideDown(); auto = 2000; window.setTimeout(function(){ $("#alert_bar").slideUp() },auto); }

 

]]> Меню и галерея с отображением по категориям https://ot7.ru/2017/01/27/1870/ Fri, 27 Jan 2017 14:37:35 +0000 http://manuscript.ikurs.kz/?p=1870 menu

]]> jqueru nestable menu. Пример древовидного меню Jquery с серверной частью. https://ot7.ru/2017/01/25/jqueru-nestable-menu-%d0%bf%d1%80%d0%b8%d0%bc%d0%b5%d1%80-%d0%b4%d1%80%d0%b5%d0%b2%d0%be%d0%b2%d0%b8%d0%b4%d0%bd%d0%be%d0%b3%d0%be-%d0%bc%d0%b5%d0%bd%d1%8e-jquery-%d1%81-%d1%81%d0%b5%d1%80%d0%b2/ Wed, 25 Jan 2017 13:52:11 +0000 http://manuscript.ikurs.kz/?p=1865 menu

]]> Простые примеры jquery https://ot7.ru/2017/01/18/%d0%bf%d1%80%d0%be%d1%81%d1%82%d1%8b%d0%b5-%d0%bf%d1%80%d0%b8%d0%bc%d0%b5%d1%80%d1%8b-jquery/ Wed, 18 Jan 2017 14:28:17 +0000 http://manuscript.ikurs.kz/?p=1858 <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <script> function callback() { alert(123); } $(document).ready( function() { $("#test").click(function(){$(this).hide();}); $("#mydiv").click(function(){$("#test").hide();}); $("#mydiv1").click(function(){$("#test").show();}); $("#mydiv2").click(function(){$("#test").toggle(1000,callback);}); $(".mydiv3").click(function(){$("#test").fadeOut();}); $(".mydiv4").click(function(){$("#test").fadeIn();}); $(".mydiv5").click(function(){$("#test").fadeToggle(1000);}); $(".mydiv6").click(function(){$("#test").slideUp();}); $(".mydiv7").click(function(){$("#test").slideDown();}); $(".mydiv8").click(function(){$("#test").slideToggle(1000);}); $(".mydiv9").click(function() { $("#test").animate({left: '250px'}); $("#test").animate({top: '250px'}); $("#test").animate({left: '0px'}); $("#test").animate({top: '0px'}); } ); $(".mydiv10").click(function() { $("#test").slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100); } ); $(".mydiv11").click(function() { $("#test").animate({color: '#ff0000'}); } ); $(".mydiv12").click(function() { $(".mydiv12").html("Текст изменен"); $("input").val("Значение изменено"); alert($("input").val()); } ); } ); </script> </head> <body> <h1>Продемонстрировать show эффект</h1> <button id='mydiv'>Скрыть все</button> <button id='mydiv1'>Показать</button> <button id='mydiv2'>Переключить</button> <hr> <h1>Продемонстрировать fade эффект</h1> <button class='mydiv3'>Затуманить все</button> <button class='mydiv4'>Показать</button> <button class='mydiv5'>Переключить</button> <hr> <h1>Продемонстрировать slide эффект</h1> <button class='mydiv6'>Свернуть все</button> <button class='mydiv7'>Показать</button> <button class='mydiv8'>Переключить</button> <hr> <h1>Продемонстрировать animate эффект</h1> <button class='mydiv9'>Анимация</button> <hr> <h1>Продемонстрировать chaining эффект</h1> <button class='mydiv10'>Цепная реакция</button> <hr> <h1>Продемонстрировать анимацию цвета</h1> <button class='mydiv11'>Анимируем цвет</button> <hr> <h1>Изменить HTML</h1> <button class='mydiv12'>Изменить</button> <div id='test' style='background:gray;position:relative;width:500px;'> <p>Щелкни по мне и я исчезну</p> <p>Кликни и я пропаду тоже!</p> <p>И по мне!</p> <input> </div> </body> </html>

 

]]> Селекторы в Jquery Урок 12 https://ot7.ru/2016/07/13/%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b-%d0%b2-jquery-%d1%83%d1%80%d0%be%d0%ba-2/ Wed, 13 Jul 2016 14:34:03 +0000 http://manuscript.ikurs.kz/?p=1643 <head> <meta charset='utf-8'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <style> .red{ background:red; } .green{ background:green; } *{border:1px solid black;} .blue{ background:blue; } .main { color:white; float:left; padding:20px; } </style> </head> <body> <div class='red main'>div Red</div> <div class='green main'>div Green</div> <div class='blue main'>div Blue</div> <p class='red main'>pRed</p> <p class='green main'>pGreen</p> <p class='blue main'>pBlue</p> <!-- $("*") - Выбрать все элементы --> <nav> <div> <div class='red main'>div Red</div> <div class='green main'>div Green</div> <div class='blue main'>div Blue</div> <p class='red main'>pRed</p> <p class='green main'>pGreen</p> <p class='blue main'>pBlue</p> </div> </nav> <a href='index.html'>jhmjk</a> <script> //$(".class div ul li").clik(); //$("#id").clik(); //$("tag").clik(); //$("[type]").show(); //$("[href="index.html"]").clik(); //$('селектор').функция(функцию что делать или переменная) $(document).ready(function(){ $('[type="submit"]').hide(); //по клику по тегу див скрыть все элементы за секунду $("div").click(function(){//селектор с именем тега выбирает все теги $("*").css("border","10px solid black"); $("*").hide(1000);//селектор со * выбирает все элементы }); $("div.green").mouseenter(function(){ $("div.green").css("background","lime");}); $("div.green").mouseleave(function(){ $("div.green").css("background","green");}); $(".blue").mouseenter(function(){ $(".blue").css("background","lightblue");}); $(".blue").mouseleave(function(){ $(".blue").css("background","blue");}); $("div div.red").mouseenter(function(){ $("div div.red").html("div div enter");}); $("div div.red").mouseleave(function(){ $("div div.red").html("DIV DIV leave");}); //focus $("#search").focus( function(){ $('[type="submit"]').show(200); } ); $("#search").blur( function(){ $('[type="submit"]').hide(200); } ); //blur }); </script> <hr> <input id='search'><input type='submit'> </body>

 

]]> Jquery Простые примеры. Урок 11 https://ot7.ru/2016/07/11/jquery-%d0%bf%d1%80%d0%be%d1%81%d1%82%d1%8b%d0%b5-%d0%bf%d1%80%d0%b8%d0%bc%d0%b5%d1%80%d1%8b-%d1%83%d1%80%d0%be%d0%ba-1/ Mon, 11 Jul 2016 13:08:27 +0000 http://manuscript.ikurs.kz/?p=1637 Подключаем библиотеку Jquery

<head>
<meta charset='utf-8'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
></script>
</head>
<body>
<div id='d1'>
<div id='mydiv' style='height:200px;border:1px solid black;'>Привет мир</div>
<button id='b1'>Спрятать надпись "Привет мир"</button>
<button id='b2'>Показать надпись "Привет мир"</button>
<button id='b3'>Переключить "Привет мир"</button>
</div>
<div id='d2' style='width:100px;height:100px;background:red;'>
</div>
<script>
//$(".myclass");
//$("div");
$(document).ready(function(){
  $("#d2").hide();
  $("#b1").click(function(){
        $("#mydiv").slideUp(1000);
        });
  $("#b2").click(function(){
        $("#mydiv").slideDown(1000);
        });
  $("#b3").click(function(){
        $("#d1").toggle(1000);
        $("#d2").toggle(1000);
        });
  $("#d2").click(function(){
        $("#d1").toggle(1000);
        $("#d2").toggle(1000);
        });
        
        
});
</script>
</body>

Протестируйте простые функции

fadeOut
fadeIn
fadeToggle

slideUp
slideDown
slidetoggle

hide
show
toggle

]]> Селекторы JQuery https://ot7.ru/2016/04/06/%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b-jquery/ Wed, 06 Apr 2016 14:07:42 +0000 http://manuscript.ikurs.kz/?p=1513 $(«*») — Выбрать все элементы
$(this) Выбрать текущий элемент
$(«p.intro») выбрать все <p> с классом class=»intro»
$(«p:first») выбрать первый <p>
$(«ul li:first») выбрать первый <li> для первого <ul>
$(«ul li:first-child») выбрать первый <li> для каждого <ul>
$(«[href]») выбрать все элементы с аттрибутом href
$(«a[target=’_blank’]») все ссылки с аттрибутом target = «_blank»
$(«a[target!=’_blank’]») все ссылки с аттрибутом target  не = «_blank»
$(«:button») выбрать все <button> и <input> с type=»button»
$(«tr:even») выбрать все четные <tr>
$(«tr:odd») выбрать все нечетные <tr>

]]>