This is a good story>")"; 5. Customize methods to extend jQuery; 6. Use jQuery and other libraries; 7. Set up the document readiness handler."/> This is a good story>")"; 5. Customize methods to extend jQuery; 6. Use jQuery and other libraries; 7. Set up the document readiness handler.">
Home >Web Front-end >Front-end Q&A >What does $ in jquery do?
The functions are: 1. As a jQuery wrapper, use selectors to select DOM elements, the syntax "$("selector")"; 2. Function prefix, as the namespace of general utility functions Prefix, for example "$.trim(sString);"; 3. Resolve conflicts in the window.onload function; 4. Create DOM elements, for example "$("e388a4556c0f65e1904146cc1a846beeThis is a good story5f557f62ae7ac7a14e0b1cb564790dfc") "; 5. Customize methods to extend jQuery; 6. Use jQuery and other libraries; 7. Set up document readiness handlers.
The operating environment of this tutorial: windows7 system, jquery3.6 version, Dell G3 computer.
1. As a jQuery wrapper, use a selector to select DOM elements
The function of a selector in CSS is to select a certain element on the page. A type (category selector) element or a certain element (ID selector)
, and "$" in jQuery as a selector also selects a certain type or type of element, except that jQuery Provides
more and more comprehensive selection methods. And it handles browser compatibility issues for users
h2 a{ /添加CSS属性/ }
In jquery, you can use the following code to select all sub-tags3499910bf9dac5ae3c52d5ede7383485 contained under the c1a436a314ed609750bd7c7d319db4da tag, as an object array for use by javascript
$("h2 a")
$(selector)
or
jQuery(selector)
where selector complies with CSS3 standards
You can see that jQuery's representation method is much simpler
$("#showp“)
needs to use a for loop to traverse the entire DOM
$(".SomeClass")
$("p : odd")
$("td:nth-child(1)")
$("li > a")
("a[href=pdf]")
Note:
The dollar sign "$" in jQuery is actually equivalent to "jQuery", from It can be seen from the source code of jQuery
For the convenience of writing code, "$" is usually used instead of "jQuery"
2. Function prefix
In JavaScript, developers often need to carry out some small functions to handle various operation details. For example, when the user submits a form,
needs to change the front end of the text box and The spaces at the end are cleared. JavaScript does not provide a function similar to trim(). After introducing
jQuery, you can use the trim() function directly. For example,
$.trim(sString);
The above code is equivalent to:
jQuery.trim(sString);
The trim() function is a method of the jQuery object.
3. Resolve the conflict of the window.onload function
Since the HMTL framework of the page needs to be fully loaded before it can be used, so in the DOM The window.onload function
is frequently used when programming. If this function needs to be used in multiple places on the page, or other .js files also contain the window.onload function,
The conflict problem is very difficult
The ready() method in jQuery is very good It solves the above problem. It can automatically run the functions after the page is loaded.
And multiple ready() methods can be used in the same page without conflicting with each other. For example
$(document).ready(function(){ $("table.datalist tr:nth-child(odd)").addClass("altrow"); });
jQuery also provides abbreviations for the above code, you can omit the "(document).ready" part, the code is as follows:
$(function(){ $("table.datalist tr:nth-child(odd)").addClass("altrow"); });
4. Create DOM Element
Use DOM methods to create element nodes, usually you need to use document.createElement(), document.create TextNode(),
appendChild() together, which is very troublesome , and the "$" symbol can be used to directly create DOM elements in jQuery. For example
var oNewP = $("e388a4556c0f65e1904146cc1a846beeThis is a good story5f557f62ae7ac7a14e0b1cb564790dfc")
The above code is equivalent to the following code in javascript:
var oNewP = document.createElement("p");// 新建节点 var oText = document.createTextNode("这是一个好故事"); oNewP.appendChild(oText);
In addition, jQuery also provides the insertAfter() method of DOM elements. The pseudo code is as follows:
$(function(){ // ready函数 var oNewP = $("<p>这是一个好故事</>");// 创建DOM元素 oNewP.insertAfter("#myTarget");// insertAfter()方法 }); <body> <p id="myTarget">插入到这行文字之后</p> <p>也就是插入到这行文字之前,但这行没有id,也可能不存在</p> </body>
5. Extend jQuery--Customize adding "$"
jQuery cannot meet all the needs of all users, and some special needs are very niche and are not suitable for inclusion in the entire jQuery framework.
用户可以自定义该方法。代码如下:
$.fn.disable = function(){ return this.each(function(){ if(typeof this.disabled != "undefined") this.disabled = true; }); }
以上代码首先设置".fn.disable",表明为""添加一个方法“disable()”,其中“$.fn”是扩展jQuery时所必须的
然后利用匿名函数定义这个方法,即用each()将调用这个方法的每个元素的disabled属性均设置为true(如果该属性存在)
6、使用jQuery和其他库
例如:Prototype库也是使用$符号,jQuery提供noConflict函数避免冲突,jQuery.noConflict();把$符号还原到非jQuery库定义的含义。
7、文档就绪处理程序,相当于$(document).ready(...)
例如:
$(function(){...}); //里面的函数会在DOM树加载完之后执行
扩展知识:解决"$"的冲突
如果其他框架也是用了“",会引起冲突,jQuery同样提供了noConflict()方法来解决""冲突问题
jQuery.noConflict();
以上代码可以使""按照其他javascript框架的方式运算,这时再jQuery中便不能在使用“”,而必须使用jQuery,
例如$("p p") 必须写成jQuery("p p").
【推荐学习:jQuery视频教程、web前端视频】
The above is the detailed content of What does $ in jquery do?. For more information, please follow other related articles on the PHP Chinese website!