@

• 1. jQuery 选择器
  • 基础选择器
  • 层级选择器
  • 筛选选择器
  • 筛选方法
• 2. jQuery 样式操作
  • 操作 css 方法
  • 设置类样式方法
• 3. jQuery 动画效果
  • ① 显示隐藏效果
    • show() 显示
    • hide() 隐藏
    • toggle() 显示隐藏切换
  • ② 滑动效果(动画)
    • slideDown() 下滑效果
    • slideUp() 上滑效果
    • slideToggle() 滑动切换效果
  • ③ 事件切换 hover()
  • ④ stop() 动画队列及其停止排队方法
  • ⑤ 淡入淡出效果
    • fadeIn() 淡出效果
    • fadeout() 淡入效果
    • fadeToggle() 淡入淡出切换效果
    • fadeTo() 渐进方式调整到指定的不透明度
  • ⑥ animate() 自定义动画
• 4. jQuery 属性操作
  • prop() 设置或获取元素固有属性值
  • attr() 设置或获取元素自定义属性值
  • data() 数据缓存
• 5. jQuery 内容文本值
  • html() 普通元素内容
  • text() 普通元素文本内容
  • val() 表单的值
• 6. jQuery 元素操作
  • ① each() 遍历元素
    • 语法1
    • 语法2
  • ② 创建元素
  • ③ 添加元素
    • append() / prepend() 内部添加
    • after() / before() 外部添加
  • ④ remove() / empty() 删除元素
• 7. jQuery 尺寸、位置操作
  • ① jQuery 尺寸
  • ② jQuery 位置
    • offset() 设置或获取元素偏移
    • position() 获取元素偏移
    • scrollTop() / scrollLeft() 设置或获取元素被滚动的头部和左侧
• 8. jQuery 拷贝对象
  • $.extend()

1. jQuery 选择器

基础选择器

jq获取节点元素对象统一标准

$("选择器") // 里面选择器直接写 CSS 选择器即可， 但是要加引号
//返回值为一个jquery对象，伪数组形式存储

层级选择器

筛选选择器

筛选方法

注意：

可以通过jq对象.index()访问被封装的jq对象中的每个节点对象的索引号

注意：只有同级元素它们之间的index从0开始排列

比如

<div>
	<a href="#">1</a>
	<a href="#">2</a>
	<a href="#">3</a>
    <button>4</button>
</div>
<ul>
	<li><a href="#">a</a></li>
	<li><a href="#">b</a></li>
	<li><a href="#">c</a></li>
</ul>
<script>
        $("div a").click(function() {
            console.log($(this).index());
            // 0 1 2
        })
    	console.log($("button").index());// 3
    
        $("ul a").click(function() {
            console.log($(this).index());
            // 0 0 0
        })
</script>

2. jQuery 样式操作

jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。

操作 css 方法

1. 参数只写属性名，则是返回属性值

   $(this).css("color");
   

2. 参数是属性名， 属性值，逗号分隔， 是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

   $(this).css("color", "red");
   

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

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

设置类样式方法

作用等同于元素对象的classList属性，可以操作类样式， 注意操作类里面的参数不要加点。

1. 添加类

   $("div").addClass("current");
   

2. 移除类

   $("div").removeClass("current");
   

3. 切换类

   $("div").toggleClass("current");
   

jquery类操作与className区别

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

 <div class="one"></div>

//通过className操作类名
var one = document.querySelector(".one");
one.className = "two";

//结果
// <div class="two"></div>

//通过jquery操作类名
//这个addClass相当于追加类名 不影响以前的类名
$(".one").addClass("two");  
//结果
// <div class="one two"></div>

3. jQuery 动画效果

① 显示隐藏效果

show() 显示

1. 语法规范

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

2. 参数说明

   • 参数都可以省略， 无动画直接显示或隐藏。
   • speed：三种预定速度之一的字符串("slow", "normal" , or "fast" )或表示动画时长的毫秒数值(如： 1000)。
   • easing： (Optional) 用来指定切换效果， 默认是“swing”， 可用参数“linear”。(动画函数)
   • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

hide() 隐藏

1. 语法规范

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

2. 参数说明

   和show()里的参数情况一样

toggle() 显示隐藏切换

1. 语法规范

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

2. 参数说明

   和show()里的参数情况一样

建议：上述三个发方法里的参数一般都不写，直接显示隐藏即可，如果带参数，那么就会以动画的效果来改变样式，看情况需要。

② 滑动效果(动画)

slideDown() 下滑效果

1. 下滑效果语法规范

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

2. 下滑效果参数

   参数与show()参数相同

slideUp() 上滑效果

1. 上滑效果语法规范

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

2. 上滑效果参数

   参数与show()参数相同

slideToggle() 滑动切换效果

1. 滑动切换效果语法规范

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

2. 滑动切换效果参数

   参数与show()参数相同

③ 事件切换 hover()

hover([over,]out)

• over:鼠标移到元素上要触发的函数（相当于mouseenter）
• out:鼠标移出元素要触发的函数（相当于mouseleave）
• 如果只写一个函数，则鼠标经过和离开都会触发它

④ stop() 动画队列及其停止排队方法

1. 动画或效果队列

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

2. 停止排队

   stop()
   

   • stop() 方法用于停止动画或效果，由作动画的元素对象调用。
   • 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。
   • 建议：每次使用动画之前，先调用 stop() ,在调用动画

⑤ 淡入淡出效果

fadeIn() 淡出效果

1. 语法规范

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

2. 参数说明

   与show()参数情况一样

fadeout() 淡入效果

1. 语法规范

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

2. 参数说明

   与show()参数情况一样

fadeToggle() 淡入淡出切换效果

1. 语法规范

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

2. 参数说明

   与show()参数情况一样

fadeTo() 渐进方式调整到指定的不透明度

1. 语法规范

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

2. 参数说明

   • 参数speed、easing、fn情况与show()一样
   • opacity： 元素对象目标透明度，取值 0~1 之间。

⑥ animate() 自定义动画

• 语法

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

• 参数

  • speed, easing, fn参数情况 与show()方法一样
  • params： 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采
    取驼峰命名法 borderLeft。

• 注意

  只有元素才能做动画，比如$(document)是不能做动画的

4. jQuery 属性操作

prop() 设置或获取元素固有属性值

所谓元素固有属性就是元素本身自带的属性

1. 获取属性语法

   prop("属性")
   

2. 设置属性语法

   prop("属性", "属性值")
   

注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。

attr() 设置或获取元素自定义属性值

1. 获取属性语法

   attr("属性")// 类似原生 getAttribute()
   

2. 设置属性语法

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

注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

data() 数据缓存

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

1. 附加数据语法

   data("name","value") // 向被选元素附加数据
   

2. 获取数据语法

   date("name") // 向被选元素获取数据
   

注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

<div data-index="2"></div>
<script>
	console.log($("div").data("index"));//2
</script>

5. jQuery 内容文本值

常见操作有三种：

• html()
• text()
• val()

分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。

html() 普通元素内容

$("div").html(); //获取元素的内容
$("div").html("内容") // 设置元素的内容

text() 普通元素文本内容

$("div").text(); // 获取元素的文本内容
$("div").text("文本内容"); // 设置元素的文本内容

​ 注意：html() 可识别标签，text() 不识别标签。

val() 表单的值

$("input").val() // 获取表单value属性的值
$("input").val("内容") // 设置表单value属性的值

6. jQuery 元素操作

jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。

① each() 遍历元素

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

语法1

$("div").each(function (index, domEle) { 
    //xxx; 
})

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

• 里面的回调函数有2个参数：

  index: 是每个元素的索引号;

  domEle: 是每个DOM元素对象，不是jquery对象

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

• 每遍历一个成员，执行一次回调函数。

语法2

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

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

• 里面的回调函数有2个参数：

  index: 每个成员的索引号;

  element: 索引号对应的每个内容

② 创建元素

语法：

$("<li></li>");

动态的创建了一个 <li>

③ 添加元素

append() / prepend() 内部添加

element.append("内容");
//把内容放入匹配元素内部最后面, 类似原生 appendChild。

appendChild(newchild)，如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置；当然，append也有这个特性。

element.prepend("内容");
//把内容放入匹配元素内部最前面。

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

after() / before() 外部添加

element.after("内容") // 把内容放入目标元素后面

element.before("内容") // 把内容放入目标元素前面

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

④ remove() / empty() 删除元素

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

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

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

• remove 删除元素本身。
• empt() 和 html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。

7. jQuery 尺寸、位置操作

① jQuery 尺寸

jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。

• 以上参数为空，则是获取相应值，返回的是数字型。
• 如果参数为数字，则是修改相应值。
• 参数可以不必写单位。
• 注意：有了这套 API 我们将可以快速获取和子的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。

② jQuery 位置

jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:

offset() 设置或获取元素偏移

• offset() 方法设置或返回被选元素相对于文档（document）的偏移坐标（top、left），跟父级没有关系。

• 该方法返回值为一个对象，这个对象有两个属性用来记录元素的偏移量

  Object{
      top: 00,
      left: 00
  }
  

  offset().top 用于获取距离文档顶部的距离， offset().left 用于获取距离文档左侧的距离。

• 可以设置元素的偏移： offset({ top: 10, left: 30 });

position() 获取元素偏移

• position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

• 该方法返回值与offset()的返回值一样

  position().top 用于获取距离定位父级顶部的距离， position().left 用于获取距离定位父级左侧的距离。

• 该方法只能获取无法设置。

scrollTop() / scrollLeft() 设置或获取元素被滚动的头部和左侧

• 方法不带参，则返回相对应的值

  $(selector).scrollTop();
  

• 方法带参，则设置相对应的值

  $(selector).scrollTop(200);//参数可不带单位
  

8. jQuery 拷贝对象

$.extend()

如果想要把某个对象拷贝（合并） 给另外一个对象使用，此时可以使用 $.extend() 方法

语法：

$.extend([deep], target, object1, [objectN])

参数说明

1. deep： 如果设为true为深拷贝，默认为false浅拷贝。
2. target：要拷贝的目标对象
3. object1：待拷贝到第一个对象的对象。
4. objectN：待拷贝到第N个对象的对象。

• 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。
• 深拷贝，前面加true， 完全克隆，修改目标对象不会影响被拷贝对象。

案例代码：

var targetObject = {
    id: 0,
    msg: {
        age: 20
    }
};
var Object1 = {
	id: 1,
    name: "andy",
    msg: {
        age: 18
    }
}    

//浅拷贝
$.extend(targetObject, Object1);
console.log(targetObject)
console.log(Object1)
/*
	//控制台输出
	targetObject {
		id: 1,
		name: "andy",
		msg: 地址值1
	}
	Object1 {
		id: 1,
    	name: "andy",
    	msg: 地址值1
	}
*/

//深拷贝
$.extend(true,targetObject, Object1);
console.log(targetObject)
console.log(Object1)
/*
	//控制台输出
	targetObject {
		id: 1,
		name: "andy",
		msg: 地址值2
	}
	Object1 {
		id: 1,
    	name: "andy",
    	msg: 地址值1
	}
*/