1.DOM access with jQuery
1 $("h1"); ????//select all the h1s2 $("#heading"); ???// selects the element with id of "heading"3 $(".waring"); ???//selects all the element with class name of "warning"
The jQuery function can be named $ or jQuery
$("h1");//have the same effect jQuery("h1");
2.DOM modification with jQuery
// Set their inner text with text().$("h1").text("All about ?cats");//Set their inner html with html().$("h1").html("I <strong>love</strong> cats");//set attributes with attr();$(".dog-pic").attr("src", "dog.jpg");$(".google-link").attr("href", "http://www.google.com");//change CSS styles with css().$("h1").css("font-family", "monospace");$("h1").css({"font-family": "monospace", "color": "red"});//add a class name with addClass().$("h1").addClass("warning");//create new elementvar $p = $("<p>");var $p = $(‘<p style="color:red;">I love people who love cats.</p>‘);//append().$("#main-div").append($p);//insert element by prepend() or appendTo().$("#dessert").prepend("<div class=‘scoop " + flavors[indexNumber] + "‘></div>");$alone.appendTo("#party");
3.jQuery collections & looping
jQuery collections
1 //when you use jQuery to find elements, 2 //jQuery return back a jQuery collection object.3 var $heading = $(‘h1‘);4 5 //turn a DOM node into a jQuery object6 var $heading = $(heading);7 8 //retrieve the DOM node out of a jQuery object9 var heading = $heading[0];
looping through collections
1 // jQuery‘s each():2 $("p").each(function(index, element) { 3 ????$(element).text( $(element).text() + "!!"); 4 });5 6 // this keyword7 $("p").each(function() { 8 ????$(this).text( $(this).text() + "!!"); 9 });
4.DOM events in jQuery
Adding an event listener
1 $("#save-button").on("click", function() {2 ???// handle click event3 });4 5 $("#face-pic").on("click", function(event) {6 ???var mouseX = event.pageX;7 ???var mouseY = event.pageY;8 });
Triggering events
1 $("#save-button").trigger("click");
checking DOM readiness
$(document).ready(function() { ?$("h1").text("Y‘all ready for this?");});//pass your code to the jQuery function:$(function() { ?$("h1").text("Y‘all ready for this?");});
Review: JQuery
原文地址:https://www.cnblogs.com/ruruozhenhao/p/9057117.html