jQuery 常用方法
排序
- eq() 方法
- jQuery 中获得的对象，内部包含选择的一组原生 js 对象，在 jQuery 对象中会进行一个大的排序，这个排序与原来的 HTML 结构没有关系。
- eq() 方法在 jQuery 对象中通过下标获取某个对象，下标是 jQuery 对象中的大的排序的下标。
let $ps = $('p'),$ps.eq(0).css('background-color', 'red')
- index() 方法
jQuery 对象调用 index() 方法时，得到的是它自己在 HTML 结构兄弟中的下标位置,不是得到对象。与 jQuery 大排序没有关系。
$ps.index()
排他思想
在一些事件中，希望自己是特殊的，而它的兄弟们是默认的。
排他方法
jQuery 中可以让 this 特殊设置，让兄弟 siblings 设置成默认。
- Tab 栏特效中的排他
- 自己的级别的排他：给自己this添加 current 类名，让其他的兄弟删除 current 类。
- 对应的部分的排他：给对应位置的元素添加 current，其他的兄弟删除 current 类。
- 找对应关系，使用的是自己的 index() 下标，让另一组中下标相同的项作为对应项。
- 通过选中另一组的对应项利用 eq() 方法选择下标项。
jQuery 操作标签的内容
-
html() 方法
html() 方法相当于原生 JS 中的 innerHTML 属性，用来获取或设置标签内部内容。 方法可以传递一个参数，自定义的字符串内容。- 获取：文本和内部标签（只获取到第一个元素的内容）
语法：jQuery对象.html(); - 设置：若设置标签时，标签会被渲染（会批量更改选择的所有元素）
语法：jQuery对象.html(‘文本内容’);
- 获取：文本和内部标签（只获取到第一个元素的内容）
-
text() 方法
相当于原生 JS 中的 innerText 属性，用来获取或设置标签内部文字- 获取：仅仅是文本（获取到所有元素的内容）
语法：jQuery对象.text(); - 设置：若设置标签时，标签会被当做普通文本（会批量更改选择的所有元素）
语法：jQuery对象.text(‘文本内容’);
- 获取：仅仅是文本（获取到所有元素的内容）
-
val() 方法
val() 方法相当于原生 JS 中的 value 属性，用来获取或设置 表单元素的内容。- 获取：表单元素的 value
语法：jQuery对象.val(); - 设置：表单元素的value
语法：jQuery对象.val(‘文本内容’);
注意：
textarea 可以用这三个方法
select获取到的是当前选中项的value，设置时是修改选中的项
option获取到的是第一项的value，设置时是修改所有的value - 获取：表单元素的 value
jQuery 操作标签的属性
-
attr() 方法
attr：全称 attribute，属性的意思。
作用：用来获取或者设置标签的属性值。- 设置标签的属性(可以设置自定义属性)
语法：jQuery对象.attr(name,value);
let $ps = $('p');$ps.attr('class', 'para') - 获取标签属性值
语法：jQuery对象.attr(name);
- 设置标签的属性(可以设置自定义属性)
-
removeAttr() 方法
作用：移除标签的属性
语法：removeAttr(name);
$ps.removeAttr('class') -
prop() 方法
针对：selected、checked、disabled 等表单元素的属性。此类属性的属性值与属性名相同。- 获取语法：$(‘input’).prop(‘属性名’);
- 设置语法：$(‘input’).prop(‘属性名’,值);
<input type="button" disabled='disabled' class='btn'> <input type="checkbox" checked='checked' class="choose"> <script> // 原生js 用这种方法设置或者删除 let btn = document.getElementById('btn') // false表示没有这个属性，true则为有 btn.disabled = false // btn.removeAttribute('disabled') 这种方法也可以移除属性 // jq 中采用如下方法 let $btn = $('.btn'), $choose = $('.choose') //获取时，打印结果为true或false，如果设置了就是true，没设置就是false console.log($btn.prop('disabled')); console.log($choose.prop('checked')); // 设置方法 $btn.prop('disabled',false) $btn.prop('disabled',true) </script>
jQuery 操作样式方法
-
css() 方法
- 用于调用 css 属性值或者更改 css 属性值。
- 语法：jQuery对象.css(name,value);
- 参数1：字符串格式的 css 样式属性名
- 参数2：设置或更改的属性值。
注意:
- 一个参数：表示调用 css 属性的值，得到的是某个元素的计算后样式，值为字符串格式。
- 两个参数：表示设置 css 样式属性，第二个参数可以是字符串格式的属性值，如果带单位的数字的 属性值，可以写成带单位的字符串格式、不带单位的字符串、纯数字、带 += 等赋值运算的字符串。
let $div = $('div') $div.css('width', '100px') $div.css('width', '100') // 可以不带单位 $div.css('width', 100) //表示在原来的宽度上加100 $div.css('width', '+=100')- css() 方法的第一个参数，复合属性的单一属性写法可以是驼峰命名法，也可以是横线写法。
- 可以给同一个对象同时设置多条 css 属性，将多条属性的属性和属性值写成对象格式，传给 css() 的参数
$div.css({ 'width': '+=100', 'height': 300, // 驼峰命名和横线写法都可以 'background-color': 'red', 'backgroundColor': 'yellow' })
jQuery 操作类名方法
优点：三个方法只操作参数部分的类名，不影响原有的其他类名
-
addClass() 添加类名
- 语法：jQuery对象.addClass(‘类名’)
- 参数：字符串格式的类名。
let $div = $('div');$div.addClass('blue')
-
removeClass() 移除类名
- 删除指定的类名
- 语法：jQuery对象.removeClass();
$('div').removeClass('blue') - 参数：字符串格式的类名。
- 不传参数，表示删除所有的类名
$('div').removeClass()
-
toggleClass() 类名切换
- 若这个类名存在，则会移除该类名。否则添加该类名
- 语法：jQuery对象.toggleClass(‘类名’);
- 参数：字符串格式的类名。
-
hasClass()
检测类名是否存在- 语法：jQuery对象.hasClass(‘类名’);
- 返回值：true 和 false
jQuery 常用事件方法
- jQuery 对象封装了一系列的事件方法。
- 事件方法与原生 JS 事件方法名称类似，不需要写 on。
- 事件方法需要 jQuery 对象打点调用，小括号内的参数是事件函数。
- 例如点击事件：click() 方法
- mouseenter() 方法
- jQuery 中自己的事件方法。
- 鼠标进入一个元素触发的事件。
- mouseleave() 方法
- jQuery 中自己的事件方法。
- 鼠标离开一个元素触发的事件。
- 对比 注意：
mouseenter 和 mouseleave 没有事件冒泡。
在使用时替换 mouseover 和 mouseout 更加合适。
- hover() 方法
- hover 事件相当于将 mouseoenter 和 mouseleave 事件进行了合写。
- 参数：有两个参数，第一个参数是鼠标移上执行的事件函数，第二个参数是鼠标离开执行 事件函数。
jQuery 关系查找方法
- $(this) 自己
在原生的 DOM 操作中，事件函数内部有一个 this 关键字指向的就是触发事件的事件源，在 jQuery 中将 this 关键字传递给 $() 方法，得到就是指向自己的 jQuery 对象，就可以使用 JQ 的方法。 - parent() 父级
- jQuery 对象都有一个 parent() 方法，得到的是自己的父亲级。
- 父级得到的也是一个 jQuery 对象，直接继续打点调用 JQ 方法和属性
- children() 子级
- jQuery 对象内部有一个 children() 方法，可以得到自己的所有子级元素组成的 jQuery 对象。
- 得到的子级组成的 jQuery 对象可以继续调用 JQ 方法和属性。
- 获得子级时，不限制标签类型。
- children() 可以传参数：参数是字符串格式的选择器，在选中所有子级的情况下，保留满足选择器的部分，进行了二次选择。
- siblings() 兄弟
- jQuery 对象通过调用 siblings() 方法可以得到除了自己以外的所有同级元素（兄弟）组 成 jQuery 对象，找到的只能是亲的兄弟，不能是叔叔家的兄弟。
- siblings() 方法得到的 jQuery 对象可以进行二次选择，通过给参数传递字符串格式的选择器
- 得到 jQuery 对象可以继续使用 JQ 的方法和属性。
链式调用
- jQuery 对象调用任何方法（除了节点关系方法）执行完后，方法都会有一个返回值，返回 值就是 jQuery 对象自己，这个现象给我们提供了便利，可以对执行结果继续打点调用 JQ 的方法和属性。
- 可以使用 jQuery 对象进行连续打点调用。
jQuery 其他关系查找方法
- find() 后代元素
- jQuery 对象可以利用 find() 方法，传递一个参数，参数部分规定的选择器，查找范围是 jQuery 对象的所有后代。
- 参数是字符串格式的选择器。
- 兄弟元素 紧邻的兄弟元素方法
- next() 下一个兄弟
- prev() 前一个兄弟 多选方法
- nextAll() 后面所有兄弟
- prevAll() 前面所有兄弟
- 通过传递参数可以进行二次选择，参数是字符串格式的选择器，在前面或后面兄弟中选中符合选择器规定的部分。
- parents() 祖先级
- 通过该方法得到的是指定对象的包含 body 在内的所有祖先级元素组成的 jQuery 对象。
- 通过传参进行二次选择，参数位置是字符串格式的选择器
遍历
jQuery 对象进行的操作都是批量操作，批量操作只能执行一些简单的效果。如果想对 JQ 对象中的每一个元素以及内部的后 代元素进行一些复杂操作，程序很难执行
-
each()
- 参数是一个函数。
- 作用：就是对 jQuery 对象中的元素每一个都执行函数内部的操作。
- each 方法的基本原理就是 for 循环，从对象的下标为 0 的项一直遍历到最后一项，然后 对每一项进行操作。
- 优点：
each 的函数内部，也有一个 this，指向的是进来遍历的每一次的元素。
each 的函数可以传一个参数 i，i 表示的是这一次的遍历对象在整体的 jQuery 对象大排队中的下标位置。
let $div = $('div'); $div.each(function (i) { // i记录的是当前遍历的元素在大排序中的位置,需要写在形参位置 console.log(i); // each 参数内的函数有一个this，指向的是每一次遍历的元素 $(this).children().eq(2).css('background-color', 'yellow') })- 案例 表格隔列变色
jQuery 切换效果方法
-
hide() 和 show() 方法
- hide()：元素隐藏，隐藏的前提是元素设置 display:block；
- show()：元素显示，显示的前提是元素 display:none;
- toggle()：在元素隐藏和显示之间进行切换。
- 这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画。
- 如果不传参数：直接显示和隐藏，没有过渡动画。
- 如果传递参数：有过渡效果。过渡时间内，伴随着宽度和高度以及透明度的变化。
单词格式：“slow”,“normal”, “fast”
数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画。
-
slideDown() 和 slideUp() 方法
滑动 显示隐藏,让元素在 display 属性的 block 和 none 之间进行切换- slideDown()：滑动显示（方向不一定）
- slideUp()：滑动隐藏
- slideToggle()：滑动切换
- 如果不传参数：默认的过渡时间为 400 毫秒。
- 如果传递参数：
单词格式：“slow”,“normal”, “fast”
数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画。
let $div = $('div'); // 收到左上角消失 $div.hide('slow') // 从左上角扩大显示 $div.show('fast') // 收到上面 消失 $div.slideUp() // 从上面放下来 显示 $div.slideDown('slow')- 注意：
- 如果滑动的元素没有设置宽高，没有滑动效果，会和hide和show一样，是收缩到左上角。
- 如果元素设置了高度和宽度，会进行上下垂直方向的滑动。
- 动画的效果：高度属性在 0 到设置值之间的变化，没有透明度动画。
- 如果元素设置了定位（fixed或absolute），偏移量方向如果是 bottom 参与了，滑动方向会发生变化。会收到下方隐藏或者从下方向上显示。
-
淡入淡出 fadeIn() 和 fadeOut() 方法
- 动画效果，执行的是透明度动画。也是在 display 属性的 block 和 none 之间切换。
- fadeIn()：淡入，透明度逐渐增大最终显示。
- fadeOut()：淡出，透明度逐渐降低最终隐藏。
- fadeToggle()：切换效果。
- fadeTo()：淡入或淡出到某个指定的透明度。
fadeTo(400,0.5)第一个参数为时间，第二个参数是透明度 - 如果不传参数：默认的过渡时间为 400 毫秒。
- 如果传递参数：
单词格式：“slow”,“normal”, “fast”
数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画。
动画方法
-
animate() 方法
- 作用：执行 CSS 属性集的自定义动画。
- 语法：$(selector).animate(styles,speed,easing,callback)
- 参数1： 对象形式的 css 的属性名和运动结束位置的属性值的集合。
- 参数2：可选，规定动画的速度，默认是 “normal”。其他值，“slow”、“normal”、 “fast”，数字格式，单位为毫秒。
- 参数3：可选，规定在不同的动画点中设置动画速度的 easing 函数，值包含 swing 和 linear。
- 参数4：可选，animate 函数执行完之后，要执行的函数。
- 注意：其他的运动方法比如 slideUp() 等，也有参数3 和参数4.
let $div = $('div'); $div.animate({ "width": 500, 'height': 500 }, 2000, 'swing', function () { $div.css('background-color', 'grey') }) // swing 表示变速运动 // 如果绑定事件，那么函数内的$(this)指向就是事件源 -
动画排队
- ①同一个元素对象身上，如果定义了多个动画，动画会排队等待执行。
- ③如果是的其他非运动的代码，不会等待运动完成。
- ②如果是不同的元素对象都有动画，不会出现排队机制。
- ④之前学习的自带动画的显示隐藏方法，如果设置给同一个元素，也有动画排队。
- 同一个元素身上的运动，可以简化成链式调用的方法。
$('div').fadeIn().fadeOut().fadeIn().fadeOut()
-
delay() 延迟方法
- delay：延迟的意思。
- 将 delay() 设置在某个运动方法之前，表示后面的运动要在规定的时间之后再执行，有延迟运动的效果。
- 参数：时间的数值，表示延迟的时间。
- 除了 animate 方法之外，其他的运动方法也有延迟效果。
$('div').delay(2000).fadeIn().fadeOut().fadeIn().fadeOut()
-
stop() 停止动画方法
设置元素对象身上的排队的动画以何种方式进行停止。- 有两个参数，都是布尔值。
- 参数1：设置是否清空后面的动画排队，如果是 true 表示清空，如果是 false 表示不清 空只停止当前的一个动画。
- 参数2：设置当前动画是否立即完成，如果是 true 表示立即完成，对象会立刻走到结束位 置，如果是 false 表示不完成当前动画，立即停止在当前位置。
- 默认情况下，两个参数值默认值为 false。
- 根据两个参数的值，可以得到四种停止方式。
- 实际工作中，一般要求清空后面的排队，停止在当前位置，多使用 stop(true),第二个参数不设置默认为 false
-
清空动画排队
如果将开启运动的程序放在一个事件函数中，事件多次被触发，会执行多次函数，就会在一个元素身上添加了多个动画，会进行动画排队。所以需要去清除排队的动画，进行防骚扰操作。- 方法1 利用 stop() 方法。
在每一个运动函数之前都增加一个 stop(true)，表示在运动执行之前，会将前面排队的动 画清空，然后停止在当前位置。 - 方法2
1.利用函数节流方法，如果元素在运动，直接 return，不要执行后面的运动代码。
2.每个 jQuery 对象，都能调用一个 is() 方法，作用是显示元素对象的某种状态。
3.如果参数位置是 is(":animated"),返回值是布尔值，true 表示正在运动，false 表示没有运动。
- 方法1 利用 stop() 方法。
扫一扫
217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
