Powerful JQuery (1)-basics, jquery-Basics

Powerful JQuery (1)-basics, jquery-Basics

JQuery is an excellent Javascript framework and a lightweight js library. Using jQuery will greatly improve the efficiency of writing javascript code and make the written code more elegant and robust.

After learning jquery, We are equivalent to the shoulders of giants.

I will introduce jquery in three blogs. This blog will introduce jquery's basic syntax, intelligent sensing, selector, and events.

I. Basic syntax

The jQuery syntax is compiled for the selection of HTML elements. You can perform some operations on the elements.

Basic Syntax: $ (selector). action ()
-- Dollar sign defines jQuery
-- Selector: "query" and "Search" HTML elements
-- JQuery action () executes operations on Elements
 

Ii. jquery smart sensing
The so-called "the tool must be used first for the purpose of doing good things". Before we introduce jquery, we will first introduce a practical tips-SMART awareness, also known as smart code prompts.
We have had smart code prompts in programming in the past. This is a very necessary function for beginners who are not proficient in basic knowledge, however, there are no smart code prompts in both vs and dreamweaer.
So what should we do? In fact, vs has smart sensing. Let's see how it works.
1. When we create a new website, we will find that it will automatically generate a Scripts folder, which contains three files.

2. Reference The jquery library of vsdoc on the html page

    <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
3. Now write the jquery code to see if there is any smart prompt?


4. Enable script intelligent sensing in an independent. js File
The preceding method is only applicable to jquery compiling on html pages. How can this problem be achieved in an independent file?
It is also very simple, just add such a paragraph at the beginning of the. js file.

///<reference path="jquery-1.4.1-vsdoc.js" />



5. Note: The "jquery-1.4.1-vsdoc.js" file is introduced in the example. If you reference another version, such as the min version of The jQuery class library, smart prompts cannot be enabled. But in the formal environment ,.
We must use the jquery library file of the "min" version.

Iii. jquery Selector
The jQuery element selector and attribute selector allow you to select HTML elements by Tag Name, attribute name, or content.
The selector allows you to operate on HTML element groups or individual elements.

1. jquery element Selector
Jquery uses the css selector to select HTML elements.
For example:
$ ("P") Select the <p> element.
$ ("P. intro") select all <p> elements of class = "intro.
$ ("P # demo") select all <p> elements of id = "demo.



2. jQuery attribute Selector
JQuery uses an XPath expression to select an element with a given attribute.
For example:
$ ("[Href]") selects all elements with the href attribute.
$ ("[Href = '#']") select all elements with an href value equal.



3. jQuery CSS Selector
The jQuery CSS selector can be used to change the CSS attributes of HTML elements.
The following example changes the background color of all p elements to Red:
For example:

<span style="font-size:18px;"><span style="white-space:pre"></span>$("p").css("background-color","red");</span>


Iv. jquery events

The jQuery event processing method is the core function in jQuery. Jquery's event functions are similar to javascript, c #, and other languages.
In the jquery help file, you can easily find all jquery event usage. Here we will write a common example.


 

 
  
 
   
 
    
Event Function
 
    
Bind a function
 
   
 
   
 
    
$ (Document). ready (function)
 
    
Bind the function to the ready event of the document (when the document is loaded)
 
   
 
   
 
    
$ (Selector). click (function)
 
    
Click events that trigger or bind a function to the selected Element
 
   
 
   
 
    
$ (Selector). dblclick (function)
 
    
Double-click event that triggers or binds a function to the selected Element
 
   
 
   
 
    
$ (Selector). focus (function)
 
    
Events that trigger or bind a function to the retrieved focus of the selected Element
 
   
 
   
 
    
$ (Selector). mouseover (function)
 
    
A mouse hover event that triggers or binds a function to the selected element.
 
   
 
  

 





The above is the basic knowledge of jquery. From the above content, we can see that jquery is indeed much more powerful than javascript. In the next blog, I will introduce the animation effects of jquery and continue to understand the power of query.






Jquery technical materials
Of course, it is an official document. In fact, you read the content of api.jquery.com and read it. There is no problem with understanding jQuery.
On the Chinese Sina love question sharing page, there is a jquerybasics tutorial. (jonathanchaffer&karlswedberg?. .pdf, which is not convenient to post a link here. You can search for it directly.

Why do I look at jquery? The code is simple, but it references a lot of files
JQuery itself has only one library file, which is similar to a jquery-1.8.3.js.

The file you referenced above, only the jquery-1.8.3.js is the jQuery library file, other files are jQuery UI framework.

JQuery UI is a web ui framework that encapsulates some UI components for convenient calling.

If you just need to use jQuery to operate the DOM of the page, you just need to reference the jquery-1.8.3.js, other can not need.

In addition, if you are downloading the jQuery UI package from the official website, there is usually a compressed package file of jquery-ui-1.8.3.custom.min.js, you can directly use this, it integrates all jQuery UI components into this file.