jQuery notes

-->resource


basic use of jQuery:

$(selector).action()

What to notice is that $('p') selects all 'p' tags.We can use $('p.test') to select all 'p' tags with 'class="test" '. Use id to select is OK as well.

$(document).ready(function () { ... })

This will prevent jQuery to run before document is ready .And it's same as :

$( function (){...} )

selector

-If u want to find elements with certain attributes , for example, select every elements with ' href="..." ', u can :

$("[ href ]")

-If some 'input' tags with ' type = " text " ' ,and u want 2 select them :

$("input [type="text"]")

-If want to select elements with same type (e.g. type = "button" ):

$(" :button ")

action

-click()
-dbclick() : double click
-mouseenter() : when mouse entered what u selected. For example : when slice mouse to '<p> hide this </p> ' then hide:

$("p").mouseenter(function (){
$(this).hide();
});

-hover() :When enter , run first function , and when leave, run second function :

$("p").hover (
function () {
alert (' you enter <p>')
},
function () {
alert (' you left <p>')
}
);

-focus() : When click or select elements through 'Tab', this element is focused and we can change its style or run function.

hide && show && toggle

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

-speed : 'slow' or 'fast' or how many ms ;
-callback : function here will run immediately , instead of running after 'hide' or 'show' or 'toggle' .Else , if u selected several elements , callback will run several times.
-Toggle means 'switch' here . When it's hidden , you can use 'toggle ' to show it ,and when shown you can use 'toggle' to hide it.

fading

-fadeIn() : fade in what is hidden
-fadeOut() : fade out what can be seen
-fadeToggle() : fadeIn()+fadeOut()
-fadeTo() : can change opacity (between 0~1)

$(selector).fadeTo(speed,opacity,callback);

slide

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

chaining

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery HTML

$("#selectById").text()
$("#selectById").html()
$("#selectById").val()

-text() : get text in selected element
-html() : get html in selected element
-val() : get what user inputs in selected element


-attr() : get or set attribute of the selected element ,for example ,we select img tag's attribute, 'src' :

$("button").click(function(){
  alert( $("#selectById").attr("src") );
});

basic use :

$("selector").attr(  "attribure" : " ... " );
$("selector").attr(  "attribure" , function () { ... } );
$("selector").attr({"attribure1" : " ... " ,
"attribure2" : "..."  });

function : what the function returns will change the attribute you want to set by ' attr() ' method.

jQuery HTML -- add elements && delete elements && css()

-append() : insert info in the end of selected element
-prepend() : insert at the beginning
-after() : insert info after selected element
-before()
All of these four can add new elements to html , for e.g. ,add <tr></tr> to table:

function addtotable(){
let newtr = ` <tr><td> new row to table</td></tr>`;
$("#mytable").append(newtr);
}

-remove() : delete selected elements (& what belongs to them )
-empty() : delete what belongs to it

$("table").remove(".table-hover");

jQuety css()

$("selector")css("propertyname","value");
$("selector")css({"propertyname":"value","propertyname":"value",...});

jQuery - AJAX

• load() : load data from server , and put the data into selected element.

$("selector").load(URL,data,callback);

callback parameter contains:
-responseTxt : show contains when success
-statusTxt : status
-xhr : XMLHttpRequest object
e.g.

$("button").click(function(){
 $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

• get()

$.get(URL,function (data, status));

• post()

$.post(URL,data,callback);

'Data' will be sent as request , and we can use what the server responses in callback .

Thank u for reading ~XD