基本选择器

#       Id选择器        $(“#btnShow”)选择id为btnShow的一个元素
. 类选择器 $(“.liItem”)选择含有类liItem的所有元素
ele 标签选择器 $(“li”)选择标签名为li的所有元素

层级选择器

空格    后代选择器    $(“#j_wrap li”)选择id为j_wrap的元素的所有后代元素li
> 自带选择器 $(“#j_wrap > ul > li”)选择id为j_wrap的元素的所有子元素ul的所有子元素li

基本过滤选择器

:eq(index)  选择匹配到的元素中索引号为index的一个元素   $(“li:eq()”)选择li元素中索引号为2的一个元素
:odd 选择匹配到的元素中索引号为奇数的所有元素 $(“li:odd”)选择li元素中索引号为奇数的所有元素
:even 选择匹配到的元素中索引号为偶数的所有元素 $(“li:even”)选择li元素中索引号为偶数的所有元素

筛选选择器

find(selector) 查找所有后代元素(子子孙孙)   $(“#j_wrap”).find(“li”)选择id为j_wrap的所有后代元素li
children() 查找直接子元素(亲儿子元素) $(“#j_wrap”).children(“ul”)选择id为j_wrap的所有子代元素ul
siblings() 查找所有兄弟元素(不包括自己) $(“#j_liItem”).siblings()选择id为j_liItem的所有兄弟元素
next() 查找该元素的下一个兄弟元素 $(“#j_liItem”).next()选择id为j_liItem的下一个兄弟元素
nextAll() 查找该元素之后所有兄弟元素 $(“#j_liItem”).nextAll()选择id为j_liItem之后所有兄弟元素
prev() 查找该元素的上一个兄弟元素 $(“#j_liItem”).prev()选择id为j_liItem的上一个兄弟元素
prevAll() 查找该元素之前所有兄弟元素 $(“#j_liItem”).pervAll()选择id为j_liItem之前所有兄弟元素
parent() 查找父元素 $(“#j_liItem”).parent(“ul”)选择id为j_liItem的父元素
eq(index) 查找索引号为index的一个元素 $(“li”).eq()选择所有li元素中的第二个

注意事项

1、后代选择器包括儿子孙子重孙子....而子代选择器只包括儿子。

2、:odd表示的索引号是奇数,实际显示效果是偶数行;:even表示的索引号是偶数,实际显示效果是奇数行。

jQuery——jQuery选择器的更多相关文章

  1. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  2. HTML 学习笔记 JQuery(选择器)

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

  3. 什么是jquery $ jQuery对象和DOM对象 和一些选择器

    1什么是jQuery: jQuery就是将一些方法封装在一个js文件中.就是个js库 我们学习这些方法. 2为什么要学习jQuery: 原生js有以下问题: 1.兼容性问题2.代码重复3.DOM提供的 ...

  4. jQuery的选择器中的通配符总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  5. JQuery 层次选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...

  6. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

  7. jquery相对选择器,又叫context选择器,上下文选择器;find()与children()区别

    jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型 用法 ...

  8. jQuery之选择器

    jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...

  9. 关于jquery ID选择器的一点看法

    最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2.  $( ...

  10. jQuery的选择器中的通配符[id^='code'] 【转】

    JQuery 1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='cod ...

随机推荐

  1. bitset优化FLOYD HDU 3275

    Each of Farmer John's N cows (1 ≤ N ≤ 1,000) produces milk at a different positive rate, and FJ woul ...

  2. 解决canvas跨域问题(图片,视频资源跨域)

    添加跨域条件   crossorigin="anonymous" [Redirect at origin 'http://xxx.xx.com' has been blocked ...

  3. Java并发:线程安全的单例模式

    转载请注明出处:jiq•钦'stechnical Blog 1.饿汉式 public class Singleton { private final static Singleton INSTANCE ...

  4. Java---15---单例设计模式:---饿汉式和懒汉式

    概念: 单例模式确保某个类仅仅有一个实例.并且自行实例化并向整个系统提供这个实例.   单例模式有下面特点: 1.单例类仅仅能有一个实例 2.单例类必须自己给自己创建自己的唯一实例 3.单例类必须给全 ...

  5. Git实战(三)环境搭建

    上次的博文中.我们介绍了一下关于Git作为版本号控制工具的基本原理,接下来我们来搭建一个主要的Git环境(因为我使用的是Windows系统.所以重点側重在这方面). Git安装 Git的安装很easy ...

  6. struct结构体在c和c++中的差别

    非常多次遇到这个struct的问题,今天在这里简单总结一下我的理解 一.struct在C 中的使用 1.单独使用struct定义结构体类型 struct Student { int id; int n ...

  7. Date.parse函数的兼容问题

    由于要用Date.parse函数解析一个日期时间的字符串.在谷歌浏览器中解析成功,但是IE.火狐中却不行. 不知何故.firefox对于类似"2010-12-20 15:55:00" ...

  8. Android 高仿 频道管理----网易、今日头条、腾讯视频 (能够拖动的GridView)附源代码DEMO

    距离上次公布(android高仿系列)今日头条 --新闻阅读器 (二) 相关的内容已经半个月了.近期利用空暇时间,把今日头条client完好了下.完好的功能一个一个所有实现后.就放整个源代码.开发的进 ...

  9. Hibernate基于注解的双向one-to-many映射关系的实现

    在项目中用到了一对多的实体类关系映射,之前接触的都是基于配置文件的映射实现.可是公司的大部分都是基于注解的.因此自己參考之前的代码捣鼓了基于注解的一对多的映射关系实现. 背景: 一的一端:QingAo ...

  10. LeetCode 290. Word Pattern (词语模式)

    Given a pattern and a string str, find if str follows the same pattern. Here follow means a full mat ...