Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31


Чувашия-это моя Россия

Введение в jQuery.

jQuery - это библиотека плагинов Java Script или, как говорят, мини сценариев для решения однотипных задач, которая берет на себя много мелких и скучных процессов программирования во время написания страниц сайта, освобождая Вас от рутины и однотипности оформления кодов, и скриптов языка программирования, делая процес:"Легким и интересным, увлекательным и, самое главное, простым и эффективным - за короткое время больше и лучше!" и создать свой сайт. И программирование становится процессом увлекательным, интересным, пишутся программы быстрее и при этом имеются возможности создавать свои программы ( плагины) для вкрапления в общую структуру оживающей страницы сайта, при этом допуская меньше ошибок, и соответственно меньше приходится исправлять и налаживать программы, потому как в малых строках меньше ошибок. В итоге сберегая ценные минуты по созданию своего сайта.

Вот, сравните две одинаковые по действию и какие разные по объемы программы. Сначала покажем скрипты на JavaScript:

                   < script type="text/javascript">
                  function MM_swapImgRestore() { //v3.0
                  var i,x,a=document.MM_sr; for(i=0;a&&i
                  < a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
                     }
                  function MM_preloadImages() { //v3.0
                  var d=document; if(d.images){
                  if(!d.MM_p) d.MM_p=new Array();
                  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; 
                  for(i=0; i< a.length; i++)
                  if( a[i].indexOf("#")!=0){ d.MM_p[j]=new Image;
                  d.MM_p[j++].src=a[i];}}
                     }

                  function MM_findObj(n, d) { //v4.01
                  var p,i,x;  if(!d) d=document; 
                  if((p=n.indexOf("?"))>0&&parent.frames.length) {
                  d=parent.frames[n.substring(p+1)].document;
                  n=n.substring(0,p);}
                  if(!(x=d[n])&&d.all) x=d.all[n]; 
                  for (i=0;!x&&i< d.forms.length;i++) x=d.forms[i][n];
                  for(i=0;!x&&d.layers&&i
                  < d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
                  if(!x && d.getElementById) x=d.getElementById(n); 
                  return x;
                     }

                  function MM_swapImage() { //v3.0
                  var i,j=0,x,a=MM_swapImage.arguments;
                  document.MM_sr=new Array; for(i=0;
                  i< (a.length-2);i+=3)
                  if ((x=MM_findObj(a[i]))!=null){
                  document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src;
                  x.src=a[i+2];}
                    }
                  < /script>
                  
                  < body onLoad="MM_preloadImages('../fon/367.jpg')">
                  < div width: 96px; height: 96px; margin: auto 300px;">
                  < a href="http://seosait21.ru/strojsait006/saitquery1.html" 
                  MouseOut="MM_swapImgRestore()
                  "MouseOver="MM_swapImage('Image1','','../fon/367.jpg',1)" 
                  target="_blank">< img src="../fon/56.jpg" 
                  style="float:left; name="Image1"
                  width="96" height="96" id="Image1" />< /a>
                  < /div>
                  < /body>

Примерно столько надо написать кодов на языке JavaScript для простого изменения с одного изображения на другое изображение при наведении курсора мыши по картине и когда курсор убирается с картины. И с первого и второго захода написать работающую программу вряд ли получится и наладка такой программы из нескольких десятков строк кодов удовольствие Вам точно не доставит. Теперь посмотрите на скрипты jQuery, функционально одинаковая программа:

                  < script type="text/javascript">$(document).ready(function(){
	              var newPhoto=new Image();
	              newPhoto.src='../fon/56.jpg';
	              var oldSrc=$('#photo').attr('src');
	              $('#photo').hover(
	              function(){
			      $(this).attr('src',newPhoto.src);
		              },
		             function(){
			      $(this).attr('src', oldSrc);
	              });
	              });
                  < /script>                  
                   

Коды программ специально выделены синим цветом для визуального восприятия. Стоит ли говорить о том, что во втором случае в jQuery намного меньше труда приходиться вкладывать и возможностей допустить ошибок намного меньше, чем в первом случае в JavaScript. Самое главное все плагины за вас уже написаны и отлажены на все сто процентов, работают как часы. Вам остается скопировать коды программ с интернета и привязать эти сценарии к своей странице сайта. Конечно, и для таких простых задач иногда приходиться повозиться и думать, но как же иначе. Однако, наведите курсор,посмотрите и сравните, точнее полюбуйтесь:

Если в кодах jQuery не назначать переменные var для первого и второго фото ( однако, работа с переменными есть лучше и правильнее со всех сторон программирования! еще, скажу старайтесь сразу себя приучать работать с переменными, Вам переменные в дальнейшем сэкономят уйму времени и нервенных клеток, поверьте), то можно еще уменьшить объем программы, вот, так:

                  < script type="text/javascript">$(document).ready(function(){
	              $('#photo').hover(function(){
			      $(this).attr('src', '../fon/56.jpg');},function(){
			      $(this).attr('src', '../fon/367.jpg');
	              });
	              });
                  < /script>

Наверное, самое важное в jQuery нет сложных названий самих плагинов, нет многосложности языка JavaScript. Еще раз повторюсь для Вас и за Вас все сделано и пригнано, всего то надо заходить в нужную на правильные странички и найти ту тему, которую хотите развивать, скопировать плагины в компьютер, скопировать коды программы и пристроить под свою задачу.

Итак надо понять есть некая библиотека готовых шаблонов, с помощью которых на порядок меньше приходится писать и оформлять и называют ее библиотекой jQuery, и конечно, она базируется на языке программировании JavaScript и не только( хотя много интересного имеется своего и только для jQuery - если быть точным у них кардинальное отличие друг от друга, об этом мы еще поговорим).

Для того, чтобы научиться писать коды программ языка jQuery для действующих сценариев для Вашего сайта, не требуются месяца упорного труда и мозгового штурма. Буквально за считанные дни можно научиться оформлять несколько интересных интерактивных программ.

Где эту библиотеку для себя взять? Как скачать, и что скачать для работы?

Все это достается бесплатно на страницах бесплатного сайта: jquery.com . Для разных браузеров имеются отличные версии библиотеки.

Я для себя скачал последнюю версию jquery-1.9.0.min для Google ( хотя, скорее всего, уже есть версия 1.9.1. - удивляться этому не стоит), где расширение .min означает, что все не нужное и лишнее из программы убраны и файл содержит только ценное и важное для использования( убраны пробелы, комментарии, разрывы строк и табуляции - все предельно сжато и компановано). Таким образом, файл передается в разы быстрее и скорость обработки выше и качественнее. Забегая вперед скажу, что со временем у Вас будут дополняться к этому списку еще много интересных файлов библиотеки jQuery.

Можно поступить по другому, просто каждый раз когда нужна библиотека jQuery ссылаться на абсолютный адрес данного сайта:


                     http://ajax.googleapis.com/ajax/libs/jquery/1.9.0.min.js 
                     

Упаковать этот адрес в скрипты и разместить в заголовок страницы своего бесплатного сайта перед закрывающимся тегом < /head> в виде:


                    < script type=text/javascript>http://ajax.googleapis.com
                                  /ajax/libs/jquery/1.9.0.min.js< /script>. 
                                  

И у Вас всегда будет под рукой своя библиотека или ссылка на адрес библиотеки.

Язык jQuery мощный инструмент для созидания, для более полного и ценного оформления Вашего сайта. Не требует больших затрат ни физических, ни умственных. А тем более Вы не вкладываете туда свои кровные. Все дается бесплатно. Там собрано по крохам со всего Мира. И самое главное, все время библиотека расширяется и развивается. Ошибки исправляются и улучшения дополняются.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: