jQuery学习(第二天)

show和hide的作用

image.png

点击显示

image.png

点击隐藏

image.png

• 注意 show与hide可传三种参数
  • 1. 数字 表示多久之后显示
  • 1. 字符串 给定的 （slow 慢 normal 正常 fast 快）
  • 1. function函数

jQuery的动画效果（用法同show）

• 1. 上拉（slideDown）
• 1. 下拉（slideUp）
• 1. 上下拉切换（slideToggle）
• 1. 淡入（fadeIn）
• 1. 淡出（fadeOut）
• 1. 淡入出切换（fadeToggle）
• 1. 自定义（animate）（里面传两个参数 第一个是你自己定义的可以是函数 第二个是时间）

stop（停止 让谁停止就在谁的接口里书写）

可以传输两个参数 为true和 false
首先默认值是false
可以单独传一个参数 也可以 同时传输两个参数

tab切换

image.png

  <script>
        $(function () {
            //获取active属性 并且关闭其他兄弟的属性
            $(".tab > li").mouseenter(function () {
                $(this).addClass("active").siblings("li").removeClass("active");
                //获取当前序号 并且给其添加selected属性 并且将其兄弟的属性全部移除
                var index = $(this).index();
                $(".main")
                      .eq(index)
                      .addClass("selected")
                      .siblings("div")
                      .removeClass("selected");
            });
        });
    </script>

DOM操作

• 设置属性
• 获取属性
• 设置值
• 获取值

• 设置html
  。
  。
  。

  
  
  

  image.png
  
  

  举例如下：

  
  
  

  image.png

追加节点（一般不用建议使用.html()的方式）

• append

• appendTo（把谁追加到谁）

  
  
  

  image.png
• prepend（向前追加）

• prependTo（把谁追加到谁的前面）

  
  
  

  image.png
  
  
  

  image.png
  
  
  

  image.png

图片导航

image.png

效果：

image.png

综合

在css样式中$("li").css(“”,"")表示给元素(li)设置样式，$("li").css(“”)表示获取选定元素(li)的样式
给选定元素添加类样式 首先定义好类样式的属性，然后在script中书写$("li").addClass("divItem") ;
注意：样式名字没有点（.）