НОУ ИНТУИТ | Введение в jQuery. Лекция 3: Атрибуты элементов и CSS

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 28.02.2016 | Уровень: для всех | Доступ: платный

|

Вам нравится? Нравится 47 студентам

| Поделиться |

Поддержать программу

В предыдущих примерах мы уже изменяли CSS-свойства DOM-элементов, используя одноименный метод "css()", но это далеко не всё. Теперь копнём поглубже, чтобы не штурмовать форумы банальными вопросами ;)

Копать начнём с более досконального изучения метода "css()":

css(property) — получение значения CSS свойства

css(property, value) — установка значения CSS свойства

css({key: value, key:value}) — установка нескольких значений

css(property, function(index, value) { return value }) — тут для установки значения используется функция обратного вызова (в просторечии — callback-функция), index это порядковый номер элемента в выборке, value — старое значение свойства

Метод "css()" возвращает текущее значение, а не прописанное в CSS файле по указанному селектору

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

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Пример манипуляций над CSS</title>
    <link rel="profile" href="http://gmpg.org/xfn/11"/>
    <link rel="shortcut icon" href="http://anton.shevchuk.name/favicon.ico"/>
    <link rel="stylesheet" href="css/styles.css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/code.js"></script>
</head>
<body>
    <div id="content" class="wrapper box">
        <menu label="Try...">
            <a href="index.html" title="go prev" class="button alignleft" rel="prev">← Back </a>
            <a href="index.html" title="back to Index" class="button alignleft" rel="index">Index §</a>
            <a href="#" title="reload" class="button alignleft" onclick="window.location.reload();return false">Reload ¤</a>
            <a href="class.html" title="go next" class="button alignright" rel="next">Next →</a>
            <hr/>
            <pre><code contenteditable="true">alert($(<span>'p'</span>).css(<span>'color'</span>))</code></pre>
            <button type="button" class="code">Run Code</button>
            <pre><code contenteditable="true">$(<span>'p'</span>).css(<span>'color'</span>,<span>'red'</span>)</code></pre>
            <button type="button" class="code">Run Code</button>
            <pre><code contenteditable="true">$(<span>'p'</span>).css({
    <span>'color'</span>:<span>'green'</span>,
    <span>'background-color'</span>:<span>'#000'</span>
})</code></pre>
            <button type="button" class="code">Run Code</button>
            <pre><code contenteditable="true">$(<span>'p'</span>).css({
    color:<span>'#0F0F0F'</span>,
    backgroundColor:<span>'#fff'</span>,
    width:<span>'auto'</span>
})</code></pre>
            <button type="button" class="code">Run Code</button>
            <pre><code contenteditable="true">$(<span>'p'</span>).css(<span>'width'</span>, function(i, v){
    return parseFloat(v) * 1/(i+1)
})</code></pre>
            <button type="button" class="code">Run Code</button>
        </menu>
        <header>
            <h1>Пример манипуляций над CSS</h1>
            <h2>Пробуем... →</h2>
        </header>
        <article>
            <h2>Article Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum,
            lectus eu varius consectetur, libero velit hendrerit augue, ut posuere enim neque
            in libero. Donec eget sagittis nibh. Suspendisse sed tincidunt urna. Cras quis
            euismod neque. Maecenas auctor ultricies posuere. Pellentesque luctus pulvinar dui
            eget semper. Donec sodales odio eu sapien varius luctus. Donec dictum feugiat diam
            at malesuada. Sed nec massa in augue condimentum faucibus quis ut diam. Quisque
            nisl sem, semper nec vulputate vel, mattis sit amet justo. Aliquam purus felis,
            tempor at scelerisque quis, tincidunt in neque. Etiam ut risus diam. Pellentesque
            fermentum risus id elit feugiat cursus. Ut fringilla dictum diam, sed iaculis
            lorem pulvinar ut. Cras vel elit id velit commodo viverra sit amet vel orci.</p>
        </article>
        <article>
            <h2>Article Title</h2>
            <p>Duis in vestibulum sem. Cras euismod tincidunt dui, et scelerisque tellus condimentum vel.
            Maecenas et urna sit amet risus fermentum rhoncus nec porttitor ligula. Maecenas sit amet
            turpis enim, ut iaculis est. Duis feugiat, lacus id placerat porttitor, lorem augue gravida
            nisi, eu porta eros risus et lectus. Maecenas vestibulum nunc vel ipsum tincidunt sit amet
            blandit sapien bibendum. Proin vel vulputate nisl. Duis tempor imperdiet placerat. Pellentesque
            faucibus consequat magna, et bibendum nisl egestas non. Pellentesque sit amet mattis augue.
            Aenean at diam tincidunt purus sollicitudin gravida non in nisi. Fusce bibendum, magna in
            adipiscing mattis, sem risus fringilla mi, nec gravida lectus lectus at nibh. Suspendisse 
            adipiscing elementum laoreet. Suspendisse sem erat, varius quis aliquet vitae, dapibus sed
            nibh. Nullam iaculis sem at mauris faucibus in vestibulum libero pretium. Aliquam eu turpis
            libero. Fusce et ultrices lectus.</p>
        </article>
        <footer>
            ©copyright 2014 Anton Shevchuk — <a href="http://anton.shevchuk.name/jquery-book/">jQuery Book</a>
        </footer>
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-1669896-2']);
            _gaq.push(['_trackPageview']);
            (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
         </script>
	</div>
</body>
</html>

$("#my").css('color') // получаем значение цвета шрифта
$("#my").css('color', 'red') // устанавливаем значение цвета шрифта
// установка нескольких значений
$("#my").css({
'color':'red',
'font-size':'14px',
'margin-left':'10px'
})
// альтернативный способ
$("#my").css({
color:'red',
fontSize:'14px',
marginLeft:'10px',
})
// используя функцию обратного вызова
$("#my").css('height', function(i, value){
return parseFloat(value) * 1.2;
})

Ну, вроде с CSS разобрались, хотя нет — стоит ещё описать манипуляции с классами, тоже из разряда первичных навыков:

addClass(className) — добавление класса элементу

addClass(function(index, currentClass){ return className }) — добавление класса используя функцию обратного вызова

hasClass(className) — проверка на причастность к определённому классу

removeClass(className) — удаление класса

removeClass(function(index, currentClass){ return className }) — удаление класса используя функцию обратного вызова

toggleClass(className) — переключение класса

toggleClass(className, switch) — переключение класса по флагу switch

toggleClass(function(index, currentClass, switch){ return className }, switch) — переключение класса используя функцию обратного вызова

В приведённых функциях в качестве className может быть строка содержащая список классов через пробел.

Мне ни разу не приходилось использовать данные функции с функциями обратного вызова, и лишь единожды пригодился флаг switch, так что не заморачивайтесь всё это запоминать, да и в дальнейшем, цитируя руководство по jQuery, я буду сознательно опускать некоторые "возможности"

Но хватит заниматься переводом официальной документации, перейдём к наглядным примерам (class.html):

// добавляем несколько классов за раз
$("#my").addClass('active notice')
// переключаем несколько классов
$("#my").toggleClass('active notice')
// работает вот так (похоже на классовый XOR):
<div id="my" class="active notice"> > <div id="my" class="">
<div id="my" class="active"> > <div id="my" class="notice">
<div id="my" class=""> > <div id="my" class="active notice">
// аналогично предыдущему примеру
$("#my").toggleClass('active')
$("#my").toggleClass('notice')
// проверяем наличие класса(-ов)
$("#my").hasClass('active')
// удаляем несколько классов за раз
$("#my").removeClass('active notice')

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

attr(attrName) — получение значения атрибута
attr(attrName, attrValue) — установка значения атрибута (также можно использовать hash, либо функцию обратного вызова)
removeAttr(attrName) — удаление атрибута

Атрибуты – это всё то, что мы видим внутри угловых скобочек, когда пишем HTML код:

<!-- В данном примере это href, title, class -->
<a href="#top" title="anchor" class="simple">To Top</a>

Атрибуты, с которыми вам чаще других придётся сталкиваться:

// получение альтернативного текста картинки
var altText = $('img').attr('alt')
// изменение адреса картинки
$('img').attr('src', '/images/default.png')
// работаем со ссылками
$('a#my').attr({
'href':'http://anton.shevchuk.name',
'title':'My Personal Blog',
});

Кроме атрибутов, также есть свойства элементов, к ним относится "selectedIndex", "tagName", "nodeName", "nodeType", "ownerDocument", "defaultChecked" и "defaultSelected". Ну вроде бы список невелик, можно и запомнить. Для работы со свойствами используем функции из семейства "prop()":

prop(propName) — получение значения свойства

prop(propName, propValue) — установка значения свойства (также можно использовать hash, либо функцию обратного вызова)

removeProp(propName) — удаление свойства (скорей всего никогда не понадобится)

А теперь выключите музыку, и запомните следующее – для отключения элементов формы, и для проверки/изменения состояния чекбоксов мы всегда используем функцию "prop()", пусть вас не смущает наличие одноименных атрибутов в HTML (это я про "disabled" и "checked"), используем "prop()" и точка:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Пример работы с атрибутами и свойствами элементов</title>
    <link rel="profile" href="http://gmpg.org/xfn/11"/>
    <link rel="shortcut icon" href="http://anton.shevchuk.name/favicon.ico"/>
    <link rel="stylesheet" href="css/styles.css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/code.js"></script>
    <script>
        $(function(){
            var status = function() {
                var $input = $("#check");
                out("$('#check').attr('checked'): " + $input.attr('checked') + "\n"
                          + "$('#check').prop('checked'): " + $input.prop('checked') + "\n"
                          + "$('#check').is(':checked'): " + $input.is(':checked'))
            };
            $("#check").change(status);
            $(".code").click(status);
        });
    </script>
</head>
<body>
    <div id="content" class="wrapper box">
        <menu label="Try...">
            <a href="class.html" title="go prev" class="button alignleft" rel="prev">← Prev </a>
            <a href="index.html" title="back to Index" class="button alignleft" rel="index">Index §</a>
            <a href="#" title="reload" class="button alignleft" onclick="window.location.reload();return false">Reload ¤</a>
            <a href="height.html" title="go next" class="button alignright" rel="next">Next →</a>
            <hr/>
            <h3>attr()</h3>
            <pre><code contenteditable="true"><em>// "check"</em>
$(<span>'#check'</span>).attr(<span>'checked'</span>, <span>true</span>)</code></pre>
            <button type="button" class="code">Run Code</button>
            <pre><code contenteditable="true"><em>// "uncheck"</em>
$(<span>'#check'</span>).attr(<span>'checked'</span>, <span>false</span>)</code></pre>
            <button type="button" class="code">Run Code</button>
            <h3>prop()</h3>
            <pre><code contenteditable="true"><em>// check</em>
$(<span>'#check'</span>).prop(<span>'checked'</span>, <span>true</span>)</code></pre>
            <button type="button" class="code">Run Code</button>
            <pre><code contenteditable="true"><em>// uncheck</em>
$(<span>'#check'</span>).prop(<span>'checked'</span>, <span>false</span>)</code></pre>
            <button type="button" class="code">Run Code</button>
            <pre><code contenteditable="true"><em>// disable checkbox</em>
$(<span>'#check'</span>).prop(<span>'disabled'</span>, <span>true</span>)</code></pre>
            <button type="button" class="code">Run Code</button>
            <pre><code contenteditable="true"><em>// enable checkbox</em>
$(<span>'#check'</span>).prop(<span>'disabled'</span>, <span>false</span>)</code></pre>
            <button type="button" class="code">Run Code</button>
        </menu>
        <header>
            <h1>Свойства и атрибуты</h1>
            <h2>Почувствуй разницу между attr() и prop()</h2>
        </header>
        <div id="output">
            <h3>Output</h3>
            <pre></pre>
        </div>
        <article>
            <p>
                <input id="check" type="checkbox" checked="checked">
                <label for="check">Check me</label>
            </p>
        </article>
        <footer>
            ©copyright 2014 Anton Shevchuk — <a href="http://anton.shevchuk.name/jquery-book/">jQuery Book</a>
        </footer>
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-1669896-2']);
            _gaq.push(['_trackPageview']);
            (function() {
             var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
             ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
             var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
         </script>
	</div>
</body>
</html>

Дальше >>

Введение в jQuery

Введение в jQuery

Атрибуты элементов и CSS

Вопросы и ответы

Студенты

Авторизоваться

Введение в jQuery

Введение в jQuery

Атрибуты элементов и CSS

Вопросы и ответы

Студенты