jQuery(2): Выборка

категория: jQuery
Опять вернусь к JavaScript, сегодня будет уже непосредственно работа с jQuery, такое себе небольшое внедрение в страсти разработки фронтэндов. К слову скажу - это очень удобный и простой фреймворк, единственным его недостатком является небольшая тяжеловесность и медлительность, но она прячется за его преимуществами. В первую очередь качаем сам фреймворк с офф сайта http://jquery.com/download, кидаем его, для начала, в корень вашего сайта под названием jquery.js и подключаем его на главной странице сайта между тегами :
<script type="text/javascript" src="jquery.js"></script>
Для выборки элементов к примеру будем пользоваться таким html-каркасом:
<!doctype html>
    <head>
    </head>
    <body>
        <p class="some_class">Here is some class</p>
        <p id="some_id">Here is some id</p>
    </body>
</html>
Начнем работу jQuery c DOM (Document Object Model). Выборка происходит с помощью конструкции $(""). Сделаем выборку отдельно всех элементов заключенных в параграф, потом параграфа с классом и параграфа с id:
$("p");
$("p.some_class");
$("p#some_id");
Объединение селекторов осуществляется с помощью символа ",":
$("p.some_class, p#some_id");
Выборка дочерных элементов - через символ ">", "p" является наследником "body":
$("body > p");
Для выборки всех тегов <p> в теге <body> используется символ пробела:
$("body p");
Ну вот и все чудеса, но думаю сразу нужно заметить, что наш скрипт будет реагировать на элементы дерева только те, которые находятся выше него в коде. Чтобы сначала сгенерировался весь html каркас, а потом производилась выборка среди всех тегов, нам поможет конструкция:
$(document).ready(function(){
    тут наш скрипт;
});
Далее будем производить уже реальные действия над выбранными элементами.


blog comments powered by Disqus