Jquery笔记01
jQuery是一个JS库 其中的 $ 就是一个函数
如果传入一个匿名函数,就是入口函数, 在DOM树加载完成后会立即执行。(类似于window.onload()
)
$(function () {
})
如果传入一个DOM对象,会转换成JQuery对象 $(Dom对象)
jQuery方法必须用jQuery对象调用!
text()方法:
$(box).text();
传入一个选择器形式的字符串,会获取元素对应的对象,并包装成jQuery对象:
$('.test p')
多个会返回伪数组,
0: 对象1
1: 对象2
…
jQuery对象是DOM对象的包装集
筛选选择器:(是方法)
$('#box').children('选择器 (若省略则返回所有的子元素伪数组)');//常用
$('#box').find('选择器') //相当于后代选择器
$('#box').siblings('选择器(传回符合要求的所有兄弟,不传参数返回所有兄弟)')
注册事件
$('.box').mouseenter(function () {
$(this).children('ul').show();//this 返回dom对象
})
//注意与webAPI区分,在jquery中不带on,直接就是mouseenter / click 等
$('.box').mouseleave(function () {
$(this).children('ul').hide();//this 返回dom对象,所以用$包装
})
$('li').eq(2); //找li里面的第3个对象(下标为2),返回jquery对象。
$('li').eq(2).next();//找li里面的第4个对象,返回jquery对象
$('li').eq(2).next().index();//返回元素的对应下标
index()详解
$(selector).index(element) ;
获得element相对于selector的 index 位置。该元素可以通过 DOM 元素或 jQuery 选择器来指定。
$(selector).index();//找自己在自己组的下标,与其他组无关
$(this).css('bacgroundColor','pink').siblings().css('backgroundColor' , '');
$(this).css('bacgroundColor' , 'pink')//返回的是jQuery对象
JQ的链式语法,可以很方便的进行系列的操作,
$(this).children('div').show().parent().siblings().children('div').hide();
$(this).children('div') //返回的是点击的 div
$(this).children('div').show() //返回的还是这个 div
jQuery对象转换为DOM对象##:
($(selector)).get(index);
($(selector))[0];
不常用的一些方法:
$('li:odd')//返回奇数
$('li:event')//返回偶数
$('li:eq(2)')//返回下标为2的