<>jquery Detailed explanation of method properties !
<>1.jquery brief introduction
jquery What is it? , What is the function ?
*
jquery Used to simplify js operation DOM element
*
jquery out-of-service DOM Method of ,DOM out-of-service jquery Method of
Usage characteristics of various selectors ：
* Basic selector 5 species ：$(".#*, Space ");
* Relation selector 4 species ：$(“ Space >+~”)
* Basic filter selector 8 species ：$("
:first/:last/:even/:odd/eq(index)/:gt(index)/:lt(index)/:not(selector)")
* Content filter selector 4 species ：$(":contains(text)/:empty/:has(selector)/:parent")
* Visibility filter selector 2 species :$(":hidden/:visible")
* attribute selectors 8 species : ( " = = [ a t t r i b u t e ] , [ a t t r i b u t e = v a l u e ]
, [ a t t r i b u t e ! = v a l u e ] , [ a t t r i b u t e = v a l u e ] , [ a
t t r i b u t e
("==[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute
("==[attribute],[attribute=value],[attribute!=value],[attribute=value],[attribut
e=value],[attribute*=value],[attributeFilter1][attrbuteFilter2]==")
* Child element filter selector (4 species )$(
":nth-child(index/even/odd),:first-child,:last-child,:only-child")
* Form property filter selector (4 species )${":enabled/:disabled/:checked/:selected"}
* Form selector (11 species )$("
:input/:text/:password/:radio/:checkbox/:submit/:image/:reset/:button/:file/:hidden
")
<>2.jquery selector
<>2.1 Basic selector 5 species
// Basic selector 5 species $(".div");// Class selector $("div");// tag chooser $("#box");//id selector $("*");// Wildcard selector
$("div,p,img");// Merge selector
<>2.2 Relation selector 4 species
// Relation selector 4 species $("div p");// Descendant Selectors $("div>p");// Progeny selector $("div+p");// Direct sibling selector $("div~p")
;// Concise brother selector
<>2.3 Basic filter selector 8 species
// Basic filter selector 8 species $(":first");// First element $(":last");// Last element $(":not(selector)");
// hold selector be excluded $(":even");// Pick even rows $(":odd");// Pick odd rows $(":eq(index)");
// Subscript equals index Element of $(":gt(index)");// Subscript greater than index Element of $(":lt(index)");// Subscript less than index Element of
<>2.4 Content filter selector 4 species
// Content filter selector 4 species $(":contains(text)");// Matches the element that contains the given text $(":empty");// Matches all empty elements that do not contain child elements or text
$(":has(selector)");// Match contains the element that the selector matches $(":parent");// Matches elements that contain child elements or text
<>2.5 Visibility filter selector 2 species
// Visibility filter selector 2 species $(":hidden");// Match all invisible elements , or type by hidden element $(":visible");
//p Match all visible elements
<>2.6 Attribute filter selector 8 species
// Attribute filter selector 8 species $("[attribute]");// Match with attribute Attribute element $("[attribute=value]");
// Match attribute value equal to value Element of $("[attribute!=value]");// Matching attribute value is not equal to value Element of $(
"[attribute^=value]");// Matches elements whose attribute values start with certain values $("[attribute$=value]");// Matches the element at the end of some value of the attribute value $
("[attribute*=value]");// Elements that match attribute values to contain certain values $("[attributeFilter1][attrbuteFilter2]")
;// Composite attribute filter selector , Used when multiple conditions need to be met at the same time
<>2.7 Child element filter selector (4 species )
// Child element filter selector (4 species ) $(":nth-child(index/even/odd)")// Select the second element under each parent element index Child element
$(":first-child");// Select the first child element of each parent element $(":last-child");// Select the last child element of each parent element
$(":only-child");// If an element is the only child element in its parent element, the child element , Then it will be matched
<>2.8 Form property filter selector (4 species )
// Form property filter selector (4 species ) $(":enabled");// Select all available elements $(":disabled");// Pick all unavailable elements $(
":checked");// Select all selected elements $(":selected");// Select all selected elements
<>2.9 Form selector (11 species )
// Form selector (11 species ) $(":input");// Select all input/textarrea/select/button element $(":text");
// Select all single line text boxes $(":password");// Check all password boxes $(":radio");// Select all radio boxes $(":checkbox");
// Select all check boxes $(":submit");// Select all submit buttons $(":image");// Select all images button $(":reset");
// Select all Reset buttons $(":button");// Select all buttons $(":file");// Select all upload fields $(":hidden");
// Pick all invisible elements
<>3.jQuery Medium DOM operation
<>3.1 Text operation
// Text operation $("p").html();// amount to DOM in p.innerHtml; $("p").text();// amount to DOM in p.innerText;
<>3.2 Value operation
// Value operation $("input:eq(5)").val();// amount to DOM in input.value; $("input:eq(6)").val("aaa")
;// Set attribute value
<>3.3 Attribute operation
// Attribute operation $("#box").attr('name');// obtain name attribute $("#box").attr('name',"aaa");
// add to name Properties and values $("#box").removeAttr('name');// delete name attribute $("#box").prop('checked');
// Error getting single attribute , use prop What you get is false and true
<>3.4 Class operation
// Class operation $("#box").attr("class","");// Get and set $("#box").addClass("class","");// Append class name
$("#box").removeClass("class","");// Remove class name $("#box").removeClass();// Remove all class names $(
"#box").toggleClass("main");// switch main Class name $("#box").hasClass("main");// Is there a class name
<>3.5 Style operation
// Style operation $("#box").css("color");// read css Style value $("#box").css({"propertyname":"value",
"propertyname":"value"});// Set multiple styles at the same time
<>4. Node operation
<>4.1 Traversal node
// Traversal node $("#box").children();// Get child nodes $("#box").children("div");// obtain div Child node $(
"#box").prev();// Find a brother next to it $("#box").prevAll();// Find all the brothers immediately above $("#box").prevAll
("div");// Find all that are immediately above div brother $("#box").next();// Find a brother next to you below $("#box").nextAll();
// Find all the brothers next to you below $("#box").nextAll("div");// Find all that are immediately below div brother $("#box").parent();
// Parent node found
<>4.2 Filter node
// Filter node $("ul").find(".a");// lookup $("ul li").filter(".a");// filter
<>4.3 establish , insert , delete
// establish , insert , delete var lis=$("<li title='aaa'>aaa</li>");// establish // Internal addition parent.append(lis
);// Add at the end of the parent box parent.prepend(lis);// Add in parent box header // External addition box.after(lis);// stay box Add after box
.before(lis);// stay box Front plus // delete DOM element $("ul").remove();// Delete completely ,ul,li All delete $("ul").empty(
);// Just empty ul Content of ,ul Still exist $("li").remove(".one");// delete li in class="one" of
<>5.jquery event
// jquery event // And js Differences between // window.onload And $(document).ready()
// Difference one ： The former is executed after the page is fully loaded , The latter in DOM Execute after loading , The latter takes precedence over the former // Difference 2 ： When the former appears many times , The last one will cover the previous one , When the latter appears many times , They will merge
// Difference three ： Is there any abbreviation ：window No abbreviations ,document There are abbreviations // Abbreviation ：$().ready(function(){...}) //
$(function(){....}) // Event binding ：$(selector).on( Event type , Callback function ) $("ul li").on("click",
function(){alert(1);}); // jquery and ajax // get method $.get(url,data,success(
response,status,xhr),dataType); // post method $.post(url,data,success(data,
textStatus, jqXHR),dataType);
Technology