Home > Web Front-end > JS Tutorial > Getting Started with jQuery Constructor_jquery

Getting Started with jQuery Constructor_jquery

WBOY
Release: 2016-05-16 18:44:41
Original
786 people have browsed it

JQuery Advantages
◦ Small size (v1.2.3 15kb)
◦ Rich DOM selector (CSS1-3 XPath) ◦ Cross-browser (IE6, FF, Safari, Opera)
◦ Chain Style code
◦ Powerful event and style support
◦ Powerful AJAX function
◦ Easy to extend, rich plug-ins
jQuery’s constructor receives four types of parameters:
jQuery(expression, context)
jQuery(html)
jQuery(elements)
jQuery(fn)
The first method is to find the document based on expression (ID, DOM element name, CSS expression, XPath expression) elements and assembled into a jQuery object returned.
DEMO:


[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]

Add the following jQuery code to the end of the article In the script block:
jQuery("ul>li:first").addClass("selected"); The page running effect is as follows:


where jQuery() can be replaced by Shortcut $(), if $ is occupied by other objects, you can use the jQuery.noConflict() function to cancel the shortcut.
"ul>li:first" where ul>li represents all li elements located under ul (which are CSS expressions, XPath mode can use ul/li), and :first represents the first one among them. addClass() is a function used by jQuery objects to add CSS style classes, and the opposite function is removeClass().
Add the following code:
$('ul').append($('
  • new item
  • ')); The operation effect is as follows:


    Where $('
  • new item
  • ') converts the string into a DOM object, and then adds it to the end of the ul object through the append() function.
    Next:
    $(document).ready(function(){
    $('ul').css('color','red');
    }); The effect is as follows:


    The jQuery constructor can also directly pass in DOM objects, such as document, or jQuery objects (of course it is meaningless). The ready() function adds an event handling function to the document and sets the color of ul to red.
    $(document).ready() has many application scenarios, so it can be directly replaced by $(fn), where fn represents the processing function. (The ready processing function seems to be executed after the document content is loaded. There is no need to wait for related resources such as other images to be loaded, so it is executed earlier than the load event. There is no specific confirmation on this)
    $(function() {
    alert('welcome to jQuery');
    });
    The effect of the above code is that as soon as the page is loaded, a dialog box will pop up. reference:http://docs.jquery.com/Core
    http://docs.jquery.com/Selectors
    Related labels:
    source:php.cn
    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
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template