类操作

// 1.添加类
$(this).addClass("current")

// 2.删除类
$(this).removeClass("current")

// 3.切换类	
$(this).toggleClass("current")
// 如果有这个类，就删除，如果没有，就添加

// jquery类操作不影响原先的类名，只针对于指定的类进行操作

页面效果

显示隐藏

// 一般不写参数
$(this).show()             // 显示元素
$(this).hide()             // 隐藏元素
$(this).toggle()           // 切换，可以实现显示与隐藏

滑动效果

slideDown()      下滑动
slideUp()      上滑动
slideToggle()      切换滑动

// 括号可以写进参数时间

淡入淡出效果

fadeIn()
fadeOut()
fadeToggle()
fadeTo(速度，透明度)  // 修改透明度

停止动画队列

stop()     // 写在动画的前面，相当于结束上一次的动画
$(".nav>li"). hover(function() {
	$(this).children("u1").stop().slideToggle();
});

// 只要有动画效果，前面就要加stop()

自定义animate

animate(params,[speed],[easing],[fn])
( 1 ) params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采
取驼峰命名法borderLeft。其余参数都可以省略。
(2 ) speed :三种预定速度之一 的字符串("slow" , "normal" , or "fast" )或表示动画时长的毫秒数值(如: 1000)。
( 3 ) easing : (Optional)用来指定切换效果,默认是"swing” ,可用参数"linear" 
(4) fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

$("div").animate({
    left:500,
    top:200,
    width:300,
    opacity:.4
},500)

其他

字符串分割

let p = "￥99.9"
p = p.substr(1)
console.log('p',p)   // p 99.9

获取当前元素的索引号

var index=$(this).index();   //得到当前元素的索引号

保留几位小数

按照四舍五入的原则去进行

let p = 99.999
console.log('p',p.toFixed(1)) // 100.0

属性操作

固有属性

// 获取属性
console.log($('a').prop('href'))
// 设置属性
$('a').prop('href','#')

自定义属性

// 获取属性
console.log($('a').attr('data-index')) // 1
// 设置属性
$('a').attr('data-index','2')

获取内容文本

普通元素内容

// 1.获取
$(this).html()|text()
// 2.设置  
$(this).html("123")|text()

// 表单中的value
$("input").val()
$("input").val("123")

遍历元素

遍历DOM元素

// 回调函数的参数：(索引值，DOM对象)
// 注意：DOM对象是没有Jquery的方法的
$('li').each((a,b)=>{
    $(b).css('background','#eeeddd')
})

遍历数组

let arr = [1,2,3,4,5,6]
// 参数：(索引值,对应的数组值)
$.each(arr,(a,b)=>{
  console.log(a,b)
})

遍历对象

let obj = {
  name:'jack',
  age:22
}
// 参数：(对象属性,属性值)
$.each(obj,(a,b)=>{
  console.log(a,b)
})

创建和删除的操作

// 创建元素
let li = $('<li>我是后来创建的li</li>')
// (1) 添加到内部
$("u1").append(1i); //内部添加并且放到内容的最后面
$( "u1").prepend(1i); //内部添加并且放到内容的最前面

// (2) 添加到外部
var div = $("<div>我是后妈生的</div>");
$(".test").after(div);
$(".test" ).before(div);

// (3) 删除元素
$("u1").remove(); //可以删除匹配的元素   自杀
$("u1").empty(); //可以删除匹配的元素里面的子节点   孩子
$('#li-1').html("")  // 清空匹配的元素