jQuery学习-06-05

$(function(){
  $('li').parent();
  $('ul').children('li');
  $('ul').find('li');
  $('ol .item').css('color','red');
  $('ol .item').siblings('li').css('color','blue');
  // 相比后面那个，推荐这个，index可以直接修改替换（在引号外面）
  $('ul li').eq(2).css('color','blue');  
  $('ul li:eq(2)').css('color','red')
})

得到当前元素索引号

$(this).index()

显示/隐藏元素

ele.show()

ele.hide()

 链式编程

  $(this).css('background', 'red');
  $(this).siblings('button').css('background', '')
  //链式编程 上面两行等效于下面一行
  $(this).css('background', 'red').siblings().css('color', '')

$(this).show();
$(this).siblings().hide();
//链式编程 上面两行等效于下面一行
$(this).show().siblings().hide();

操作CSS方法

• 参数只写属性名，则返回属性值

$(this).css('color')

• 参数是属性名，属性值

$(this).css('color','red')

• 参数是对象形式，方便设置多组样式，属性名和属性值之间冒号隔开，每组用逗号隔开，属性可以不加引号。

$(this).css({
    color:'white',
    font-size:'20px'
})

 添加类

等同于classList （这是啥来着...忘了）

classList（原生js的）

var btn = document.querySelector('button');

• 添加类：btn.classList.add('class1','class2') //给btn添加类 class1,class2
• 移除类：btn.classList.remove('class3');  //移除
• 切换类：btn.classList.toggle('class4');  //切换，如果元素中已经存在该类名，则该类名将被删除；如果元素中不存在该类名，则该类名将被添加（可以实现点击后添加/删除样式的操作）
• 替换类：btn.classList.replace('oldClass', 'newClass');

 jQuery里的操作

添加类：$('div).addClass('class1')

删除类：$('div).removeClass('class1')

切换类：$('div).toggleClass('class1')

两种操作的区别

• 原生JS中className会覆盖元素原先里面的类名
• jQuery的类操作只是对指定类进行操作，不影响原先的类名

 jQuery效果

 显示 / 隐藏 / 切换

show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]]) //切换，一会显示一会隐藏 上拉 / 下拉 / 切换滑动

 []表示可选择的。

speed：三种预定速度之一的字符串(slow normal fast)或者表示动画时长的毫秒数（如：1000）；比如show（1000），show（‘fast’）

easing：动画切换效果，默认swing，还有linear；

fn：动画完成时执行的函数，每个元素执行一次。

slideDwon([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]]) //切换，一会显示一会隐藏

[]表示可选择的。

speed：三种预定速度之一的字符串(slow normal fast)或者表示动画时长的毫秒数（如：1000）；

easing：动画切换效果，默认swing，还有linear；

fn：动画完成时执行的函数，每个元素执行一次。

  事件切换 hover

hover（[over]，out）

over：鼠标移到元素上要出发的函数（相当于mouseenter）

out：鼠标移出要出发的函数（相当于mouseleave）

ps：如果只写一个函数，则鼠标离开和经过都会触发这个函数。

....说到这，mouseenter&mouseover、 mouseleave&mouseout之间啥区别？

mouseover / mouseout:  只要鼠标指针移入事件所绑定的元素或其子元素，都会触发该事件（有事件冒泡）
mouseenter / mouseleave: 只有鼠标指针移入事件所绑定的元素时，才会触发该事件（不冒泡）

淡入 / 淡出 / 切换

fadeIn([speed,[easing],[fn]])

fadeOut([speed,[easing],[fn]])
fadeToggle([speed,[easing],[fn]])

fadeTo(speed,opacity,[easing],[fn]) : speed、opacity（透明度）必须写

 停止动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行。所以要停止排队。

stop（）方法：要写到动画的前面，结束上一次动画，例如：

$(this).siblings().stop().slideDown();

自定义动画animate

animate(params,[speed],[easing],[fn])

params：要更改的样式属性，以对象形式传递，必须写。属性名不用带引号，复合属性采用驼峰命名法。数值后面不要加单位，亲测会报错。

例如：

$(function () {
    $('button').click(function () {
        $('div').animate({
            left: 500, //数字后面不要写单位
            top: 300,
            opacity: 0.5,
            width: 100,
            height: 100,
        
        })
    })
})

jQuery 的 animate 方法主要支持数值属性的动画，而 backgroundColor 这样的颜色属性需要插件的支持。

jQuery属性操作

获取元素的固有属性值

获取：element.prop（‘属性名’），例如：

<a href="###" title="你好"></a>
<script>
    console.log($('a').prop('title')); // 结果为 你好

修改：prop（‘属性名’，‘属性值’）

 获取元素的自定义属性

类似于原生js中的getAttribute（）、setAttribute（）

获取：element.attr（‘属性名’）

修改：attr（‘属性名’，‘属性值’）