羽翼丶年华

# 3.jQuery常用API

# 3.1 jQuery 选择器

# 3.1.1 jQuery 基础选择器

原生js获取原生方式很多，很杂，而且兼容性情况不一致，因此jQuery做了封装，使得获取元素统一标准

$("选择器")	// 选择器直接写CSS选择器即可，但是需要引号

$('#divID')	// ID选择器
$('.divclass')	// class选择器
$('div')	// 标签选择器
$('div>span')	// 子代选择器
$('div p')	// 后代选择器

# 3.1.2 jQuery 隐式迭代

jQuery 设置样式: $('div').css('属性','值')

<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>

$('div').css('background','blue');

会发现，所有的div的背景色都发生了改变，在原本的js中，本该使用for循环进行遍历，一个个将div的样式进行修改

这就是jQeury的隐式迭代

遍历内部DOM元素(为数组形式存储)的过程叫做隐式迭代

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

# 3.1.3 jQuery筛选选择器

语法 用法 描述
:first $('li:first') 获取第一个li元素
:last $('li:last') 获取到最后一个li元素
:eq(index) $('li:eq(2)') 获取到li元素中，选择索引号为2的元素，索引号index从0开始
:odd $('li:odd') 获取到的li元素中，选择索引号为技术的元素
:even $('li:even') 获取到的li元素中，选择索引号为偶数的元素

# 3.1.4 jQuery筛选方法

语法 用法 说明
parent() $('li').parent() 查找父级
children() $('li').children('span') 相当于$('li>span'),最近一级
find(selector) $('li').find('span') 相当于$('li span')，后代选择器
siblings(selector) $('.first').siblings('li') 查找兄弟节点，不包括自身
nextAll[expr] $('.first').nextAll() 查找当前元素之后的所有同辈元素
prevtAll[expr] $('.first').prevAll() 查找当前元素之前所有同辈元素
hasClass(class) $('div').hasClass('.first') 检查当前的元素是否含有某个特定的类，如果有，返回true
eq(index) $('li').eq(2) 相当于$('li:eq(2)')，index从0开始

# 3.1.5 jQuery中的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其他兄弟元素清除样式

<body>
	<button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <script>
    	$(function () {
            // 隐式迭代
            $('button').click(function () {
               // 当前的元素变化背景颜色
                $(this).css('background','blue');
               // 其余的兄弟去掉背景颜色
                $(this).siblings('button').css('background','');
            });
        })
    </script>
</body>

# 3.2 jQuery 样式操作

# 3.2.1 操作css方法

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

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

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

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

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

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

$(this).css({'color':'red','background':'orange'});
$(this).css({
    width: 300,
    height: 300,
    // 如果是复合属性则必须采用驼峰命名法，如果值不是数字，则需要加引号
    backgroundColor: 'orange'
});

# 3.2.2 设置类样式方法

作用等同于以前classLIst，可以操作类样式

1.添加类

$('div').addClass('div-box');
// 需要注意，类名不需要 .

2.删除类

$('div').removeClass('div-box');

3.切换类

$('div').toggleClass('div-box');

# 3.2.3 类操作与className 区别

原生js中 className 会覆盖元素原先里的类名(原先的类没了)

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

# 3.3 jQuery效果

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

  1. 显示隐藏(show，hide，toggle)
  2. 滑动(slideDown，slideUp，slideToggle)
  3. 淡入淡出(fadeIn，fadeOut，fadeToggle，fadeTo)
  4. 自定义动画(animate)

# 3.3.1 显示隐藏效果

1.显示语法规范

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

2.显示参数

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

3.隐藏语法规范

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

4.切换

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

# 3.3.2 滑动效果

1.下滑效果语法

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

2.上滑效果语法

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

3.滑动切换

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

# 3.3.3 事件切换

hover([over,]out)
  1. over 鼠标移动到元素上要出发的函数，相当于 mouseenter
  2. out 鼠标移出元素要出发的函数，详单与 mouseout
$('.nav>li').hover(function () {
    $(this).children('ul').slideDown(200);
}, function () {
    $(this).children('ul').sildeUp(200);
})

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

$('.nav>li').hover(function(){
	$(this).children('ul').slideToggle(200);
})

# 3.3.4 滑动效果的问题解决

1.动画或效果队列

当我们给一个元素设置好了滑动效果之后，如果我们多次快速的触发这个效果，会发现效果会按照触发的次数来执行，出现不好的交互效果

这种现象，叫做 多个动画或效果队列

2.停止排队

stop()
  1. stop()方法用于停止动画或效果
  2. 注意: stop()写道动画或效果的前面，相当于停止结束上一次的动画
$('.nav>li').hover(function (){
	$(this).children('ul').stop().slideToggle();
});

# 3.3.5 淡入淡出效果

1.淡入

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

2.淡出

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

3.切换

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

4.修改透明度

fadeTo(速度,透明度)

# 3.3.6 自定义动画

1.语法

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

2.参数

  1. params: 想要更改的样式属性，以对象的形式传递，必写。属性名可以不用带引号，如果是符合属性则需要采用驼峰命名法——borderLeft。其余参数可省。
  2. 其他参数与上文相同
$('div').animate({
	left: 500,
	top: 300,
    opacity: 0.4,
    width: 200,
    height: 100
},500);

# 3.4 jQuery 属性操作

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

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

// 获取
console.log($('a').prop('href'));
console.log($('input').prop('checked'));
// 设置
$('a').prop('href','http://www.baidu.com/');

# 3.4.2 设置或获取元素的自定义属性 attr()

<div index='1' data-index="2"></div>

console.log($('div').attr('index'));
console.log($('div').attr('data-index'));

# 3.4.3 数据缓存data()

这里的数据是存放在元素的内存里

<span>23333</span>
<div data-index='2'></div>

$('span').data('name','Wing');
console.log($'span').data('name');
console.log($'div').data('index');

# 3.5 内容文本值

# 3.5.1 普通元素内容 html()

相当于原生 inner HTML

<div><span>23333</span></div>

console.log($('div').html());	//获取内容
$('div').html('6666');	//设置文本内容

# 3.5.2 普通元素文本内容 text()

相当于原生 inner Text

<div><span>23333</span></div>

console.log($('div').text());
$('div').text('66666');

# 3.5.3 表单值 val()

相当于原生 value

<input type="text" value="请输入内容">

console.log($('input').val());
$('input').val('2333');

# 3.6 元素操作

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

# 3.6.1 遍历元素

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

语法1：

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

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

2.里面的回调函数有两个参数：index是索引号; domEle是每个DOM元素对象，不是jQuery对象

3.如果想要使用jQuery方法，需要给这个don元素转换为jQuery对象 $(domEle)

var arr = ['red', 'blue', 'green'];
$('div').each(function(index,domEle) {
	$(domEle).css('color', arr[index]);
})

语法2：

主要用于遍历数据，处理数据

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

举例：

var arr = ['red', 'blue', 'green'];
$.each(arr,function(index,domEle){
	console.log(index);
    console.log(domEle);
})

# 3.6.2 创建元素

语法：

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

动态创建了一个li标签

var sp = $('<span>我是创建的span</span>')；

# 3.6.3 添加元素

# 1.内部添加

element.append('内容');

$('div').append(sp);

append() 是把内容放入匹配元素内部最后面，类似于原生 appendChild

$('div').prepend(sp);

prepend() 是把内容放在匹配元素内部最前面

# 2.外部添加

element.after('内容');	// 把内容放入目标元素后面
element.before('内容');	// 把内容放入目标元素前面

# 2.6.4 删除元素

element.remove();	//删除匹配的元素(本身)
element.empty();	//删除匹配的元素结合中所有的子节点
element.html('');	//清空匹配的元素内容

示例:

<div>
	<span>2333</span>
</div>

$('div').remove();	// 直接移除 div 元素
$('div').empty();	// 移除的是 span 元素
$('span').html('');	// span中的内容清空
更新时间: 6/26/2021, 4:23:50 PM

← 4.jQuery事件 →