Understand the jquery

Review some of the shortcomings we encountered with JS as we learned earlier:

  1. It takes a lot of code to implement a small feature
  2. Getting page elements is inconvenient
  3. Compatibility issues

  4. The window.onload event will override, so we can only write one

  5. Animation effect, difficult to achieve

We chose JQuery to solve these problems.

Jquery features

With unique chain syntax and short and clear multi-functional interface;

It has efficient and flexible CSS selectors and can be extended to CSS selectors.

Have convenient plug-in extension mechanism and rich plug-in.

Query is compatible with major browsers such as IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+, etc.

lightweight

Excellent browser compatibility

Great DOM manipulation encapsulation

Perfect ajax

Chain programming

Implicit iteration (no for loop traversing dom objects)

Well-documented, strong community

Rich plug-ins

Introduction to the jquery

The entry function

$(document).ready(function(){alert("aaa")})Copy the code

$(function(){alert("aaa")})Copy the code

Event handling is different from JS and jquery

The event source

JS:

Docoment. GetElementById (" id ");Copy the code

JQ: 

$("# id ");Copy the code

The event

JS: 

Docoment. GetElementById (" id "). The onclickCopy the code

JQ: 

$("# id "). ClickCopy the code

Event handler (listener)

JS:

Docoment. GetElementById (" id "). The onclick =function() {// statement};Copy the code

JQ:

$("#id ").click (function(){// statement});Copy the code

JQuery control CSS

Core method:.css()

<body>    
<div id="main"> HHH </div> <button> </button> </body>Copy the code

$("button").click(function(){  
$("#main").css({
width:300,     
"background-color":"#f00"})})Copy the code

Attention to detail:

1, If the value has px, you need to remove the px.

2, if it is a number, do not use quotation marks

3. If the attribute name has -, then we also need to quote the attribute name

4. If you want to get rid of the quotes in the attribute name, you need to use the camel’s name

5. Attribute names may or may not be quoted

JQuery control HTML

Core method: HTML ()

Modify the HTML

.html(Parameter 1) Parameter 1 indicates the HTML content to be modified

Access to the HTML

.html() has no arguments to indicate access

<body>    
<div id="main"</div> <button> Modify </button> <button> access </button> </body> <script SRC ="./jquery.js"></script>

<script>
$("button:eq(0)").click(function(){
$("div").html("<h1>haha</h1>"The $()})"button:eq(1)").click(function(){
alert($("div").html()) 
})
</script>Copy the code

JQuery controls label attributes

Core method: attr();

To be updated…