JQuery基本操作 JQueryCSS操作 JQuery筛选选择器 JQuery筛选方法 JQuery效果

JQuery 基本使用

原生JS获取的对象就是DOM对象

JQuery方法获取的元素是JQuery对象  (伪数组形式存储)   不能使用原生Js的属性和方法

 

 

DOM对象转换为 JQuery 对象

$(DOM对象)

JQuery对象转换为DOM对象

$(DOM对象) [index].DOM属性方法

$(DOM对象).get(index).DOM属性方法

 

JQuery对象设置样式

$(对象).css('属性'，'值')

 

JQuery选择器  //隐式迭代 遍历所有匹配的元素

$( ' 选择器 ' )   //一定要加引号  括号里面直接写CSS选择器即可 要加描述符

$( this )  //当前元素  不加引号

JQuery筛选选择器

$('元素 : first') 获取第一个元素

$('元素 : last') 获取最后一个元素

$('元素 : eq(index)') 获取index索引号所对应的 //不推荐这个

$('元素 : odd') 获取索引号为奇数的

$('元素 : even') 获取索引号为偶数的

 

JQuery筛选方法

$('元素').parent()    查找父级  //亲爸爸 *

$('元素').parents()    可选择要查找的父级  //如果省略 就是遍历所有的父亲    

$('元素').children('要找的元素')  查找儿子 //亲儿子  *

$('元素').find('要找的元素')         迭代查找 //包括儿子和孙子 类似于后代选择器   *

$('元素').siblings('要找的元素')   除了自身元素的所有亲兄弟（不包括本身） *

$('元素').eq('索引号')     获取index索引号所对应的 //推荐这个  *

$('元素').hasClass('类名')   判断是否有哪个类名   有True 无False

 

JQuery操作CSS方法

$('元素').css('属性 ')    返回属性值

$('元素').css('属性','值')    设置一组样式   属性必须加引号 值如果是数字可以不用跟单位

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

如果是复合属性必须采取驼峰命名法

 

JQuery设置类样式方法（只针对类操作，不影响原来的类）

添加类 $('元素').addClass( ' 类名' )    //不加点 

删除类 $('元素').removeClass( '类名 ' )  

切换类  $('元素').toggleClass( '类名 ' )    有则取消 无则添加

 

JQuery效果

显示 show(speed,easing,fn)  //都可以省略

speed： 三种预定速度的字符串之一(fast,normal,slow)或动画时长的毫秒数值

easing:切换效果  默认swing     匀速linear

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

 

隐藏 hide(speed,easing,fn)  //都可以省略

speed： 三种预定速度的字符串之一(fast,normal,slow)或动画时长的毫秒数值

easing:切换效果  默认swing     匀速linear

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

 

滑动效果

下滑动 sildeDown(speed,easing,fn)        参数同上

下滑动 sildeUp(speed,easing,fn)             参数同上

滑动切换 sildeToggle(speed,easing,fn)   参数同上

 

淡入淡出效果

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

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

淡入淡出切换  fadeToggle([speed],[easing],[fn])

 

透明度 fadeTo(speed,opacity,easing,fn)

opacity 必须写 0-1之间

speed  必须写

 

 

自定义动画   只有元素才可以做动画

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

params 想要更改的样式属性，以对象形式传递 必须写 属性名可以不带引号  复合属性采用驼峰命名法 其他参数可省略

$("body,html")  //基于页面

事件切换 .hover(function(),function()) 

stop()方法  停止动画排队  但是必须写在动画前面 

 

第一个鼠标经过  第二个鼠标离开  如果只写一个函数 鼠标离开和经过都会触发

等待页面DOM加载完毕再执行js代码

$(function ( ){ })