Home >Web Front-end >JS Tutorial >Summary of experience using jquery_jquery

Summary of experience using jquery_jquery

WBOYOriginal: 2016-05-16 15:58:271073browse

1. Today I found that in addition to the jquery object, the dom object obtained by jquery can also access the original object. Just add a []. It turns out that there is such a function, but I didn't study it carefully before.

2, use first-child, nth-child(n) to get the first element in the element set.

3. Use Jquery to access the nodeText node by accessing the original object and nextSibling. The access is nextSibling.nodeValue;

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>Zephyr's Document</title>
  <script src="http://common.cnblogs.com/script/jquery.js"></script>
  <style type="text/css" media="screen">
  /*<![CDATA[*/
 
  /*]]>*/
  </style>
  <script type="text/javascript">
  $(function(){
  var tempBr=$("br");
  tempBr.each(function(index,doElem){
    doElem.nextSibling.nodeValue=doElem.nextSibling.nodeValue.replace(/\s{6}/g,"");
  })})
  </script>
  </head>
  <body>
  asdf
    <br />
    "   asdf"
    <br />
    "   asdf"
    <br />
    "   asdf"
  </body>
</html>

4.DOM object and jQuery object conversion

The code to obtain the DOM object is as follows:

//获取DOM对象
var div1 = document.getElementById("div1");
div1.innerHTML = "oec2003";

The code to obtain the jQuery object is as follows:

//获取jQuery对象
var div1 = $("#div1");
div1.html("oec2003");

jQuery object to DOM object

//因为ajQuery对象是一个数组对象，所以转换为DOM对象时要用索引的形式
var $div1 = $("#div1"); //jQuery对象
var div1 = $div1[0]; //转换为了DOM对象
var div2 = $div1.get(0); //和上面一行效果一样
div1.innerHTML = "oec2003";

DOM object to jQuery object

//DOM对象转jQuery只需用$包装即可
var div1 = document.getElementById("div1");
var $div1 = $(div1); //转换为了jQuery对象
$div1.html("oec2003");

5. Resolve conflicts

Sometimes there are scenarios where jQuery is used together with other libraries or some public script files written by yourself, and there may be a $ conflict problem. There are two situations to resolve the conflict:

1. The jQuery library is referenced after other libraries, as shown below:

Copy code The code is as follows:

8f1d350f4a973a900d7bfaf7df3086202cacc6d41bbb37262a98f745aa00fbf0

a1b1be49b9eeb0917b64e1bfac5836be2cacc6d41bbb37262a98f745aa00fbf0

There is a redefinition of $ in common.js, the code is as follows:

function $(id) {

  return document.getElementById(id);
}

The following is the code to resolve conflicts in jQuery. There are four ways:

//方式1
jQuery.noConflict(); //将$控制权移交出去，以前使用$的地方都改用jQuery
jQuery(document).ready(function () {
  alert(jQuery("#span1").html());
});
window.onload = function () {
  $("span1").innerHTML = "oec2003";
}

//方式2
var $j=jQuery.noConflict(); //定义快捷方式
$j(document).ready(function () {
  alert($j("#span1").html());
});

window.onload = function () {
  $("span1").innerHTML = "oec2003";
}

//方式3
jQuery.noConflict(); //在函数内部继续使用$
jQuery(function ($) {
  alert($("#span1").html());
});
window.onload = function () {
  $("span1").innerHTML = "oec2003";
}

//方式4
jQuery.noConflict(); //在函数内部继续使用$另一种方式
(function ($) {
  $(function(){
    alert($("#span1").html());
  });
})(jQuery);
window.onload = function () {
  $("span1").innerHTML = "oec2003";
}

2. Use jQuery library before other libraries

//如果先引用jQuery脚本，可以不使用noConflict
//jQuery.noConflict(); 
jQuery(document).ready(function () {
  alert(jQuery("#span1").html());
});
window.onload = function () {
  $("span1").innerHTML = "oec2003";
}

The above is all the content shared with you in this article. I hope you will like it.

Statement：

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

Previous article：Sharing experience in using Replace method in JS_javascript skillsNext article：Sharing experience in using Replace method in JS_javascript skills

See more

Summary of experience using jquery_jquery

Related articles