Замечания по разработке веб-интерфейса JQuery
jQuery — это легкая библиотека JavaScript, которая пишет меньше, но делает больше.
Общие селекторы JQuery
Селектор идентификатора: Используя Простойиз$(#id)идентификационный префикс,Реализуйте быстрое сопоставление объектов-элементов с указанными идентификаторами.,Конкретное использование заключается в следующем.
<body>
<div id="1000"> hello lyshark </div>
<div id="2000"> hello lyshark </div>
<div id="3000"> hello lyshark </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#2000").css("background","red"); //Выбираем указанный элемент по номеру ID
var temp = $("#1000").text(); //Получаем содержимое текста
document.write("Текстовое содержимое: " + temp); //Распечатываем содержимое этого текста
</script>
</body>Селектор тегов: Используя$("element")идентификационный префикс,Сопоставить все теги P на странице,и установите его на красный.
<body>
<div id="1000"> hello lyshark </div>
<p id="2000"> hello p</p>
<div id="3000"> hello lyshark </div>
<p id="4000"> hello p</p>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("p").css("background","red"); //Изменить все теги P посредством позиционирования тега p
</script>
</body>Селектор класса: Используя$("ClassName")идентификационный префикс,Сопоставить все на страницеclass="MyClass"атрибуты класса.
<body>
<div class="MyClass"> hello lyshark </div>
<div class="MyClass"> hello lyshark </div>
<div class="lyshark"> hello lyshark </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".MyClass").css("background","green"); //Находим класс атрибутов через .MyClass и изменяем его
</script>
</body>Селектор подстановочных знаков: Используя$("body*")идентификационный префикс,Сопоставить все на странице Началоdivтеги,и установите его на зеленый.
<body>
<div class="MyClass"> hello lyshark </div>
<div class="MyClass"> hello lyshark </div>
<h1 class="lyshark"> hello lyshark </h1>
<div class="lyshark"> hello lyshark </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("div*").css("background","green"); //Изменяем атрибуты всех тегов div
</script>
</body>Селектор комбинации: Использование комбинированного селектора может расширить диапазон выбора селектора, а несколько разных селекторов можно разделить запятыми.
<body>
<h1 class="MyClass"> hello lyshark </h1>
<div class="MyClass">
<div id="MyID1">hello MyID1 </div>
<div id="MyID2">hello MyID2 </div>
</div>
<div id="lyshark"> hello lyshark </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".MyClass #MyID1 , h1 , #lyshark").css("background","green");
</script>
</body>Селектор атрибутов: Сопоставьте элементы DOM на основе атрибутов элемента и их значений в качестве условий фильтра, используя квадратные скобки в качестве разделителей.
<body>
<input type="text" name="Text" value="Этикетка1">
<input type="password" name="Text">
<p id="id1"> hello P </p>
<p id="id2" alex="sb"> hello P </p>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("input[type='text']").css("color","red"); // Изменяем ввод, тип — текстовая метка
$("p[id='id1']").text("Измените заголовок id1"); //Измените заголовок, это тег p и id=id1
$("input[name='Text']").val("Измени меня"); //Изменяем атрибут значения в теге
$("p[alex='sb']").css("background","red"); // Вы также можете настроить тег поиска
</script>
</body>Селектор потомков: Этот селектор часто используется для пакетной модификации, сопоставления всех потомков, и изменения будут применены ко всем потомкам выбранного тега DIV.
<body>
<div class="MyClass">
<div class="div1"> hello div div1</div>
<div class="div2">
<div class="divA">hello div A</div>
<div class="divA">hello div B</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".MyClass div").css("background","green"); //Изменить все теги DIV в указанном .MyClass
</script>
</body>Селектор потомков: Селектор потомков часто используется для сужения области запроса и выбора всех соответствующих дочерних элементов под соответствующим родительским элементом.
<body>
<div class="MyClass">
<div class="div1"> hello div div1</div>
<div class="divA">hello div A</div>
<div class="div2">
<div class="divA">hello div A</div>
<div class="divA">hello div B</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".MyClass > .div2").css("background","green"); // Изменяем все дочерние элементы div2 в классе .MyClass.
</script>
</body>Соседний селектор: Выбрать соседние элементы одного уровня после всех совпадающих элементов.,Следующее соответствует всему последующему.outerвсе следующееPЭтикетка,и установите его на красный.
<body>
<div class="outer">
<p class="outer"> hello p1</p>
<p class="outer"> hello p2</p>
<p class="outer"> hello p3</p>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".outer + p").css("color","red"); // Сопоставляем все элементы, расположенные рядом с первым тегом p в классе .outer.
</script>
</body>Селектор родственного уровня: Селектор родственного уровня выбирает все элементы одного уровня после всех совпадающих элементов.,Сопоставьте следующим образом.outerдобрыйвсе следующее Тот же уровеньDIVЭтикетка.
<body>
<div class="outer"> hello div1</div>
<div class="outer"> hello div2</div>
<div class="outer"> hello div3</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".outer~div").css("color","red"); //Устанавливаем красный цвет для всех родственных DIV, принадлежащих внешнему классу.
</script>
</body>Операции с документами JQuery
Text(): Эта функция часто используется для установки или чтения содержимого тега.
<body>
<div class="MyDiv">
<div class="MyName"> hello lyshark </div>
<div class="MyAge"> age:22 </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var temp = $(".MyDiv .MyName").text(); //Находим содержимое указанного элемента тега
document.write("Получите содержимое тега: " + temp);
$(".MyAge").text("hello world"); //Изменяем содержимое указанного элемента тега
</script>
</body>html(): Эта функция часто используется для установки или чтения содержимого тега, но вы можете добавить атрибуты формата при настройке содержимого тега.
<body>
<div class="MyDiv">
<div class="MyName"> hello lyshark </div>
<div class="MyAge"> age:22 </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var temp = $(".MyDiv .MyName").html(); //Находим содержимое указанного элемента тега
document.write("Получите содержимое тега: " + temp);
$(".MyAge").html("<b> hell html </b>"); //Изменяем содержимое указанного элемента тега
</script>
</body>val(): Используется для получения или установки указанного Этикеткаизvalueценить.
<body>
<div class="MyDiv">
<input type="text" name="MyText1" value="Этикетка1">
<input type="text" name="MyText2" value="Этикетка2">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("input[name='MyText1']").val(); //Находим и получаем параметр значения текста
document.write("Получите значение атрибута текстового имени: " + data);
$("input[name='MyText2']").val("lyshark"); //Измените атрибут value текста на lyshark
</script>
</body>append(): добавить содержимое в указанный тег.,соответственно можно вставить в начало().prepend, вставить в конец().appendждать.
<body>
<div class="MyDiv"> hello lyshark ---></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".MyDiv").append("Добавить в конце"); //Вставляем новые данные в конец тега
$(".MyDiv").prepend("Добавить в начале"); //Вставляем новый ввод в начало тега
$(".MyDiv").prepend("<b> hello </b>"); //Вставляем форматированный текст в начало
</script>
</body>appendTo(): Эта функция может вставлять внешние теги в тег уровня блока и динамически добавлять элементы.
<body>
<div class="MyDiv">
<h1 id="Myh1"> hello h1</h1>
</div>
<p> hello p1</p>
<p> hello p2</p>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("p").appendTo("div"); //Добавляем тег p в тег div
$("p").appendTo("div");
$("div").prependTo("h1")
</script>
</body>empty()/remove()： использоватьempty()Можно очистить Этикеткасерединаизсодержание,remove()для полного удаления Этикетка.
<body>
<p class="p1"> hello p1</p>
<p class="p2"> hello p2</p>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".p1").empty();
$(".p2").empty(); //Очистим содержимое тега.
$(".p2").remove(); //Удаляем метку полностью.
</script>
</body>before()/after(): Этого можно добиться, указав Этикеткаизвыше(.before)Вставить контент,или следующий(.after)направление Вставить контент.
<body>
<div class="MyDiv">
<div class="div1"> hello div </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".MyDiv div").before("<h1> before </h1>") //Вставляем содержимое над div
$(".MyDiv div").after("<h1> after </h1>") //Вставляем содержимое под div
</script>
</body>insertBefore()/insertAfter(): в каждомDIVЭтикетка Передний(insertBefore)вставлятьновый Этикетка,или позади(insertAfter)вставлять.
<body>
<div class="MyDiv"> hello div</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("<span> hello span </span>").insertBefore("div"); //Вставляем тег span перед div
$("<h1> hello h1</h1>").insertAfter("div"); //Вставляем h1 после каждого тега div
</script>
</body>replaceWith(): Найти и заменить,все будутатрибуты классадаclass=".MyDiv"тегизаменятьжирным шрифтомизhello div.
<body>
<div class="MyDiv"> hello div1 </div>
<div class="MyDiv"> hello div2 </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".MyDiv").replaceWith("<b> hello div </b>"); //Заменяем все теги div жирным шрифтом hello div
</script>
</body>clone: Клонируйте и добавьте тег DIV на основную страницу.
<body>
<div class="MyDiv"> hello div1 </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("body").append($("div").clone()); //Клонируем и добавляем в тело.
$("body").append($("div").clone());
</script>
</body>Манипулирование свойствами JQuery
attr(): Он может получать и устанавливать атрибутивную информацию указанных тегов.
<body>
<div class="MyDiv">
<input type="text" name="MyText1" value="Этикетка1">
<input type="text" name="MyText2" value="Этикетка2">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var names = $("input[name='MyText2']").attr("name"); //Получаем содержимое поля имени тега MyText2
var types = $("input[type='text']").attr("type"); //Получаем содержимое поля типа тега Type
document.write("Содержимое поля имени тега: " + names + "<br>");
document.write("Содержимое поля типа тега: " + types + "<br>");
$("input[name='MyText2']").attr("name","lyshark"); //Изменяем поле имени тега MyText2 на lyshark
</script>
</body>removeAttr(): Найдите указанное поле и настройте удаление связанных полей.
<body>
<input type="text" name="MyText" value="Этикетка1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("input[name='MyText']").attr("value"); //Находим содержимое поля значения
document.write("Текущее значение: " + data);
$("input[name='MyText']").removeAttr("value"); //Удаляем содержимое поля значения
</script>
</body>prop(): Установите свойства метки, часто используемые для установки переключателей и флажков.
<body>
<input type="checkbox" name="check">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("input[name='check']").prop("checked"); //Получаем статус флажка по умолчанию
document.write("Состояние поля выбора по умолчанию:" + data)
$("input[name='check']").prop("checked",true); //Установим флажок в выбранное состояние
$("input[name='check']").prop("disabled",true); //Устанавливаем флажок в отключенное состояние
</script>
</body>removeprop： Удалить набор свойств, заданный реквизитом (не понимаю)
<body>
<input type="checkbox" name="check">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("input[name='check']").prop("disabled",true);
$("input[name='check']").removeProp("");
</script>
</body>addClass(): Динамическое добавление свойства CSS к некоторым тегам.
<head>
<style type="text/css">
.mode{
background-color: #17a2b8;
}
</style>
</head>
<body>
<div class="MyClass"> hello lyshark </div>
<div class="MyClass"> hello lyshark </div>
<script type="text/javascript">
$(".MyClass").addClass("mode"); //Добавляем атрибут режима ко всем тегам MyClass.
</script>
</body>removeClass: Динамическое удаление свойства CSS из тега.
<head>
<style type="text/css">
.mode{
background-color: #17a2b8;
}
</style>
</head>
<body>
<div class="mode"> hello lyshark </div>
<div class="mode"> hello lyshark </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("div").removeClass("mode"); //Удаляем атрибут режима во всех тегах div.
</script>
</body>toggleClass: Реализовано динамическое переключение стилей классов, чтобы сделать метки невидимыми.
<style type="text/css">
.show{
background-color: #17a2b8;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div class="mode"> hello lyshark </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("div").toggleClass("hidden"); //Переключаемся на скрытые атрибуты
</script>
</body>hasClass(): Эта функция используется для определения текущего стиля. Она возвращает true, если он существует, и false, если он не существует.
<style type="text/css">
.mode{
background: red;
}
</style>
</head>
<body>
<div class="mode"> hello lyshark </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("div").hasClass("mode");
document.write(data)
</script>
</body>Манипулирование стилем JQuery
Измените свойства CSS:
<body>
<div class="MyClass1" style="background-color: rebeccapurple"> hello lyshark</div>
<div class="MyClass2" style="font-size: 30px"> hello lyshark</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".MyClass1").css("background-color","red"); // Изменяем свойства фона MyClass1
$(".MyClass2").css("font-size","10px"); //Изменяем размер шрифта MyClass2
</script>
</body>Добавьте свойства CSS:
<body>
<div class="MyClass1"> hello lyshark</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".MyClass1").css({"background-color":"red","font-size":"20px"});
</script>
</body>фильтр фильтр
first()/last(): first()Отфильтровать всеliЭтикеткасередина Нет.один Этикетка,last()Отфильтровать все Этикеткасерединаиз最后один Этикетка.
<body>
<div class="MyClass">
<ul>
<li>первая страница</li>
<li>Хозяин</li>
<li>система</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("li:first").text(); //Находим содержимое первого тега
document.write("Содержимое первого тега:" + data + "<br>");
var data = $("li:last").text(); //Находим содержимое последнего тега
document.write("Содержимое последнего тега:" + data + "<br>");
$("li:last").remove(); //Удалим последний тег
$("li:last").append("<li>добавить в</li>"); //Добавляем новую метку
</script>
</body>even()/odd(): even()Отфильтровать всеliЭтикеткасередина偶数Этикетка,odd()Отфильтровать всеliЭтикеткасередина基数Этикетка.
<body>
<div class="MyClass">
<ul>
<li>первая страница</li>
<li>Хозяин</li>
<li>система</li>
<li>меню</li>
<li>Создавать проблемы</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $(".MyClass ul li:even").text();
document.write("Базовая метка: " + data + "<br>");
var count = $(".MyClass ul li:even");
document.write("Количество базовых тегов: " + count.length + "<br>");
var data = $(".MyClass ul li:odd").text();
document.write("Теги с четными номерами: " + data + "<br>");
var count = $(".MyClass ul li:odd");
document.write("Четное количество тегов: " + count.length);
</script>
</body>eq(): Отфильтруйте тег с индексом 2 среди всех тегов li.
<body>
<div class="MyClass">
<ul>
<li>первая страница</li>
<li>Хозяин</li>
<li>система</li>
<li>меню</li>
<li>Создавать проблемы</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("li:eq(2)").text(); //Среди всех тегов li тег с индексом 2
document.write("Содержимое тега с индексом 2: " + data + "<br>");
var data = $("li:eq(0)").text(); //Среди всех тегов li тег с индексом 0
document.write("Содержимое тега с индексом 0: " + data + "<br>");
var data = $(".MyClass ul li").eq(4); //Другой способ записи, результат тот же.
document.write("Содержимое тега с индексом 4: " + data.text() + "<br>");
</script>
</body>gt(): Среди всех тегов li тег с индексом больше 2
<body>
<div class="MyClass">
<ul>
<li>первая страница</li>
<li>Хозяин</li>
<li>система</li>
<li>меню</li>
<li>Создавать проблемы</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("li:gt(2)").text(); //Среди всех тегов li есть теги с индексом больше 2
document.write("Содержимое тегов с индексом больше 2: " + data + "<br>");
</script>
</body>lt(): Среди всех тегов li есть теги с индексом менее 3.
<body>
<div class="MyClass">
<ul>
<li>первая страница</li>
<li>Хозяин</li>
<li>система</li>
<li>меню</li>
<li>Создавать проблемы</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("li:lt(3)").text(); //Среди всех тегов li есть теги с индексом меньше 3
document.write("Содержимое тегов с индексом меньше 3: " + data + "<br>");
</script>
</body>hasclass(): Проверьте, содержит ли li определенный класс, если да, верните true
<body>
<div class="MyClass">
<ul class="lyshark">
<li>первая страница</li>
<li>Хозяин</li>
<li>система</li>
<li>меню</li>
<li>Создавать проблемы</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $(".MyClass ul").hasClass("lyshark");
document.write(data);
</script>
</body>Найти фильтр
children(): Уточнить Этикеткаиз Все дети Этикетка,В названии класса указано следующее:"MyForm"в коробке,Найти все субтеги div,и установите его на зеленый.
<body>
<form class="MyForm">
<div class="Mydiv"> hello lyshark </div>
<div class="Mydiv"> hello lyshark </div>
<p> hello lyshark </p>
</form>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".MyForm").children(".Mydiv").css("color","green");
</script>
</body>parent(): Получить все родительские теги указанного тега Следующий код находит родительские теги всех P-тегов и присваивает им красный цвет.
<body>
<div class="Mydiv"> hello lyshark
<p> hello p </p>
<p> hello p </p>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("p").parent().css("color","red");
</script>
</body>next(): Чтобы найти следующий тег указанного тега, следующий код находит следующий элемент div на основе первого элемента Mydiv1.
<body>
<div class="Mydiv1">
<p> hello p </p>
</div>
<div class="Mydiv2">
<p> hello p </p>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("div").next().css("background","red");
$(".Mydiv1").next().css("background","red");
</script>
</body>prev(): Чтобы найти предыдущий тег указанного тега, следующий код находит предыдущий элемент div на основе второго условия Mydiv2.
<body>
<div class="Mydiv1">
<p> hello p </p>
</div>
<div class="Mydiv2">
<p> hello p </p>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".Mydiv2").prev().css("background","red");
</script>
</body>siblings(): Найти все родственные теги тега, найти все родственные теги.
<body>
<div class="Mydiv1">
<div class="Min">hello div</div>
</div>
<div class="Mydiv2">
<div class="Min">hello div</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".Mydiv1").siblings().css("background","red");
</script>
</body>find(): Найдите теги текста и пароля в теге формы и установите для них зеленый цвет.
<body>
<form class="forms" method="post">
<input type="text" value="имя пользователя">
<input type="password" value="пароль">
</form>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("form").find(":text,:password").css({"color":"red","background":"green"})
</script>
</body>Обработка событий JQuery
Зарегистрируйтесь на одно мероприятие: Метод one() является особым случаем метода связывания(). Событие, связанное с ним, станет недействительным после однократного выполнения ответа.
<body>
<p id="MyP"> </p>
<input type="button" id="MyID" value="Добавить контент" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("#MyID").one("click",function(){
$("p").append("hello lyshark"); //Добавляем содержимое в тег P
});
</script>
</body>Зарегистрируйтесь на события цикла: bind() служит унифицированным интерфейсом для привязки обработчиков событий к каждому соответствующему элементу.
<body>
<input type="button" id="MyID1" value="Нет привязки параметров" />
<input type="button" id="MyID2" value="привязка с параметрами" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("#MyID1").bind("click",function(){
alert("Привязать событие без параметров...")
});
$("#MyID2").bind("click",{x:"Параметр 1", y:"Параметр 2"},function(event){
$(this).text(event.data.x + event.data.y);
});
</script>
</body>Привязывающее событие:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#MyButton").click(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>это абзац</p>
<button type="button" id="MyButton" class="btn btn-primary">Нажмите меня, чтобы скрытьpЭтикетка</button>
</body>
</html>Связать несколько событий:
<body>
<input type="button" id="MyID1" значение="Кнопка 1" />
<input type="button" id="MyID2" значение = «Кнопка 2» />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("#MyID1,#MyID2").click(function(){
var currentId = $(this).attr("id"); //Получаем его идентификатор
if(currentId == "MyID1"){ //Указываем, что нажата кнопка 1
alert("Вы нажали кнопку 1");
}else if(currentId == "MyID2"){ //Указываем, что нажата кнопка 2
alert("Вы нажали кнопку 2");
}
});
</script>
</body>Отправка данных формы:
<body>
<div class="MyDIV">
Имя: <input type="text" id="input1" />
пол: <input type="text" id="input2" />
возраст: <input type="text" id="input3" />
<input type="button" id="button1">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("#button1").click(function(){
var name = $(".MyDIV #input1").val(); //Получаем значение элемента
var sex = $(".MyDIV #input2").val();
var age = $(".MyDIV #input3").val();
alert("Имя: " + name + "пол: " + sex + "возраст: " + age);
});
</script>
</body>функция обратного вызова:
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("p").hide(1000,call_back());
})
});
function call_back() {
alert("Использование функции возврата...")
}
</script>
</head>
<body>
<button>скрывать</button>
<p>hello lyshark</p>
</body>Пример разработки JQuery
Два способа реализации клонирования тегов:
<body>
<div>
<p>
<a onclick="Add(this)">+</a>
<input type="text"/>
</p>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
function Add(ths) {
var p = $(ths).parent().clone();
p.find('a').text('-');
p.find('a').attr('onclick','Remove(this)');
$(ths).parent().parent().append(p);
}
function Remove(ths) {
$(ths).parent().remove();
}
</script>
</body><head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
function add(self){
// Примечание: если var $clone_obj=$(".outer .item").clone(); увеличится на два, и два станут четырьмя.
var $clone_obj=$(self).parent().clone();
$clone_obj.children(":button").val("-").attr("onclick","removed(this)");
$(self).parent().parent().append($clone_obj);
}
function removed(self){
$(self).parent().remove()
}
</script>
<body>
<div class="outer">
<div class="item">
<input type="button" value="+" onclick="add(this);">
<input type="text">
</div>
</div>
</body>Чтобы запомнить пароли:
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var strName = localStorage.getItem('keyName');
var strPass = localStorage.getItem('keyPass');
if(strName){
$('#user').val(strName);
}if(strPass){
$('#pass').val(strPass);
}
if(strName!=null && strPass!=null)
$('#remember').attr("checked",true);
});
function login_click(){
var strName = $('#user').val();
var strPass = $('#pass').val();
if($('#remember').is(':checked')){
localStorage.setItem('keyName',strName);
localStorage.setItem('keyPass',strPass);
}else{
localStorage.removeItem('keyName',strName);
localStorage.removeItem('keyPass');
}
window.location.reload();
}
</script>
<body>
<form action="/" method="post" onsubmit="return login_click();">
счет: <input type="text" id="user" заполнитель="имя пользователя" name="username" /><br><br>
пароль: <input type="password" id="pass" заполнитель="пароль" name="password" /><br><br>
помнитьпароль: <input type="checkbox" id="remember">
<input type="submit" value="Вход пользователя"/>
</form>
</body>Выбрать все, выбрать ничего и отменить выбор:
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<script type="text/javascript">
function CheckAll(){
$('tbody input[type="checkbox"]').prop('checked',true);
}
function CancleAll(){
$('tbody input[type="checkbox"]').prop('checked',false);
}
function ReverseAll() {
$('tbody input[type="checkbox"]').each(function () {
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
});
}
</script>
<body>
<table id="tab" border="1" cellspacing="0">
<thead>
<tr>
<th>выбирать</th><th>пользовательID</th><th>имя пользователясказать</th><th>пользователь Почта</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox"></td>
<td name="uid"> 1001</td>
<td name="user"> lyshark</td>
<td name="email"> lyshark@123.com</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td name="uid"> 1002</td>
<td name="user"> admin</td>
<td name="email"> admin@123.com</td>
</tr>
</tbody>
</table>
<input type="button" id="but1" значение="выбрать все" onclick="CheckAll()" />
<input type="button" id="but1" value="Выбрать ничего" onclick="CancleAll()" />
<input type="button" id="but1" value="Обратный выбор" onclick="ReverseAll()" />
</body>Извлечь указанные поля из выбранной таблицы: Выберите форму поля для чтения данных в таблице, выбирая разные таблицы.
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("#but1").click(function(){
var obj = $("#tab"); // Найдите таблицу
// Найдите в таблице данные, типом которых является флажок и атрибут которого выбран при вводе.
var check = $("table input[type=checkbox]:checked");
check.each(function(){ // Узлы траверса
var row = $(this).parent("td").parent("tr"); // Получить выбранные строки
var id = row.find("[name='uid']").html(); // Получить атрибуты первой строки
var name = row.find("[name='user']").html();
alert("Идентификатор выбранной строки: " + id + "имя: " + name)
});
});
});
</script>
<body>
<table id="tab" border="1" cellspacing="0">
<thead>
<tr>
<th>выбирать</th><th>пользовательID</th><th>имя пользователясказать</th><th>пользователь Почта</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox"></td>
<td name="uid"> 1001</td>
<td name="user"> lyshark</td>
<td name="email"> lyshark@123.com</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td name="uid"> 1002</td>
<td name="user"> admin</td>
<td name="email"> admin@123.com</td>
</tr>
</tbody>
</table>
<input type="button" id="but1" значение = «выбрать» onclick="check()" />
</body>Извлечение номеров строк таблицы (1): Извлеките данные в указанную таблицу, указанный номер строки и метку с помощью Jquery.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function() {
$("#table tbody>tr").click(function() {
var trSeq = $(this).parent().find("tr").index($(this)[0]); // Получить номер строки
var text = $(this).find("td:eq(0)").text(); // Вы можете удалить содержимое текущего тега td.
var input_val = $("#table tbody>tr").eq(trSeq).find("input[name='number']").val();
console.log(text)
alert("Текущий номер строки: " + (trSeq + 1) + ", " + «Значение, имя которого — число: " + input_val);
});
});
</script>
<div>
<table id="table" border="1" cellspacing="0">
<thead>
<tr>
<th>серийный номер</th>
<th>Имя</th>
<th>пол</th>
<th>временное проживание</th>
</tr>
</thead>
<tbody>
<tr>
<td>hello</td>
<td>сетка</td>
<td>мужской</td>
<td>Ханчжоу</td>
</tr>
<tr>
<td><input type="text" name="number" value="333456"></td>
<td>король2</td>
<td>мужской</td>
<td>Ханчжоу</td>
</tr>
</tbody>
</table>
</div>
Извлечение номеров строк таблицы: Извлеките данные в указанную таблицу, указанный номер строки и метку с помощью Jquery.
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script type="text/javascript">
$(function(){
$("#tab").on("click", ":button", function(event){
var id = $(this).closest("tr").find("td").eq(0).text();
var name = $(this).closest("tr").find("td").eq(1).text();
alert("ID:" + id + "Name:" + name);
});
});
</script>
<table border="1" id="tab">
<thead>
<tr><td>серийный номер</td><td>Имя</td><td>действовать</td></tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>lyshark</td>
<td><input type="button" значение = «удалить» /></td>
</tr>
<tr>
<td>2</td>
<td>admin</td>
<td><input type="button" значение = «удалить» /></td>
</tr>
</tbody>
</table>
</body>
</html>Извлечение номеров строк таблицы (2): Извлеките данные в указанную таблицу, указанный номер строки и метку с помощью Jquery.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function() {
$("#table tbody>tr").click(function() {
var trSeq = $(this).parent().find("tr").index($(this)[0]); // Получить номер строки
var text = $(this).find("td:eq(0)").text(); // Вы можете удалить содержимое текущего тега td.
var input_val = $("#table tbody>tr").eq(trSeq).find("input[name='number']").val();
console.log(text)
alert("Текущий номер строки: " + (trSeq + 1) + ", " + «Значение, имя которого — число: " + input_val);
});
});
</script>
<div>
<table id="table" border="1" cellspacing="0">
<thead>
<tr>
<th>серийный номер</th>
<th>Имя</th>
<th>пол</th>
<th>временное проживание</th>
</tr>
</thead>
<tbody>
<tr>
<td>hello</td>
<td>сетка</td>
<td>мужской</td>
<td>Ханчжоу</td>
</tr>
<tr>
<td><input type="text" name="number" value="333456"></td>
<td>король2</td>
<td>мужской</td>
<td>Ханчжоу</td>
</tr>
</tbody>
</table>
</div>Как вернуться наверх:
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
window.onscroll=function(){
var current=$(window).scrollTop();
console.log(current)
if (current>100)
{
$(".returnTop").removeClass("hide")
}
else {
$(".returnTop").addClass("hide")
}
}
function returnTop(){
$(window).scrollTop(0)
}
</script>
<style>
.returnTop{
height: 60px;
width: 100px;
background-color: darkgray;
position: fixed;
right: 0;
bottom: 0;
color: greenyellow;
line-height: 60px;
text-align: center;
}
.hide{
display: none;
}
</style>
</head>
<body>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>Пожалуйста вручнуюдобавить в Более Этикетка Приходитьтест.</p>
<div class="returnTop hide" onclick="returnTop();">Вернуться наверх</div>
</body>
</html>Реализация меню вторичной связи (вертикальное):
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<style>
.menu{
height: 500px;
width: 10%;
background-color: gainsboro;
float: left;
}
.title{
background-color: #425a66;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title">менюодин</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title">менюдва</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title">менютри</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
</div>
</div>
<script>
$(".item .title").click(function () {
$(this).next().removeClass("hide")
$(this).parent().siblings().children(".con").addClass("hide");
})
</script>
</body>Реализация меню связей (горизонтальное):
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
function tab(self){
var index=$(self).attr("item");
$("#"+index).removeClass("hide").siblings().addClass("hide");
$(self).addClass("current").siblings().removeClass("current");
}
</script>
<style>
.tab_outer{
margin: 0px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
line-height: 40px;
}
.menu li{
display: inline-block;
}
.menu a{
border-right: 1px solid red;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: darkgray;
color: yellow;
border-top: solid 2px rebeccapurple;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li item="c1" class="current" onclick="tab(this);">менюодин</li>
<li item="c2" onclick="tab(this);">менюдва</li>
<li item="c3" onclick="tab(this);">менютри</li>
</ul>
<div class="content">
<div id="c1">Контент один</div>
<div id="c2" class="hide">Содержание второе</div>
<div id="c3" class="hide">Контент третий</div>
</div>
</div>
</body>Всплывающее модальное диалоговое окно:
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
function action1(self){
$(self).parent().siblings().removeClass("hide");
}
function action2(self){
//$(self).parent().parent().children(".models,.shade").addClass("hide")
$(self).parent().addClass("hide").prev().addClass("hide");
}
</script>
<style>
.back{
background-color: rebeccapurple;
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: coral;
opacity: 0.4;
}
.hide{
display: none;
}
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
width: 200px;
background-color: gold;
}
</style>
</head>
<body>
<div class="back">
<input id="ID1" type="button" значение = «всплывающее окно» onclick="action1(this)">
</div>
<div class="shade hide"></div>
<div class="models hide">
<input type="text">
<input id="ID2" type="button" значение="Отмена" onclick="action2(this)">
</div>
</body>Реализация перетаскивания панели:
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
$(function(){
// Автоматически выполняется после загрузки страницы
$('#title').mouseover(function(){
$(this).css('cursor','move');
}).mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
// Оригинальные горизонтальные и вертикальные координаты мыши.
var ord_x = _event.clientX;
var ord_y = _event.clientY;
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
$(this).bind('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;
var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y);
$(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px');
})
}).mouseup(function(){
$(this).unbind('mousemove');
});
})
</script>
<body>
<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;color: white;">заголовок</div>
<div style="height: 300px;">Основное содержание</div>
</div>
</body>Показать кнопки скрытия и переключения:
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
$(document).ready(function() {
$("#hide").click(function () {
$("p").hide(1000);
});
$("#show").click(function () {
$("p").show(1000);
});
//Используется для переключения выбранных элементов hide() и show() метод.
$("#toggle").click(function () {
$("p").toggle();
});
})
</script>
</head>
<body>
<p>hello</p>
<button id="hide">скрывать</button>
<button id="show">показывать</button>
<button id="toggle">выключатель</button>
</body>Теги страницы скрыты:
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<body>
<button>hide</button>
<p>helloworld helloworld helloworld</p>
<script>
$("button").click(function(){
$("p").hide(1000,function(){
alert($(this).html())
})
})
</script>
</body>Реализация картины-лупы:
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
$(function(){
$(".small_box").mouseover(function(){
$(".float").css("display","block");
$(".big_box").css("display","block")
});
$(".small_box").mouseout(function(){
$(".float").css("display","none");
$(".big_box").css("display","none")
});
$(".small_box").mousemove(function(e){
var _event=e || window.event;
var float_width=$(".float").width();
var float_height=$(".float").height();
console.log(float_height,float_width);
var float_height_half=float_height/2;
var float_width_half=float_width/2;
console.log(float_height_half,float_width_half);
var small_box_width=$(".small_box").height();
var small_box_height=$(".small_box").width();
// Расстояние между точкой мыши и левой границей должно составлять половину ширины плавающего элемента.,То же, что высота
var mouse_left=_event.clientX-float_width_half;
var mouse_top=_event.clientY-float_height_half;
if(mouse_left<0){
mouse_left=0
}else if (mouse_left>small_box_width-float_width){
mouse_left=small_box_width-float_width
}
if(mouse_top<0){
mouse_top=0
}else if (mouse_top>small_box_height-float_height){
mouse_top=small_box_height-float_height
}
$(".float").css("left",mouse_left+"px");
$(".float").css("top",mouse_top+"px")
var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);
var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);
console.log(percentX,percentY)
$(".big_box img").css("left", -percentX*mouse_left+"px")
$(".big_box img").css("top", -percentY*mouse_top+"px")
})
})
</script>
<style>
*{
margin: 0;
padding:0;
}
.outer{
height: 350px;
width: 350px;
border: dashed 5px cornflowerblue;
}
.outer .small_box{
position: relative;
}
.outer .small_box .float{
height: 175px;
width: 175px;
background-color: darkgray;
opacity: 0.4;
fill-opacity: 0.4;
position: absolute;
display: none;
}
.outer .big_box{
height: 400px;
width: 400px;
overflow: hidden;
position:absolute;
left: 360px;
top: 0px;
z-index: 1;
border: 5px solid rebeccapurple;
display: none;
}
.outer .big_box img{
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div class="outer">
<div class="small_box">
<div class="float"></div>
<img src="small.jpg">
</div>
<div class="big_box">
<img src="big.jpg">
</div>
</div>
</body>Различные способы работы с таблицами с помощью JQuery:
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<style type="text/css">
.on {background-color:#ddd}
</style>
</head>
<body style="text-align:center"><div class="m-1"></div>
<h3>jqueryдействоватьtableиз各种направление法</h3><div class="m-2"></div>
<table id="aijquery" border="1" cellpadding="7" cellspacing="0" align="center">
<tr><td>тест1.1</td><td>тест1.2</td><td>тест1.3</td><td>тест1.4</td><td>тест1.5</td><td>тест1.6</td></tr>
<tr><td>тест2.1</td><td>тест2.2</td><td>тест2.3</td><td>тест2.4</td><td>тест2.5</td><td>тест2.6</td></tr>
<tr><td>тест3.1</td><td>тест3.2</td><td>тест3.3</td><td>тест3.4</td><td>тест3.5</td><td>тест3.6</td></tr>
<tr><td>тест4.1</td><td>тест4.2</td><td>тест4.3</td><td>тест4.4</td><td>тест4.5</td><td>тест4.6</td></tr>
<tr><td>тест5.1</td><td>тест5.2</td><td>тест5.3</td><td>тест5.4</td><td>тест5.5</td><td>тест5.6</td></tr>
</table><div class="m-2"></div>
<button id="huanse">Изменение цвета при наведении курсора мыши</button> <button id="jiou">Разные цвета для нечетных и четных рядов</button> <button id="addtr">вставлятьодин ХОРОШО</button> <button id="addtd">вставлятьодин列</button><div class="m-1"></div>
<button id="hidetr">скрывать/показывать Нет.три ХОРОШО</button>
<button id="hidetd">скрывать/показывать Нет.три列</button>
<div class="m-1"></div>
<button id="deltr">удалитьчетвертая строка</button>
<button id="deltd">удалитьпятая колонна</button>
<button id="deltrt">удалить Все строки, кроме второй строки</button>
<button id="deltrd">удалить Нет.2приезжать Нет.4ХОРОШО</button>
<div class="m-1"></div>
<button id="deltrs">Только оставайся前три ХОРОШО</button>
<button id="deltrf">Только оставайся Нет.дваприезжатьчетвертая строка</button>
<div class="m-1"></div>
<button id="readtd">читать Нет.три ХОРОШОНет.четыре столбцаизценить</button>
<button id="readtdt">читать Нет.три列всеценить</button>
<button id="readtr">читать Нет.три ХОРОШОвсеценить</button>
<script language="javascript">
//Мышь поменяла цвет
$("#huanse").on("click",function(){
$("#aijquery tr").hover(function(){$(this).children("td").addClass("on");},function(){$(this).children("td").removeClass("on")});
});
//Нечетные и четные строки имеют разные цвета
$("#jiou").on("click",function(){
//четные строки Если имеется нечетное количество строк нечетное изменилось на четное
$("#aijquery tr:odd").find("td").css("background-color","#e7ffff");
});
//Вставляем строку
$("#addtr").on("click",function(){
//Добавляем строку в конец таблицы
//$("#aijquery").append('<tr><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td></tr>');
//Добавляем строку в начало таблицы
//$("#aijquery").prepend('<tr><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td></tr>');
//Вставляем строку после второй строки таблицы
$("#aijquery tr").eq(1).after('<tr><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td></tr>');
});
//Вставляем столбец
$("#addtd").on("click",function(){
//Добавляем столбец в конец таблицы
//$("#aijquery tr").append('<td>newTD</td>');
//Добавляем столбец в начало таблицы
//$("#aijquery tr").prepend('<td>newTD</td>');
//Добавляем столбец после второго столбца таблицы
$("#aijquery tr td:nth-child(2)").after('<td>newTD</td>');
});
//Скрываем/показываем третью строку
$("#hidetr").on("click",function(){
$("#aijquery tr").eq(2).toggle();
});
//Скрыть/показать третий столбец
$("#hidetd").on("click",function(){
//Первый метод
//$("#aijquery tr td:nth-child(3)").toggle();
//Второй метод
$("#aijquery tr").each(function(){
//$(this).find("td").eq(2).toggle();
$("td",$(this)).eq(2).toggle();
});
});
//Удаляем четвертую строку
$("#deltr").on("click",function(){
$("#aijquery tr").eq(3).remove();
});
//Удалим пятый столбец
$("#deltd").on("click",function(){
$("#aijquery tr td:nth-child(5)").remove();
});
//Удалим все строки, кроме второй строки
$("#deltrt").on("click",function(){
$("#aijquery tr:not(:eq(1))").remove();
});
//Сохраняем только первые три строки
$("#deltrs").on("click",function(){
$("#aijquery tr:gt(2)").remove();
});
//Удаляем строки со 2 по 4
$("#deltrd").on("click",function(){
$("#aijquery tr").slice(1,4).remove();
});
//Оставляем только вторую-четвертую строки
$("#deltrf").on("click",function(){
$("#aijquery tr").not($("#aijquery tr").slice(1,4)).remove();
});
//Читаем значение третьей строки и четвертого столбца
$("#readtd").on("click",function(){
var v=$("#aijquery tr:eq(2) td:eq(3)").html();
alert(v);
});
//Читаем все значения в третьем столбце
$("#readtdt").on("click",function(){
var arr=[];
$("#aijquery tr").each(function(){
arr.push($(this).find("td").eq(2).html());
});
alert(arr.join(","));
});
//Читаем все значения в третьей строке
$("#readtr").on("click",function(){
var arr=[];
$("#aijquery tr:eq(2) td").each(function(){
arr.push($(this).html());
});
alert(arr.join(","));
});
</script>
</body>
</html>
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
Идеальная интеграция Cursor и DeepSeek API
DeepSeek V3 снижает затраты на обучение больших моделей
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
Cloud Native｜Практика: установка Dashbaord для K8s, графика неплохая
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
Центр конфигурации————Накос
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
[Зона легкого облачного игрового сервера] Управление игровыми архивами
