jQuery第3天笔记

原创已于 2022-04-20 21:59:22 修改 · 819 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

java

于 2022-04-20 21:53:40 首次发布

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>