JQuery and JQuery event mechanism operating style

1. Operation style

    1.1 css Operating
      Function: Set or modify the style, the style attribute is operated

     Operating a single style

// name: the name of the style to be set 
// value: the value corresponding to the style 
// $ obj.css (name, value); 
// Use Cases 
$ ( '# one') css ( 'background', 'gray'. ); // modify the background color to gray

 

      Setting multiple styles

// parameter is an object, the object contains the name and style to set the style value 
// $ obj.css (obj); 
// Use Case 
$ ( '# One') CSS ({. 
    'Background': 'Gray' , 
    'width': '400px', 
    'height': '200px' 
});

        Gets the style

// name: style name needs to be acquired 
// $ obj.css (name); 
// case 
. $ ( 'Div') css ( 'background-color');

        Note: Gets the style operation only returns style values ​​corresponding to the first element

       1.2width method and height methods     

        Get or set height, excluding the margins, borders and padding width () height () retrieves the parameter does not pass, setting transmission parameters expressed. (When parameters are passed, with units can not px)        

// set the height parameter specified 
$ ( 'IMG') height (200 is);. 
// Get the height with no parameters 
$ ( 'img') height ( ).;

         Get the visible region of the width and height of the page   

// Get the width of the visible region 
$ (window) .width (); 
// get highly visible region 
$ (window) .height ();

        1.3  innerWidth/innerHeight/outerWidth/outerHeight

innerWidth () / innerHeight () method returns the element's width / height (including the margin). 
outerWidth () / outerHeight () method returns the element's width / height (including padding and border). 
outerWidth (true) / outerHeight (true ) method returns the element's width / height (including margins, borders and padding).

         1.4scrollTop and scrollLeft

         Get or set the position of the vertical scroll bar

// Get the height of the page is curled 
$ (window) .scrollTop (); 
// Get the width of the page is curled 
$ (window) .scrollLeft ();

2. The event mechanism

 

         2.1on registration event

         Registration on simple events:

// indicate to $ (selector) binding events and is triggered by themselves, do not support dynamic binding. 
$ (selector) .on ( 'click ', function () {});

            Registration on event delegation:

// indicate to $ (selector) binding agent event, when it must be internal elements span to trigger this event, support dynamic binding 
$ (selector) .on ( 'click ', 'span', function () {} );

             Registration on event syntax:

 

// The first argument: events, multiple events (standard events or custom events) name of the binding event can be separated by spaces 
// second argument: selector, descendant element execution event (optional), If there is no descendant elements, the event will be performed by themselves. 
// The third parameter: data, the data is passed to the handler, the event triggered when used by event.data (rarely used) 
// fourth argument: handler, the event handler 
$ (selector) .on ( events [, selector] [, data ], handler);

 

              2.2 Event unbundling:

            off mode:

// unbundling matching elements of all events 
$ (Selector) .off (); 
// unbundling matching elements of all click events 
$ (selector) .off ( 'click ');

              2.3 Triggering Event:

$ (selector) .click (); // trigger the click event 
$ (selector) .trigger ( 'click ');

              2.4 part of the jQuery event object

            jQuery event object is actually a package js event object, process compatibility.

// top left corner of the screen corresponding to the value of screenX and screenY 
// clientX and clientY distance page top left corner position (ignoring the scroll bar) 
// upper left corner of the topmost pageX and pageY distance page (scroll bar will calculate the distance) 

// event.keyCode press the keyboard code for 
additional data transfer when // event.data store binding events 

// event.stopPropagation () to stop the event from bubbling behavior 
// event.preventDefault () to prevent the browser's default behavior 
// return false: both to prevent the event from bubbling, but also to prevent the browser's default behavior.

If the programmers want to learn web front end, plus VX: TZED-21, free delivery web front-end video tutorial oh