jq 筛选选择器,方法,隐式迭代 元素显示隐藏 淡入淡出 上拉下拉 动画 类名操作以及样式
Posted article-record
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jq 筛选选择器,方法,隐式迭代 元素显示隐藏 淡入淡出 上拉下拉 动画 类名操作以及样式相关的知识,希望对你有一定的参考价值。
jQuery
地址:https://jquery.com/ 历史版本:http://code.jquery.com/
1.x:兼容 IE678 低版本浏览器
2.x:不兼容 IE678 低版本浏览器
3.x:不兼容 IE678 低版本浏览器,官方主要维护版本
入口函数
// 一下两种入口函数 相当于原生中的 DOMContentLoaded
$(function () { /* DOM加载完成的入口*/ })
$(document).ready(function(){ /* DOM加载完成的入口*/ })
jquery对象和DOM对象
1,用原生js获取的对象就是 dom 对象
2,用jquery方法获取的对象就是 jquery对象
3,jquery对象的本质是,利用 $ 对DOM对象包装后产生的对象(伪数组形式存储)
对象的相互转换
DOM转Jquery
$(element)
jquery转DOM
$(ele).get(0); $(ele)[0];
隐式迭代
遍历内部DOM元素(伪数组形式存储)的过程叫做隐式迭代
简单理解:给匹配到的元素进行循环遍历,执行响应的方法,而不用我们再次循环,简化操作
// 所有的div背景改为红色; $(‘div‘).css(‘backgroundColor‘, ‘red‘); // 如果只有属性没有值,则代表获取这个属性的样式值 $(‘div‘).css(‘backgroundColor‘); // 修改多个的情况下传入对象即可 $(‘div‘).css({width: 100,height: ‘200px‘,backgroundColor: ‘red‘}); // 添加类名 $(‘div‘).addClass(‘current‘); // 不用加点 . // 删除类名 $(‘div‘).removeClass(‘current‘); // 切换类名 如果有就删除,没有就加上 $(‘div‘).toggleClass(‘current‘);
jquery 筛选选择器
语法 | 用法 | 描述 |
---|---|---|
:first |
$(‘ul li:first‘) |
获取第一个li元素 |
:last |
$(‘ul li:last‘) |
获取最后一个li元素 |
:eq(index) |
$(‘ul li:eq(2)‘) |
获取索引为2的li元素,0开始 |
:odd |
$(‘ul li:odd‘) |
获取ul中li为奇数的元素 |
:even |
$(‘ul li:even‘) |
获取ul中li为偶数的元素 |
Jquery 筛选方法
语法 | 用法 | 说明 |
---|---|---|
parent() |
$(‘li‘).parent() |
查找父级最近的父级 1 |
children() |
$(‘ul‘).children(‘li‘) |
查找子级最近的第一个子级 1 |
find() |
$(‘ul‘).find(‘li‘) |
查找所有的子级 1 |
siblings() |
$(‘ul .item‘).siblings(‘li‘) |
查找除了自身所有的兄弟节点li的元素 1 |
nexrAll() |
$(‘.first‘).nextAll(‘li‘) |
查找当前元素下面的所有兄弟元素不包含自身 |
prevAll() |
$(‘.last‘).prevAll(‘li‘) |
查找当前元素上面的所有兄弟元素不包含自身 |
hasClass() |
$(‘div‘).hasClass(‘className‘) |
判断当前元素是否有指定类名,true。false |
eq(index) |
$(‘div‘).eq(2) |
相当于$(‘div:eq(2)‘) index 从0开始 1 |
$(‘li‘).index(); |
返回当前元素的索引号 1 |
显示隐藏,上拉下拉,淡入淡出
/*
参数都可以省略
param1:三种预定速度之一的字符串 slow normal fast 默认normal 或者写数字 ms 例如 1000
param2:用来指定切换效果默认是 swing 可用参数 linear
param3:回调函数,动画完成后执行
fateTo() 方法特殊 opacity,param1 为必填,其他选填
*/
// 效果
$(‘li‘).hide(); // 隐藏元素
$(‘li‘).show(); // 显示元素
$(‘li‘).toggle(); // 点击隐藏,点击显示 切换
// 上拉下拉
$(‘li‘).slideDwon(); // 下拉
$(‘li‘).slideUp(); // 上拉
$(‘li‘).slideToggle(); // 切换
// 淡入淡出
$(‘li‘).fadeIn(); // 淡出
$(‘li‘).fadeOut(); // 淡入
$(‘li‘).fadeToggle(); // 切换
$(‘li‘).fadeTo(time, opacity) // 时间ms 透明度 0~1
动画队列以及停止的方法
jquery 中一旦动画一旦执行,如果多次触发,就会造成动画或者效果排队执行 可以通过 stop() 方法来停止排队;stop() 一定要卸载动画或者效果的前面,因为停止的是上一次的动画
$(‘li‘).stop().slideToggle(); // 结束上一次的动画
自定义动画 animate()
animate(params,[speed],[easing],[fn]);
1, params: 想要更改的样式属性,以对象的形式传递,属性名可以不带引号,如果是复合属性则需要驼峰命名法,其余参数都可以省略
2,speed: 三种预定速度之一的字符串 slow normal fast 默认normal 或者写数字 ms 例如 1000
3, easing: 用来指定切换效果默认是 swing 可用参数 linear
4, fn: 回调函数,动画完成后执行
$(‘div‘).animate({left: 100,top: ‘100px‘,opacity: 0.5,backgrounColor: ‘red‘});
以上是关于jq 筛选选择器,方法,隐式迭代 元素显示隐藏 淡入淡出 上拉下拉 动画 类名操作以及样式的主要内容,如果未能解决你的问题,请参考以下文章
学习04-jq(jq的使用,jq的入口函数,jq与DOM的转换,基本选择器,层级选择器,设置样式,筛选选择器,筛选方法)
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq
jQuery - 01. jQuery特点如何使用jQueryjQuery入口函数jQuery和DOM对象的区别jQuery选择器