Javascript array шпаргалка

Переменные в Javascript позволяют хранить только одни данные за раз. Однако, учитывая, что часто бывает полезно манипулировать большим количеством данных, концепции переменной иногда недостаточно, потому что становится трудно управлять большим количеством различных переменных.

Чтобы исправить это, Javascript предлагает структуру данных, позволяющую хранить все эти данные в «общей переменной»: массиве.

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

ARRAY LENGTH

Метод length возвращает длину массива.

ARRAY PUSH

Метод push() добавляет один или несколько элементов в конец массива и возвращает новый размер массива.

ARRAY POP

Метод pop() удаляет последний элемент из массива и возвращает этот элемент. Этот метод изменяет длину массива.

ARRAY UNSHIFT

Метод unshift() добавляет один или несколько элементов в начало массива и возвращает новую длину массива.

ARRAY SHIFT

Метод shift() удаляет первый элемент из массива и возвращает этот элемент. Этот метод изменяет длину массива.

ARRAY FOREACH

Метод forEach() выполняет итерацию по элементам массива один за другим для выполнения функции.

ARRAY FILTER

Метод filter() создает и возвращает массив, содержащий элементы, проверяющие фильтр.

ARRAY MAP

Метод map() возвращает новый массив, содержащий все элементы исходного массива, для которого вызывается функция.

ARRAY REDUCE

Метод reduce() применяет функцию, которая является «аккумулятором» и обрабатывает каждое значение в массиве (слева направо), чтобы уменьшить его до одного значения.

ARRAY SLICE

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

ARRAY CONCAT

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

ARRAY JOIN

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

ARRAY REVERSE

Метод reverse() переворачивает массив. Первый элемент массива становится последним, а последний элемент массива становится первым.

Просмотров: 3553

  • 2.94
  • 1
  • 2
  • 3
  • 4
  • 5
Голосов: 294

Поиск DOM элементов с помощью jQuery

В этом уроке мы разберем, как искать елементы с помощью jQuery.

У нас есть html файл с подключенным скриптом code, где мы будем писать наш javascript. Давайте подключим скрипт jQuery до нашего скрипта. Таким образом библиотека будет нам доступна, когда мы будем писать наш код

<body>
  <script src='jquery.js'></script>
  <script src='code.js'></script>
</body>

Как же нам использовать jQuery? Когда мы установили библиотеку jQuery у нас в window появилась две переменных jQuery и $. Это то, как мы можем обращатся к нашей библиотеке, чтобы ее использовать. Обычно все использую знак доллар, так как он короче и код получается лаконичнее.

Главный смысл jQuery заключается в том, что как аргумент функции $ мы можем передать строку либо DOM елемент. Тогда jQuery попробует найти его в DOM и вернет не сам DOM елемент, а специальный jQuery обьект на который можно вызывать другие jQuery методы.

Давайте добавим див с классом app

<div>App</div>

Давайте попробуем найти этот елемент. Я предпочитаю переменные, в которые записаны jQuery елемент начинать с знака $. Это позволяет сразу понимать что внутри.

var $app = $('.app')
console.log($app)

Как мы видим в консоли, мы получили массив, в котором первый елемент является нашим DOM елементом.

Теперь мы можем вызывать jQuery методы прямо на нашу переменную $app, так как это у нас jQuery елемент.

Например давайте поменяем цвет елемента.

var $app = $('.app')
$app.css('color', 'red')

То есть мы вызвали метод jQuery .css, который принимает стиль и значение. Как вы видите, этот код намного лаконичнее, чем мы писали на чистом javascript и мы всегда можем быть уверенны в том, что он работает кроссбраузерно.

Еще jQuery замечателен тем, что после каждом операции мы получаем обратно jQuery елемент. Это значит, что мы можем писать цепочки вызовов.

Например:

var $app = $('.app')
$app.css('color', 'red')
  .css('font-size', '24px')
  .css('border', '1px solid red')

Поиск елементов может так же осуществлятся по тегу, классу, id. Давайте попробуем.

Добавим добавим id к нашему елементу.

<div>App</div>

Теперь мы можем искать елемент по id вот так.

var $app = $('#app')

Либо по тегу.

var $app = $('div')

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

Давайте попробуем создать несколько div елементов с одинаковым классом и поменять их стили.

<div>App 1</div>
<div>App 2</div>
<div>App 3</div>

Если мы обновим страницу, то м увидим, что у нас поменялись сразу стили всех трех елементов. Нам не нужны циклы, чтобы проходить по массиву и применять стили на каждый елемент. Мы всегда работаем с массивом и применяем методы на массив.

Если у вас что-то не получается, либо возникли вопросы и комментарии, пишите их прямо под этим видео и я обязательно на них отвечу.

Шпаргалка по Xpath

Тестирование

Испытательный стенд Xpath

Тестовые запросы на тестовом стенде Xpath:

  • Испытательный стенд Xpath (whitebeam.
    org)

Консоль браузера 

 $x("//дел")

Работает в Firefox и Chrome.

Селекторы

Селекторы потомков

СС Xpath ?
h2 //h2 ?
раздел стр //дел//п ?
ул > ли //ул/ли ?
ул > ли > а //ул/ли/а  
дел > * //дел/*  
:корень / ?
:корень > тело /корпус  

Селекторы атрибутов

СС Xpath ?
#id //*[@id="id"] ?
. класс //*[@class="class"] 9='/'] //a[начинается с(@href, '/')] ?
а[href$='pdf'] //a[заканчивается(@href, '.pdf')]  
а[href*='://'] //a[содержит(@href, '://')]  
а[отн~='помощь'] //a[содержит(@rel, 'помощь')] …вроде  

Селекторы заказов

СС Xpath ?
ul > li:first-of-type //ул/ли[1] ?
ul > li:nth-of-type(2) 		//ул/ли[2]  
ul > li:последний тип //ul/li[последний()]  
li#id:первый в своем роде //li[1][@id="id"] ?
а: первый ребенок //*[1][name()="a"]  
а:последний ребенок //*[last()][name()="a"]  

Братья и сестры

СС Xpath ?
h2 ~ ul //h2/следующий-брат::ul ?
h2 + ул //h2/следующий-брат::ul[1]  
h2 ~ #id //h2/следующий-брат::[@id="id"]  

jQuery

СС Xpath ?
$('ul > li'). parent() //ул/ли/.. ?
$('li').closest('раздел')
//li/предок-или-я::раздел  
$('a').attr('href') //a/@href ?
$('диапазон').text() //диапазон/текст()  

Прочее

СС Xpath ?
h2: не ([идентификатор]) //h2[не(@id)] ?
Текстовое совпадение //кнопка[текст()="Отправить"] ?
Текстовое совпадение (подстрока)
//кнопка [содержит (текст (), "Перейти")] 		 
Арифметика //продукт[@цена > 2,50]  
Имеет детей //ул[*]  
Есть дети (конкретные) //ул[ли]  
или логика //a[@имя или @href] ?
Союз (объединяет результаты) //а | //дел ?

Проверка класса 

 //div[содержит(concat(' ',normalize-space(@class),' '),' foobar ')]

В Xpath нет оператора «проверить, является ли часть списка, разделенного пробелами», так что это обходной путь (источник).

Выражения

Ступени и оси

// ул / a[@id='ссылка']
Ось Шаг Ось Шаг

Префиксы

Начните свое выражение с любого из них.

Оси

Разделите шаги с /. Используйте два ( // ), если вы не хотите выбирать прямых потомков.

шагов 

 //дел
//div[@name='box']
//[@id='ссылка']

Шаг может иметь имя элемента (

div ) и предикаты ( [...] ). Оба являются необязательными. Это могут быть и другие вещи:

.
 //a/text() #=> "Иди домой"
//a/@href #=> "index.html"
//a/* #=> Все дочерние элементы a

Предикаты

Предикаты 

 //дел[true()]
// div[@class="голова"]
//div[@class="head"][@id="top"]

Ограничивает набор узлов, только если выполняется какое-либо условие. Их можно заковать.

Операторы 

 # Сравнение
//a[@id = "xyz"]
//a[@id != "xyz"]
//a[@price > 25]
 
 # Логика (и/или)
//div[@id="head" и position()=2]
//div[(x и y) или нет(z)]

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

Использование узлов 

 # Используйте их внутри функций
//ул[количество(ли) > 2]
//ul[count(li[@class='hide']) > 0]
 
 # Это возвращает `
    `, у которого есть дочерний элемент `
  • `
//ул[ли]

Вы можете использовать узлы внутри предикатов.

Индексация 

 //a[1] # первый 
//a[last()] # последний 
//ol/li[2] # секунда 
  • 
//ol/li[position()=2] # то же, что и выше
//ol/li[position()>1] # :not(:first-of-type)

    • Используйте [] с числом, или last() или position() .

    Порядок объединения 

     а[1][@href='/']
а[@href='/'][1]

    Порядок важен, эти два разные.

    Вложенные предикаты 

     //раздел[.//h2[@id='привет']]

    Это возвращает

    , если у него есть потомок

    с id='hi' .

    Функции

    Функции узла 

     name() # //[начинается с (name(), 'h')]
text() # //кнопка[text()="Отправить"]
                           # //кнопка/текст()
язык (ул.)
пространство имен-uri()
 
     count() # //таблица[count(tr)=1]
position() # //ol/li[position()=2]

    Логические функции 

     не(выражение) # кнопка[не(начинается с(текст(),"Отправить"))]

    Строковые функции 

     contains() # шрифт[содержит(@class,"head")]
начинает-с() # шрифт[начинает-с(@класс,"голова")]
заканчивается-с() # шрифт[заканчивается-с(@класс,"голова")]
 
     конкат (х, у)
подстрока (ул, начало, длина)
substring-before("01/02", "/") #=> 01
подстрока-после("01/02", "/") #=> 02
переводить()
нормализовать пространство ()
длина строки()

    Преобразование типа 

     строка()
число()
логическое()

    Оси

    Использование осей 

     //ul/li # ul > li
//ul/child::li # ul > li (то же самое)
//ul/following-sibling::li # ul ~ li
//ul/потомок-или-я::li # ul li
//ul/предок-или-я::li # $('ul'). closest('li')

    Шаги выражения разделяются / , обычно используемыми для выбора дочерних узлов. Это не всегда так: вы можете указать другую «ось» с помощью ::.

    // ул /ребенок:: ли
    Ось Шаг Ось Шаг

    Детская ось 

     # оба одинаковые
//ул/ли/а
//ребенок::ul/ребенок::li/ребенок::а

    child:: — ось по умолчанию. Это заставляет //a/b/c работать.

     # оба одинаковые
# это работает, потому что `child::li` является истинным, поэтому предикат выполняется успешно
//ул[ли]
//ул[ребенок::ли]
 
     # оба одинаковые
//ул[количество(ли) > 2]
//ul[count(child::li) > 2]

    Ось потомка или себя 

     # оба одинаковые
//дел//h5
//div/потомок-или-я::h5

    // — это сокращение от оси потомок-или-я::.

     # оба одинаковые
//ul//[последний()]
//ul/потомок-или-я::[last()]

    Прочие оси

    Можно использовать и другие оси.

    Союзы 

     //а | //охватывать

    Использовать | , чтобы соединить два выражения.

    Еще примеры

    Примеры 

     //* # все элементы
count(//*) # подсчет всех элементов
(//h2)[1]/text() # текст первого заголовка h2
//li[span] # найти 
  •  с  внутри него
                    # ...заменяется на //li[child::span]
//ul/li/.. # используйте .. для выбора родителя

    • Найти родителя 

     //раздел[h2[@id='имя-раздела']]

    Находит

    , который непосредственно содержит h2#section-name 

     //раздел[//h2[@id='имя-раздела']]

    Находит

    , который содержит h2#section-name . (То же, что и выше, но вместо потомка используется потомок или я)

    Ближайший 

     .
    No related posts.