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

This article is about how to use the front-end jQuery in python. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1.jQuery loading 2.jQuery selector 3.jQuery click event 4.jQuery style manipulation 5.jQuery animation

01-closed function

Function: avoid replacing methods with the same name when modifying other people's code. I want a function to execute directly with a closed function.

Avoid overwriting functions with the same name

Avoid overriding variables with the same name

A brief introduction to 02-jQuery

JQuery is a fast and concise JavaScript framework, and it is another excellent JavaScript code base (or JavaScript framework) after Prototype. JQuery is designed to be "write Less,Do More", which advocates writing less code and doing more. It encapsulates the common functional code of JavaScript, provides a simple JavaScript design pattern, and optimizes HTML document operation, event handling, animation design and Ajax interaction. The core features of jQuery can be summarized as follows: unique chain syntax and short and clear multi-function interface; efficient and flexible CSS selector, which can be extended to CSS selector; convenient plug-in extension mechanism and rich plug-ins. JQuery is compatible with all kinds of mainstream browsers, such as IE 6.0 +, FF 1.5 +, Safari 2.0 +, Opera 9.0 +, etc.

Basic use of 03-jQuery

1. Download the official http://jquery.com/ website 2 and https://code.jquery.com/ version

Import CSSq

Version 1.x jQuery is recommended for compatibility with earlier versions of browsers.

Comparison of 04-jQuery and native

Write Less and Do More write less, do more, and run fast.

Native js can only get attributes in the inline of CSS

JQuery can directly set or get properties in CSS.

05-CSS attribute operation of jQuery

The operation style in native js uses the style attribute

Operating CSS function in jQuery

The number type can be without units, and double quotes should be used if units are added.

Attributes are in double quotation marks

Attribute names can be written in js or CSS

When you use comma connection between attributes to get the CSS attribute in jQuery, you can only enclose the attribute in double quotation marks

When setting the CSS property in jQuery, enclose the attribute and value in curly braces {}, similar to the dictionary format

06-jQuery selector

Common selector

/ / 1. Label var $element = $("div"); / / 2. Class $element = $(".para"); / / 3.ID$element = $("# spa"); / / 4. Hierarchical selector $element = $(".box div"); / / 5. Property selector $element = $("div [class=box3]")

Filtering of jQuery selection set

Has () Select the tag of the descendant that contains xx

Not () check except for the tag of xx

Eq (corner label) Select the label of the specified index in the selection set starting at 0

/ / 1.has gets the x element containing x element / / gets the div tag var $element = $("div"). Has ("p") with nested p tags; / / 2. Not: div tags except for X tags / / Select all div tags except the class name box2 $element = $("div"). Not (".box2"); / / 3.eq (corner mark) equals var $eq = $(".list li") $eq.eq (6) .CSS ({"color": "red"})

Transfer of jQuery selector

Look for the adjacent labels above

Prev () previous

All the above prevAll ()

Look for the adjacent tags below

Next ()

NextAll ()

Siblings (); except for all the tags of the level selected by yourself

Parent () parent tag

Children () gets all direct child tags

Find () looks up the descendant elements in it

/ / 1. The selector transfers var $div = $(".box4"); / / 1.1 find the element believed above / / the previous var $element = $div.prev (); / / all the above $element = $div.prevAll (); / / 1.2 find the next adjacent element / / the next $element = $div.next (); / / all the lower $element = $div.nextAll (); / / 1.3all other level elements except yourself, select $element = $div.siblings (); / / 2. Parent-child relationship / / parent element $element = $div.parent (); / / all direct child elements obtained by child elements $element = $div.children (); / / find descendant elements $element = $div.find (".grandson")

Length determines whether an element exists or not

If length is 0, you don't have this label.

Gets the number of current tags

10-click event

Click Click event

The label object that the this currently triggers the event

Index () gets the corner mark of the element

11-Action class style class name

/ / 1. Add the class name $("div"). AddClass ("green") to a tag; / / box green// 2. Delete the class name bound by the tag $("div"). RemoveClass ("green"); / / 3. Switch class name / / delete if there is this class name / / add $("div") .toggleClass ("green") if there is no such class name

Tab case

Add class to the button currently clicked, and delete class from other buttons. Without class, there will be no × × background.

Find the div tag of the corresponding index by clicking the button index, then add class to it, and delete the class of other div tags

Animation of 13-jQuery

Animate

JQuery is a size-dependent animation. Colors don't animate.

If you want color animation, associate the jQuery.color library.

If you want to achieve continuous animation, you can continue to write animation code in the function executed after the animation is completed.

Thank you for reading! This is the end of the article on "how to use the front-end jQuery in python". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

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.