前端技术培训

1、jquery The jQuery library contains the following features: HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX Utilities 1.jquery加载 http:/ 2. jquery selectors SelectorExampleSelects *$(*)All elements #id$(#lastname)The element with id=lastname .class$(.intro)All ele

2、ments with class=intro .class,.class$(.intro,.demo)All elements with the class intro or demo element$(p)All elements el1,el2,el3$(h1,div,p)All , and elements attribute$(href)All elements with a href attribute attribute=value$(href=default.htm)All elements with a href attribute value equal to default

3、.htm parent child$(div p)All elements that are a direct child of a element parent descendant$(div p)All elements that are descendants of a element 2. jquery selectors method 2.1 effects hide() and show() fadeIn() fadeOut() fadeToggle() fadeTo() $(button).click(function() $(p).hide(slow, function() a

4、lert(The paragraph is now hidden); ); ); callback: Chaining: $(#p1).css(color, red).slideUp(2000).slideDown(2000); 2. jquery selectors method 2.1 jquery HTML text() - Sets or returns the text content of selected elements html() - Sets or returns the content of selected elements (including HTML marku

5、p) val() - Sets or returns the value of form fields attr() method is also used to set/change attribute values. append() - Inserts content at the end of the selected elements prepend() - Inserts content at the beginning of the selected elements after() - Inserts content after the selected elements be

6、fore() - Inserts content before the selected elements remove() - Removes the selected element (and its child elements) empty() - Removes the child elements from the selected element addClass() - Adds one or more classes to the selected elements removeClass() - Removes one or more classes from the se

7、lected elements toggleClass() - Toggles between adding/removing classes from the selected elements css() - Sets or returns the style attribute 2. jquery selectors method 2.1 jquery HTML width() height() innerWidth() innerHeight() outerWidth() outerHeight() 2. jquery selectors method 2.1 jquery trave

8、rsing parent() parents() parentsUntil() children() find() siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil() first() last() eq() returns an element with a specific index number of the selected elements. filter() method lets you specify a criteria. Elements that do not match the cri

9、teria are removed from the selection, and those that match will be returned. not() method is the opposite of filter(). 3. jquery AJAX load() method loads data from a server and puts the returned data into the selected element. $(selector).load(URL,data,callback); $.get() method requests data from th

10、e server with an HTTP GET request. $.get(URL,callback); $.post() method requests data from the server using an HTTP POST request. $.post(URL,data,callback); $.ajax() Performs an async AJAX request 4. jquery misc $.noConflict(); jQuery(document).ready(function() jQuery(button).click(function() jQuery

11、(p).text(jQuery is still working!); ); ); each() Execute a function for each matched element Release jQuerys control of the $ variable $(button).click(function() $(li).each(function() alert($(this).text() ); ); $(selector).each(function(index,element) toArray() returns the elements matched by the jQ

12、uery selector as an array. $(button).click(function() var x = $(li).toArray() for (i = 0; i x.length; i+) alert(xi.innerHTML); ); 4. jquery misc param() Method Create a serialized representation of an array or object (can be used as URL query string for AJAX requests) 4. jquery event Mouse EventsKey

13、board EventsForm EventsDocument/Window Events clickkeypresssubmitload dblclickkeydownchangeresize mouseenterkeyupfocusscroll mouseleave blurunload $(document).ready(function() $(data-toggle=popover).popover(); ); The $(document).ready() method allows us to execute a function when the document is ful

14、ly loaded. 4. jquery event $(p).click(function() $(this).hide(); ); $(h1, h2, p).click(function(event) alert(event.currentTarget = this); ); http:/ 5.formbuilder 1.css及script加载 http:/ Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.

15、 Bootstrap is completely free to download and use! Start learning Bootstrap 3 now! 2. Bootstrap Grid System span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 4 span 4 span 4 span 4span 8 span 6span 6 span 12 . xs (for phones) sm (for tablets) md (for desktops)

16、lg (for larger desktops) btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-danger 3. Bootstrap component 3.1 buttons Basic Button 3. Bootstrap component 3.2 forms form-inline or form-horizontal |- form group | |- or |- checkbox |- form-control are set to width: 100%; by default

17、. Add role=form to the element (helps improve accessibility for people using screen readers) ClassDescription .bg-primaryTable cell is styled with class bg-primary .bg-successTable cell is styled with class bg-success .bg-infoTable cell is styled with class bg-info .bg-warningTable cell is styled wi

18、th class bg-warning .bg-dangerTable cell is styled with class bg-danger 3. Bootstrap component 3.3 helpers glyphicon glyphicon-search 3. Bootstrap component 3.4 icons modal aria-labelledby:referencing the modal title, role:dialog |- modal-dialog role=document to the .modal-dialog itself. |- modal-co

19、ntent |- modal-header |- modal-body |- modal-footer modal-lg modal-lg modifier classes to be placed on a .modal-dialog. 3. Bootstrap component 3.5 modal via data attributes to activate a modal button.data-target=#foo or href=#foo to target a specific modal to toggle. .fade class give your fade anima

20、tion in to view. via javascript to activate a modal $(#myModal).modal(options) options: keyboard:true Events show.bs.modal shown.bs.modal shown.bs.modal hidden.bs.modal loaded.bs.modal $(#myModal).on(hidden.bs.modal, function (e) / do something. ) 应用组件示例 1）下垃列表 申请事项 机构管理 用户管理 产品管理 产品组件管理 产品 $(this).

21、val().trigger(change); 清空方法 应用组件示例 2）日期控件 申请日期 6.form validate dust.js http:/akdubya.github.io/dustjs/ 、Dust is a JavaScript templating engine designed to provide a clean separation between presentation and logic without sacrificing ease of use. It is particularly well-suited for asynchronous and streaming applications. select2me https:/select2.github.io/ Select2 gives you a customizable select box with support f