JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

一、jQuery 选择器

jQuery 选择器简介

  - jQuery 选择器类似于 CSS 选择(定位元素,施加样式),能够实现定位元素,施加行为

  - 使用 jQuery 选择器能够将内容与行为分离

  - 学会使用选择器是学习 jQuery 的基础

jQuery 选择器的优势

  - 简洁的写法:

      - $()工厂函数在很多JavaScript类库中都被作为一个选择器函数使用

  - 支持 CSS1 到 CSS3 选择器

      - jQuery 选择器支持 CSS1、CSS2 和 CSS3 选择器,同时拥有少量独有的选择器用法

      - 使用 jQuery 选择器时,无需考虑浏览器是否支持这些选择器

  - 完善的处理机制

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

工厂函数$()

  - 在 jQuery 中,无论使用哪种类型的选择符,都要从一个美元符号$和一对圆括号开始: $()

  - 所有能在样式表中使用的选择符,都能放到这个圆括号中的引号内

二、基本选择器

ID 选择器

  - 特点: 最快,尽量使用id选择器

  - 作用: 返回匹配id属性值的所有元素

  - 用法: $("#myDiv")

  - 说明: 返回 HTML 页面中 id 为 myDiv 的所有元素

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

类选择器

  - 作用: 返回匹配 class 属性值的所有元素

  - 用法: $(".className")

  - 说明: 返回 HTML 页面中 class 为 className的所有元素

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

元素选择器

  - 作用: 返回匹配元素名的所有元素

  - 用法: $("elementName")

  - 说明: 返回HTML 页面中元素名为 elementName 的所有元素

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

通配符选择器

  - 作用: 返回当前 HTML 页面的所有元素

  - 用法: $("*")

  - 说明: 返回 HTML 页面中的所有元素

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

 

合并选择器

  - 合并选择器。即所有选择器的合集

  - 将每一个选择器匹配到的元素合并后一起返回

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

三、层次选择器

select1 空格 select2

  - 根据select1 找到节点后,再去寻找子节点中符合 select2 的节点(重要)

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

select1 > select2

  - 只查找直接子节点,不查找间接子节点

  - 与$(select1空格select2)选择器有区别,$(select1 > select2)选择器是查找后代元素

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

select1 + select2

  - 选取紧接在select1元素后的select2元素

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

select1 ~ select2

  - 选取 select1 元素之后的所有 select2 元素

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

四、过滤选择器

过滤选择器简介:

  - 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素

  - 过滤选择器的特点是都以 ":" 开头

  - 按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单过滤选择器等

基本过滤选择器

  - 过滤选择器以 ":" 或 "[]" 开始

      - :first                    第一个元素

      - :last                     最后一个元素                        

      - :not(selector)            把selector排除在外

      - :even                     挑选偶数行

      - :odd                      挑选奇数行

      - :eq(index)                下标等于 index 的元素

      - :gt(index)                下标大于 index 的元素

      - :lt(index)                下标小于 index 的元素

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

内容过滤选择器

  - 内容过滤选择器包含:

      - :contains(text)           匹配包含给定文本的元素

      - :empty                    匹配所有不包含子元素或文本的空元素

      - :has(selector)            匹配含有选择器所匹配的元素

      - :parent                   匹配含有子元素或者文本的元素

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

可见性过滤选择器

  - 可见性过滤选择器包含

      - :hidden                   匹配所有不可见元素,或type为hidden的元素

      - :visible                  匹配所有的可见元素

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

属性过滤选择器

  - 属性过滤器包含如下

      - [ attribute ]             匹配具有 attribute 属性的元素

      - [ attribute = value ]     匹配属性等于value的元素

      - [ attribute != value ]    匹配属性不等于value的元素

      - [ attribute ^= value ]    匹配属性以某些值开始的元素

      - [ attribute $= value ]    匹配属性以某些值结尾的元素

      - [ attribute *= value ]    匹配属性以包含某些值的元素

      - [ attributeFilter1 ][ attributeFilter2 ]... 

                                  复合属性过滤选择器,需要同时满足多个条件时使用

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

子元素过滤选择器

  - 子元素过滤选择器包括

      - :nth-child (index/even/odd) 选取每个父元素下的第 index 个子元素或者奇偶元素(index从1算起)

      - :first-child 选取每个父元素的第一个子元素

      - :last-child 选取每个父元素的最后一个子元素

      - :only-child 如果某个元素是它父元素中唯一的子元素,那么将会被匹配

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

表单属性过滤选择器

  - 表单属性过滤选择器包括

      - :enabled  选取所有可用元素

      - :disabled 选取所有不可用元素

      - :checked  选取所有被选中的元素(单选框或多选框)

      - :selected 选取所有被选中的元素(下拉列表)

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

五、表单选择器

表单选择器

  - 表单属性过滤选择器包括:

      - :input                    选取所有<input>、<textarea>、<select>、<botton>元素

      - :text                     选取所有的单行文本框

      - :password                 选取所有的密码框

      - :radio                    选取所有的单选框

      - :checkbox                 选取所有的复选框

      - :submit                   选取所有的提交按钮

      - :image                    选取所有的图像按钮

      - :reset                    选取所有的重置按钮

      - :button                   选取所有的按钮

      - :file                     选取所有的上传域

      - :hidden                   选取所有不可见元素

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

总结:本章内容主要介绍了 jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

更多相关文章
  • jQuery表单选择器 1.:input表单选择器  选中所有的表单元素 用法举例$(“#id :input”).addClass(“red”);  修改边框:  注意“:”前面有空格. 2.:text表单文本选择器  选中文本元素 用法举例$(“#id :text”).addClass(“bg_r ...
  • jQuery学习笔记6:表单选择器
    1    常规选择器    alert($('input').size());     alert($('input').val());  //元素名定位,默认获取第一个   alert($('input').eq(1).val());        //同上,获取第二个,这种写法语义不清晰,    ...
  • 三、jQuery--jQuery基础--jQuery基础课程--第4章jQuery表单选择器
    1.:input表单选择器 如何获取表单全部元素?:input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea>.<select> 和 <button>标记的表单元素,因此,它选择 ...
  • 表单选择器
       表单作为HTML中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以使用之前的常规选择器或过滤器,也可以使用jQuery为表单专门提供的选择器和过滤器来准确的定位表单元素.    常规选择器    我们可以使用id.类(class)和元素名来获取表单字段, 如果是表单元素, 都必须含有 ...
  • JQuery学习笔记-表单选择器
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <met ...
  • $('li:first').css('background', '#ccc'); $('li:last).css('background', '#ccc' $('li:not(.red)).css('background', '#ccc'); $('li:even').css('background ...
  • 表单选择器包括以下内容: (1):input表单选择器. (2):text表单文本选择器. (3):password表单密码选择器. (4):radio单选按钮选择器. (5):checkbox复选框选择器. (6):submit提交按钮选择器. (7):image图像域选择器. (8):butto ...
  • 表单是一个特殊的页面元素,value的值是最受关注的,jQuery提供了强大的val()方法来处理相关的操作. 1.获取表单元素的值.直接调用val()方法时可以获取选择器的 中的第一个元素的value值.例如: $("[name=radioGroup]:checked").va ...
一周排行
  •    鲍尔默终于要离开微软了.    从十三年前成为微软舵手开始,鲍尔默几乎每一天都在和比尔.盖茨的影子战斗.风和日丽的日子,有人说如果那位还在,如此风平浪静,早该全速前行了:风雨飘摇的日子,有人说如果那位还在,怎么 ...
  • 4月2日去了IDF现场,由于下午1点有课,所以盆盆上午10点多就匆匆赶到浦东国际会议中心,以便先rehearsal一下设备和机器.Intel峰会的规模很大,人气很旺,相对而言,[email protected]& ...
  • Ansible 管理的主机,对服务端来讲,都必须能够免ssh密码登陆.因此,下面首先在服务端进行ssh免密码登陆设置.生成id_rsa.pub[[email protected]]# ssh-keyge ...
  •     玛莎百货公司是英国最大的商业集团,在德鲁克的著作中,玛莎百货常常作为典型的正面人物登场.玛莎百货有一个闪光点深得德鲁克推崇,那就是:关于商业环境.企业目标和核心优势这三方面设想的协调一致.换句话,企业要有方向 ...
  • 我叫邢永全经过老男孩教育运维班个月学习后,我会继续学习架构师课程,力争在将近一年的学习后,薪资水平将有一定的提高.力争目标是15K以上,为了达到此目标我将采取如下10大行动.一 我将每天学习个小时.二 每 ...
  • 写完Linux服务器监控系统ServMonV1.1
    [文章作者:张宴 本文版本:v1.1 最后修改:2007.08.31 转载请注明出处:[u ...
  • WDS批量部署操作系统(一)
       WDS批量部署操作系统一.环境准备1.拓扑图2.预准备a.准备好域环境,WDS加域( ...
  • 高可用性-HSRP-VPN
    高可用性 拓扑说明:Out接口为f0/0和in路由器接口为f0/1,active和stan ...
  • 行级元素和块级元素 1.什么是标准文档流在不使用绝对定位和浮动等CSS相关规则的时候,咋们的各个元素排列的规则.换句话说就是CSS规定网页元素默认排列的方式 2.块级元素与行级元素比较,特点:*独占一行,前后的内容换 ...
  • CSS之Position详解CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属 ...