Home Web Front-end JS Tutorial Basic understanding and examples necessary for getting started with jquery (organized)_jquery

Basic understanding and examples necessary for getting started with jquery (organized)_jquery

May 16, 2016 pm 05:31 PM
Getting started with jquery event Selector

1.Juqery is an excellent framework for javascript. It is a lightweight js library that is compatible with CSS3 and various browsers (IE 6.0, FF 1.5, Safari 2.0, Opera 9.0). jQuery2.0 and subsequent versions will no longer support IE6/7/8 browsers . jQuery enables users to more easily process HTML documents and events, implement animation effects, and easily provide AJAX interaction for websites.

Another big advantage of jQuery is that its documentation is very complete and its various applications are explained in detail. There are also many mature plug-ins to choose from. jQuery can keep the code and HTML content of the user's HTML page separated. In other words, there is no need to insert a bunch of js in the HTML to call the command. You only need to define the id.

When using the jQuery2.0 framework, what I want to say through the above paragraph is that if some code cannot run in eclipse, it means that the browser kernel is too low. As long as it is under a higher version of the browser, can show the effect.

2. The jQuery library includes the following features:
·HTML element selection
·HTML element manipulation
·CSS manipulation
·HTML event function
·JavaScript special effects and animation
· HTML DOM traversal and modification
· AJAX
· Utilities
3. Both Google and Microsoft support jQuery very well.
If you don't want to host the jQuery library on your computer, you can load the CDN jQuery core files from Google or Microsoft.
Use Google's CDN

Copy the code The code is as follows:





Basic syntax:
jQuery syntax example
$(this).hide()
Demonstrate jQuery hide() function to hide the current HTML element.
$("#test").hide() //Read the id
Demonstrate the jQuery hide() function to hide the element with id="test".
$("p").hide()
Demonstrates the jQuery hide() function, hiding all

elements. //This way the tag can be read directly
$(".test").hide()
Demonstrates the jQuery hide() function to hide all elements with class="test". //Read the element node of class

Jquery has many selectors: jQuery element selector
jQuery uses CSS selectors to select HTML elements.
$("p") selects the

element.
$("p.intro") selects all

elements with class="intro".
$("p#demo") selects all

elements with id="demo".
jQuery Attribute Selector
jQuery uses XPath expressions to select elements with a given attribute.
$("[href]") selects all elements with href attribute.
$("[href='#']") selects all elements with an href value equal to "#".
$("[href!='#']") selects all elements with href value not equal to "#".
$("[href$='.jpg']") selects all elements whose href value ends with ".jpg".
jQuery CSS Selector
jQuery CSS Selector can be used to change CSS properties of HTML elements.

The following example changes the background color of all p elements to red:
Example

Copy code The code is as follows:

$("p").css("background-color","red");


jQuery event
below Here are some examples of event methods in jQuery:

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Get upcoming calendar events on your iPhone lock screen Get upcoming calendar events on your iPhone lock screen Dec 01, 2023 pm 02:21 PM

On iPhones running iOS 16 or later, you can display upcoming calendar events directly on the lock screen. Read on to find out how it's done. Thanks to watch face complications, many Apple Watch users are used to being able to glance at their wrist to see the next upcoming calendar event. With the advent of iOS16 and lock screen widgets, you can view the same calendar event information directly on your iPhone without even unlocking the device. The Calendar Lock Screen widget comes in two flavors, allowing you to track the time of the next upcoming event, or use a larger widget that displays event names and their times. To start adding widgets, unlock your iPhone using Face ID or Touch ID, press and hold

Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3 Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3 Nov 20, 2023 am 11:20 AM

Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3. The specific code example is as follows: HTML code: <divid="container"><divclass="item"&gt ;First child element</div><divclass="item"&

How to implement change event binding of select elements in jQuery How to implement change event binding of select elements in jQuery Feb 23, 2024 pm 01:12 PM

jQuery is a popular JavaScript library that can be used to simplify DOM manipulation, event handling, animation effects, etc. In web development, we often encounter situations where we need to change event binding on select elements. This article will introduce how to use jQuery to bind select element change events, and provide specific code examples. First, we need to create a dropdown menu with options using labels:

How to implement calendar functions and event reminders in PHP projects? How to implement calendar functions and event reminders in PHP projects? Nov 02, 2023 pm 12:48 PM

How to implement calendar functions and event reminders in PHP projects? Calendar functionality and event reminders are one of the common requirements when developing web applications. Whether it is personal schedule management, team collaboration, or online event scheduling, the calendar function can provide convenient time management and transaction arrangement. Implementing calendar functions and event reminders in PHP projects can be completed through the following steps. Database design First, you need to design a database table to store information about calendar events. A simple design could contain the following fields: id: unique to the event

A Deep Dive into Close Button Events in jQuery A Deep Dive into Close Button Events in jQuery Feb 24, 2024 pm 05:09 PM

In-depth understanding of the close button event in jQuery During the front-end development process, we often encounter situations where we need to implement the close button function, such as closing pop-up windows, closing prompt boxes, etc. When using jQuery, a popular JavaScript library, it becomes extremely simple and convenient to implement the close button event. This article will delve into how to use jQuery to implement close button events, and provide specific code examples to help readers better understand and master this technology. First, we need to understand how to define

How to build event-based applications using PHP How to build event-based applications using PHP May 04, 2024 pm 02:24 PM

Methods for building event-based applications in PHP include using the EventSourceAPI to create an event source and using the EventSource object to listen for events on the client side. Send events using Server Sent Events (SSE) and listen for events on the client side using an XMLHttpRequest object. A practical example is to use EventSource to update inventory counts in real time in an e-commerce website. This is achieved on the server side by randomly changing the inventory and sending updates, and the client listens for inventory updates through EventSource and displays them in real time.

Learn about the selectors supported by lxml in one article Learn about the selectors supported by lxml in one article Jan 13, 2024 pm 02:08 PM

lxml is a powerful Python library for processing XML and HTML documents. As a parsing tool, it provides a variety of selectors to help users easily extract the required data from documents. This article will introduce the selectors supported by lxml in detail. lxml supports the following selectors: Tag selector (ElementTagSelector): Select elements by tag name. For example, select elements with a specific tag name by using <tagname>

Master jQuery common event binding techniques Master jQuery common event binding techniques Feb 28, 2024 am 08:15 AM

jQuery is a widely used JavaScript library that makes front-end development more efficient and convenient by simplifying DOM operations and event handling. In the process of using jQuery for event binding, we need to master some common techniques to ensure code maintainability and performance optimization. This article will introduce some common jQuery event binding techniques and provide specific code examples for reference. 1. Use event delegation Event delegation is a common optimization technique that can reduce the number of event handlers,

See all articles