码迷,mamicode.com
首页 > Web开发 > 详细

Review: JQuery

时间:2018-05-18 18:08:15      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:text   party   bsp   object   strong   use   www   eve   mod   

1.DOM access with jQuery

1 $("h1");     //select all the h1s
2 $("#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 element
var $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 object
6 var $heading = $(heading);
7 
8 //retrieve the DOM node out of a jQuery object
9 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 keyword
7 $("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 event
3 });
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

标签:text   party   bsp   object   strong   use   www   eve   mod   

原文地址:https://www.cnblogs.com/ruruozhenhao/p/9057117.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!