Shulou(Shulou.com)06/02 Report--

This article mainly introduces "jQuery special attribute operation what", in daily operation, I believe many people in jQuery special attribute operation what problems there are doubts, Xiaobian consulted all kinds of information, sorted out simple and easy to use operation methods, hope to answer "jQuery special attribute operation what" doubts help! Next, please follow the small series to learn together!

jQuery Special Properties Operation val Method

val method is used to set and get the value of form elements, such as input, textarea value

//Set value $("#name").val("Zhang San");//Get value $("#name").val();

I am an old farmer who has been developing for several years. I hope this article is useful to you! Here I recommend my front-end learning communication circle: 767273102, which is all about learning front-end, from the most basic HTML+CSS+JS [cool special effects, games, plug-in packages, design patterns] to mobile HTML5 project actual combat learning materials are sorted out and sent to each front-end partner. 2019 The latest technology, synchronized with the needs of enterprises. Friends are learning and communicating inside, and there will be Daniel explaining front-end technology regularly every day!

Click: Join

html method and text method

html method equivalent to innerHTML text method equivalent to innerText

//Set content $("div").html("This is a piece of content");//Get content $("div").html()//Set content $("div").text("This is a piece of content");//Get content $("div").text()width and height methods

Set or Get Height

//with parameters means set height $("img").height(200);//without parameters get height $("img").height();

Get the viewable area width and height of a web page

//Get visibility width $(window).width();//Get visibility height $(window).height();scrollTop and scrollLeft

Sets or gets the position of the vertical scroll bar

//Get the height of the curled page $(window).scrollTop();//Get the width of the curled page $(window).scrollLeft();offset method and position method

The offset method gets the position of the element from document, and the position method gets the position of the element from the parent element with positioning.

//Gets the position of the element from the document, the return value is the object: {left:100, top:100}$(selector).offset();//Gets the position of the parent element relative to its nearest positioned element.$ (selector).position();jQuery event mechanism

Events have been learned in JavaScript, but jQuery encapsulates JavaScript events, adding and extending event handling mechanisms. jQuery not only provides a more elegant event handling syntax, but also greatly enhances event handling capabilities.

Simple event binding>>bind event binding>>delegate event binding>>on event binding (recommended)

Simple Event Registration

click(handler) Click event mouseenter(handler) mouse entry event mouseleave(handler) mouse away event

Disadvantages: Cannot register multiple events simultaneously

bind Registers Events

//first argument: event type//second argument: event handler $("p").bind("click mouseenter", function(){ //event response method});

Disadvantages: No support for dynamic event binding

delegate Register delegate events

//First parameter: selector, element to bind event//Second parameter: event type//Third parameter: event handler function $(".parentBox").delegate("p", "click", function(){ //bind events for all p tags below.parentBox});

Disadvantages: Only delegate events can be registered, so the registration time needs to remember too many methods

on Registered Events (Focus)

After jQuery 1.7, jQuery unified the handling of all events with on.

The most modern way, compatible with zepto(a library similar to jQuery on the mobile side), is strongly recommended.

on Register for Simple Events

//means bind event to $(selector) and trigger by itself, dynamic binding is not supported.$ (selector).on( "click", function() {});

on Register Delegated Events

//indicates binding proxy event to $(selector). Dynamic binding $(selector).on( "click","span", function() {}) is supported when it must be its internal element span to trigger this event;

on Syntax for registering events:

//The first parameter: events, the name of the bound event can be multiple events separated by spaces (standard event or custom event)//The second parameter: selector, executes the descendant element of the event (optional), if there is no descendant element, then the event will have its own execution.// Third parameter: data, the data passed to the handler function, used by event.data when the event is triggered (rarely used)//fourth parameter: handler, event handler function $(selector).on (events[,selector][,data],handler); events unbind//unbind all events of matching element $(selector).off();//Unbind all click events of matching element $(selector).off("click"); trigger event $(selector).click(); //trigger click event $(selector).trigger("click");jQuery event object

The jQuery event object is actually a wrapper around the js event object, handling compatibility.

//screenX and screenY Corresponding to the top left corner of the screen//clientX and clientY Distance from top left corner of page (ignore scroll bar)//pageX and pageY Position from the top left corner of the page (to calculate the distance of the scroll bar) //event.keyCode Keyboard code pressed//event. data Additional data passed when storing binding events//event. stopPropagation () Prevent event bubbling behavior//event. preventDefault () Block browser default behavior//return false: Blocks both event bubbling and browser default behavior. At this point, the study of "jQuery special attribute operations" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.