In jQuery, the most frequently used symbol "$". $ provides a variety of rich functions,
including selecting one or a class of elements in the page, as the prefix of the function function, the
improvement of window.onload, the creation of the DOM node of the page, etc. . .
1. Selector
In CSS, the role of the selector is to select a certain class (category selector) element or an element (ID selector)
in the page, and the "$" in jQuery is used as a selector, which is also to select a certain element Class or a certain class of elements, but jQuery provides
more comprehensive selection methods. And to deal with browser compatibility issues for users,
CSS can use the following code to select all sub-tags <a> contained under the <h2> tag, and then add the corresponding style
h2 a{
/*Add CSS properties*/
}
and in In jquery, the following code can be used to select all sub-tags <a> contained under the <h2> tag as an array of objects for javascript to use
$("h2 a")
The general syntax of selectors in jquery is as follows:
$(selector )
or
jQuery(selector)
where selector conforms to CSS3 standard
------------------------------
$("#showDiv")
id select It is equivalent to document.getElementById("#showDiv"") in javascript,
you can see that jQuery's representation method is much simpler
$(".
Category selector, selects CSS category as all node elements of "SomeClass", to achieve the same selection in javascript, you
need to use a for loop to traverse the entire DOM
$("p : odd")
to select all <p> tags located on odd lines , Almost all tags can use ": odd" or ": even" to achieve odd-even selection
$("td:nth-child(1)")
The first cell of all table rows is the first column. This is very useful when modifying the properties of a column of a table. No longer need to traverse the table line by line
$("li > a")
child selector, return all child elements of <li> tag <a>, excluding grandchild tags
$("a[href$=pdf]")
Select all Hyperlinks, and the href attribute of these hyperlinks ends with "pdf". With the attribute selector, various feature elements in the page can be well selected.
Note:
The dollar sign "$" in jQuery is actually equivalent to "jQuery". From the source code of jQuery, it can be seen that
for the convenience of writing code, Usually "$" is used instead of "jQuery"
That is, a method of the jQuery object when the trim() function is used.
3. Resolve the conflict of the window.onload function
Since the HMTL framework of the page can be used after the page is fully loaded, the window and onload functions are
frequently used during DOM programming. If the function needs to be used in many places in the page, or other .js files also contain the window.onload function, the
conflict problem is very difficult
. The ready() method in jQuery solves the above problem very well, and it can automatically convert the The function runs after the page is loaded,
and multiple ready() methods can be used on the same page without conflicting with each other. For example
$(document).ready(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});
jQuery also provides a shorthand for the above code, which can be omitted In the "(document).ready" part, the code is as follows:
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});
4. Create DOM elements
use DOM methods to create element nodes, usually need to use document.createElement(), document.create TextNode(),
appendChild() together, which is very troublesome, and "$" is used in jQuery Symbols can directly create DOM elements.
For example var oNewP = $("<p>This is a good story</>")
以上代码等同于javascript中的如下代码：
var oNewP = document.createElement("p");// 新建节点
var oText = document.createTextNode("这是一个好故事");
oNewP.appendChild(oText);
另外，jQuery还提供了DOM元素的insertAfter()方法，伪代码如下：
$(function(){// ready函数
var oNewP = $("<p>这是一个好故事</>");// 创建DOM元素
oNewP.insertAfter("#myTarget");// insertAfter()方法
});
<body>
<p id="myTarget">插入到这行文字之后</p>
<p>也就是插入到这行文字之前，但这行没有id,也可能不存在</p>
</body>
自定义添加"$"
jQuery不能满足所有用户的所有需求，且有一些特殊的需求十分小众，也不适合放到整个jQuery框架中，
用户可以自定义该方法。代码如下：
$.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同样提供了noConflict()方法来解决"$"冲突问题
jQuery.noConflict();
以上代码可以使"$"按照其他javascript框架的方式运算，这时再jQuery中便不能在使用“$”，而必须使用jQuery，
including selecting one or a class of elements in the page, as the prefix of the function function, the
improvement of window.onload, the creation of the DOM node of the page, etc. . .
1. Selector
In CSS, the role of the selector is to select a certain class (category selector) element or an element (ID selector)
in the page, and the "$" in jQuery is used as a selector, which is also to select a certain element Class or a certain class of elements, but jQuery provides
more comprehensive selection methods. And to deal with browser compatibility issues for users,
CSS can use the following code to select all sub-tags <a> contained under the <h2> tag, and then add the corresponding style
h2 a{
/*Add CSS properties*/
}
and in In jquery, the following code can be used to select all sub-tags <a> contained under the <h2> tag as an array of objects for javascript to use
$("h2 a")
The general syntax of selectors in jquery is as follows:
$(selector )
or
jQuery(selector)
where selector conforms to CSS3 standard
------------------------------
$("#showDiv")
id select It is equivalent to document.getElementById("#showDiv"") in javascript,
you can see that jQuery's representation method is much simpler
$(".
Category selector, selects CSS category as all node elements of "SomeClass", to achieve the same selection in javascript, you
need to use a for loop to traverse the entire DOM
$("p : odd")
to select all <p> tags located on odd lines , Almost all tags can use ": odd" or ": even" to achieve odd-even selection
$("td:nth-child(1)")
The first cell of all table rows is the first column. This is very useful when modifying the properties of a column of a table. No longer need to traverse the table line by line
$("li > a")
child selector, return all child elements of <li> tag <a>, excluding grandchild tags
$("a[href$=pdf]")
Select all Hyperlinks, and the href attribute of these hyperlinks ends with "pdf". With the attribute selector, various feature elements in the page can be well selected.
Note:
The dollar sign "$" in jQuery is actually equivalent to "jQuery". From the source code of jQuery, it can be seen that
for the convenience of writing code, Usually "$" is used instead of "jQuery"
That is, a method of the jQuery object when the trim() function is used.
3. Resolve the conflict of the window.onload function
Since the HMTL framework of the page can be used after the page is fully loaded, the window and onload functions are
frequently used during DOM programming. If the function needs to be used in many places in the page, or other .js files also contain the window.onload function, the
conflict problem is very difficult
. The ready() method in jQuery solves the above problem very well, and it can automatically convert the The function runs after the page is loaded,
and multiple ready() methods can be used on the same page without conflicting with each other. For example
$(document).ready(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});
jQuery also provides a shorthand for the above code, which can be omitted In the "(document).ready" part, the code is as follows:
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});
4. Create DOM elements
use DOM methods to create element nodes, usually need to use document.createElement(), document.create TextNode(),
appendChild() together, which is very troublesome, and "$" is used in jQuery Symbols can directly create DOM elements.
For example var oNewP = $("<p>This is a good story</>")
以上代码等同于javascript中的如下代码：
var oNewP = document.createElement("p");// 新建节点
var oText = document.createTextNode("这是一个好故事");
oNewP.appendChild(oText);
另外，jQuery还提供了DOM元素的insertAfter()方法，伪代码如下：
$(function(){// ready函数
var oNewP = $("<p>这是一个好故事</>");// 创建DOM元素
oNewP.insertAfter("#myTarget");// insertAfter()方法
});
<body>
<p id="myTarget">插入到这行文字之后</p>
<p>也就是插入到这行文字之前，但这行没有id,也可能不存在</p>
</body>
自定义添加"$"
jQuery不能满足所有用户的所有需求，且有一些特殊的需求十分小众，也不适合放到整个jQuery框架中，
用户可以自定义该方法。代码如下：
$.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同样提供了noConflict()方法来解决"$"冲突问题
jQuery.noConflict();
以上代码可以使"$"按照其他javascript框架的方式运算，这时再jQuery中便不能在使用“$”，而必须使用jQuery，
例如$("div p") 必须写成jQuery("div p").
欢迎大家积极探讨，这里是华东电商科技专修学院，我们已经成功入驻了腾讯课堂，目前有java方向，testing测试方向以及人工智能等方向，如果您有任何相关方面的问题，欢迎咨询，大家可以加入以下QQ群进行讨论学习：
java:762850414、762864509
人工智能：763346374、692760972
测试：628589754
电话：13052068380