9188

JQuery / JQuery UI (User Interface)

Конспект

Информатика, кибернетика и программирование

JQuery /JQuery UI(User Interface) jQuery - библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому э...

Русский

2013-02-25

2.92 MB

26 чел.

JQuery / JQuery UI(User Interface)

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.

_____________________________________________________________________________________

Подключение JQuery с помощью google

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

_____________________________________________________________________________________

Функция, вызываемая при готовности страницы

$('document').ready( "Now we are anonymous!");

//by the way, you've seen $('document').ready(...)

//before. It is very common in jQuery - the function

//that is passed to `ready` is run when the HTML document

//is ready for javascript to start happening

Методу .ready можно придавать и значение любой функции JS.

_____________________________________________________________________________________

.proxy

jQuery.proxy( function, context )

function The function whose context will be changed.

Context The object to which the context (this) of the function should be set.

jQuery.proxy( context, name )

context The object to which the context of the function should be set.

Name The name of the function whose context will be changed (should be a property of the context object).

This method is most useful for attaching event handlers to an element where the context is pointing back to a different object. Additionally, jQuery makes sure that even if you bind the function returned from jQuery.proxy() it will still unbind the correct function if passed the original.

_____________________________________________________________________________________

Jquery() или $()

The function jQuery() is the most important one in the jQuery library. You will almost always use it through the shortcut, $()

This function has many uses, all of which return a jQuery object.

The most simple use is to turn a regular javascript HTML element into a jQuery one.

var element = document.getElementById('myElement');

//element is now a plain old javascript DOM element

//make element a jQuery object

$element = element;

_____________________________________________________________________________________

Селекторы

The most simple selector selects by tag name. So $('span') would select every span element on the page.

//select all the divs on the page

$allOfTheDivs = $('div');

//select all the links on the page

$allOfTheLinks = $('a');

Passing a tag name as a string to $() will return a jQuery object containing every element that is that type of element.

_____________________________________________________________________________________

Селекторы по ID

$element = $('#elementId')

Пример:

//assign $contentDiv to the jQuery object

//containing the div with id contentDiv

$contentDiv = $('#contentDiv');

//assign $entryBox to the jQuery object

//containing the textbox with id entryBox

$entryBox = $('#entryBox');

_____________________________________________________________________________________

Селектор классов

$('.my-class')

//select elements of the class 'important'

$importantElements = $('.important');

//select elements of the class 'active'

$activeElements = $('.active');

_____________________________________________________________________________________

Все селекторы

  1. Селекторы

Селекторы jQuery | jQuery API

  1. Категории: Selectors › Basic

Селектор *

Соответствует любому элементу.

  1. Категории: Selectors › Basic Filter

Селектор :animated

Выбирает соответствующие элементы, задействованные в анимации в данный момент.

  1. Категории: Selectors › Attribute

Селектор префикс E[A|=V]

Выбирает элементы E с атрибутом A, имеющим значение V, либо значение, начинающееся с V, после которого следует дефис (–).

  1. Категории: Selectors › Attribute

Селектор E[A*=V]

Выбирает элементы E с атрибутом A, значение которого содержит V.

  1. Категории: Selectors › Attribute

Селектор E[A~=V]

Выбирает элементы E с атрибутом A, значение которого содержит V, разделенное пробелами.

  1. Категории: Selectors › Attribute

Селектор E[A$=V]

Выбирает элементы E с атрибутом A, значение которого заканчивается на V.

  1. Категории: Selectors › Attribute

Селектор E[A=V]

Выбирает элементы E с атрибутом A, имеющим значение V.

  1. Категории: Selectors › Attribute

Селектор E[A!=V]

Выбирает элементы E, не имеющие атрибута A, либо с атрибутом A, но не имеющим значение V.

  1. Категории: Selectors › Attribute

Селектор E[A^=V]

Выбирает элементы E с атрибутом A, имеющим значение, начинающееся с V.

  1. Категории: Selectors › Form

Селектор :button

Выбирает любые элементы-кнопки (<button>, <input type=button>, <input type=submit>, <input type=reset>).

  1. Категории: Selectors › Form

Селектор :checkbox

Выбирает все элементы-флажки (<input type=checkbox>).

  1. Категории: Selectors › Form

Селектор :checked

Выбирает все отмеченные элементы-флажки или переключатели (<input type=checkbox>, <input type=radio>).

  1. Категории: Selectors › Hierarchy

Селектор E>F

Выбирает все элементы F, являющиеся прямыми потомками элементов E.

  1. Категории: Selectors › Basic

Селектор E.C

Выбирает все элементы E с именем класса C.

  1. Категории: Selectors › Content Filter

Селектор :contains()

Выбирает элементы, содержащие заданный текст.

  1. Категории: Selectors › Hierarchy

Селектор E F

Выбирает все элементы F, являющиеся потомками элементов-предков E.

  1. Категории: Selectors › Form

Селектор :disabled

Выбирает все элементы форм, которые находятся в неактивном состоянии (disabled - отключены).

  1. Категории: Selectors › Basics

Селектор E

Выбирает все элементы с именем тега E.

  1. Категории: Selectors › Content Filter

Селектор :empty

Выбирает все элементы, которые не имеют ни дочерних элементов, ни текстовых узлов.

  1. Категории: Selectors › Form

Селектор :enabled

Выбирает элементы форм, которые находятся в активном состоянии (не disabled - не отключены).

  1. Категории: Selectors › Basic Filter

Селектор :eq()

Выбирает элемент с указанным порядковым номером (отсчет начинается с 0).

  1. Категории: Selectors › Basic Filter

Селектор :even

Выбирает все четные элементы и элемент с 0 (нулевым) индексом (т.к. отсчет начинается с 0, то вопреки интуитивному пониманию выбираются первый, третий, пятый и т.д.).

  1. Категории: Selectors › Form

Селектор :file

Выбирает все элементы типа file (<input type=file>).

  1. Категории: Selectors › Child Filter

Селектор :first-child

Селектор :first-child выбирает все только первые дочерние элементы соответствующих родителей.

  1. Категории: Selectors › Basics Filter

Селектор :first

Выбирает первый соответствующий элемент на странице.

  1. Категории: Selectors › Basic Filter

Селектор :gt()

Выбирает все соответствующие элементы, расположенные на странице после элемента с заданным индексом.

  1. Категории: Selectors › Attribute

Селектор E[A]

Выбирает элементы E с атрибутом A, имеющим любое значение.

  1. Категории: Selectors › Content Filter

Селектор :has()

Выбирает элементы, которые имеют хотя бы одного потомка, соответствующего заданному селектору.

  1. Категории: Selectors › Basic Filter

Селектор :header

Выбирает только элементы - заголовки HTML (<h1>, <h2>, <h3>, ... , <h6>).

  1. Категории: Selectors › Visibility Filter

Селектор :hidden

Выбирает скрытые элементы (не видимые на странице).

  1. Категории: Selectors › Basic

Селектор #id

Выбирает элемент с указанным идентификатором (атрибутом id).

  1. Категории: Selectors › Form

Селектор :image

Dыбирает элементы форм типа image (<input type=image>).

  1. Категории: Selectors › Form

Селектор :input

Выбирает все элементы форм input, textarea, select и button.

_____________________________________________________________________________________

  1.  Descendent Selector

$("div .thingy")

will select all elements that have the class 'thingy' that are a descendent of a div element

  1.  Child Selector

$(".thingy > a")

will select all links that are the child of an element with the class 'thingy'

  1.  Pseudo-Classes

$("li:first-child")

will select all list-elements that are the first child of their parent.

//select the 'lorem ipsum' paragraph

$loremIpsumP = $("#info>p");

//select all list items that are in the 'info' div

$infoListItems = $('#info li');

_____________________________________________________________________________________

.add()

Метод .add() находит элементы, заданные с помощью входного параметра, или создает их на лету. А затем добавляет найденные (или созданные) элементы к исходному набору jQuery и возвращает модифицированный (объединенный) набор jQuery.

$h1elements = $("h1");

//use add to add the h2 elements to $h1elements

$h1andH2elements = $h1elements.add("h2");

  1. Примечание:

С помощью метода .add() можно объединять селекторы по условию ИЛИ. Например,  $('div').add('p')  идентично  $('div, p').

  1. Примечание:

При использовании метода .add() в jQuery 1.4 с двумя параметрами (когда вторым аргументом передается context), необходимо помнить, что в данном случае первый аргумент должен быть только селектором jQuery.

  // Сначала установим желтый цвет фона для всех элементов

// <div> в документе, а затем установим красную границу

// вокруг всех элементов <div> и <p>.

$('div').css('background', 'yellow').add('p').css('border',

'2px solid red');

   

// Сначала  создаем набор jQuery всех элементов <div>

// на странице, затем создаем новый элемент <p>, добавляем

// его в набор  jQuery (но не в DOM-дерево!), а потом добавляем

// ко всем элементам набора сласс с именем  blue.

$('div').add('<p>Новый абзац</p>').addClass('blue');

_____________________________________________________________________________________

.last()  и .first()

$lastDiv = $('div').last();

Given a jQuery object that represents a set of DOM elements, the .last() method constructs a new jQuery object from the last matching element.

Consider a page with a simple list on it:

<ul>

 <li>list item 1</li>

 <li>list item 2</li>

 <li>list item 3</li>

 <li>list item 4</li>

 <li>list item 5</li>

</ul>

We can apply this method to the set of list items:

$('li').last().css('background-color', 'red');

The result of this call is a red background for the final item.

_____________________________________________________________________________________

.eq()

//select the third from last div

$thirdFromLastDiv = $('div').eq(-3);

If the integer is positive, it returns the element at that index of the selection (starting at 0).

If the integer is negative, it returns the element that many away from the end (-1 will give the very last element).

For example, to get the 2nd p element, you would use $('p').eq(1); (Since Javascript objects begin indexing at 0)

_____________________________________________________________________________________

.filter()

To filter for li elements in a jQuery selection $listOfElements, you would use $listOfElements.filter("li");

Этот метод принимает в качестве параметра любой допустимый в функции jQuery селектор, но применяется лишь к поднабору элементов, содержащемуся в объекте jQuery.
Например, чтобы выбрать все абзацы, а затем оставить в наборе лишь те из них, которые имеют класс . foo, выполните следующую команду:
$("p").filter(".foo");

_____________________________________________________________________________________

Not()

Selects all elements that do not match the given selector.

.not(selector)

Исключает из набора те элементы, которые соответствуют селектору selector.

$allTheDivs = $('div');

//select the third div

$thirdDiv = $('div').eq(2);

//use .not() to get all of the divs except the third one

$allButTheThird = $allTheDivs.not($thirdDiv);

_____________________________________________________________________________________

.children()

Метод .children() возвращает новый набор jQuery, состоящий из всех прямых потомков (не текстовых узлов) каждого элемента исходного набора jQuery. Для дополнительной фильтрации найденных дочерних элементов используется селектор, переданный во входном параметре expression.

.children( [expression] )

expression – (строка ) Необязательный параметр - селектор jQuery, с помощью которого производится дополнительная фильтрация соответствующих элементов. Для включения в новый набор элементы должны соответствовать указанному селектору. Если данный параметр опущен, то выбираются все допустимые элементы.

  1. Примечание:

Функция .children() возвращает новый набор jQuery, не изменяя первоначальный набор.

  1. Примечание:

Функция .children() в отличие от .find(), фильтрует не сами элементы, а их детей и только на первом уровне вложенности.

function getChildren($that) {

   var $s = $that.children();

   return $s;

}

_____________________________________________________________________________________

.find()

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

.find( expression )

expression – (строка | элемент | объект jQuery)

  1. Примечание:

Функция возвращает новый набор jQuery, не изменяя первоначальный набор.

//find descendents of the div with id 'divOne'

//that are span elements

$spanDescendants = $('#divOne').find('span');

.find(*) – выбирает все элементы дочерного набора.

_____________________________________________________________________________________

parent() и parents()

$that.parent(); - selects the jQuery object that is the direct parent of each element in the jQuery object on which it is called.
$that.parents(); -
selects every element that is above each element in the jQuery object on which it is called - it will select parents, grandparents, and so on.

_____________________________________________________________________________________

.closest()

$("#lBlock").closest("div")  - будет искать первый div-элемент среди элемента с id = lBlock и всех его предков.

$(".lBlock").closest("div") -  для каждого элемента с классом lBlock будет искать первый div-элемент среди самого элемента и его предков.

closest()Начинает поиск непосредственно с выбранного (выбранных) элемента и движется вверх по иерархии. Двигаясь вверх по иерархии останавливает поиск после первого подходящего элемента (после чего начинает осуществлять поиск для следующего выбранного элемента). Поэтому, находит не более одного элемента для каждого из выбранных.

_____________________________________________________________________________________

Siblings()  (родной брат)

Description:

The siblings( [selector] ) method gets a set of elements containing all of the unique siblings (родные братья) of each of the matched set of elements.

Syntax:

Here is the simple syntax to use this method:

selector.siblings( [selector] )

Parameters:

Here is the description of all the parameters used by this method:

  1.  selector: This is optional selector to filter the sibling Elements with.

$that.siblings();

_____________________________________________________________________________________

html()

you can insert new elements into the page using the jQuery .html()

$myElement.html()set

It will get and return the current html contents of the selected element. But called with a string argument,
like this:
$myElement.html("<b>Hi</b>");

It will set the html content of the selected element to the string (in this case, 'Hi').

Ex.:
Write a function fillHTML() that takes two jQuery objects. It should set the html of the first one to the html of the second one.

function fillHTML($sink,$source) {

 $sink.html($source.html());

}

_____________________________________________________________________________________

Height()  и  width()

$element.height(50) will
set the height to 50 pixels (pixels are the default unit).

Повернуть на 90 градусов:
function rotate($that) {

   //swap the height and width attributes

   //of $that using .height and .width;

  var $x = $that.height();

$that.height($that.width());

$that.width($x);

}

_____________________________________________________________________________________

Css()

$myElement.css('margin-left',20)

http://www.codecademy.com/ru/courses/basic-jquery/3#!/exercises/2

_____________________________________________________________________________________

Css Classes

  1.  addClass(): adds the class passed as an argument
  2.  removeClass(): removes the class or list of classes passed in. If it is called without an argument, all classes are removed;
  3.  hasClass(): check if an element has a class (returns true or false)
  4.  toggleClass(): Adds a class if it is not there, remove it if it is.

Ex.:
Write two functions:

  1.  toggleClass which takes a jQuery object and the name of the class and calls toggleClass on the object
  2.  setExclusiveClass which also takes a jQuery object and a class, and makes it such that the elements in the object passed have only the class given.

1.
function toggleClass($that,className) {

$that.toggleClass(className);

}

2.
function setExclusiveClass($that,className) {

$that.removeClass();

return $that.addClass(className);

}

_____________________________________________________________________________________

.each()

There are two versions of each(): one is a method of $, and the other is a method of the jQuery object. They behave very similarly.z

The method $.each() takes two arguments: an object and a function. It calls the function for every key/value (index/value if its an array) pair in the object.

For example:

$.each([1,2,3,4],function(index,value) {
   alert(value);
});

will open four alerts, the first with '1', the second with '2', etc.

When you call .each() on a jQuery object, it takes one argument (the function) and is the same as calling $.each() with the jQuery object as the first argument.

Метод .each() производит обход всех элементов, содержащихся в наборе jQuery и вызывает функцию обратного вызова callback для каждого из них. Не путать с функцией jQuery.each().

$collection.each(f);. $collection is an array, and f is a function that does something on each element in the array.

  1. Примечание:

Цикл можно остановить в любой момент, вернув из функции обратного вызова false.

$('li').each(function(i,elem) {

   if ($(this).is(".stop")) {

        alert("Остановлено на " + i + "-м пункте списка.");

        return false;

         } else {

                 alert(i + ': ' + $(elem).text());

                });

_____________________________________________________________________________________

.click()

Description: Bind an event handler to the "click" JavaScript event, or trigger that event on an element.

_____________________________________________________________________________________

Шашки

Script.js
function setUpPieces() {

//select all the divs with class 'piece'

//add the 'light' class to half of them

//add the 'dark' to the other half

$('div.piece:even').addClass("dark");

$('div.piece:odd').addClass("light");

}

function movePieceTo($piece,newTop,newLeft) {

//set the css 'top' and 'left'

//attributes of the passed piece

//to the arguments newTop and newLeft

$piece.css('top', newTop);

$piece.css('left', newLeft);

 }

function setUpBoard() {

//iterate through all of the divs

//with class `square`

//figure out whether each one should be

//light or dark, and assign the proper class

   $('div.square').each(function(index,square){

       $square = $(square);

       if (!lightOrDark(index)){

           $square.addClass('light');

       }else {

           $square.addClass('dark');

         }

   });

  //heres a helper function that takes a number between

  //0 and 63 (inclusive) and returns 1 if the square should be

 //dark, and 0 if the square should be light

  function lightOrDark(index) {

   var x = index % 8;

   var y = Math.floor(index / 8);

   var oddX = x % 2;

   var oddY = y % 2;

   return (oddX ^ oddY);

  }

   }

function toggleSelect($piece) {

//if $piece has the class 'selected',

//remove it

if( $piece.hasClass('selected') ) {

   $piece.removeClass('selected');

 }

  //if $piece does not have the class 'selected'

 //make sure no other divs with the class 'piece'

  //have that class, then set $piece to have the class

 else {

   $('div.piece').removeClass('selected');

   $piece.addClass('selected');

  }

  }

  function incrementMoveCount() {

moveCount = parseInt($('span#moveCount').html(),10);

moveCount++;

$('span#moveCount').html(moveCount);

 }

Checkers.html
<html>

<head>

<title>Checkers</title>

<link rel="stylesheet" href="style.css"/>

<script src='script.js'></script>

<script src='provided.js'></script>

</head>

<body>

<div id="game">

   <div id="board">

   </div>

   

   <div id="pieces">

   </div>

   

</div>

<div id="meta">

<h1>Checkers</h1>

<h4>Moves: <span id="moveCount">0</span></h4>

</div>

</body>

</html>

Style.css

div#game {

   position:relative;

}

div#board {

   

   float:left;

   

   

   height:382px;

   width:382px;

   

   border-style:solid;

   border-width:9px;

   border-color:#DEB887;

}

div.square {

   

   float:left;

   

   position:relative;

   

   width:46px;

   height:46px;

   border-width:2px;

   

   

   border-right-style:solid;

   border-bottom-style:solid;

   

   border-color:#444;

}

div.square.movable:hover {

   -webkit-box-shadow: inset 0px 0px 8px #FFD700;

      -moz-box-shadow: inset 0px 0px 8px #FFD700;

           box-shadow: inset 0px 0px 8px #FFD700;

   cursor:pointer;

}

/* the bottom row */

div.square:nth-last-child(-n + 8) {

   border-bottom-style:none;

}

/* the sides */

div.square:nth-child(8n) {

   border-right-style:none;

}

div.square.light {

   background-color:#ccc;

}

div.square.dark {

   background-color:#333;

}

div#pieces {

   position:absolute;

   /* 9 px puts us inside of the board's borders;*/

   left:9px;

   top:9px;

   background-color:green;

}

div.piece {

   position:absolute;

   width:32px;

   height:32px;

   margin:7px;

   

   -webkit-box-shadow: 0px 0px 3px #666;

      -moz-box-shadow: 0px 0px 3px #666;

           box-shadow: 0px 0px 3px #666;

   

   -webkit-border-radius:16px;

      -moz-border-radius:16px;

           border-radius:16px;

           

   background-color:blue;

           

}

div.piece:hover {

   -webkit-box-shadow: 0px 0px 8px #FFD700;

      -moz-box-shadow: 0px 0px 8px #FFD700;

           box-shadow: 0px 0px 8px #FFD700;

   cursor:pointer;

}

div.piece.selected {

   -webkit-box-shadow: 0px 0px 8px #FFD700;

      -moz-box-shadow: 0px 0px 8px #FFD700;

           box-shadow: 0px 0px 8px #FFD700;

}

   

div.piece.light {

   background-color:red;

}

div.piece.dark {

   background-color:blue;

}

div#meta {

   float:right;

}

Provided.js

//global variables for one square

var width = 46;

var border = 2;

//utility function for translating an x,y coordinate

//to a pixel position

//the convention is that the square in the upper left

//corner is at position 0,0

//the square in the upper right, at 7,0 and the lower

//right at 7,7

function getPixels(x,y) {

   //ok... so takes an x,y position, returns

   //pixels from the left, right

   

   return {

       'top':  (y * (width+border))+'px',

       'left': (x * (width+border))+'px'

   };    

}

//utility function for turning a pixel position

//into the x,y coordinate of a square on the board

//it follows the same coordinate convention as getPixels

function getCoords(top,left) {

   //returns an x and a y

   //given a top and left pixels

   return {

       'x': left / (width + border),

       'y': top / (width + border)

   };

}

//utility function for returning

//the set of unoccupied dark squares

//(possible places to move a checker piece)

function getMovableSquares() {

   

   //select all of the squares

   var $squares = $('div.square');

   

   //select the occupied ones using the jQuery map() method

   //map creates a new object from an existing one

   //using a translation function

   var $takenSquares =

       $('div.piece').map(function(index,piece) {

           

           //this function translates a piece

           var position = $(piece).position();

           var coords = getCoords(position.top,position.left);

           var squareIndex = coords.y * 8 + coords.x;

           return $squares[squareIndex];

       });

   

   var $out = $('div.square.dark').not($takenSquares);

   return $out;

}

$('document').ready(function() {

   //Creating the 64 squares and adding them to the DOM

   var squareCount = 8*8;

   for (var i = 0;i<squareCount;i++) {

       

       //this line creates a new div with the class 'square'

       //and appends it to the div with id 'board'

       $('div#board').append($('<div/>').addClass('square'));

   }

   

   //YOUR CODE

   //set up the board with the correct classes

   //for the light and dark squares

   setUpBoard();

   

   

   //creating the 24 pieces and adding them to the DOM

   var pieceCount = 24;

   for (var i=0;i<pieceCount;i++) {

       

       //this line appends an empty div

       //with the class 'piece' to the div with id 'pieces'

       $('div#pieces').append($('<div/>').addClass('piece'));

   

   }

   

   //YOUR CODE

   //sets up the classes for the different types of piece

   setUpPieces();

   

   //this loop moves all the light pieces to their initial positions

   $('div.piece.light').each(function(index,piece) {

       

       //turning the index (from 0 - 11)

       //into a x,y square coordinate using math

       var y = Math.floor(index / 4);

       var x = (index % 4) * 2 + (1 - y%2);

       

       //turning the x,y coordingate into a pixel position

       var pixelPosition = getPixels(x,y);

       

       //YOUR CODE

       //actually moving the piece to its initial position

       movePieceTo($(piece),pixelPosition.top,pixelPosition.left);

   });

   

   //this loop moves all the dark pieces to their initial positions

   $('div.piece.dark').each(function(index,piece) {

       

       //turning the index (from 0 - 11)

       //into a x,y square coordinate using math

       var y = Math.floor(index/4) + 5;

       var x = (index % 4) * 2 + (1-y%2);

       

       //turning the x,y coordinate into a pixel position

       var pixelPosition = getPixels(x,y);

       

       //YOUR CODE

       //moving the piece to its initial position

       movePieceTo($(piece),pixelPosition.top,pixelPosition.left);

   });

   

   //set up initial squares

   //the class 'movable' represents a square

   //that is unoccupied

   getMovableSquares().addClass('movable');

   

   //and now the events

   $('div.piece').click(function() {

       

       //turn `this` into a jQuery object

       var $this = $(this);

       

       //YOUR CODE

       //toggleing the 'selected' class of this piece

       //and possible deselecting other pieces

       toggleSelect($this);

   });

   

   $('div.square').click(function() {

       

       //turn `this` into a jQuery object

       var $this = $(this);

       

       //if $this is a legal square to move to...

       if ($this.hasClass('movable')) {

           

           //get the piece with the class 'selected'

           var $selectedPiece = $('div.piece.selected');

           

           //we only move if there is exactly one selected piece

           if ($selectedPiece.length == 1) {

               //get the index of the square

               //and translate it to pixel position

               var index = $this.prevAll().length;

               var x = index % 8;

               var y = Math.floor(index / 8);

               var pixels = getPixels(x,y);

               

               //YOUR CODE

               //actually do the moving

               movePieceTo($selectedPiece,pixels.top,pixels.left);

               

               //YOUR CODE

               //increment the move counter

               incrementMoveCount();

               

               //un-select the piece

               $selectedPiece.removeClass('selected');

               

               //set the new legal moves

               $('div.square').removeClass('movable');

               getMovableSquares().addClass('movable');

           }

           

       }

   });

});

_____________________________________________________________________________________

$ и $()

var jQuery = $;   -   функция, возвращает объект.

var jQueryObject = $();    -    объект

$ methods and attributes

  1. fn
  2. extend
  3. noConflict
  4. isReady
  5. readyWait
  6. holdReady
  7. ready
  8. bindReady
  9. isFunction
  10. isArray
  11. isWindow
  12. isNumeric
  13. type
  14. isPlainObject
  15. isEmptyObject
  16. error
  17. parseJSON
  18. parseXML
  19. noop
  20. globalEval
  21. camelCase
  22. nodeName
  23. each
  24. trim
  25. makeArray
  26. inArray
  27. merge
  28. grep
  29. map
  30. guid
  31. proxy
  32. access
  33. now
  34. uaMatch
  35. sub
  36. browser
  37. Callbacks
  38. Deferred
  39. when
  40. support
  41. cache
  42. uuid
  43. expando
  44. noData
  45. hasData
  46. data
  47. removeData
  48. _data
  49. acceptData
  50. _mark
  51. _unmark
  52. queue
  53. dequeue
  54. valHooks
  55. attrFn
  56. attr
  57. removeAttr
  58. attrHooks
  59. propFix
  60. prop
  61. propHooks
  62. event
  63. removeEvent
  64. Event
  65. find
  66. expr
  67. unique
  68. text
  69. isXMLDoc
  70. contains
  71. filter
  72. dir
  73. nth
  74. sibling
  75. buildFragment
  76. fragments
  77. clone
  78. clean
  79. cleanData
  80. cssHooks
  81. cssNumber
  82. cssProps
  83. style
  84. css
  85. swap
  86. curCSS
  87. get
  88. post
  89. getScript
  90. getJSON
  91. ajaxSetup
  92. ajaxSettings
  93. ajaxPrefilter
  94. ajaxTransport
  95. ajax
  96. param
  97. active
  98. lastModified
  99. etag
  100. speed
  101. easing
  102. timers
  103. fx
  104. offset
  105. boxModel
  106. boxModel

$() methods and attributes

  1. constructor
  2. init
  3. selector
  4. jquery
  5. length
  6. size
  7. toArray
  8. get
  9. pushStack
  10. each
  11. ready
  12. eq
  13. first
  14. last
  15. slice
  16. map
  17. end
  18. push
  19. sort
  20. splice
  21. extend
  22. data
  23. removeData
  24. queue
  25. dequeue
  26. delay
  27. clearQueue
  28. promise
  29. attr
  30. removeAttr
  31. prop
  32. removeProp
  33. addClass
  34. removeClass
  35. toggleClass
  36. hasClass
  37. val
  38. on
  39. one
  40. off
  41. bind
  42. unbind
  43. live
  44. die
  45. delegate
  46. undelegate
  47. trigger
  48. triggerHandler
  49. toggle
  50. hover
  51. blur
  52. focus
  53. focusin
  54. focusout
  55. load
  56. resize
  57. scroll
  58. unload
  59. click
  60. dblclick
  61. mousedown
  62. mouseup
  63. mousemove
  64. mouseover
  65. mouseout
  66. mouseenter
  67. mouseleave
  68. change
  69. select
  70. submit
  71. keydown
  72. keypress
  73. keyup
  74. error
  75. contextmenu
  76. find
  77. has
  78. not
  79. filter
  80. is
  81. closest
  82. index
  83. add
  84. andSelf
  85. parent
  86. parents
  87. parentsUntil
  88. next
  89. prev
  90. nextAll
  91. prevAll
  92. nextUntil
  93. prevUntil
  94. siblings
  95. children
  96. contents
  97. text
  98. wrapAll
  99. wrapInner
  100. wrap
  101. unwrap
  102. append
  103. prepend
  104. before
  105. after
  106. remove
  107. empty
  108. clone
  109. html
  110. replaceWith
  111. detach
  112. domManip
  113. appendTo
  114. prependTo
  115. insertBefore
  116. insertAfter
  117. replaceAll
  118. css
  119. serialize
  120. serializeArray
  121. ajaxStart
  122. ajaxStop
  123. ajaxComplete
  124. ajaxError
  125. ajaxSuccess
  126. ajaxSend
  127. show
  128. hide
  129. _toggle
  130. fadeTo
  131. animate
  132. stop
  133. slideDown
  134. slideUp
  135. slideToggle
  136. fadeIn
  137. fadeOut
  138. fadeToggle
  139. offset
  140. position
  141. offsetParent
  142. scrollLeft
  143. scrollTop
  144. innerHeight
  145. outerHeight
  146. height
  147. innerWidth
  148. outerWidth
  149. width

_____________________________________________________________________________________

$.isArray

$.isArray() is a method that will return true if the object passed to it is an array, and false otherwise. It is very useful because the pure JavaScript typeof keyword will return the same value for both arrays and objects.

function safeLength(object) {

   if ($.isArray(object)){

return object.length;

   }

   else {

return 0;

   }

}

_____________________________________________________________________________________

.map()

Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.

The .map() method is particularly useful for getting or setting the value of a collection of elements.

function alertTheEachMes() {

//use $() to select all the divs with class 'eachMe'

var $allOfTheEachMeDivs = $('div.eachMe');

//keeper for our alerts

var capturedAlerts = $.map($allOfTheEachMeDivs,function(value)

{

return $(value).html();

});

return capturedAlerts;

}

_____________________________________________________________________________________

.data( key, value )

Key  A string naming the piece of data to set.

Value  The new data value; it can be any Javascript type including Array or Object.

Store arbitrary data associated with the matched elements.

With two arguments, it sets the second argument to the key of the first. With one argument, it gets the value stored at the given key.

$('body').data('foo', 52);

$('body').data('bar', { myType: 'test', count: 40 });

$('body').data('foo'); // 52

$('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }}

$element.data('key') returns the value stored at key.

$element.data('key',value) stores the given value at key.

$('document').ready(function() {

//get the div.

//do not add var before this object for testing purposes!!

$datafulDiv = $('#dataful');

//get the value stored at 'x'

$datafulDiv.data('x');

//double it and store it at 'y'. again do not use var!

$datafulDiv.data('y',$datafulDiv.data('x')*2);

});

_____________________________________________________________________________________

.attr()

  1. Метод attr(name) получает значение заданного атрибута соответствующего элемента набора jQuery, либо первого элемента в наборе jQuery (если их несколько). Возвращает значение undefined, если у элемента указанный атрибут отсутствует или в наборе нет элементов.

Возвращаемое значение: (строка) Значение искомого атрибута или undefined.

Параметры:

  1.  name – (строка) Имя атрибута, значение которого необходимо получить.
  2.  
  3.    Примечание:
  4.  Чтобы получить значения атрибутов для каждого элемента в наборе jQuery, можно использовать методы .each() или .map().
  5.  
  6.    Примечание:
  7. Удалить атрибут средствами jQuery можно с помощью функции .removeAttr().
  8.  
  9.  
  10.  
  11.  var title = $("img").attr("alt") + " -> Увеличить";
  12.  $("img:first").attr("title", title);
  13.  $newDiv.attr('id','new-div');

Iterate over all of the <a> elements on the page, setting each 'href' attribute to "/life" + its current value. For example, "/pictures" would become "/life/pictures".

$(document).ready(function(){

//use $() to select all the 'a' elements

var $allTheLinks = $('a');

//iterate over each one, using attr()

//to alter the 'href' attribute as described

$allTheLinks.each(function(){

var temp = $(this).attr('href');

$(this).attr('href',"/life" + temp);

});

});

_____________________________________________________________________________________

Динамическое создание элемента

$newDiv = $('<div  />');

$newDiv.attr('id','new-div');

$('<span />')    is just a different way of writing     $('<span></span>')

//create a new link, using either syntax

$myNewLink = $('<a />');

//add a 'href' attribute of '/links' using .attr()

$myNewLink.attr('href','/links');

//set the html content of the link to 'click here!'

$myNewLink.html('click here!');

//set the class of the link to 'important'

$myNewLink.attr('class', 'important');

//code to add the link to the page... you'll

//learn to do this very soon!

$('body').append($myNewLink);

_____________________________________________________________________________________

.append()

$(".word-display").append ($("<span/>").addClass("shown-letter").text(' '));

Когда используется команда, в скобки создания нового элемента нужно заключать также и все её классы, значения и т.д.

$('body').append($myNewLink);

Добавляет или перемещает содержимое, определяемое во входном параметре, в конец содержимого каждого элемента набора jQuery.

.append( source )

source – (строка | элемент | объект jQuery ) Строка с кодом разметки HTML, либо ссылка на существующий или созданный на лету DOM-элемент, либо набор jQuery.

.append( function( [index, html] ) )

function( [index, html] ) – (функция) Возвращает HTML строку, которая предназначена для вставки в конце существующего содержимого каждого элемента в наборе jQuery перед закрывающим тегом. В качестве входных параметров получает index (индекс, номер текущего элемента в наборе jQuery начиная с 0) и html (старое содержимое текущего элемента).

  Примечание:

Перемещаемое (вставляемое) функцией .append() содержимое становится последним дочерним элементом, каждого элемента набора jQuery. Для вставки в качестве первого дочернего элемента необходимо использовать jQuery функцию .prepend().

_____________________________________________________________________________________

Creating elements with Attributes

$('<img/'>,{
   src : 'codecademy.com/logo',
   alt : 'codecademy logo'
})

$myLink = $('<a />', {

href : '#home',

id : 'homeLink'

});

_____________________________________________________________________________________

Implicit Element Creation или Неявное создание элементов

//create a h1 with the class 'greeting'

//inside of the div with id 'header'

//(the message can be anything, or nothing, although thats lame)

$('#header').html('<h1 class="greeting">Hello!</h1>');

//create a div with the text contents

//'inner-div'

//inside of the div with id 'outer-div'

$('#outer-div').html('<div>inner-div</div>');

_____________________________________________________________________________________

.prependTo()    и   .appendTo()

The methods prependTo() and appendTo() insert the object on which they are called as the first and last child (respectively) of the element passed as an argument.

.prependTo()   add as a first child
.appendTo()   add as a last child

$divToAppend.appendTo($divToInsertInside);

//append $divToAppend to $divToInsertInside

//using .appendTo

$divToPrepend.prependTo($divToInsertInside);

//prepend $divToPrepend to $divToInsertInside

//using .prependTo

_____________________________________________________________________________________

.append()    и    .prepend()

$e.append($x) has the same effect as $x.appendTo($e): $x gets inserted as the last child of $e

An additional difference is that  append() can accept a string of HTML to implicity create elements, whereas  appendTo  can only take an element already on the page.

$divToInsertInside.append('<div class="appended">append</div>');

$divToInsertInside.prepend('<div class="prepended">prepend</div>');

_____________________________________________________________________________________

insertBefore()   и   insertAfter()

//insert $divToInsertBefore to $divToInsertAround

//using .insertBefore()

$divToInsertBefore.insertBefore($divToInsertAround);

//insert $divToInsertAfter to $divToInsertAround

//using .insertAfter()

$divToInsertAfter.insertAfter($divToInsertAround);

_____________________________________________________________________________________

.before()  и   .after()

Вставить перед и после объекта, который их вызывает.

То же, что и append()   для   appendTo().
//Insert a div with content 'before' and class 'before'

//before $divToInsertAround using .before

$divToInsertAround.before('<div class="before">before</div>');

//Insert a div with content 'after' and class 'after'

//to $divToInsertAround using .after

$divToInsertAround.after('<div class="after">after</div>');

_____________________________________________________________________________________

Wrap()  ()

wrap() will wrap each element of the jQuery object on which it is called in a copy of the jQuery object or HTML string passed to it.

For example,

$('a').wrap($('<span/>'))

will wrap every <a> in a <span>.

$('div.wrapMe').wrap($("<div class='wrapper'></div>"));

_____________________________________________________________________________________

//move the div with id 'lineJumper'

//to be the first child of 'line'

$('#lineJumper').prependTo($('#line'));

//move the div with id 'lineLeaver'

//out of the line (make it a sibling of the line)

$('div#line').after($('div#lineLeaver'));

_____________________________________________________________________________________

.clone()

.clone() returns a deep copy of the element on which it is called.

That means that you get a new copy of the element itself, but also all of its children (and their children, et cetera).

If you call .clone(true), all of the elements' events, attributes, and data are cloned too.

//write this function as described

//in the exercise instructions

//remember that we want to clone

//data and events, too!

function cloneAndAppend($elementToClone, $elementToAppendItTo) {

   $elementToAppendItTo.append($elementToClone.clone(true));

}

_____________________________________________________________________________________

.empty()

empty() removes every element that is a descendent of the element on which it is called. Before it deletes the element, it removes events and data for memory-safety.

$('document').ready(function() {

$('#emptyTrash').click(function() {

   //write code that calls

   //empty on the div with id 'trash'

   

$('#trash').empty();

});

});

Пример:

_____________________________________________________________________________________

.remove()

remove() lets you remove one specific element, or use a selector to remove only specific descendants of an element.

For example,

$('div li').remove()

will remove all <li>s that are a descendent of $myElement.

And

$myElement.remove()

will remove $myElement itself.

$('document').ready(function() {

$('#emptyTrash').click(function() {

//remove the element with id 'third-div'

$('#third-div').remove();

//remove all decendants of the element with id 'first-div'

//that have the class 'removeMe'; For this exercise put

//nothing in the actual remove() tag

$('#first-div .removeMe').remove();

});

});

Важно

Для указания ИД и класса объекта одновременно нужно отделить их пробелом:

$('#first-div .removeMe').remove();

_____________________________________________________________________________________

.removeData()

removeData() takes a key as a parameter, and deletes the data value stored at that key.

$('div.square').removeData('jumpedPieces');

_____________________________________________________________________________________

:odd()  :even()

:odd()   -   Поиск нечетных элементов, начиная с нуля.

:even()   -   Поиск четных элементов, начиная с нуля.

$("tr:odd").css("background-color", "#bbbbff");

$('#right li:odd').remove();

_____________________________________________________________________________________

JQuery Events

_____________________________________________________________________________________

.click()

Bind an event handler to the "click" JavaScript event, or trigger that event on an element.

$('#clickMe').click(function(){

$("#changeMe").html("I have been changed");

});

_____________________________________________________________________________________

.on()

Example with click:

$('#clickMe').on("click", function(){
alert("I have been clicked!");
});

$(document).on("ready", function(){

message = "iiiiii'm ready!";

   alert(message);

});

_____________________________________________________________________________________

.dblclick()

$('#target').dblclick(function() {

 alert('Handler for .dblclick() called.');

});

_____________________________________________________________________________________

.mouseenter()   и   .mouseleave()

Данное событие обычно активируется единожды,  когда указатель мыши находится в центре элемента.

$("div.overout").mouseenterer(function(){

_____________________________________________________________________________________

Multiple Handlers


$('document').ready(function(){

$(document).on({

 mousedown: function() {

   $("#lastClick").html("down");

 },

 mouseup: function() {

   $("#lastClick").html("up");

 }

});

});

_____________________________________________________________________________________

event.target

Свойство target экземпляра объекта Event идентифицирует элемент - инициатор события (т.е. узел, в котором произошло событие и с которого началась фаза всплывания). Не путать с event.currentTarget.

$(event.target)

$('li').click(function(event){


var $target = $(event.target);


alert($target.id);


});

$(document).ready(function(){

$('div').click((function(event) {

var $target = $(event.target);

if ($target.hasClass("blue")) {

$target.removeClass();

$target.addClass("green");

}

else if ($target.hasClass("green")) {

$target.removeClass();

$target.addClass("yellow");

}

else if ($target.hasClass("yellow")) {

$target.removeClass();

$target.addClass("blue");

}

}));

});

Изменяет цвет квадрата при клике

_____________________________________________________________________________________

.mousemove()

Назначает функцию к событию mousemove для каждого элемента набора.

Данное событие обычно активируется, когда указатель двигается над областью элемента. Обработчику события передается одна переменная — объект события. В свойствах .clientX и .clientY находятся координаты указателя.

_____________________________________________________________________________________

.offset

Возвращаемый объект содержит два значение (сверху и слева) типа Float. Для фактического позиционирования браузеры обычно округляют эти значения до ближайшего целого. Этот метод работает только с видимыми элементами.

 .offset( coordinates )

Coordinates   An object containing the properties top and left, which are integers indicating the new top and left coordinates for the elements.

 offset( function(index, coords) )

function(index, coords)   A function to return the coordinates to set. Receives the index of the element in the collection as the first argument and the current coordinates as the second argument. The function should return an object with the new top and left properties.

$(document).ready(function(){

$(document).mousemove(function(event){

$('#mouseFollow').offset({top:event.pageY,left:event.pageX});

});

});   квадратик преследует курсор

_____________________________________________________________________________________

:hover()


$(document).ready(function(){

$("div").hover(

function () {

$(this).addClass('hover');

},

function () {

$(this).removeClass('hover');

}

);

});

_____________________________________________________________________________________

Keypress()

$(document).ready(function(){

$('body').keypress(function(){

$('div#boxDiv').append('<div class="box" />'); });

});

При нажатии добавляет красный квадрат в строку.

_____________________________________________________________________________________

Focus()   и   blur()

When the user starts using an object on the page it is "given" focus and the focus() event is called. When the user is no longer using the object is loses focus and the blur() event is called.

$(document).ready(function(){

$('input').focus(function(){

$(this).addClass('inFocus');

});

$('input').blur(function(){

$(this).removeClass('inFocus');

});

});

При фокусе на строке ввода – бэкграунд – красный.

_____________________________________________________________________________________

.submit()   .text()   .show()   .fadeOut()

При верном ответе высвечивает коррект, при неверном – еррор. Текст исчазет через пару мгновений.

$(document).ready(function(){    

   $("#form").submit(function(event) {

       event.preventDefault();

       if($('input').val()==='codecademy'){

$('span').text("Correct!").show().fadeOut(2000);

}

else {

$('span').text("Error!").show().fadeOut(2000);

}

   });

});

_____________________________________________________________________________________

. trigger() и запуск события без вызова пользователем

Вызывает событие для каждого элемента набора.

Trigger() Description: Execute all handlers and behaviors attached to the matched elements for the given event type.

Заметка:  “myCustomEvent”  -  любое несуществующее название.

$(document).ready(function(){

$("#myElementId").on("myCustomEvent",function(event){

$("#myElementId").addClass("green");

});

$("#myElementId").trigger("myCustomEvent");

});

При загрузке страницы окрашивает див.

_____________________________________________________________________________________

.delegate()   (eng. посилати)

Attaches handlers to many elements at once.

Устанавливает обработчик события на элементы, соответствующие заданному селектору. Особенностью метода является то, что если на страницу будут вставлены новые элементы, которые соответствуют этому селектору, то они также будут реагировать на заданные события. Выбранные элементы играют роль контекста выполнения метода (то есть, поиск элементов, для установки обработчиков событий, будет производиться только внутри выбранных элементов). Метод имеет один вариант использования:

.delegate(selector, eventType, [eventData], handler)

selector — селектор для поиска элементов, на которые будет установлен заданный обработчик событий.
eventType — тип обрабатываемого события. Например "click", "resize" (список всех типов событий).
eventData — данные, передаваемые обработчику событий. Они должны быть представлены в форме объекта, в формате: {fName1:value1, fName2:value2, ...}.
handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject.

    $(document.body).delegate('p','click', function() {

        $(this).after($('<p>No click me!</p>'));

 });

Плодится, куда не нажми.

P.S. Если заменить $(this) на $(‘p’) – получится очень даже вредная штука ;)

_____________________________________________________________________________________

The code "after" the return is actually on the "same line" (there's no semicolon and the "new line" starts with a dot). In other words, the following two things are identical...

$("div").addClass("blue").append("<span>Text</span>");

$("div")

 .addClass("blue")

 .append("<span>Text</span>");

_____________________________________________________________________________________

Создание одновременно двоих див с разными классами внутри друг друга.

$(".draw-area").append($("<div/>").addClass("armbox body-part").append($("<div/>").addClass("torso body-part")))

_____________________________________________________________________________________

Массив с функциями

  var drawSequence = [ drawHead,

        drawTorso,

        drawLeftArm,

        drawRightArm,

        drawLeftLeg,

        drawRightLeg ];

_____________________________________________________________________________________

.next()

Осуществляет поиск элементов, лежащих непосредственно после заданных элементов (по одному для каждого из заданных). Метод имеет один вариант использования:

.next([selector])

Возвращает элементы, которые находятся непосредственно после каждого из выбранных элементов. При необходимости, можно задать селектор selector для фильтрации результата.

Примеры использования:

$("div").next()

вернет элементы, которые находятся непосредственно после div-элементов на странице.

$("div").next(".bigBlock")

вернет элементы класса bigBlock, которые находятся непосредственно после div-элементов.

_____________________________________________________________________________________

.change()

Устанавливает обработчик изменения заданного элемента формы, либо, запускает это событие. Метод имеет три варианта использования:

.change(handler(eventObject))

Устанавливает функцию handler в качестве обработчика события change, на выбранные элементы.
Метод является аналогом bind("change", handler(eventObject)).

handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject.

.change(eventData, handler(eventObject))

Метод отличается от предыдущего возможностью передавать в обработчик дополнительные данные.
Является аналогом bind("change", eventData, handler(eventObject)).

handler(eventObject) — см. выше.
eventData — дополнительные данные, передаваемые в обработчик. Они должны быть представлены объектом в формате: {fName1:value1, fName2:value2, ...}.

.change()

Вызывает событие change, у выбранных элементов страницы. Метод является аналогом trigger("change").

Убрать установленный обработчик можно с помощью метода unbind().

Все три варианта использования метода, являются аналогами других методов (см. выше), поэтому все подробности использования change(), можно найти в описании этих методов.

Напомним, что событие change происходит не непосредственно в момент изменения, а только при потери фокуса измененного элемента формы.

// установим обработчик события change, элементу с идентификатором foo

$('#foo').change(function(){

 alert('Элемент foo был изменен.');

});

 

// вызовим событие change на элементе foo

$('#foo').change();

 

// установим еще один обработчик события change, на этот раз элементам

// с классом block. В обработчик передадим дополнительные данные

$('.block').change({a:12, b:"abc"}, function(eventObject){

 var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;

 alert('Элемент с классом block был изменен. '+

       'В обработчик этого события переданы данные: ' + externalData );

});

_____________________________________________________________________________________

.keydown()

Oбрабатывает переход клавиши клавиатуры в нажатое состояние.

The keydown option triggers for any key, any key at all. This means that we would be checking if we got an event for things like backspace, escape, enter and that sort of thing. While that's helpful in some cases we really only want things a player can guess.

This method is a shortcut for .bind('keydown', handler) in the first and second variations, and .trigger('keydown') in the third.

The keydown event is sent to an element when the user first presses a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.

$('#target').keydown(function() {

 alert('Handler for .keydown() called.');

});

To trigger the event manually, apply .keydown() without an argument:

$('#other').click(function() {

 $('#target').keydown();

});

_____________________________________________________________________________________

.keyup()

Устанавливает обработчик возвращения клавиши клавиатуры в ненажатое состояние, либо, запускает это событие.

keyup really is what we are looking for as it catches the last moment of a keyboard input. This means that the value in our '#letter-input' is set and something we can delete. It is the only handler that fits our needs for the hangman game. Using a keyup handler is a great way to ensure something only happens once, as while a keyboard might repeat a letter if it is held down, a keyboard key can only move 'up' once per key press.

$('#letter-input').keyup(testKeypress());

_____________________________________________________________________________________

.keypress()

Данное событие обычно активируется, когда нажата клавиша на клавиатуре. Событие keypress рассматривается как keydown и keyup на одной и той же клавише. Таким образом, последовательность событий представляет собой:

  1.  keydown
  2.  keypress
  3.  keyup

  1.  // установим обработчик события keypress, элементу с идентификатором foo
  2.  $('#foo').keypress(function(eventObject){
  3.    alert('Вы ввели символ с клавиатуры. Его код равен ' + eventObject.which);
  4.  });
  5.   
  6.  // вызовем событие keypress на элементе foo
  7.  $('#foo').keypress();
  8.   
  9.  // установим еще один обработчик события keypress, на этот раз элементам
  10.  // с классом block. В обработчик передадим дополнительные данные
  11.  $('.block').keypress({a:12, b:"abc"}, function(eventObject){
  12.    var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
  13.    alert('Вы ввели символ с клавиатуры. '+
  14.          'В обработчик этого события переданы данные: ' + externalData);
  15.  });

_____________________________________________________________________________________

JQuery UI

Взаимодействия

  1.  Draggable — Предоставляет элементу возможность быть перемещенным с помощью мыши (см. Drag & Drop)
  2.  Droppable — Контролирует где перетаскиваемый элемент может быть брошен (см. Drag & Drop)
  3.  Resizable — Предоставляет возможность динамически изменять размеры элемента с помощью мыши
  4.  Selectable — Предоставляет возможность выделять один или несколько элементов пользовательского интерфейса из группы
  5.  Sortable — Представляет возможность сортировки для группы элементов

Виджеты

  1.  Accordion — виджет «Аккордеон»
  2.  Autocomplete — Поле ввода с автодополнением
  3.  Button — улучшенная кнопка, может также быть флажком (check box) или радио-кнопкой (radio button); все виды кнопки могут располагаться на панели инструментов (toolbar)
  4.  Datepicker — виджет для выбора даты или диапазона дат
  5.  Dialog — диалоговое окно, которое может иметь любое содержимое
  6.  Progressbar — полоса прогресса
  7.  Slider — слайдер
  8.  Tabs — вкладки

Эффекты

  1.  Color Animation — анимирует изменение цвета компонента
  2.  Toggle Class, Add Class, Remove Class, Switch Class — анимируют изменение набора класса стилей компонента (см. CSS)
  3.  Effect — множество эффектов связанных с появлением и исчезновением компонентов интерфейса
  4.  Toggle — функция переключения между режимами видимости компонентов с использованием эффектов
  5.  Hide — функция исчезновения компонента с использованием эффектов
  6.  Show — функция появления компонента с использованием эффектов

Утилиты

  1.  Position — установка положения элемента относительно позиции другого элемента (выравнивание)

_____________________________________________________________________________________

.effect(“bounce”)

$(document).ready(function(){

$('div.bounce').click(

function(){

$(this).effect("bounce", {times:3},300);

});      

});

$(this).effect("bounce", {times:3},300);  -  где, баунспрыжок, times – кол-во прыжков, 300-скорость.

_____________________________________________________________________________________

.animate()

Perform a custom animation of a set of CSS properties.

все эффекты анимации в jQuery крутятся вокруг функции animate – данная функция берет один или несколько CSS свойств элемента и изменяет их исходного до конечного за N-ое количество итераций (количество итераций зависит от указанного времени, но не реже одной итерации в 13ms (если я правильно накопал это значение)).

Функция animate понимает следующие параметры:

  1. params – описание CSS свойств элемента, до которых будет происходить анимация (т.е. есть у нас div с высотой 100px – говорим animate({height:200}) – и высота плавно изменяется до 200px)
  2. duration – скорость анимации – указываем в миллисекундах, или используя ключевые слова “fast” = 200ms, “normal” = 400ms или “slow” = 600ms
  3. easing – указываем какую функцию будем использовать для наращивания значений, на выбор “linear” или “swing” (хотите больше см. Easing Plugin)
  4. callback – функция, которая будет вызвана после окончания анимации

$(document).ready(function(){

$("#block").click(function(event){

 $(this).animate({

 width: "+=50px",         // наращивание параметра записывается именно так

 height: "+=50px",

 fontSize: "+=2px"

},1500);

});  

});

Вечно растущий при клике кубик

_____________________________________________________________________________________

.delay()

Устанавливает таймер задержки выполнения очередных функций-эффектов (следующих пунктов в очереди) для соответствующих элементов набора jQuery.

Passing 1000 to delay will cause it to wait 1 second since its argument is in milliseconds.

// Сначала растворим элемент, id которого имеет значение 'foo',

// а затем через секунду (1000 миллисекунд) проявим его.

$('#foo').fadeOut(300).delay(1000).fadeIn(400);

// Если условие выполняется, дождемся, пока первый элемент

// (с id='test') выкатится, а затем выкатим второй элемент

// (с id='test2'). Если условие false, то второй элемент

// выкатываем сразу без задержек.

if (this.id=='foo')

 {

   $('#test1').slideDown(500);

   $('#test2').delay(500);

 }

$('#test2').slideDown(500);

Пошаговое перемещение квадрата:

 $(document).ready(function(){

$("#moveMe").click(function(event){

$(this).animate({

left: "100px"

},1500).delay(1000).animate({top: "100px"},1500);

});

});

_____________________________________________________________________________________

fadeIn()  fadeOut()

Синий квадрат появляется при клике на секунду и затем исчезает. Код:

$(document).ready(function(){

$('#reveal').click(function(){

$('#block').fadeIn(1000);

$('#block').fadeOut(1000);

});  

});

_____________________________________________________________________________________

Show() hide()

Разница между фейнин и шоу в том, что фейд просто делает объект невидимым, но при этом сохраняет размеры.

$(document).ready(function(){

$(".items").mouseover(function() {

$("a", this).show().animate({width: 100});

}).mouseout(function() {

$("a", this).animate({width: 0}, function() {

 $(this).hide();

});

});

});

Так же обоим эффектам show() и hide() можно присвоить аргументы slow”  /  fast. Регулирует скорость исчезновения и появления объекта, к которому применяется данная команда.

_____________________________________________________________________________________

slideUp()  and  slideDown()

SlideUp() causes an element to have animation where it slides up the screen until it disappears. slideDown() does the opposite. Другими словами объект анимировано скрывается от слайдАп и так же появляется от слайдДавн.

$(document).ready(function(){

$(document).click(function () {

if ($("div:first").is(":hidden")) {

$("div").show("slow");

} else {

$("div").slideUp(); }

});

});

 

При клике панелька едет вверх и скрывается. При повторном клике по документе – элементы по одному анимировано заполняют все 3 ряды, начиная с левого верхнего угла.

_____________________________________________________________________________________

slideToggle()

Команда принимает аргументы slow”  /  fast или милисекунды.

$(document).ready(function(){

   $(document).keypress(function(event){

   //get string of key pressed for easier comparison than keycodes

   var keyPressed = String.fromCharCode(event.which);

   //attach a handler to the appropriate div.

   var $divs = $("div");

   switch (keyPressed) {

       case "a":

           $divs.eq(0).slideToggle("fast");

           break;

       case "s":

           $divs.eq(1).slideToggle(“slow”);

           break;

           case "d":

           $divs.eq(2).slideToggle();

           break;

           case "f":

           $divs.eq(3).slideToggle();

           break;

   }

   });

});

При нажатии клавиш a,s,d,f  исчезает и появляется соответсвующий кубик.

_____________________________________________________________________________________

Stop()

A useful function to combine with the things we have learned to this point is the stop function. Stop can be called with 0, 2, or 3 arguments. 0 Will do the simple default action of pausing all animations currently active on the element which it is attached to.

The use of 2 arguments can give the coder control over the entire queue of elements on the element, not just the current item. 3 arguments can be used to specify the queue that you wish to edit, as well as what to do with it.

$(document).ready(function(){

$("#go").click(function(){

$(".block").animate({left: '+=300px'}, 3000);

});

/* Stop animation when button is clicked */

$('#stop').click(function(){

$('.block').stop();

});

/* Start animation in the opposite direction */

$("#back").click(function(){

$(".block").animate({left: '-=300px'}, 3000);

});

});

Управление кубиком с помощью кнопок GO  STOP BACK.

_____________________________________________________________________________________

P L U G I N S

Plugins are libraries of code that help automate things we commonly want to do as programmers. Typically a plugin adds even more abilities to an already existing library. In this case we will look at plugins that extend the existing jQuery library.

We've included the jQuery UI library by using <script> tags in the head of the html file. We set the source to be "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" to include Google's hosting of jQuery UI.

If you are going to use any jQuery functions in your own projects you will have to do this as well.

_____________________________________________________________________________________

.draggable()

$(document).ready(function(){

   $("#dragme").draggable();

});

//перестаскивает квадрат зажатым кликом.

_____________________________________________________________________________________

.sortable()

Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.

Другими словами, sortable() позволяет сортировать элементы, перетаскивая их на место после или перед выбранным элементом, при этом не меняя их местами.
$(function() {

   $('#sortlist').sortable();

});

_____________________________________________________________________________________

.resizable()

Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.

Другими словами, resizable() придает элементу свойство менять высоту и ширину, растягивая его курсором, зажатым на нижнем правом углу блочного элемента.

$(function () {

$('#resizeMe').resizable();    

});

//пример использования. Растягивает куб

_____________________________________________________________________________________

UIs addClass() and removeClass()

Вместо обычного присваивания класса, мы получаем визуальный переход. Чем-то похоже на .animate().

The addClass function in UI can take 3 arguments.
$( "#myDiv" ).addClass( "red", 500, callback);

"red" is the class to add to myDiv,

500 is the time for the animation to happen,

callback is the optional function to run at the completion of the animation.

$(function() {

$( "#button" ).click(function() {

$('#writing').addClass("transition",1000,callbackFunction());

});

function callbackFunction() {

setTimeout(function() {

$('#writing').removeClass("transition");},

1500 );}

});

Изменяет свой размер при нажатии кнопки.

_____________________________________________________________________________________

UI’s animate()

Example:


$(this).animate({ backgroundColor: "black" },1000);

Notice how the color black is in quotes like "black". Since you are creating an object, the value needs to be in quotes unless it is a number, otherwise JavaScript will try to interpret it as a part of your program instead of just a value.

$(function () {

   $('#button').click( function () {

$('#writing').animate({backgroundColor:'#d4ecf8'},1000);

   });

});

Тут и так все понятно хуле.

_____________________________________________________________________________________

Auto-complete widget

The widget suggests answers for the user as they type, if their typing matches one of the known strings we give to the auto-completer.

Тоесть этот виджет пытается угадать строку, которую набирает пользователь и, если такова найдена, оно автоматически дополняет её. Полезная вещь, как не крути.

$(function() {

$('#tags').autocomplete({source : availableTags});

});

Где availableTags массив.

var availableTags = [

   "ActionScript",

"AppleScript",

"Asp",

"BASIC",

"C",

"C++",

"Clojure",

"COBOL",

"ColdFusion",

"Erlang",

"Fortran",

"Groovy",

"Haskell",

"Java",

"JavaScript",

"Lisp",

"Perl",

"PHP",

"Python",

"Ruby",

"Scala",

 "Scheme"

];

Неплохо как для парочки строчек кода, ага?:Р

_____________________________________________________________________________________

Datepicker

The datepicker is a common object that can be used to automate the user picking a date. It also takes care of the need for any protections since the user is selecting a date from a list of values that we provide, rather than being able to insert anything they want.

Другими словами, это встроенный объект, представляющий собой календарик.

$(function() {

$('#dateEntry').datepicker();

});

_____________________________________________________________________________________

Slider

Sliders can allow the user to select values without having to enter it themselves, just like a datepicker but it works better for more linear data.

Since it is a jQuery UI component and not a normal HTML input we have to get the value of the slider out by calling slider("value") after selecting the slider with jQuery.

$(function() {

$("#slider").slider({

stop: function ( event, ui ) {

$('#slider').slider("value");

$('#volume').html( $('#slider').slider("value") );

}   

});

});

  1.  To get the value of the slider use $('#slider').slider("value").
  2.  Then you should put the value in the .html() like this: $('#volume').html( $('#slider').slider("value") )

_____________________________________________________________________________________

UI’s tabs  (вкладки)

$(function() {

$( "#tabs" ).tabs();

});

<html>

<head>

   <title>Sliders!</title>

   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css"/>        

   <link rel="stylesheet" href="style.css"/>

</head>

<body>

   <div id="tabs">

       <ul>

           <li><a href="#tabs-1">Nunc tincidunt</a></li>

           <li><a href="#tabs-2">Proin dolor</a></li>

           <li><a href="#tabs-3">Aenean lacinia</a></li>

       </ul>

       <div id="tabs-1">

           <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>

       </div>

       <div id="tabs-2">

           <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>

       </div>

<div id="tabs-3">

<p>Memento Mori</p>

   </div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>

<script src="script.js"></script>

</html>

Полезная вещь, да и смотрится ниче так.

_____________________________________________________________________________________

Droppable()

Opposite effect to the draggable()

droppable( "option", "option-name" );

$(document).ready( function () {

$('.flight').draggable();

$('.airport').droppable();

});

_____________________________________________________________________________________

UI’s hoverClass

$(document).ready( function () {

$('.flight').draggable({hoverClass:'.correct'});

$('.airport').droppable({hoverClass:'correct'});

});

Usage: $("selector").hoverClass("className");

Quite frankly, this plug in wouldn't be neccessary, except for the fact that IE doesn't recognize :hover

$(document).ready( function () {

$('.flight').draggable({hoverClass:'correct'});

$('.airport').droppable({hoverClass:'correct'});

$('.airport.lhr').droppable("option", "accept", ".lhr");

$('.airport.ord').droppable("option", "accept", ".ord");

$('.airport.hkg').droppable("option", "accept", ".hkg");

$('.airport.lax').droppable("option", "accept", ".lax");

});  // You have to include the '.' in the class name of the airport because the last argument is a selector. For instance to do the first one:

_____________________________________________________________________________________

.drop()

Убирает объект.

$(document).ready( function () {

$('.flight').draggable({hoverClass:'correct'});

$('.airport').droppable({hoverClass:'correct', drop: function(event, ui){

   ui.draggable.remove();

 }});

$('.airport.lhr').droppable("option", "accept", ".lhr");

$('.airport.ord').droppable("option", "accept", ".ord");

$('.airport.hkg').droppable("option", "accept", ".hkg");

$('.airport.lax').droppable("option", "accept", ".lax");

});

 

_____________________________________________________________________________________

Collapsible Message Panels

$(function(){

   $('.header').click(function(){

       $(this).next().stop().animate({height: 'toggle'}, 250);

   });

   

   $('#hide_all').click(function(){

       $('.content').slideUp(250);

   });

   

   $('#show_all').click(function(){

       $('.content').slideDown(250);

   });

});

_____________________________________________________________________________________

My Project

$(document).ready(function(){

 

$('div#bounce').click(

function(){

$(this).effect("bounce", {times:5,direction:'right'},250);

});      

$('div#bounce2').click(

function(){

$(this).effect("bounce", {times:5},250);

});

$("#highlight").click(function () {

$(this).effect("highlight", {}, 1000);

});

$("#hide").click(function () {

$(this).hide("blind", {direction:"vertical"}, 1000);

});

$("#explode").click(function () {

$(this).hide("explode", {}, 1000);

});

$("#fold").click(function () {

$(this).hide("fold", {size:50}, 1000);

});

$("#puff").click(function () {

$(this).hide("puff", { percent: 1000 }, 1000);

});

$("#pulsate").click(function () {

$(this).effect("pulsate", { times: 9 }, 50);

});

$("#scale").click(function () {

$(this).effect("scale", {

percent:150,

direction:'verticalal'}, 1000);

});

});

#bounce { background:    -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

   background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

   background:      -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

   background:     -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

   background:         linear-gradient(top, blue 0%, white 100%); /* the standard way */; margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#bounce2 { background:    -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

   background: -webkit-linear-gradient(top, blue 0%, green 100%); /* Chrome10+,Safari5.1+ */

   background:      -o-linear-gradient(top, blue 0%, green 100%); /* Opera 11.10+ */

   background:     -ms-linear-gradient(top, blue 0%, green 100%); /* IE10+ */

   background:         linear-gradient(top, blue 0%, green 100%); /* the standard way */; margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#highlight {background:    -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

   background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

   background:      -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

   background:     -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

   background:         linear-gradient(top, blue 0%, white 100%);; margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#hide{background:    -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

   background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

   background:      -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

   background:     -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

   background:         linear-gradient(top, blue 0%, white 100%);; margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#red {background:    -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

   background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

   background:      -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

   background:     -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

   background:         linear-gradient(top, blue 0%, white 100%); margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#explode {background:    -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

   background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

   background:      -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

   background:     -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

   background:         linear-gradient(top, blue 0%, white 100%);; margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#fold {background:    -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

   background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

   background:      -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

   background:     -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

   background:         linear-gradient(top, blue 0%, white 100%); margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#puff {background:    -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

   background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

   background:      -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

   background:     -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

   background:         linear-gradient(top, blue 0%, white 100%); margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#pulsate {background:    -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

   background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

   background:      -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

   background:     -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

   background:         linear-gradient(top, blue 0%, white 100%); margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#scale {background:    -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

   background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

   background:      -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

   background:     -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

   background:         linear-gradient(top, blue 0%, white 100%); margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

.text{

color:red;

}

#P_S {

display:block;

               width: 112px;

               position: absolute;

               bottom: 0px;

               right: 280px;

               font-weight:bold;

               font-size:30px;

color:green;

}

body{

background-image:url('http://img.vmessages.com/en/santa-claus/44.gif');

text-align: center;

cursor:pointer;

}

<!DOCTYPE html>

<html>

<head>

 <link rel="stylesheet" type="text/css" href="style.css" />

 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

 <script src="script.js"></script>

</head>

<h1 class="text">Some of jQuery effects :)</h1>

<body>

 <div id="fold">See ya! :)</div>

 <div id = "bounce" class="gradient">I'm bouncing :)</div>

 <div id = "bounce2">Wow!Me too!:D</div>

 <div id = "highlight">Look at me lol(:</div>

 <div id = "hide">I'm embarassed</div>

 <div id = "explode">BANZAI!</div>

 <div id="puff">Boo!</div>

 <div id="pulsate">Bzzzz</div>

 <div id="scale">I wanna be bigger</div>

 <div id="P_S">Merry X-mas ^__^</div>

</body>

</html>


 

А также другие работы, которые могут Вас заинтересовать

62103. Нумерація чисел 11-20 95.52 KB
  Про що йде в задачі про завод який виготовляв плеєри і телефони Скільки завод виготовив плеєрів 9 Скільки завод виготовив телефонів 7 Про що ми дізнаємося якщо до 9 7 скільки разом виготовили плеєрів і телефонів...
62105. Теорема Виета 31.88 KB
  В соответствии с этим можно выделить следующие структурные элементы данного урока: 1 проверка домашнего задания; 2 подведение учащихся к теореме Виета; 3 формулирование теоремы Виета; 4 доказательство теоремы Виета...