一、jQuery选择器

1)CSS选择器

CSS选择器有:1》标签选择器  E{CSS规则} 2》ID选择器   #ID{CSS规则} 3》类选择器  E.className{CSS规则} 4》群组选择器    E1,E2,E3{CSS规则}  5》后代选择器  E F{CSS选择器}  6》通配符选择器  *{CSS规则}  这六大类CSS选择器几乎所有浏览器都支持。 还有  1)伪类选择器   2)子选择器  E>F{ }   3)临近选择器  E+F{CSS规则}   4)属性选择器  E[attr]{CSS选择器}
CSS应用到网页中有三种方式:行间样式表,内部样式表,外部样式表

2)jQuery选择器

网页内容和行为没有分离。不建议这么写。

3)jQuery选择器的优势

1》简介的写法 2》支持CSS1到CSS3选择器 3》完善的处理机制

当用jQuery检查某个元素在网页上是否存在,不能使用如下代码:  if($("#tt"){//do something})  ,需要用获取到元素的长度来判断  if($("#tt").length>0{ do something})

4)jQuery选择器   基本选择器,层次选择器,过滤选择器和表单选择器

基本选择器

 层次选择器

body div  body里面所有的div元素     body>div  body里面的div子元素  .one+div 选中class为one的下一个div同辈元素, #two~div 选中id为two的元素后面的所有div同辈元素

jQuery里面可以用nexe()来代替 $("prev+next")选择器。  $(".one+div")   == $(".one").next("div");

jQuery里面可以用nextAll()来代替$("prev~siblings")。 siblings()方法与前后位置无关,只要是同辈节点就能匹配。

过滤选择器

过滤选择器与css里面的伪类选择器语法相同,选择器都以:开头,分为基本过滤,内容过滤,可见性过滤和属性过滤,子元素过滤,表单对象过滤

1)基本过滤选择器

:first ,:last,:not(selector),:even,:odd奇数选择, :eq(index)选取索引等于index的元素,index的元素从0开始 ,:lt(index)小于index的元素,:gt(index)大于index的元素,:header  选取所有的标题元素   :animated 选取正在执行动画的元素, :focus 选取当前获取焦点的元素。

2)内容过滤选择器

div:contains(内容)选取含有特定内容的div,  div:empty 选取内容为空的div,div:has(‘.mini’)选取class为mini的div,  div:parent 含有子元素(包括文本元素)的div

3)可见性过滤选择器

div:hidden  选取所有不可见元素  ,不仅包括样式属性display:none 的元素,也包括文本隐藏域  <input type="hidden">和visibility:hidden之类的元素。 div:visible 选取所有可见的元素

4)属性过滤选择器

容易混淆的jQuery属性选择器:

5)子元素过滤选择器

:nth-child()选择器是常用的子元素过滤选择器,  1》:nth-child(even)选取每个父元素下的索引值是偶数的元素。 2》:nth-child(odd)选取每个父元素下的索引值是奇数的元素

3》:nth-child(2)选取每个父元素下面的索引值等于2的元素。 4》:nth-child(3n)选取每个父元素下面索引值是3的倍数的元素,n从1开始。 5》:nth-child(3n+1)选取每个父元素下面的索引值是3n+1的元素,n从1开始。

6)表单对象属性过滤选择器

1》 :enabled  2》:disabled  3》:checked 选取所有被选中的元素(单选框,复选框) 4》:selected 选取所有被选中的选项元素(下拉菜单列表)。

 表单选择器

1》:input 选取所有的input textarea,select 和button元素。  2》:text  选取单行文本   3》:password 选取密码框  4》:radio 选取所有单选框  5》:checkbox 选取所有多选框

6》:submit 选取所有提交按钮 7》 :image 选取所有图像按钮 8》:reset 选取所有重置按钮 9》 :button 选取所有的按钮 10》:file 选取所有的长传域  11》:hidden 选取所有不可见元素。

3)jQuery改写实例

4)jQuery选择器中的一些注意事项

1》选择器中含有 “.” "、"  "#" "(" 或"]" 等特殊字符  属性值中不能含有这些特殊字符,需要用转义符进项转义。

锋利的jQuery ——jQuery选择器(二)的更多相关文章

  1. jQuery笔记---选择器(二)

    1.选择器练习: 1)查找UL中的元素的内容 格式:$(“ul li:XX”).text() XX:代表方法 比如:获取到第一元素,然后获取当中的值 $(“ul li:first”).text() 获 ...

  2. jQuery基础学习(二)—jQuery选择器

    一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 ...

  3. jQuery学习之二 jQuery选择器

    一.jQuery选择器是什么1.CSS选择器2.jQuery选择器 二.jQuery选择器的优势1.简洁的写法2.支持从CSS1到CSS3选择器3.完善的处理机制  传统js选择器假如要操作的元素不存 ...

  4. jQuery基本选择器模块(二)

    选择器模块 1.push方法的兼容性(了解) 问题:IE8不支持aplly方法中的第二个参数是 伪数组 目标:实现 push 方法的浏览器兼容性问题 var push = [].push; try { ...

  5. jQuery基础之二

    jQuery基础之二   jQuery的中文文档十分详细,并且权威.W3C的jQuery文档更加简单实用. jQuery 1.9.0 jQuery中文文档W3C的jQuery文档 jQuery操作DO ...

  6. jQuery过滤选择器

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

  7. jQuery常用选择器总结

    jQuery常用选择器总结: 我们都知道jQuery是JavaScript(JS)的框架,它的语法简单使用方便,被广大开发人员青睐.现在我就它常用的并且十分强大的选择器的方式,做一个总结.鉴于它的选择 ...

  8. js jquery css 选择器总结

    js jquery css 选择器总结 一.原始JS(Document 对象)选择器. id选择器:document.getElementById("test"); name选择器 ...

  9. python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

随机推荐

  1. sh_01_九九乘法表

    sh_01_九九乘法表 def multiple_table(): # 1. 打印 9 行小星星 row = 1 while row <= 9: col = 1 while col <= ...

  2. vue 渲染是出现 Do not use built-in or reserved HTML elements as component id 的警告

    情况1.是因为组件命名和引入不一致造成的. 命名组件(nav) export default { name: 'nav', data () { return { } } 引入组件(Navigation ...

  3. Windows10 + VS2015 环境下对gdal2.0.1进行64bit编译小结

    这是官方给出的编译指导,但是在实践过程中有几点仍然需要特别注意. Tip 1:不要使用默认的"VS开发人员命令提示"工具,使用该工具会遭遇如下的错误: 正在创建库 gdal_i.l ...

  4. java语言课堂动手动脑

    1 运行 TestInherits.java 示例,观察输出,注意总结父类与子类之间构造方法的调用关系修改Parent构造方法的代码,显式调用GrandParent的另一个构造函数,注意这句调用代码是 ...

  5. Oracle数据库链接超级慢或者总提示链接超时

    Centos6  今天tomcat应用程序链接数据库总提示链接超时,客户端工具通过tnsnames连接数据库实例进行操作也超级慢, 实在无法忍受, 重启实例试试吧,重启了还是不好使,还是很慢很慢,无比 ...

  6. Java缓存机制

    1 Java缓存 1.1 jvm内置缓存 Java中实现缓存的方式有很多,比如用static hashMap基于内存缓存的jvm内置缓存,简单不实用,保对象的有效性和周期无法控制,容易造成内存急剧上升 ...

  7. Vue 使用v-bind:style 绑定样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 黑马lavarel教程---1、lavarel目录结构

    黑马lavarel教程---1.lavarel目录结构 一.总结 一句话总结: 一套视频讲的东西太少,要看多套视频 1.安装lavarel需要额外开启的模块? extension=php_filein ...

  9. maven之pom.xml的配置

    pom.xml是配置文件: <dependencies>表示依赖,里面可以有多个<dependency> 比如当前使用了junit的jar包,版本是3,8,1,我们现在更换新的 ...

  10. 洛谷P5022&P5049 旅行(及其数据加强版)

    旅行(不是加强版) 加强版 加强版数据范围: 我们注意到 也就是说要么是个树,要么是个基环树 60pts 这60分是个树,可以简单的贪心想到每次都走子树中编号最小的那个,并且把1作为根 dfs练手题 ...