<!-- Представляем js-файл библиотеки jQuery -->
<script src="//code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>

<!-- Написание JS-кода и использование jQuery -->
<script type="text/javascript">
// Следующий код изменит значение элемента с идентификатором имени пользователя на «Привет. CodePlayer!"。
jQuery("#username").val("Hello CodePlayer!");
</script>

// $ — это псевдоним jQuery, поскольку JS поддерживает использование $ в качестве имени переменной, а $ короче и проще в написании.
$("#username").val("Hello CodePlayer!");

$(document).ready(function(){
  
  
    // Здесь мы пишем код, который хотим выполнить, когда DOM будет готов.
});

// $( function ) да $(document).ready( function ) аббревиатура для
$( function(){
  
  
    // Здесь мы пишем код, который хотим выполнить, когда DOM будет готов.
} );

$("#uid"); // Выберите один элемент с атрибутом id «uid».
$("p"); // Выбрать все p элементов
$(".test"); // Выберите все элементы с именем класса CSS «test».
$("[name=books]"); // Выбрать всеnameсвойстводля"books"изэлемент

// Несколько селекторов, разделенных пробелами и указанными символами, будут соответствовать элементу, представленному последним селектором, который имеет указанную связь с первым.
$("#uid span"); // Выбирает все дочерние элементы диапазона элемента с идентификатором «uid».
$("p > span"); // Выбирает все элементы диапазона, которые являются потомками элемента p.
$("div + p"); // Выберите родственный элемент p, следующий сразу за элементом div.
$("div p span"); // Выбирает всех потомков элемента div и потомков элемента span.


// Множественные селекторы без пробелов будут соответствовать элементам, которые удовлетворяют обоим условиям селектора.
$("p#uid"); // Выберите элемент p с атрибутом id «uid».
$("div.foo"); // Выберите все элементы div с именем класса CSS «foo».
$(".foo.bar"); // Выбирает все элементы с именами классов CSS «foo» и «bar».
$("input[name=books][id]"); // Выбрать всеnameсвойстводля"books"и иметьidсвойствоизэлемент

// Уникальный селектор jQuery, конечно же, можно использовать в любой комбинации с другими селекторами.
$(":checkbox"); // Выбрать все элементы флажка
$(":text"); // Выбрать все элементы ввода типа текста
$(":password"); // Выберите все элементы ввода типа пароля.
$(":checked"); // Выбрать все выбранные переключатели, флажки, элементы опций
$(":selected"); // Выбрать все выбранные элементы опции
$(":input"); // Выбрать все элементы управления формой (все элементы ввода, текстовое поле, выбор, кнопки)

var uid = document.getElementById("uid");
var ps = document.getElementsByTagName("p");
var unames = document.getElementsByName("uname");
var domsArray = [ document.getElementById("uid1"), document.getElementById("uid2") ];
// Преобразуйте указанные выше элементы DOM непосредственно в объекты jQuery.
$( uid ); 
$( ps ); 
$( unames );
$( domsArray );
$( ); // Никакие параметры не передаются, и возвращается пустой объект jQuery (не соответствует ни одному элементу).

// Вы также можете Использование Методы объекта jQuery работают с этими временными элементами DOM или вставляют их в документ в указанном месте.
$('<span></span>'); // Содержит временный элемент диапазона.
$('<span/>'); // Содержит временный элемент диапазона.,и上一行代码из作用такой же
$('<div id="mydiv"><p class="foo bar">Hello CodePlayer</p></div>'); // Содержит временный элемент div со встроенным в него элементом дочернего узла p.

// Все следующие методы возвращают новый объект jQuery, содержащий отфильтрованные элементы.
$("ul li").eq(1); // Селектул liсередина匹配из索引顺序для1изэлемент(То естьда Нет.2индивидуальныйliэлемент)
$("ul li").first(); // Селектул Первый совпавший элемент в li
$("ul li").last(); // Селектул Последний совпавший элемент в li
$("ul li").slice(1, 4); // Выберите № 2 ~ 4 элемента
$("ul li").filter(":even"); // Селектул Все элементы в li в нечетном порядке
$("div").find("p"); // Выберите все элементы-потомки p всех элементов div.
$("div").children(); // Выберите все элементы-потомки всех элементов div.
$("div").children("p"); // Выберите все элементы-потомки p всех элементов div.
$("span").parent(); // Выберите родительский элемент для всех элементов диапазона.
$("span").parent(".foo.bar"); // Выбирает родительские элементы всех элементов диапазона с именами классов CSS «foo» и «bar».
$("#uid").prev(); // Выберите одноуровневые элементы непосредственно перед элементом с идентификатором uid.
$("#uid").next(); // Выберите одноуровневые элементы, следующие сразу за элементом с идентификатором uid.

// Возвращает объект jQuery, соответствующий элементу с идентификатором «имя пользователя».
var  uid = $("#username");
// Если параметр value не передан, возвращается значение атрибута value первого соответствующего элемента.
var value = uid.val();
// Передается параметр value, и для всех соответствующих элементов устанавливается значение «CodePlayer».
uid.val("CodePlayer");

// Возвращает объекты jQuery, соответствующие всем элементам div, содержащим имя класса CSS «foo».
var div = $("div.foo");
// Если параметр значения не передается, возвращается элемент значения первого соответствующего элемента.
var fontSize = div.css("font-size");
// Передается параметр value, а для стиля шрифта всех соответствующих элементов устанавливается значение «14 пикселей».
div.css("font-size", "14px");

var $lis = $("ul li"); // Соответствует всем элементам-потомкам li элемента ul.
var className = $lis.attr("class"); // Получите только атрибут класса первого соответствующего элемента li.
$lis.attr("class", "codeplayer"); // 将所有匹配изliэлементизclassсвойство设для"codeplayer"

// jQueryизстиль цепного программирования
$("div").find("ul").addClass("menu").children().css("margin", 0).hide();

// нижеда上述代码из分解描述
$("div") // Возвращает объект jQuery, соответствующий всем элементам div.
.find("ul") // Возвращает объект jQuery, соответствующий всем дочерним элементам ul внутри этих элементов div.
.addClass("menu") // Добавляет имя класса CSS «меню» к этим элементам ul и возвращает сам текущий объект.
.children() // Возвращает объект jQuery, соответствующий всем элементам-потомкам в этих элементах ul.
.css("margin", 0) // Установите стиль CSS «margin:» для этих элементов-потомков. 0" и возвращает сам текущий объект
.hide(); // Скройте эти элементы-потомки и верните сам текущий объект.

// 没有标签дляabcизDOM-элемент,$("abc")да一индивидуальный空изjQueryобъект,позвони этоfind()методвернется一индивидуальный新изjQuery空объект
var a = $("abc").find("p");

// 如果Нет存существоватьidдляnotFoundизэлемент,$("#notFound")да一индивидуальный空изjQueryобъект,Получите его атрибут id,вернетсяundefined。
var b = $("#notFound").attr("id");

// 如果Нет存существоватьidдляnotFoundизэлемент,$("#notFound")да一индивидуальный空изjQueryобъект,Получите значение его высоты,вернетсяnull。
var c = $("#notFound").height();

// 如果Нет存существоватьidдляunameизэлемент,$("#uname")да一индивидуальный空изjQueryобъект,Установите его значение,Эта заданная операция будет игнорироваться,и возвращает сам пустой объект
var d = $("#uname").val("xxxxx");

// selector Представляет определенный селектор

$("selector").val(); // Получить значение первого соответствующего элемента (обычно используется для элементов управления формы)
$("selector").val("Hello"); // Установите значение всех соответствующих элементов на «Привет».

$("selector").html(); // Получите значениеinnerHTML первого соответствующего элемента.
$("selector").html("Hello"); // Установите для значения InnerHTML всех соответствующих элементов значение «Привет».

$("selector").text(); // Получите значение innerText первого соответствующего элемента (jQuery был обработан для совместимости)
$("selector").text("Hello"); // Установите для значения InnerText всех соответствующих элементов значение «Привет».

$("selector").attr("class"); // Получите атрибут класса первого соответствующего элемента.
$("selector").attr("class", "code"); // Установите для атрибута класса всех соответствующих элементов значение «код».
$("selector").removeAttr("class"); // Удалите атрибут класса всех соответствующих элементов.

$("selector").prop("checked"); // Получите проверенное значение атрибута первого соответствующего элемента.
$("selector").prop("checked", true); // Установите для атрибута «проверено» всех соответствующих элементов значение true (что означает установку всех соответствующих флажков и переключателей).
$("selector").removeProp("className"); // Удалите атрибут className всех соответствующих элементов.

// Следующий $A представляет текущий объект jQuery,$BМожетдастрока выбора、HTML-строка、DOM-элемент、jQueryобъект

$A.before( $B ); // Вставьте $B перед $A
$A.after( $B ); // Вставьте $B после $A

$A.insertBefore( $B ); // Вставьте $A в позицию перед $B.
$A.insertAfter( $B ); // Вставьте $A после $B

$A.append( $B ); // Добавить $B в конец $A
$A.appendTo( $B ); // Добавить $A в конец $B

$A.prepend( $B ); // Добавить $B в начало $A
$A.prependTo( $B ); // Добавить $A к началу $B

$A.replaceAll( $B ); // Замените $B на $A.
$A.replaceWith( $B ); // Замените $A на $B.

$A.wrap( $B ); // Оберните $B вне $A
$A.unwrap( ); // Удалите только тег родительского элемента $A.
$A.wrapAll( $B ); // Оберните весь $A одним $B снаружи.
$A.wrapInner( $B ); // Оберните $B внутри $A

$A.empty(); // Очистить все содержимое $A
$A.remove(); // Удалите $A и связанные с ним события, дополнительные данные и т. д.
$A.detach(); // Удалите $A, но сохраните связанные события, дополнительные данные и т. д.

$A.clone(); // Клонировать $A

$("selector").css("margin-left"); // Получите значение атрибута поля слева для первого соответствующего элемента.
$("selector").css("marginLeft"); // Та же функция, что и в предыдущей строке кода, css() поддерживает эти два метода записи.

$("selector").css("marginLeft", 15); // Установите левое поле всех совпадающих элементов на 15 пикселей (единица измерения по умолчанию — пиксели).
$("selector").css( {
  
   marginLeft: 15, color: "red", fontSize: "14px"} ); // Установите несколько свойств стиля для всех соответствующих элементов одновременно

$("selector").css( "marginLeft", ""); // Установите пустую строку, чтобы удалить атрибут стиля.

$("selector").show(); // Показывать скрытые элементы без перехода по умолчанию Анимационные эффекты
$("selector").show( 400 ); // Показать скрытые элементы с переходом 400 мс Анимационные эффекты
$("selector").show( "fast" ); // Показать скрытые элементы с переходом 200 мс Анимационные эффекты
$("selector").show( "slow" ); // Показать скрытые элементы с переходом 600 мс Анимационные эффекты

$("selector").hide(); // Скройте отображаемый элемент, его использование такое же, как и в show().
$("selector").toggle(); // Переключение отображения/скрытия элементов (скрыть, если отображается, отобразить, если скрыто), его использование аналогично show()

/* Методы серий слайд* и исчезновение*, приведенные ниже, имеют ту же функцию, что и методы show(), скрыть(), toggle() и другие вышеприведенные методы.* Использование также аналогично,Толькода带有Нет同из Анимационные эффекты
 */

$("selector").slideDown(); // Показать скрытые элементы с помощью скользящего перехода Анимационные эффекты
$("selector").slideUp(); // Скрыть отображаемые элементы с помощью слайдерного перехода Анимационные эффекты
$("selector").slideToggle(); // Переключить отображение/скрытие элементов со скользящим переходом вверх/вниз Анимационные эффекты

$("selector").fadeIn(); // Показывать скрытые элементы с плавным переходом Анимационные эффекты
$("selector").fadeOut(); // Скрыть отображаемые элементы с плавным переходом Анимационные эффекты
$("selector").fadeToggle(); // Скрыть отображаемые элементы с плавным переходом Анимационные эффекты

// Установите стиль CSS «width:» для всех соответствующих элементов. 200px; height: 100px» и выполнить переход от текущего стиля к заданному Анимационные эффекты
// Время выполнения анимации составляет 1000 миллисекунда
$("selector").animate( {
  
   width: "200px", height: "100px" }, 1000 );

function handler( event ){
  
  
    // Код выполнения функции обработки событий
    // Параметр event представляет текущий объект события, стандартизированный с помощью инкапсуляции jQuery.
    // функция内изthis表示触发事件из当前DOM-элемент(НетдаjQueryобъект)


        // Если возвращаемое значение функции ложно, вы можете предотвратить всплывание событий и поведение элемента по умолчанию.
        // Например: поведение перехода по умолчанию для события щелчка тега, поведение отправки формы по умолчанию для события отправки тега формы;
}

// Следующие методы могут привязать обработчики к событиям щелчка всех соответствующих элементов.
$("selector").click( handler );
$("selector").bind( "click", handler );
$("selector").live( "click", handler ); // Этот метод устарел и не рекомендуется.
$(document).delegate( "selector", "click", handler );
$("selector").on( "click", handler );
$("selector").one( "click", handler ); // Используется для привязки одноразовых событий и автоматической отмены привязки после первого триггера.

$("selector").bind( "dblclick", handler );
$("selector").bind( "keyup", handler );
$("selector").bind( "mouseout", handler );

// Методы событий, такие как bind(), поддерживают привязку одной и той же функции-обработчика к нескольким событиям (разделенным пробелами).
$("selector").bind( "mouseenter mouseleve", function(event){
  
  
    if(event.type == "mouseenter"){
  
  
        // Код выполнения события mouseenter
    }else if(event.type == "mouseleve"){
  
  
        // Код выполнения события mouseleve     
    }
} );

// Имена событий могут иметь пространства имен
$("selector").bind( "mouseout.foo", handler );

// Запуск событий щелчка по всем совпадающим элементам
$("selector").trigger("click");

// Запустите событие изменения для всех соответствующих элементов.
$("selector").trigger("change");

// Запускает функцию обработчика события mouseout, привязанного к пространству имен foo, для всех соответствующих элементов.
$("selector").trigger("mouseout.foo");

// В основном используется для отмены прямых методов обработки событий, таких как click(), dblclick() и т. д. Функции обработки, связанные такжеbind(), one() и другими методами
$("selector").unbind("click");
//В основном используется для разблокировки функции обработки, связанной с помощью метода live()
$("selector").die("click");
//В основном используется для разблокировки функции обработки, связанной с помощью метода делегата()
$(document).undelegate("selector", "click");
//В основном используется для разблокировки функции обработки, связанной с помощью метода on()
$("selector").off("click");

/* на самом деле,большую часть времени,это们да Может混用из */

$.ajax({
  
  
    url: "ajax.php?action=add",
    type: "post",
    data: "username=hello&password=123456", // Дополнительные данные запроса, которые также могут быть в объектном формате.
    dataType: "json",
    success: function(data){
  
  
        // этотдаAjax请求成功后执行из回调функция
        // потому чтодляdataTypeдляjson,如果服务器返回издаJSONформатировать данные,jQueryперенесу этодля对应изJSобъект

        // Предположим, что данные { msg: «Запрос Ajax успешен», uid: 2 }
        alert( data.msg );
    }
});

// Отправить запрос Ajax как GET
$.get("ajax.php", {
  
   username: "hello", password: "123456" }, function(data){
  
  
    // этотдаAjax请求成功后执行из回调функция,Сразудавыше$.ajaxсерединаизsuccessПараметры
});

// Отправьте запрос Ajax методом POST.
$.post("ajax.php", {
  
   username: "hello", password: "123456" }, function(data){
  
  
    // этотдаAjax请求成功后执行из回调функция,Сразудавыше$.ajaxсерединаизsuccessПараметры
});

// Удалить пробелы с обоих концов строки
var str1 = $.trim( "  abc d  " ); // "abc d"
var str2 = $.trim( null ); // ""
// Определите, является ли да массивом да
var isArray1 = $.isArray( [] ); // true
var isArray2 = $.isArray( new Array() ); // true
// суждениеданетдафункция
var result1 = $.isFunction( function(){} ); // true
var result2 = $.isFunction( new Function() ); // true
// 检索数组серединаданет存существовать指定值,并返回其Нет.一次出现из索引
var index1 = $.inArray( 2, [ 1, 3, 5, 2, 0 ] ); // 3
var index2 = $.inArray( 3, [ 2 ] ); // -1 (возвращает -1, если он не существует)
// Преобразование строки JSON в соответствующий объект JS
var jsonObj = $.parseJSON( '{ "name": "CodePlayer", "age": 18 }' );
var jsonArray = $.parseJSON( '[ 12, "CodePlayer", true ]' );

// $.each() используется для обхода элементов массива и свойств объекта.
var array = [ 12, "jQuery", true ];
$.each( array, function(i, value){
  
  
    // i Представляет индекс текущего итерируемого элемента и имя атрибута объекта.
    // value Представляет значение атрибута текущего итерируемого элемента или объекта массива.
    // this и  value такой же
    alert( i + " = " + value );

    // если функция возвращает false, прекратит обход
});

// $.map() используется для обхода элементов массива и свойств объекта, а также инкапсуляции возвращаемого значения каждого выполнения функции обхода как возврата массива.
var obj = {
  
   name: "jQuery", age: 20, isAdmin: true };
var resultArray = $.map( obj, function(value, i){
  
   // 注意参数顺序иeach()Нет同
    // value Представляет значение атрибута текущего итерируемого элемента или объекта массива.
    // i Представляет индекс текущего итерируемого элемента и имя атрибута объекта.
    // this Укажите на глобальный объект (окно)

    if( typeof value === "number"){
  
  
        return null; // Если функция возвращает значение nullилиundefined, она не будет добавлена ​​в массив результатов.
    }else{
  
  
        return value;
    }
} );
// resultArray для [ "jQuery", true ]


//$.grep() используется для обхода элементов массива и фильтрации элементов массива на основе возвращаемого значения функции (истина/ложь)
var array2 = [ "Hello", 12, "jQuery", true ];
var resultArray2 = $.grep( array2, function(value, i){
  
   // 注意参数顺序иeach()Нет同
    // value Представляет элемент массива текущей итерации.
    // i Представляет индекс текущего итерируемого элемента.
    // this Укажите на глобальный объект (окно)

    return i % 2 == 0; // 保留返回值Нетдляfalseизэлемент
} );
// resultArray2 для [ "Hello", "jQuery" ];

// Пройдите все p элементы и выполните соответствующую функцию
$("p").each(function(i, element){
  
  
    // i Представляет индекс текущего итерируемого элемента.
    // element Представляет элемент DOM текущей итерации.
    // this === element     
});


// Возвращает массив, содержащий значения всех совпадающих элементов.
$(":checkbox:checked").map(function(i, element){
  
  
    // i Представляет индекс текущего итерируемого элемента.
    // element Представляет элемент DOM текущей итерации.
    // this === element
    return this.value;      
});

var p = $("p"); // Возвращает объект jQuery, содержащий все элементы p.
p[0]; // 1-й элемент р
p[0].id ; // Возврат 1-й элемент ризid
p[1]; // 2-й элемент p
p[2]; // Третий элемент p
p.length; // количество p элементов

var p = $("p"); // Возвращает объект jQuery, содержащий все элементы p.
p.get(0); // 1-й элемент р
p.get(1); // 2-й элемент p
p.get(2); // Третий элемент p
p.get( ); // Без передачи каких-либо параметров все содержащиеся p элементы будут возвращены в виде массива.