Jquery的过滤选择器分为哪几种?

标签:

jquery

过滤选择器

分类

分类: JQuery
所有的过滤选择器分为哪几种:
一、基本过滤选择器(重点掌握下列八个)
:first 选取第一个元素
$("div:first").css("color","red");
:last 选取最后一个元素
$("div:last").css("color","red");
:not 除去指定的选择器外的元素
$("div:not").css("color","red");
:even 选取索引号是偶数的元素
$("div:even").css("color","red");
:odd 选取索引号是奇数的元素
$('div:odd').css("color","red");
:eq(index) 选取第index个元素
$('div:eq(5)').css("color","red");
:gt(index) 选取索引号大于index的元素
$('div:gt(8)').css("color","red");
:lt(index) 选取索引号小于index的元素$('div:lt(3)').css("color","red");
二、属性过滤选择器(六个必须记住)
(1):[attribute] 选取拥有此属性的元素
$('div:[attribute]').css('background-color','red');
(2):[attribute=value] 选取属性值为value的元素
$('div:[attribute=text]')
(3):[attribute!=value] 选取属性值不为value的元素
$('div:[attribute!=text]')
(4):[attribute^=value] 选取属性值以value开始的元素
$('div:[attribute^=text]')
(5):[attribute$=value] 选取属性值以value结尾的元素
$('div:[attribute$=text]')
(6):[attribute*=value] 选取属性值包含value的元素
$('div:[attribute*=text]')

三、内容过滤选择器(四个必须记住)
:contains 选取包含文本的text的元素
$('div:contains(.mini)').css("color","red");
:has(id选择器名称、Class选择器名称)
选取含有选择器所匹配的元素 $('div:has(.mini)').css("color","red");
:empty 选取不包含子元素的元素
$('div:empty').css("color","red");
:parent 选取包含子元素的元素
$('div:parent').css("color","red");

四、子元素过滤选择器(记住八个)
(1):nth-child(index) 选取每个父节点下第index个元素、偶数元素或奇数元素。
$('div.one :nth-child(8)').css('background-color','#900');
(2):first-child 选取每个父元素下的第一个子元素
$('div.one :first-child(8)').css('color','red');
(3):last-child 选取每个父元素下的最后一个子元素
$('div.one :last-child(8)').css('color','red');
(4):only-child 选取只有一个子元素的元素
$('div.one :only-child(8)').css('color','red');
(5):enabled 选取所有可用的元素
$('#form1 input:enabled').val("这里是我的博客。谢谢光临。");
(6):disabled 选取所有不可用的元素
$('#form1 input:disabled').val("哈哈");
(7):checked 选取所有被选中的元素(一般为(HTML中)RadioButton、CheckBox标记)
$('input:checked').text("刀锋
青春");
(8):selected 选取被选中的选项元素(select下拉列表标记中的option=select)
$('select:selected').each(
function()
{
str += $(this).text()+",";
}
);
五、可见性过滤选择器(两个)
:hidden
:visibal
六、表单元素过滤选择器

四:表单选择器

Jquery的过滤选择器分为哪几种?的更多相关文章

  1. jQuery简单过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <!--jQuery选择器详解 根据所获 ...

  2. 第一百六十五节,jQuery,过滤选择器

    jQuery,过滤选择器 学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3 (h ...

  3. jQuery 简单过滤选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...

  4. jQuery基本过滤选择器

    jQuery基本过滤选择器: <h1>this is h1</h1> <div id="p1"> <h2>this is h2< ...

  5. jquery :checked(过滤选择器) 和 空格:checked(后代选择器)

    jquery 过滤选择器 和 后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...

  6. JQuery 可见性过滤选择器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. JQuery 内容过滤选择器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. jQuery内容过滤选择器与子元素过滤选择器用法实例分析

    jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...

  9. jquery :checked(过滤选择器) 和 空格:checked(后代选择器)【转】

    jquery 过滤选择器 和 后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...

随机推荐

  1. 学习TensorFlow,浅析MNIST的python代码

    在github上,tensorflow的star是22798,caffe是10006,torch是4500,theano是3661.作为小码农的我,最近一直在学习tensorflow,主要使用pyth ...

  2. Java数据类型及类型转换

    http://blog.csdn.net/pipisorry/article/details/51290064 java浮点数保留n位小数 import java.text.DecimalFormat ...

  3. 【一天一道LeetCode】#191. Number of 1 Bits

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Write a ...

  4. UNIX网络编程——socket概述和字节序、地址转换函数

    一.什么是socket socket可以看成是用户进程与内核网络协议栈的编程接口.socket不仅可以用于本机的进程间通信,还可以用于网络上不同主机的进程间通信. socket API是一层抽象的网络 ...

  5. 交叉验证(CrossValidation)方法

    分类器模型通常在特定的数据上进行训练,由于所得模型可能存在过拟合的现象.因此,模型训练完成之后通常需要进行检验,以验证分类模型在未知数据集上的预测能力,即我们通常所说的"模型泛化" ...

  6. Android初级教程理论知识(第六章广播接受者)

    总体概述: 广播接收者 现实中:电台要发布消息,通过广播把消息广播出去,使用收音机,就可以收听广播,得知这条消息 Android中:系统在运行过程中,会产生很多事件,那么某些事件产生时,比如:电量改变 ...

  7. Java编写的接口测试工具

    这几天由于要频繁地使用一些天气数据接口,但是每次都要频繁的打开网页,略显繁琐,故就自己做了两个json数据获取的小工具. 第一个 先来看看第一个吧,思路是使用一个网络流的处理,将返回的json字符串数 ...

  8. React 语法之let和const命令

    let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a // ...

  9. ant+eclipse知识点详解及使用案例

    ant的优点和地位就不再阐述,下面直接上知识点: 在java中使用xml文件开发,有以下基本语法 (1)project:每个ant程序有且只有一个此标签,而且是类似于html的总标签,有name,de ...

  10. 手把手带你做一个超炫酷loading成功动画view Android自定义view

    写在前面: 本篇可能是手把手自定义view系列最后一篇了,实际上我也是一周前才开始真正接触自定义view,通过这一周的练习,基本上已经熟练自定义view,能够应对一般的view需要,那么就以本篇来结尾 ...