1. JQuery选择器
用于选取页面上的元素对象。JQuery选择器完全继承了css选择器的方式
JQuery选择器是学习JQuery的基础
Dom中如何获取页面中的元素对象? --三种方式
如何直接通过JQuery方式获取页面上的元素?(获取后直接就是一个JQuery对象)
id选择器 $('#id')
标签选择器 $('span')
类选择器 $('.cls')
标签 加 类 选择器 $('div.cls')
多条件选择器 $('h1,p,span')
层选择器 $('div span') --div中的所有span元素
$('div>span') --div中的所有直接的span元素
$('div+span') --div后面的第一个元素span
$('div~span') --div后面的所有的span标签
2. 获取兄弟元素的几个方法
next() 当前元素之后的紧邻着的第一个兄弟元素
nextAll() 当前元素之后的所有兄弟元素
prev() 当前元素之前的紧邻着的上一个兄弟元素
prevAll() 当前元素之前所有兄弟元素
siblings() 除了本身,其他的所有兄弟元素
3. JQuery的迭代(包装集)
如何判断对象是否存在,JQuery选择器返回的是一个对象数组,
调用text() html() click()之类方法的时候其实是对数组中每个元素迭代调用每个方法,
因此即便通过id选择的元素不存在也不会报错
如果需要判断指定的id是否存在,应该写
if($('#btn').length<=0){
alert('id为btn1的元素不存在!');
}
$('#id').length>0 用途:可以判断某个页面上的某个元素是否存在,如果存在则不用
重新创建;如果不存在则创建一个新的并显示(动态创建元素的时候用)
4. 链式编程的时候一定要注意在什么时候破坏了链
比如当前对象的传递,如使用nextAll(),则当前对象的传递被破坏了,
可以调用end()方法返回链被破坏前的对象
5. addClass('class') 添加样式 removeClass('class')移除样式
toggleClass('class')切换样式 hasClass('class') 判断是否应用了某种样式
6. 基本过滤选择器
获取第一个元素
$('p:first').css('backgroundColor','green');
$('p').first().css('backgroundColor', 'green');
获取最后的元素
$('p:last').css('backgroundColor', 'green');
$('p').last().css('backgroundColor', 'green')
偶数
$('p:even').css('backgroundColor', 'green');
奇数
$('p:odd').css('backgroundColor', 'green');
索引获取元素
$('p:eq(3)') --索引等于3的p
$('p:lt(3)') --索引小于3的所有p
$('p:gt(3)') --索引大于3的所有p
$('p:gt(2):lt(2)') --索引大于2 又小于2 (即原3,4)
Not
$('p:not(.class)')
设置header
$('h1,h2,h3,h4,h5,h6').css('backgroundColor', 'green');
//简单的写法
$(':header').css('backgroundColor', 'green');
7. 相对定位
不仅可以使用选择器进行绝对定位,还可以进行相对定位
只要在$()指定第二个参数,第二个参数为相对的元素
$(selector,context)
//取到表中每行的偶数列
$('td:even', $(this)).css('backgroundColor', 'red');
用于选取页面上的元素对象。JQuery选择器完全继承了css选择器的方式
JQuery选择器是学习JQuery的基础
Dom中如何获取页面中的元素对象? --三种方式
如何直接通过JQuery方式获取页面上的元素?(获取后直接就是一个JQuery对象)
id选择器 $('#id')
标签选择器 $('span')
类选择器 $('.cls')
标签 加 类 选择器 $('div.cls')
多条件选择器 $('h1,p,span')
层选择器 $('div span') --div中的所有span元素
$('div>span') --div中的所有直接的span元素
$('div+span') --div后面的第一个元素span
$('div~span') --div后面的所有的span标签
2. 获取兄弟元素的几个方法
next() 当前元素之后的紧邻着的第一个兄弟元素
nextAll() 当前元素之后的所有兄弟元素
prev() 当前元素之前的紧邻着的上一个兄弟元素
prevAll() 当前元素之前所有兄弟元素
siblings() 除了本身,其他的所有兄弟元素
3. JQuery的迭代(包装集)
如何判断对象是否存在,JQuery选择器返回的是一个对象数组,
调用text() html() click()之类方法的时候其实是对数组中每个元素迭代调用每个方法,
因此即便通过id选择的元素不存在也不会报错
如果需要判断指定的id是否存在,应该写
if($('#btn').length<=0){
alert('id为btn1的元素不存在!');
}
$('#id').length>0 用途:可以判断某个页面上的某个元素是否存在,如果存在则不用
重新创建;如果不存在则创建一个新的并显示(动态创建元素的时候用)
4. 链式编程的时候一定要注意在什么时候破坏了链
比如当前对象的传递,如使用nextAll(),则当前对象的传递被破坏了,
可以调用end()方法返回链被破坏前的对象
5. addClass('class') 添加样式 removeClass('class')移除样式
toggleClass('class')切换样式 hasClass('class') 判断是否应用了某种样式
6. 基本过滤选择器
获取第一个元素
$('p:first').css('backgroundColor','green');
$('p').first().css('backgroundColor', 'green');
获取最后的元素
$('p:last').css('backgroundColor', 'green');
$('p').last().css('backgroundColor', 'green')
偶数
$('p:even').css('backgroundColor', 'green');
奇数
$('p:odd').css('backgroundColor', 'green');
索引获取元素
$('p:eq(3)') --索引等于3的p
$('p:lt(3)') --索引小于3的所有p
$('p:gt(3)') --索引大于3的所有p
$('p:gt(2):lt(2)') --索引大于2 又小于2 (即原3,4)
Not
$('p:not(.class)')
设置header
$('h1,h2,h3,h4,h5,h6').css('backgroundColor', 'green');
//简单的写法
$(':header').css('backgroundColor', 'green');
7. 相对定位
不仅可以使用选择器进行绝对定位,还可以进行相对定位
只要在$()指定第二个参数,第二个参数为相对的元素
$(selector,context)
//取到表中每行的偶数列
$('td:even', $(this)).css('backgroundColor', 'red');