Python3.5 Study 17

Jquery

module = Class Library jquery is a class library of Dom, BOM, and JavaScript encapsulation

First, the search element, Dom only 10 kinds of left and right selectors

jquery has many selectors and filters

Ps:jquery Recommended 1 Series latest version, better compatibility 1.12

　

Object conversions: A jquery object [0] =>dom Object

　　　　

　　　　

Object Conversion Two: $ (DOM object) =jquery Object

　　　　

Selector: $ (') =jquery (') =document.getxxx (")

1 ID: $ (' #id ')

2 class: $ ('. C1 ')

3 Tags: $ (' a ')

4 All $ (' * ')

5 Combination $ (' a,.c2, #i10 ')

6 Levels $ (' #i10 a ') descendants

$ (' #i10 >a ') only for son

$ (' #i10 + ') next

$ (' #i10-') before one

7 filter (can be used in combination with the above selector)

: First $ (' #i10 >a:first ')

• • • : Not (selector) does not select, except
    • : Even odd number of
    • : Odd even number of
    • : EQ (Index) finds $ (' #i10 a:eq (0) ') according to the index
    • : the GT (index) index is greater than the number of
    • : lang1.9+ for speech recognition, translation
    • : Last One
    • : The LT (index) index is less than the number of
    • : Header to find all H tags
    • : Animated is performing an animated
    • : Focus gets focused.
    • : root1.9+
    • : target1.9+

8 Properties $ (' [xxx] ') with attribute xxx label

$ (' [xxx= ' 123 "] ') attribute xxx equals 123 label

9 Form selector: Can not remember, with the property selector can also solve

$ (': Text ') =$ (' input[type= ' text ') ')

Ii. Elements of Operation

Example: multiple selection, inverse selection, select all

jquery method Built-in loop, no need to recycle operation

$ (': CheckBox '). each (function (k) {
　　　　
This = Dom tag, element of the current loop $ (this)
K Current Index value
})

Set the value $ (this). Prop (' checked ', false)

Select the value $ (this). Prop (' checked ')

The use of the ternary operation var v= condition? Truth: False value

Left menu:

　　　　

$(This).Next ()
$(This).prev ()  
 $ (this). parent ()  
 $ (this). children ()  
 $ (this). siblings () 
 $ (this). find ()   
 
 in the chain programming of jquery, multiple statements can sometimes be superimposed. 
 
 Label text operation: View $ ("). Text () 
 $ ("). HTML () 
 $ ('). Val () 
 If the parameter is set, the value of the setting content 
 Input series is manipulated as long as D Om the value of the operation, here are all the same: $ ("). Val () View 
 $ ('). Val (') Assignment 
 
 PS: Two ways of writing events, whether passed or created directly in script Event method, this is a DOM tag object 
 1 If the event is written directly in the tag, in script          

 1 function edit (this) {   
//this is a DOM tag object 
} 

 2 $ ( Header").  Click (function (k) {
//this is Dom tag object 
}    

 
 Style action: Addclass,removeclass,hasclass,toggleclass (the style is not added, Delete) 
 
 
 Property Action: 
 $ ('). attr 
 is specifically used to make custom properties you can set properties 
 $ ('). attr (' type ') can view the properties 
 $ ('). attr (' key ', ' Value ') to set the property 
 relative to $ ('). Removeattr (' key ') Delete property 
 
 $ ('). Prop 
 is specifically designed to operate on the checkbox and radio class labels, Do not use attr to do these label operations, may fail 
 $ ('). Prop (' checked ', true) set the value 
 $ ('). Prop (' checked ') gets the value 
 
   

Document processing
var temp = string concatenation
$ ('). Append (temp);
$ ('). prepend (temp);
$ ("). After (temp);
$ ('). before (temp);
$ ("). Remove ();
$ ("). empty ();
$ ('). Clone ();

CSS Processing:
$ ('). CSS (' style name ', ' style value ')

Likes: Need to use the function point:
$ ('). Append ()
SetInterval
Transparency
Position
Font size settings

Position:
$ (window). scrolltop () get
$ (window). ScrollLeft ()
$ (window). scrolltop (0) settings
$ (window). ScrollLeft (0)

$ (). Offset () Gets the position of the coordinate relative to the entire window
$ (). Offset (). Top
$ (). Offset (). Left

$ (). Position () relative position of the label relative to the previous relative

$ (). Height () Gets the pure height of the label
$ (). Innerheight () get border + pure height
$ (). Outerheight ()

Write an example: Get a pure height, border, margin, padding

How to bind Events
DOM: Three kinds

Jquery:1 $ (). Click () ... A lot of it got on all removed

2 $ (). Bind (' click ', Function () {})
$ (). Unbind (' click ', Function () {})

3 $ ('. C '). Delegate (' A ', ' click ', Function () {}) * * * delegate This is a more bullish way to dynamically bind new tag events
$ ('. C '). Undelegate (' A ', ' click ', Function () {}) the event is bound only when the code executes

4 $ (). On (' click ', Function ()) Basic type

$ (). Outerheight (True)

A tag after the onclick event is loaded, if the event returns false at the end, the href URL will no longer be executed.
Two different ways of binding, Dom way, need to write a more return
onclick = "return Clickon ();
If you use jquery, you don't have to write return

Prevent events from occurring
Each of the jquery methods, when judging and returning, false only exits each function body, the outermost function will not return false value, can only do a flag to handle

Normal page Execution order
Script event is not loaded until all element rendering is complete

Want to load events ahead of time
<SCRIPT>
$ (function () {

});
When the page frame has finished loading, execute the script event binding

The expansion of jquery
1$ ("). Method of the jquery selector
2￥.ajax () jquery extension
$.fn.extend
$.extend

To avoid the introduction of multiple third-party extensions that result in the duplication of method names and variable names, you can use self-executing function methods to circumvent
Wrap each extension in a self-executing function body
(function (ARG) {
var status = 1;

Arg.extend ({
' Func_name ': function () {

}
}
);

}) (JQuery);

jquery jobs:
1 exercises to get label height and border, pure height
2 All examples hand knock over
3 Implementing the Edit box function

JS regular regular expressions are enclosed in \ \.

Two ways to use

Test determines whether a string conforms to the specified regular

Rep =/\d+/;

Rep.test (' dafdasf432aaaa ')

# True

Rep =/^\d+$/;

Rep.test (' SADFASDFASD34535QQQ ')

# false

exec extracts data based on regular matches

Rep =/\d+/;

str = "Wangshen_67_houyafa_20"

Rep.exec (str)

# [' 67 ']

Group Matching 1

"JavaScript is more fun than Java or javabeans!"

var pattern =/\bjava (\w+) \b/;

# [' JavaScript ', ' Script ']

Global match

var pattern =/\bjava\w+\b/g;

# [' JavaScript ']

# [' Java ']

# [' JavaBeans ']

# NULL

Global Grouping Matching

var pattern =/\bjava (\w+) \b/gm;

# [' JavaScript ', ' Script ']

# [' Java ', ']

# [' JavaBeans ', ' Beans ']

# NULL

 
 Three third-party components based on jquery 
 First, BootStrap the most powerful, existing components and a variety of templates can be directly modified using 
 Two, Easyui interface Generally, you can modify the use of the 
 Three, jQueryUI interface is more beautiful, it may use Ajax. Direct use is possible, but it can be cumbersome to modify. 
 
 It is recommended that you use bootstrap 
 to write code first to find ready-made components or templates from the web, and modify them to improve productivity. 
 Bootstrap notice three points in use: 
 One, responsive layout: @media modify CSS styles according to conditional changes 
 Two, icons, fonts: Use the font to make icons, call the icon directly according to the code to invoke the icon can be used. 
 Three, basic use: Call style, if you make certain changes, and write in front, if you want to take effect, then add! Important 
             

The use of the Carousel plugin:
Bxslider.com

jquery Learning Reference site:

http://jquery.cuishifeng.cn/

Python3.5 Study 17