JQ内容整理

259 阅读1分钟

1、JQ入口函数

$(function(){})

2、JQ和JS转换

<!--JQ对象转换为Dom对象-->
$('div')[index]  /  $('div').get(index)

<!--Dom对象转换为JQ对象-->
$(Dom对象)       //不用加引号

3、JQ选择器

<!--基础选择器-->
ID选择器$('#id')
全选选择器$('*')
类选择器$('.class')
标签选择器$('div')
交集选择器$('div,p')
并集选择器$('div.ccc')      //找类名为ccc的div

<!--层级选择器-->
子代选择器$('ul>li') 
后代选择器$('ul li')

<!--筛选选择器-->
:first $('li:first')       //获取第一个
:last  $('li:last')       //获取最后一个
:eq  $('div').eq(index)       //获取div的下标值
:eq  $('div').eq(index)       //获取div的下标值
:gt  $('li:gt(1)')       //选取索引号大于1的元素 大于1,不包括1
:lt  $('li:lt(1)')       //选取索引号小于1的元素 小于1,不包括1

4、JQ样式操作

<!--css样式-->
$(this).css('属性名''属性值')

<!--追加样式-->
$(this).addClass('类名')            //添加样式
$(this).removeClass('类名')             //删除样式
$(this).toggleClass('类名')         //切换样式

5、显示、隐藏、切换

show()//显示
hide()//隐藏
toggle()//切换