집 >웹 프론트엔드 >JS 튜토리얼 >jquery 기본에 대한 첫 번째 강의: jquery_jquery 이해

jquery 기본에 대한 첫 번째 강의: jquery_jquery 이해

WBOY원래의: 2016-05-16 15:10:281550검색

jQuery는 간결한 구문과 플랫폼 간 호환성을 갖춘 뛰어난 JavaScript 라이브러리로 개발자가 HTML 문서 탐색, DOM 조작, 이벤트 처리, 애니메이션 수행 및 Ajax 작업 개발을 크게 단순화합니다.

jQuery의 장점:

1.경량

2. 강력한 선택기

3. DOM 작업의 탁월한 캡슐화

4. 안정적인 이벤트 처리 메커니즘

5. 완벽한 아약스

6. 최상위 변수를 오염시키지 마세요

7. 뛰어난 브라우저 호환성

8. 체인 작동 모드

9. 암시적 반복

10. 행동층과 구조층의 분리

11. 풍부한 플러그인 지원

12. 문서 완성

13. 오픈소스

(1) 간단한 jQuery 코드 작성:

참고: $는 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 코드 스타일

참고: 체인 운영.

1. 동일한 객체에 대해 3개 이상의 작업을 한 줄에 작성할 수 없습니다.　　　　

2. 동일한 객체에 대한 작업이 여러 개인 경우 한 줄에 하나씩 작성하는 것이 좋습니다.

3. 여러 개체에 대한 소수의 작업의 경우 각 개체마다 한 줄씩 작성할 수 있으며, 하위 요소가 포함된 경우 적절한 들여쓰기를 고려할 수 있습니다.

4. 여러 개체에 대한 추가 작업을 위해 2개 또는 3개를 결합할 수 있습니다.

필요한 댓글을 추가하세요.

<!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 객체와 jQuery 객체

DOM(Document Object Model, Document Object Model), 각 DOM을 트리로 표현할 수 있습니다. 요소 노드를 얻으려면 JavaScript에서 getElementById 또는 getElementByTagName을 사용하십시오. 이러한 DOM 요소는 DOM 개체입니다.

jQuery 객체는 jQuery를 통해 DOM 객체를 래핑하여 생성된 객체입니다. jQuery 개체는 jQuery에 고유한 메서드입니다. jQuery의 메서드는 사용할 수 있지만 DOM 개체의 메서드는 사용할 수 없습니다.

참고: jQuery 객체는 모두 jQuery 객체 제조 공장인 $() 함수를 통해 제조됩니다.

<!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 객체와 jQuery 객체를 서로 변환할 수 있는 예는 다음과 같습니다.
1.DOM 객체 방식

<!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 객체 메소드

<!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>

위 내용은 jquery 학습에 대한 첫 번째 강의이므로 계속해서 관심을 가져주시길 바랍니다.

성명：

이전 기사：Socket.io+express_node.js를 기반으로 멀티룸 채팅 구현다음 기사：Socket.io+express_node.js를 기반으로 멀티룸 채팅 구현

jquery 기본에 대한 첫 번째 강의: jquery_jquery 이해

관련 기사