jQuery学习笔记(一)——选择器

常规选择器:

1、$(‘#box‘)  ID选择器,获取一个ID为box的DOM对象

2、$(‘.box‘)  CLASS选择器,获取一个class为box的DOM对象

3、$(‘div‘)   元素名选择器,获取一个元素名为div的DOM对象

进阶选择器:

1、$(‘div,#box,.box‘)  群组选择器,获取元素名为div、ID为box、class为box的DOM对象

2、$(‘div #box‘)    后代选择器,获取div中ID为box的DOM对象    另一种写法$(‘div‘).find(‘#box‘)

3、$(‘*‘)      通配选择器,获取HTML中的所有元素的DOM对象

高级选择器:(IE6不支持)

1、$(‘div > p‘)  子选择器,获取div下子元素为p的DOM对象       另一种写法$(‘div‘).children(‘p‘)

2、$(‘div + p‘)  next选择器,获取div后面第一个 同级 P元素的DOM对象    另一种写法$(‘div‘).next(‘p‘)

3、$(‘div ~ p‘)  nextAll选择器,获取div后面所有 同级 p元素的DOM对象    另一种写法$(‘div‘).nextAll(‘p‘)

4、$(‘div‘).prev(‘p‘)  获取div前面最近 同级 P元素的DOM对象

5、$(‘div‘).prevAll(‘p‘)  获取div前面所有 同级 p元素的DOM对象

6、$(‘div‘).nextUntil(‘p‘)  获取div后面所有 同级 元素对象,遇到p元素停止

7、$(‘div‘).prevUntil(‘p‘)  获取div前面所有 同级 元素对象,遇到p元素停止

8、$(‘div‘).siblings(‘p‘)    获取div前后所有 同级 p元素

属性选择器:

1、$(‘div[name = user]‘)  获取name=user的div元素的DOM对象

过滤选择器:

1、基本过滤器:

  (1)$(‘li:first‘)       选取第一个元素      另一种写法$(‘li‘).first()

  (2)$(‘li:last‘)       选取最后一个元素      另一种写法$(‘li‘).last()

  (3)$(‘li:not(#box)‘)    选取ID不是box的li元素      另一种写法$(‘li‘).not(‘#box‘)

  (4)$(‘li:even‘)      选取索引是偶数的所有元素

  (5)$(‘li:odd‘)      选取索引是奇数的所有元素

  (6)$(‘li:eq(2)‘)      选取索引等于2的元素    另一种写法$(‘li‘).eq(2)

  (7)$(‘li:gt(2)‘)      选取索引大于2的元素

  (8)$(‘li:lt(2)‘)      选取索引小于2的元素

  (9)$(‘li:header‘)    选取标题元素h1~h6

  (10)$(‘li:animated‘)  选取正在执行动画的元素

  (11)$(‘li:focus‘)    选取当前被焦点的元素

2、内容过滤器:

  (1)$(‘div:contains("text")‘)   选取内容含有“text”的div元素

  (2)$(‘div:enpty‘)        选取不包含子元素或空文本的div元素

  (3)$(div:has(#box))      选取子元素含有ID为box的div元素

  (4)$(‘div:parent‘)      选取含有子元素或文本的div元素

  (5)$(‘li‘).parent()      选择当前元素的父元素

  (6)$(‘li‘).patents()      选择当前元素的祖先元素

  (7)$(‘li‘).parentsUntil(‘div‘)  选择当前元素的祖先元素直到遇到div为止

3、可见性过滤器:

  (1)$(‘div:hidden‘)    选取隐藏的div元素

  (2)$(‘div:visible‘)    选取可见的div元素

4、子元素过滤器:

  (1)$(‘li:first-child‘)    选取每个父元素的第一个li元素

  (2)$(‘li:last-child‘)    选取每个父元素的最后一个li元素

  (3)$(‘li:only-child‘)    选取每个父元素只有一个li元素

  (4)$(‘li:nth-child(2n)‘)    选取每个父元素的第一、三、五……个li元素

5、其他方法

  .is(‘li‘)        判断是否是同一个元素,返回boolean

  .hasClass(‘.red‘)    判断是否有class值为***的元素,返回boolean

  .slice(start,end)    获取索引为start到索引为end的元素

  .filter()        

  .end()        获取当前元素的前一次状态

  .contains()      获取元素下面的所有节点

时间: 2024-08-01 22:36:38

jQuery学习笔记(一)——选择器的相关文章

Jquery学习笔记-过滤选择器

1.根据某过滤规则进行元素的匹配,书写时以":"号开头,通常用于查找集合元素中的某一位置的单个元素. $("li:first") 第一个 $("li:last") 最后一个 2.如果想从一组标签元素数组中,灵活选择任意的一个标签元素,我们可以使用:eq(index) 其中参数index表示索引号(即:一个整数),它从0开始. 如果index的值为3,表示选择的是第4个元素:$("li:eq(3)") 3.按照文本内容来查找一个

JQuery学习笔记-基本选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div, span, p {     width: 140px;     height: 140px;     margin: 5px;     background

JQuery学习笔记-层次选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: 

jQuery学习笔记之选择器

目录: 选择器: 选择器应用优化 简单的伪类选择器    内容伪类选择器 显隐伪类选择器 子元素伪类选择器 表单对象伪类选择器 表单属性伪类选择器 属性选择器 HelloWorld 选择器 选择器应用优化 1.简单的伪类选择器 2.内容伪类选择器 3.显隐伪类选择器 4.子元素伪类选择器 5. 表单对象伪类选择器 6. 表单属性伪类选择器 7. 属性选择器

jQuery学习笔记——jQuery常规选择器

一.简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了.#box {//使用 ID 选择器的 CSS 规则color:red;//将 ID 为 box 的元素字体颜色变红}在 jQuery 选择器里,我们使用如下的方式获取同样的结果:$('#box').css('color', 'red

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

JQuery学习笔记(1)

JQuery学习笔记(1) 认识JQuery 简介 JQuery是一个JavaScript库,语法简洁,有跨平台的兼容性,简化了开发人员遍历html文档.操作dom.处理事件.执行动画和开发Ajax的操作.理念是:写得少,做得多. 优点 1.轻量级.UglifyJS压缩后大小保持在30KB 2.选择器强大. 3.DOM操作封装. 4.可靠地事件处理机制. 5.完善的Ajax. 库类型 jquery.js(开发版) 约229kb,用于学习和开发. jquery.min.js(生产版) 约31kb,

jQuery学习笔记(2014年8月3日)事件委派

jQuery中的事件委托是通过 closest() 来完成的. closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上. 参考资料: jQuery 遍历 - closest() 方法http://www.w3school.com.cn/jquery/traversing_closest.asp jQuery学习笔记(2014年8月3日)事件委派

锋利的JQuery 学习笔记

第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);}) ·链式操作:JQuery允许你在一句代码中操做任何与其相关联的元素,包括其子元素.父元素等//选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″); ·

jQuery 学习笔记

jQuery 学习笔记 position()是相对父元素的,有top.left两个属性. offset()是相对于document的当前坐标. offsetParent()是获取离元素最近的有定位的父元素. .closet() 获取最近的匹配选择器的父元素. off()移除一个事件处理函数,要删除委托事件需提供对应的选择器. detch()和remove()一样,但是不会移除绑定数据,以便以后添加.empty()是清空该元素的所有子元素.