jquery系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏)
快捷链接:
jquery系列教程1-选择器全解
jquery系列教程2-style样式操作全解
jquery系列教程3-DOM操作全解
jquery系列教程4-事件操作全解
jquery系列教程5-动画操作全解
jquery系列教程6-ajax的应用全解
jquery系列教程7-自定义jquery插件全解
jquery系列教程8-jquery插件大全
jquery选择器全解:
jquery选择器$(“xxxx”),传入字符串获取元素,字符串的写法与css的写法相同。
基本选择器
$("#myid"); //根据id获取元素,等价于document.getElementById(),
$("#myid\\#b"); //根据id为myid#b的元素,对于属性中含有.#([等特殊字符的要转义获取
$("label"); //根据标签名称获取元素列表,等价于document.getElementByTagName(),
$(".myclass"); //根据class获取元素列表
$("div.myclass"); //根据class获取元素列表
$("label,div,input"); //根据元素并集
$("body *"); //*获取所有元素,空格表示后代元素
层次选择器
$("#myid a"); //获取所有子孙后代元素列表
$("#myid>a"); //获取一级子元素列表(不包含孙元素)
$("#myid").next("a"); //获取紧接在之后的同辈元素列表,等价于$("#myid+a");
$("#myid").nextAll("a"); //获取之后的所有同辈元素列表,等价于$("#myid~a");
$("#myid").siblings("a"); //获取所有同辈元素列表,无论前后
过滤选择器(基本过滤器)
$("div:first"); //所有div中的第一个div元素
$("div:last"); //所有div中的最后一个div元素
$("div:not(.myclass)"); //不是myclass类的所有div元素列表
$("div:even"); //索引是偶数的div列表,索引从0开始
$("div:odd"); //索引是奇数的div列表,索引从0开始
$("div:eq(1)"); //索引等于1的div,索引从0开始
$("div label:gt(5):not(:last)");//div元素下,索引大于5的不包含最后一个的label列表(不包含5,索引从0开始)
$("div:lt(1)"); //索引小于1的div列表(不包含1),索引从0开始
$(":header"); //所有标题元素列表
$("div:animated"); //正在执行动画的div元素列表
$(":focus"); //当前聚焦元素列表
过滤选择器(内容过滤器)
$("div:contains('我')"); //含有文本“我”的div元素列表
$("div:empty"); //不含有子元素或文本的div空元素列表
$("div:has(p)"); //含有p元素的div元素列表
$("div:parent"); //含有子元素或文本的div元素列表
过滤选择器(可见性过滤)
$("div:hidden"); //获取所有隐藏的div列表
$("div:visible"); //获取所有可见的div列表
过滤选择器(属性过滤器)
$("div[title]"); //拥有属性title的div列表
$("div[title=test]"); //属性title为"test"的div列表
$("div[title!=test]"); //属性title不等于"test"或没有title属性的div列表
$("div[title^=test]"); //属性title以"test"开始的div列表
$("div[title$=test]"); //属性title以"test"结束的div列表
$("div[title*=test]"); //属性title含有"test"的div列表
$("div[title|=test]"); //属性title等于"test"或以"test-"开头的div列表
$("div[title~=test]"); //属性title用空格分割的值中包含test的div列表
$("div[id][title$=test]"); //包含属性id,同时属性title以"test"结束的div列表
过滤选择器(子元素过滤器)
通过冒号前加空格实现,和基本过滤器的区别,基本过滤器冒号前没有空格,基本过滤器对元素进行操作,获取元素列表,此处的过滤器对父元素进行操作,获取子元素列表
$("div :nth-child(2)"); //获取每个div下的第2个子元素,索引从1开始
$("div :nth-child(even)"); //获取每个div下的索引为偶数的子元素,索引从1开始
$("div :nth-child(odd)"); //获取每个div下的索引为奇数的子元素,索引从1开始
$("div :nth-child(3n+1)"); //获取每个div下的索引为3n+1的子元素,索引从1开始
$("div label:first-child"); //获取每个div下的第一个label列表
$("div label:last-child"); //获取每个div下的最后一个label列表
$("div label:only-child"); //获取每个div下的是唯一子元素的label的列表
过滤选择器(表单对象属性过滤器)
$("#form1 input:enabled"); //id为form1的表单内所有可用input元素列表
$(".form1 :disabled"); //class为form1的元素内所有不可用元素列表
$(".form1:disabled"); //所有不可用的且class为form1的元素
$("input:checked"); //所有被选中的iput元素(单选框,复选框)
$("select option:selected"); //所有被选中的选项元素(下拉列表)$("select :selected");也可以
表单选择器
$("#form1 :input"); //选取id为form1的表单的所有input,textarea,select,button元素
$("#form1 input"); //选取id为form1的表单下的input元素
$(":text"); //选取所有单行文本框,:前可以有其他过滤器
$(":password"); //选取所有密码框
$(":radio"); //选取所有单选框
$(":checkbox"); //选取所有复选框
$(":submit"); //选取所有提交按钮
$(":image"); //选取所有图片按钮
$(":reset"); //选取所有重置按钮
$(":button"); //选取所有按钮
$(":file"); //选取所有上传域
$(":hidden"); //选取所有不可见元素
jquery系列教程1-选择器全解的更多相关文章
- jquery系列教程3-DOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jquery系列教程7-自定义jquery插件全解:对象函数、全局函数、选择器
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- jquery系列教程6-ajax的应用全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- jquery系列教程2-style样式操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jquery系列教程4-事件操作全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- Jquery系列教程
最近想重新温习下Jquery,发现园子里有个很棒的系列教材,所以Mark下来. 转载自:http://www.cnblogs.com/zhangziqiu/tag/jQuery%E6%95%99%E7 ...
- jQuery Mobile事件,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile事件 ...
- Cobaltstrike系列教程(三)-beacon详解
0x000--前文 Cobaltstrike系列教程(一)-简介与安装 Cobaltstrike系列教程(二)-Listner与Payload生成 heatlevel 0x001-Beacon详解 1 ...
- 一步一步使用ABP框架搭建正式项目系列教程之本地化详解
返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 本篇目录 扯扯本地化 ABP中的本地化 小结 扯扯本地化 本节来说说本地化,也有叫国际化.全球化的,不管怎么个叫法,反正道理都是一 ...
随机推荐
- 个人作业3--个人总结(Alpha阶段)
一.Alpha阶段总结 这是第一次接触APP的程序设计,在组员的共同努力下实现了不少功能,但功能与界面中都有不少欠缺之处,希望在后续阶段能继续完善 二.提出问题 1.在第二章 2.3 中,通过PSP模 ...
- 201521123106 《Java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 2. 书面作业 本次作业题集集合 List中指定元素的删除(题目4-1 ...
- 201521123042《Java程序设计》 第7周学习总结
1. 本周学习总结 网上看了很多资料,发现这一张图总结的还不错就引用过来了.但是最上面的Map和Collection之间的关系应该是依赖,不是Produces. ①概述:Java集合框架主要包括两种类 ...
- 201521123028 《Java程序设计》第5周学习总结
1. 本周学习总结 2. 书面作业 Q1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. Ch ...
- 201521123105《jave程序》第二周学习总结
1. 本周学习总结 学习了各种java数据类型以及各种运算符的使用 学习了一维,二维数组的用法 学习了String类对象使用 2. 书面作业 使用Eclipse关联jdk源代码,并查看String对象 ...
- ubuntu下php不能显示中文的问题的解决过程。
在阿里的ECS上的ubuntu平台上成功的安装了apache2和php5与mysql,并进行了测试. 如图所示:
- 201521123089 《Java程序设计》第13周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 1.协议:网络中为了进行数据交换而建立的原则,标准或约定. 2.域名:Internet上某一台计算机的名称 ...
- jquery-easyUI第一篇【介绍、入门、使用常用的组件】
什么是easyUI 我们可以看官方对easyUI的介绍: easyUI就是一个在Jquery的基础上封装了一些组件-.我们在编写页面的时候,就可以直接使用这些组件-非常方便-easyUI多用于在后台的 ...
- Oracle中Union与Union All的区别(适用多个数据库)
Oracle中Union与Union All的区别(适用多个数据库) 如果我们需要将两个select语句的结果作为一个整体显示出来,我们就需要用到union或者union all关键字.union(或 ...
- python3中的编码与解码用法
#!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ = '人生入戏' #python3在编码时会把str编码成utf-8的bytes类型 ...