Latest web development tutorials

селектор JQuery

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


селектор JQuery

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

JQuery селектор, основанные на элементах удостоверения личности, классы, типы, атрибуты, значения атрибутов, и так далее "Найти" (или выберите) HTML элементы. Он основан на существующих CSS селекторов , кроме того, он также имеет некоторые пользовательские селекторы.

Все селекторы Jquery начинаются со знака доллара: $ ().


Селекторы

JQuery селекторы выбора элементов на основе имени элемента.

Выберите все элементы <p> на странице:

$("p")

примеров

Пользователь нажимает на кнопку, все элементы <p> скрыты:

примеров

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

Попробуйте »


#id селектор

JQuery селекторы #id выберите элементы, указанные идентификатор атрибута элемента HTML.

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

Id, выбрав следующие элементы синтаксиса:

$("#test")

примеров

Когда пользователь нажимает кнопку, элементы имеют атрибут ID = "тест" будет скрыт:

примеров

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});

Попробуйте »


селектор .class

Селектор класса Jquery может найти элемент по указанному классу.

Синтаксис выглядит следующим образом:

$(".test")

примеров

Пользователь нажимает на кнопку после того, как все элементы с классом = "тест" скрытые атрибуты:

примеров

$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});

Попробуйте »


Другие примеры

语法 描述 实例
$("*") 选取所有元素 在线实例
$(this) 选取当前 HTML 元素 在线实例
$("p.intro") 选取 class 为 intro 的 <p> 元素 在线实例
$("p:first") 选取第一个 <p> 元素 在线实例
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素 在线实例
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 在线实例
$("[href]") 选取带有 href 属性的元素 在线实例
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 在线实例
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 在线实例
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 在线实例
$("tr:even") 选取偶数位置的 <tr> 元素 在线实例
$("tr:odd") 选取奇数位置的 <tr> 元素 在线实例

Отдельный файл с помощью функции JQuery

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

Когда мы демонстрируем в JQuery учебнике, то функция будет добавлена ​​непосредственно в секцию <HEAD>. Тем не менее, поместить их в отдельный файл будет лучше, как это (файл, на который ссылается атрибут SRC):

примеров

<head>
<script src="http://cdn.static.w3big.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>