jQuery - 01. jQuery特点如何使用jQueryjQuery入口函数jQuery和DOM对象的区别jQuery选择器

Posted 明明明明明明明明

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery - 01. jQuery特点如何使用jQueryjQuery入口函数jQuery和DOM对象的区别jQuery选择器相关的知识,希望对你有一定的参考价值。

this指的是原生js的DOM对象

.css(“”):只写一个值是取值,写俩值是赋值

window.onload   ===   $(document).ready();

$(“”):获取元素   标签名、.类名、#id

    jQuery特点

  1. 链式编程
    1. jq.shou(3000).html(内容)
        1. 相当于
          1. jq.shou(3000)
          2. jq.gtml(内容)
  2. 隐式迭代
    1. 隐式实用for循环、迭代

      如何使用jQuery
  3. 引包
    1. 一定要在使用之前
    2. <script src = ‘’><>
  4. 入口函数
    1. $(document).ready(function({}))
  5. 绑定时间
    1. 事件源.事件(function(){事件驱动函数})

      jQuery入口函数
  6. 文档加载完毕,图片未加载的时候执行函数
    1. $(document).ready(function({}))
    2. $(function(){})
  7. 文档和图片都加载完毕执行函数
    1. $(window).reday(function(){})
  8. JS入口只能有一次,多次会覆盖
  9. jqery可有多个入口函数
  10. $ === jQuery

    jQueryDOM对象的区别
  11. jQuery对象是一个数组,包含原生jsDOM对象
  12. 原生js对象是一个原生对象
  13. jQuery对象名 = $js对象名)
  14. js对象转换为jQuery对象
    1. jquery对象名[索引值]
    2. jquery对象名.get(wwm索引值)
  15. 不同的对象有不同的方法
  16. JQuery对象方法包含原生js对象方法.
  17. jQuery对象.length的返回值是元素个数

    jQuery选择器

  18. 基本:#id、.类、标签名、
    1. *通配符选择器
  19. 层级选择器
    1. 子代选择器 >
    2. 后代选择器 空格隔开
    3. 基本过滤选择器
        1. eq(index)遍历元素数组
        2. :odd 获取偶数位索引的元素
        3. :even获取奇数位索引值的元素 
  20. 筛选选择器
    1. find(selector):找到父元素的素所有子元素
        1. 父元素.find要查找的子元素
        2. 查找所有后代子元素
      1. children:亲儿子
        1. 父元素.children要查找的子元素
        2. 仅查找子元素
    2. :eq(index)
    3. next();下一个兄弟节点
    4. parent():获取该元素的父元素
    5. siblings:所有的兄弟节点(不包括本身)


      技术分享
      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title></title>
          <style type="text/css">
              * {padding: 0;margin: 0;}
              ul { list-style-type: none;}
      
              .parentWrap {
                  width: 200px;
                  text-align:center;
      
              }
      
              .menuGroup {
                  border:1px solid #999;
                  background-color:#e0ecff;
              }
      
              .groupTitle {
                  display:block;
                  height:20px;
                  line-height:20px;
                  font-size: 16px;
                  border-bottom:1px solid #ccc;
                  cursor:pointer;
              }
      
              .menuGroup > div {
                  height: 200px;
                  background-color:#fff;
                  display:none;
              }
      
          </style>
          <script src="jquery-1.11.1.min.js"></script>
          <script>
              $(function () {
                  //需求:鼠标点击span,让他下面的div显示出来。让其他的div隐藏。
                  $(".parentWrap span").click(function () {
      //                $(this).next().show();
      //                //让其他的隐藏
      //                //点击的span的父亲li,的所有的兄弟元素li,的孩子元素div全部隐藏。
      //                $(this).parent("li").siblings("li").children("div").hide();
                      //连式编程
                      $(this).next().show().parent("li").siblings("li").find("div").hide();
                  });
              })
          </script>
      </head>
      <body>
      <ul class="parentWrap">
          <li class="menuGroup">
              <span class="groupTitle">标题1</span>
              <div>我是弹出来的div1</div>
          </li>
          <li class="menuGroup">
              <span class="groupTitle">标题2</span>
              <div>我是弹出来的div2</div>
          </li>
          <li class="menuGroup">
              <span class="groupTitle">标题3</span>
              <div>我是弹出来的div3</div>
          </li>
          <li class="menuGroup">
              <span class="groupTitle">标题4</span>
              <div>我是弹出来的div4</div>
          </li>
      </ul>
      </body>
      </html>
      手风琴案例

       













以上是关于jQuery - 01. jQuery特点如何使用jQueryjQuery入口函数jQuery和DOM对象的区别jQuery选择器的主要内容,如果未能解决你的问题,请参考以下文章

01 - jQuery介绍和体验

jQuery语言特点

使用jQuery快速高效制作网页交互特效——01 第一章 JavaScript基础

jQuery - 结合克隆内容和淡入

如何使用 jquery 将“.01”添加到文本框值

如何在 jquery 3.1.0 中使用“滑动菜单 Jquery Mobile”?