jQuery第3天笔记

jQuery第3天

目标

• jQuery操作类名方法
• jQuery操作标签属性方法
• jQuery操作标签内容方法
• jQuery动态创建元素
• jQuery动态追加元素
• jQuery动态删除元素

案例：

• 案例1：下拉菜单
• 案例2：手风琴轮播图
• 案例3：淡入淡出轮播图

一、复习和扩展

jQuery中文网站：http://jquery.cuishifeng.cn/index.html

1、jQuery操作类名

1.1 添加类名

• 语法：jQuery对象.addClass(‘类名’);

• 代码：

  <div></div>
  <script>
     $('div').addClass('show');
  </script>
  

  ​

1.2 移除类名

• 语法：jQuery对象.removeClass(‘类名’); 删除指定的类名

• 语法：jQuery对象.removeClass(); 不传参数，表示删除所有的类名

• 代码：

  <div></div>
  <script>
     $('div').removeClass('show');
  </script>
  

  ​

1.3 检测类名是否存在

• 语法：jQuery对象.hasClass(‘类名’); 返回true和false

• 代码：

  <div></div>
  <script>
     var isHas = $('div').hasClass('show');
     console.log(isHas); // false;
  </script>
  

  ​

1.4 类名切换

• 语法：jQuery对象.toggleClass(‘类名’); 若这个类名存在，则会移除该类名。否则添加该类名

• 代码：

  <div></div>
  <script>
     $('div').toggleClass('show');
  </script>
  

2、jQuery操作标签的属性

2.1 设置标签的属性

• 语法：jQuery对象.attr(name,value);

• 代码：

  <div></div>
  <script>
      $('div').attr('pid',10010);
  </script>
  

  ​

2.2 获取标签属性值

• 语法：jQuery对象.attr(name);

• 代码：

  <div></div>
  <script>
      var r = $('div').attr('pid');
  </script>
  

  ​

2.3 移除标签的属性

• 语法：removeAttr(name);

• 代码：

  <div></div>
  <script>
     $('div').removeAttr('pid');
  </script>
  

  ​

2.4 prop方法操作属性

针对：selected、checked、disabled

• 获取

  • 语法：$(‘input’).prop(‘属性名’);

  • 代码：

    <input type="checkbox" />
    </script>
      var isC = $('input').prop('checked');  
      console.log(isC); // false;
    </script>
    

    ​

• 设置

  • 语法：$(‘input’).prop(‘属性名’,值);

  • 代码：

    <input type="checkbox" />
    </script>
      $('input').prop('checked',true);  
    </script>
    

    ​

案例：

• 案例：放大镜切换项

3、jQuery操作标签的内容

3.1 操作标签内部的文本

• 获取：仅仅是文本

  • 语法：jQuery对象.text(); // innerText

• 设置：若设置标签时，标签会被当做普通文本

  • 语法：jQuery对象.text(‘文本内容’);

  ​

3.2 操作标签内部的所有内容

• 获取：文本 和 内部标签

  • 语法：jQuery对象.html(); // innerHTML

• 设置：若设置标签时，标签会被渲染

  • 语法：jQuery对象.html(‘文本内容’);

  ​

3.3 操作表单元素的内容

• 获取：表单元素的value
  • 语法：jQuery对象.val();
• 设置：表单元素的value
  • 语法：jQuery对象.val(‘文本内容’);

案例：

• 发送验证码控制按钮禁用

4、jQuery中的入口函数

• 原生的window.onload

• jQuery中的入口函数

  • 语法1：

    $(function(){

    ​ // 获取元素

    });

  • 语法2:

    $(document).ready(function(){

    ​ // 获取元素

    });

• 区别：

    <script>
      // onload事件，指的是当页面中所有资源【DOM树、媒体】加载完毕后，才会执行
      window.onload = function(){
        console.log(1);  // 后执行
      };
      // 仅仅等DOM树加载完毕后会执行。
      $(function(){
        console.log(2);  // 先执行
        console.log($('button'));
      });
    </script>
  

二、jQuery节点操作

1、 jQuery创建元素

• 语法：$('<li></li>')

2、jQuery追加元素

2.1 向父元素最后追加

• 语法：新创建jQuery对象.appendTo(‘父元素选择器’ 或 父元素jQuery对象);

• 语法：父元素jQuery对象.append(新创建的jQuery对象);

• 代码：

    <ul>
      <!-- <li>后裔</li> -->
    </ul>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
      var datas = ['后裔','安其拉','鲁班','小乔','虞姬'];
      for(var i = 0;i < datas.length; i++) {
        $('<li></li>')
        .text(datas[i])
        .appendTo('ul');
      }
    </script>
  

  ​

2.2 向父元素最前面追加

• 语法：新创建jQuery对象.prependTo(‘父元素选择器’);

• 语法：父元素jQuery对象.prepend(新创建的jQuery对象);

• 代码：

    <ul>
      <!-- <li>后裔</li> -->
    </ul>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
      var datas = ['后裔','安其拉','鲁班','小乔','虞姬'];
      for(var i = 0;i < datas.length; i++) {
        // $('<li></li>')
        // .text(datas[i])
        // .prependTo('ul');
  
        $('ul').prepend(   $('<li></li>').text(datas[i])   );
      }
    </script>
  

3、jQuery删除元素

• 语法：jQuery对象.remove(); 删谁就让谁调用这个方法

4、jQuery清空元素

• 清空方式1：jQuery对象.empty(); 推荐使用， 清空内部的所有元素及元素相关的事件
• 清空方式2：jQuery对象.html(‘’); 仅仅清空内部的元素，不清清理内中的元素的事件。

5、克隆元素

• 语法：jQuery对象.clone(布尔值); 返回克隆好的元素
  • 参数：默认是false,表示仅仅克隆内容。 true，克隆内容和事件