JQuery[i ] J Query1:JavaScript and JavaScript libraries:(1) There are 3 drawbacks to JavaScript itself:Complex Document Object Model (DOM), inconsistent browser implementations and ease of development, lack of debugging tools (2) JavaScript Library: Prototype (... is one of the earliest form of JavaScript library, but because of the prototype molding age earlier, the overall idea of object-oriented programming is not in place, resulting in a loose structure. Dojo (..... The great thing about Dojo is that it provides features that JavaScript libraries don't have, such as APIs for offline storage, components for generating icons, a steep learning curve, incomplete documentation, and, worst of all, API instability. YUI (... ) is a complete, well-scaled, Rich interactive Web program working set. Ext JS (... Abbreviated as ext,ext as an extended library of interfaces to use MooTools (... The lightweight, concise, modular, and object-oriented JavaScript framework, though almost the same as the prototype syntax, has more powerful features, better extensibility, and compatibility. JQuery () is a lightweight library with a powerful selector,Excellent forDom Operation encapsulation, reliable event handling mechanism, perfect Ajax, perfect browser compatibility and chain operation mode, non-polluting top-level variables, implicit iteration, separation of behavior layer and structure layer, rich plugin support, perfect documentation, open source (3)jquery's Code is written ($ is jquery shorthand form) 〈1〉 writing style: For operations with no more than 3 objects of the same object, you can write a line directly; For more operations on the same object, It is recommended to write one action per line; For a small number of operations on multiple objects, you can write a row for each object, and if child elements are involved, you can indent 〈2〉 to add comments to the code (4) The difference between jquery objects and Dom objects: &NB Sp dom (Document Object model), each DOM can be represented as a tree, through JavaScript Getelementbyidnagname or getElementById to get the node. For example: var domobj = document.getgetelement Byid ("id"); //get DOM object &N Bsp var objhtml = domobj.innerhtml; //using properties in JavaScript---innerhtml &N Bsp jquery objects are objects that are generated after wrapping a DOM object through jquery。 No methods of DOM objects can be used in a jquery object, nor can the DOM object Any method that uses the JQuery object. 〈4〉 object conversion and definition variable style: &N Bsp If you get an object that is a jquery object, add $ to it before the variable, for example: Var $variable = jquery object; If the object being obtained is a dom object, the format is as follows: var variable = dom object; nbsp 1 The two methods of converting a jquery object into a DOM object are [index] and get ( Index) var $CR = $ ("#cr") //jquery Objects ; var cr = $CR [0] //dom object; alert (cr.checked) //Detect Checkboxx is selected; var $CR = $ ("#cr") &NBSP;//jquery Object ; var cr = $CR. Get (0) //dom object; alert (cr.checked)//Detect Checkboxx is selected; 2 DOM object into a jquery object: For a DOM object, you can simply wrap the DOM object with $ () and you'll get a jquery object in the form of $ (DOM object). Example: var &NBSP;CR = document.getElementById ("Cr"); //dom object &NBS P var $CR = $ (CR); //jquery object & nbsp (5) Resolve conflicts between the jquery library and other libraries: in jquery, almost all plug-ins are limited to their namespaces. 1 jquery library import after other libraries: in other libraries and jquery libraries Once loaded, you can call the jquery.noconflict () function at any time to transfer control of the $ to other JavaScript libraries / nbsp "2" jquery libraries are imported before other libraries, so you can use the JquEry "To do some jquery work, at the same time, you can use the $ () method as a shortcut to other libraries. There is no need to call the Jquery.noconflict () function. 〈6〉jquery development tools and plugins: DREAMWEAVER;APTANA;JQUERYWTP and Spket ; Visual studio 2008[Two]jQuery Selector1:css (cascading style Sheets, cascading style sheet) selector:Common CSS Selectors: Tag Selector (E{CSS rules}), ID selector (#ID {CSS rule}), class selector (e.classname{CSS rules}), group selector (E1,E2,E3{CSS rule}), descendant selector (E f{css rule}), wildcard selector (*{CSS rule})Note: There are three ways to apply CSS to a Web page: inline style sheets, internal style sheets, and external style sheets, the disadvantage of an internal style sheet is that it cannot be reused by multiple pages 2:jquery selector: The jquery selector is written in much the same way as the CSS selector, but the effect is different, when the CSS selector finds the element and adds the style, and the jquery selector finds the element and adds the behavior. But the part of working with CSS styles involved in jquery is more powerful than simple CSS and has cross-browser compatibility. jquery Selector benefits: Concise notation, support for CSS1 to CSS3 selector, complete processing mechanism , 3:jquery selector: Basic selector, hierarchy selector, filter selector, and form selector. Basic selector: The most common selector for jquery, the simplest selector, which looks for DOM elements through element id,class and table signatures, in a Web page, Each ID name can be used only once, and class can be reused. Hierarchy selectors: You can get specific elements through hierarchical relationships between DOM elements, such as descendant elements, child elements, neighboring elements, and sibling elements. Filter Selector: Filters out the required DOM elements primarily through specific filtering principles, and selectors begin with a colon (:). Filter selectors can be divided into basic filtering, content filtering, visibility filtering, attribute filtering, sub-element filtering, Form object property filter selector , according to different filtering principles Form selector: It is extremely convenient to get one or a class of elements in a form. &NBSP;4: Some considerations in the selector: (1) selectors contain ".", "#", "(", "]" and other special characters, not in the normal way to deal with, The workaround for this type of problem is to escape using escape characters. (2) The @ symbol problem in the attribute selector: The correct notation is to remove the @ symbol. (3) selectors contain spaces that cannot be ignored[Three]jDOM operations in QueryThe DOM is the abbreviation for the Document Object model, which means that the documents are the objects. 1:dom operating points: DOM core, Html-dom, and Css-dom. dom Core is not a proprietary JavaScript and can be used by any program language that supports dom . Its use is not limited to processing Web pages, but it can also be used to process any document written in markup language, such as XML. html-dom compared to dom , the code is usually short, but it usually only works with Web documents. Css-dom is for CSS, and in JavaScript, the main function of Css-dom technology is to get and set the various properties of a style object. 2:jquery in dom actions (1) Find nodes: Find element nodes; Find attribute nodes. (2) Creating nodes: Creating element nodes, creating text nodes, creating attribute nodes (3) inserting nodes: &N Bsp (4) Delete node: Remove () method; Detach () method; Empty () method (5) Copy Node: (6) Replace node: ReplaceWith () and ReplaceAll () methods (if an event has been bound to an element before it is replaced, The previously bound event disappears with the replaced element and needs to be re-bound on the new element) (7) Wrap node: Wrap a node with other tags by wrapping it in wrap (); wrap All () and Wrapinner () wrap () method is to wrap all the elements in a separate package &N Bsp wrap All () method is to wrap all the matching elements with one element, &N Bsp The wrapinner () method is to wrap the child elements of each matching element (including text nodes) with other structure tags (8) Property: attr () method to get and set element properties, Removeattr () method to delete element attributes. (9) style operation: get and set class can be done using the attr () method. Append styles can be done using the AddClass () method. Remove styles you can use the Removeclass () method to complete the operation. Toggle style: Available Toggle () method (repeat toggle for hide and show behavior); toggle Class () method (delete and add style re-switch) to determine if a style is included: Hasclass () It can be used to determine if an element contains a class, and if so, returns True, otherwise false. &NBSP; &NBSP;3: Set and get HTML, text, and values: html () method, Text () method, Val () method &NBSP;4: Traverse node: Children () method, The method is used to get a collection of child elements of the matching element. Next () method, which is used to get the sibling element immediately following the matching element. Prev () method, which is used to get the sibling element immediately preceding the matching element. Sibling () method, which is used to obtain all sibling elements before and after the matched element. closest () method, which is used to obtain the most recent matching element. First, check that the current element matches, and if the match returns the element itself directly, otherwise look up the parent element and step up to find the element that matches the selector. If nothing is found, an empty jquery object is returned. 5:[Four]jEvents and animations in query1: LoadDOM: In regular JavaScript code, you typically use the Window.onload method; in jquery, you use $ (document). Ready ()(Note: $ (document) can be abbreviated to $ ()), because of a page load problem, you can also use another method of--load () in jquery about page loading, such as: in jquery: $ (window). Load (function () {...}) ; in javascript: window.onload = function () {...} 2: Event binding: You can use the bind () method to bind a specific event to a matching element: Bind (TYPE[.DATA].FN): The first argument is the event type, the second argument is an optional parameter, and the additional data object that is passed to the event object as the Even.data property value; The arguments are the handler functions used to bind. To change the event binding type:Mouse Events:mouseover events and mouseout events;3: Composition event: There are two composition events in jquery----the hover () method and the toggle () method, similar to the Ready () method, and the hover () method for simulating a cursor hover event. Format: hover () (enter.leave); The toggle () method simulates a mouse continuous click event. Format: Toggle (FN1,FN2.....FNN). Another use of the toggle () method in jquery: Toggle the visible state of an element. 4: Enhance the effect again: after clicking "...", not only the "content" is displayed, but the "..." is highlighted. First, define a highlighted style in the CSS. 5: Bubbling event: The Stoppropagation () method prevents the event from bubbling. The Preventdefault () method prevents the default behavior of the element. 6: Event Object Properties: The Event.type method is used to obtain the type of event. The Event.preventdefault () method is used to block the default behavior of an element.Note:not valid in IE browser. Event.stoppropagation () method is used to block the bubbling of events. The role of Event.target is to get to the element that triggered the event. event.relatedtarget. Event.pagex and Event.pagey: This method is used to get the x-coordinate and y-coordinate of the cursor relative to the page (note: used in Firefox) and is used in IE with event.x and event.pagey. Event.which (): The method is to get the left, middle, and right mouse button in a mouse click event, and get the keyboard key in the keyboard event. Event.matakey: Specify Event.matakey to get <ctrl> keys for keyboard events. A: Get Time 1:function setDate () {//Display time method var data = new Date (); & Nbsp;var year = Data.getfullyear (); Get year var month = Data.getmonth () + 1; Get month var day = Data.getdate (); Get day var hours = data.gethours (); var minutes = data.ge Tminutes (); &NBSp var time = year + "/" + month + "/" + Day + "/" + "+ Hours +": "+ minutes; $ (" #time "). Val (ti Me); }<body><input type= "text" name= "showdate" id= "Time" style= "height:25px; width:200px; margin-left:0px; " ></body>2:$ (document). Ready (function () { setinterval ("SetDate ()", 1000);//Set time interval }); function setDate () {//Show Time method //var MD = new Date (); $ ("#time"). Val (Date (). substr (8,15)); }<body><input type= "text" name= "showdate" id= "time "Style=" height:25px; width:200px; margin-left:0px; " ></body> Two: Format the timestamp 1: $time = Date ("Y-m-d h:i", Time ()); This is the time stamp formatting 2: $time = time () before the date is passed in to the database; Get timestamp 3: $row [' create_time '] = Date (' y-m-d h:i:s ', $row [' create_time ']); The time format of the database is timestamp, and the timestamp is formatted when the database is read: The line height of the p tag is removed line-height:0px;
Jquery and Js
