①、jQuery，Hold on!，CSS四种定位方式的详解

// $(“div”).click(function() {

// // $(this).addClass(“current”);

// });

// 2. 删除类 removeClass()

// $(“div”).click(function() {

// $(this).removeClass(“current”);

// });

// 3. 切换类 toggleClass()

$(“div”).click(function() {

$(this).toggleClass(“current”);

});

})

2.2.3、jQuery类操作和className区别

• 原生 JS 中的 className 会覆盖元素原先里面的类名

• jQuery里面类操作只是对指定类进行操作，不影响原先的类名

2.3、jQuery效果🔥

---

2.3.1、jQuery显示与隐藏效果

jQuery 给我们封装了很多动画效果，最为常见的如下：

①显示效果

语法：

// 显示语法规范

show([speed,[easing],[fn]]) //中括号表示参数都可以省略

$(“div”).show();

参数：

• 参数都可以省略， 无动画直接显示。

• speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

• easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

• fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

②隐藏效果

语法：

// 隐藏语法规范

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

$(“div”).hide();

参数：

• 参数都可以省略， 无动画直接显示。

• speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

• easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

• fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

③切换效果

语法：

// 切换语法规范

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

$(“div”).toggle();

参数：

• 参数都可以省略， 无动画直接显示。

• speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

• easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

• fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

建议：平时一般不带参数，直接显示隐藏即可

显示

隐藏

切换

2.3.2、jQuery滑动效果与事件切换

①下滑动

语法：

// 下滑动

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

$(“div”).slideDown();

②上滑动

语法：

// 上滑动

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

$(“div”).slideUp();

③滑动切换

语法：

// 滑动切换效果

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

$(“div”).slideToggle();

下拉滑动

上拉滑动

切换滑动

④事件切换

语法：

hover([over,]out)

• over: 鼠标移到元素上要触发的函数(相当于mouseenter)

• out: 鼠标移出元素要触发的函数(相当于mouseleave)

• 如果只写一个函数，则鼠标经过和离开都会触发它

$(“div”).hover(function(){},function(){});

// 第一个function是鼠标经过的函数

// 第二个function是鼠标离开的函数

// 如果hover只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数

$(“div”).hover(function(){

$(this).slideToggle();

})

2.3.3、jQuery动画队列及其停止排队方法

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

①停止排队

语法：

stop()

• stop()方法用于停止动画或者效果

• 注意: stop() 写到动画或者效果的前面，相当于停止结束上一次的动画

$(“.nav>li”).hover(function(){

// stop 方法必须写到动画的前面

$(this).children(“ul”).stop().slideToggle();

})

2.3.4、jQuery淡入淡出以及突出效果

①淡入淡出切换

语法：

// 淡入

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

$(“div”).fadeIn();

// 淡出

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

$(“div”).fadeOut;

// 淡入淡出切换

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

②渐进方式调整到指定的不透明度

语法：

// 修改透明度 这个速度和透明度必须写

fadeTo(speed,opacity,[easing],[fn])

参数：

• opacity ：透明度必须写，取值 0~1 之间

• speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写

$(“div”).fadeTo(1000,0.5)

淡入效果

淡出效果

淡入淡出切换

修改透明度

2.3.5、jQuery自定义动画animate方法

语法：

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

参数：

• params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。

动起来

2.4、jQuery属性操作🔥

---

2.4.1、获取元素固有属性值prop()

所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。

语法：prop("属性")

prop(“属性”)

$(“a”).prop(“href”);

2.4.2、设置元素固有属性值

语法：prop("属性","属性值")

prop(“属性”,“属性值”)

$(“a”).prop(“title”,“我们都挺好~”);

2.4.3、获取元素自定义属性值

用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。

语法：attr("属性")

attr(“属性”) // 类似原生getAttribute()

$(“div”).attr(“index”);

2.4.4、设置元素自定义属性值

语法：attr("属性","属性值")

attr(“属性”,“属性值”) //类似原生setAttribute()

$(“div”).attr(“index”,4);

都挺好

我是div

123

2.4.5、数据缓存data()

data() 方法可以在指定的元素上存取数据,并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。

①附加数据语法

• 语法：data("name","value") 向被选元素附加数据

$(“span”).data(“uname”,“andy”);

②获取数据语法

• 语法：date("name") 向被选元素获取数据

$(“span”).data(“uname”);

// 这个方法获取data-index h5自定义属性，不用写 data- 返回的是数字型(2)

$(“div”).data(“index”);

同时，还可以读取H5自定义属性 data-index,得到的是数字型

123

2.5、jQuery内容文本值🔥

---

主要针对元素的内容还有表单的值操作

2.5.1 普通元素内容html()

相当于原生innerHTML

语法：

• 获取元素的内容：html()

• 设置元素的内容：html("内容")

$(“div”).html();

$(“div”).html(“123”);

// 获取过来的带的标签 123

2.5.2、普通元素文本内容text()

相当于原生innerText

语法：

• 获取元素的文本内容：text()

• 设置元素的文本内容：text("文本内容")

$(“div”).text();

$(“div”).text(“123”);

// 123

// 获取过来的不带标签 123

2.5.3、获取设置表单值 val()

语法：

• 获取表单的的值：val()

• 设置表单的值：val("内容")

$(“input”).val();

$(“input”).val(“请输入内容~~~”);

我是内容

2.6、jQuery元素操作🔥

---

主要是遍历，创建，添加，删除元素操作

2.6.1、遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同操作，就需要用到遍历

①语法一

• 语法一：

// 语法一

$(“div”).each(function(index,domEle){xxx;})

• each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个

• 里面的回调函数有2个参数: index是每个元素的索引号,demEle是每个DOM元素，不是jQuery对象

• 所以想要使用jQuery方法，需要给这个dom元素转换为jquery对象 $(domEle)

②语法二

• 语法二：

// 语法二

$.each(Object,function(index,element){xxx;})

• $.each() 方法可用于遍历任何对象，主要用于数据处理,比如数组,对象

• 里面的函数有2个参数: index 是每个元素的索引号,element遍历内容

1 2 3

2.6.2、创建元素

语法：

$(“

• ”);

  // 动态创建一个li标签

  var li = $(“

• 我是后来创建的li
• ”);

  var div =$(“

  我是后来的div ”)

  2.6.3、添加元素

  ①内部添加

  语法：

  • 把内容放入匹配元素内部最后面：element.append("内容")

  • 把内容放入匹配元素内部最前面：element.prepend("内容")

  // 1.内部添加

  element.append(“内容”)

  $(“ul”).append(li);

  // 把内容放入匹配元素内部最后面，类似原生appendChild

  element.prepend(“内容”)

  $(“ul”).prepend(li);

  // 把内容放入匹配元素内部最前面

  ②外部添加

  语法：

  • 外部添加把内容放到目标元素后面：element.after("内容")

  • 外部添加把内容放到目标元素前面：element.before("内容")

  // 2.外部添加

  element.after(“内容”);

  $(“.test”).after(div);

  // 把内容放入目标元素后面

  element.before(“内容”);

  // 把内容放入目标元素前面

  • 内部添加元素，生成之后，它们是父子关系

  • 外部添加元素，生成之后，它们是兄弟关系

  2.6.4、删除元素

  语法：

  • 删除匹配的元素(本身)：element.remove()

  • 删除匹配的元素集合中所有的子节点：element.empty()

  • 清空匹配的元素内容：element.html("")

  1.element.remove() //删除匹配的元素(本身)

  $(“ul”).remove();

  2.element.empty() //删除匹配元素里面的子结点(孩子)

  $(“ul”).empty();

  3.element.html(“”) //删除匹配元素里面的子结点(孩子)

  • remove 删除元素本身

  • empt() 和 html(“”) 作用等价，都可以删除元素黎曼的内容，只不过 html 还可以设置内容。
• 原先的li
• 我是原先的div