Home >Web Front-end >JS Tutorial >The first lecture on jquery basics: understanding jquery_jquery

The first lecture on jquery basics: understanding jquery_jquery

WBOYOriginal: 2016-05-16 15:10:281562browse

jQuery is an excellent JavaScript library. With its concise syntax and cross-platform compatibility, it greatly simplifies developers to traverse HTML documents, operate DOM, handle events, perform animations and develop Ajax operations.

jQuery Advantages:

1.Lightweight

2. Powerful selector

3. Excellent encapsulation of DOM operations

4. Reliable event handling mechanism

5. Perfect Ajax

6. Do not pollute top-level variables

7. Excellent browser compatibility

8. Chain operation mode

9. Implicit iteration

10. Separation of behavioral layer and structural layer

11. Rich plug-in support

12. Complete documentation

13. Open source

(1) Write simple jQuery code:

Note: $ is the abbreviation of jQuery.

 <!-- 引入 jQuery -->
  <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function () {   //等待DOM元素加载完毕.（可能DOM元素关联的文件没有加载完）
      alert("Hello World!");     //弹出一个框
    });

　　　　 $(document).ready(function () {   //可以同时编写多个
      alert("Hello again!");
    });

    $(function () {           //简写形式
      alert("Hello jQuery!");
    });
  </script>

(2) jQuery code style

Note: Chain operation.

1. No more than 3 operations on the same object can be written in one line.　　　　

2. If there are many operations on the same object, it is recommended to write one operation per line.

3. For a small number of operations on multiple objects, you can write one line for each object. If sub-elements are involved, appropriate indentation can be considered.

4. For more operations on multiple objects, 2 or 3 can be combined.

Add necessary comments.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-4-3</title>
<style type="text/css">
#menu { 
  width:300px; 
}
.has_children{
  background : #555;
  color :#fff;
  cursor:pointer;
}
.highlight{
  color : #fff;
  background : green;
}
div{
  padding:0;
}
div a{
  background : #888;
  display : none;
  float:left;
  width:300px;
}
</style>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
  $(".has_children").click(function(){
    $(this).addClass("highlight")      //为当前元素增加highlight类
      .children("a").show().end()      //将子节点的a元素显示出来并重新定位到上次操作的元素
    .siblings().removeClass("highlight")    //获取元素的兄弟元素，并去掉他们的highlight类
      .children("a").hide();        //将兄弟元素下的a元素隐藏
  });
});
</script>
</head>
<body>
<div id="menu">
  <div class="has_children">
    <span>第1章-认识jQuery</span>
    <a>1.1-JavaScript和JavaScript库</a>
    <a>1.2-加入jQuery</a>
    <a>1.3-编写简单jQuery代码</a>
    <a>1.4-jQuery对象和DOM对象</a>
    <a>1.5-解决jQuery和其它库的冲突</a>
    <a>1.6-jQuery开发工具和插件</a>
    <a>1.7-小结</a>
  </div>
  <div class="has_children">
    <span>第2章-jQuery选择器</span>
    <a>2.1-jQuery选择器是什么</a>
    <a>2.2-jQuery选择器的优势</a>
    <a>2.3-jQuery选择器</a>
    <a>2.4-应用jQuery改写示例</a>
    <a>2.5-选择器中的一些注意事项</a>
    <a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
    <a>2.7-还有其它选择器么？</a>
    <a>2.8-小结</a>
  </div>
  <div class="has_children">
    <span>第3章-jQuery中的DOM操作</span>
    <a>3.1-DOM操作的分类</a>
    <a>3.2-jQuery中的DOM操作</a>
    <a>3.3-案例研究——某网站超链接和图片提示效果</a>
    <a>3.4-小结</a>
  </div>
</div>
</body>
</html>

(3) DOM object and jQuery object

DOM (Document Object Model, Document Object Model), each DOM can be represented as a tree. GetElementById or getElementByTagName in JavaScript is used to obtain element nodes. Such DOM elements are DOM objects.

jQuery objects are objects generated by wrapping DOM objects through jQuery. The jQuery object is unique to jQuery. You can use the methods in jQuery, but you cannot use the methods of the DOM object.

Note: jQuery objects are all manufactured through the $() function, which is a jQuery object manufacturing factory.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>1-4</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- 引入 jQuery -->
  <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    //等待dom元素加载完毕.
    $(document).ready(function () {
      var domObj = document.getElementsByTagName("h3")[0];  // Dom对象
      var $jQueryObj = $(domObj);     //jQuery对象
      alert("DOM对象：" + domObj.innerHTML);  
      alert("jQuery对象：" + $jQueryObj.html());
    });
  </script>
</head>
<body>
  <h3>例子</h3>
  <p title="选择你最喜欢的水果.">你最喜欢的水果是&#63;</p>
  <ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>菠萝</li>
  </ul>
</body>
</html>

DOM objects and jQuery objects can be converted to each other. The examples are as follows:
1.DOM object method

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>1-6-2</title>
  <!-- 引入 jQuery -->
  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    //等待dom元素加载完毕.
    $(document).ready(function () {
      var $cr = $("#cr");     //jQuery对象
      var cr = $cr.get(0);    //DOM对象获取 2种方式 $cr[0] 或者 $cr.get(0)
      $cr.click(function () {
        if (cr.checked) {    //DOM方式判断
          alert("感谢你的支持!你可以继续操作!");
        }
      })
    });
  </script>
</head>
<body>
  <input type="checkbox" id="cr" />
  <label for="cr">我已经阅读了上面制度.</label>
</body>
</html>

2.jQuery object method

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>1-6-1</title>
  <!-- 引入 jQuery -->
  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    //等待dom元素加载完毕.
    $(document).ready(function () {
　　　　　　 var cr = document.getElementById("cr");   //DOM对象
      var $cr = $(cr);     //jQuery对象
      $cr.click(function () {
        if ($cr.is(":checked")) { //jQuery方式判断
          alert("感谢你的支持!你可以继续操作！");
        }
      })
    });
  </script>
</head>
<body>
  <input type="checkbox" id="cr" />
  <label for="cr">我已经阅读了上面制度.</label>
</body>
</html>

The above is the first lesson about jquery learning, I hope you will continue to pay attention.

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：Implementing multi-room chat based on socket.io+express_node.jsNext article：Implementing multi-room chat based on socket.io+express_node.js

See more

The first lecture on jquery basics: understanding jquery_jquery

Related articles