jquery之selectors

  我们之所以会用到jQuery这款Javascript库,很大部分原因是它强大的选择器,有了它大大简化了代码,确实带来很多方便。

  jQuery官方网站,在里面下载最新的jQuery库。下面就直接进入jQuery的选择器。

  一、基础类选择器

    1 All Selector ("*")  所有选择器,会选择所有元素,因此它的任务量极大,速度自然是最慢的。

    2 Class Selector (".class")   类名选择器。

    3 ID Selector ("#id")  id选择器。

    4 Multiple Selector ("selector1, selector2, selectorN") 多选择器,这种以逗号分隔开的是或的逻辑表达方式,即只要满足他们当中的一个条件。

    5 ance desc选择器。 $("div p" ).css("background","yellow"); 选择div下的所有p标签,不论其p元素是它的孩子节点还是更深的节点。

    6 parent > child选择器 $(“div > p”); 选择div的孩子元素p。

    7 prev + next选择器 $(“div + h1”)。选择与div紧邻,且在div之后的第一个处在同一级的p元素,有且仅有一个。

    

    8 prev ~ next选择器 $(“div ~ h1”) 。选择在div下面的所有p标签(处在同一级)。

    

  以上都是基础类选择器,不需要过多解释,如有疑惑到官网看文档。

  二、属性选择器

    1 [name="value"]    选择属性值等于某个字符串。

    2 [name!="value"]    选择属性值不等于某个字符串。

    3 [name*="value"]    选择属性值包含某个字符串。

    4 [name$="value"]    选择属性值以某个字符串结束。

    5 [name^="value"]    选择属性值以某个字符串开头。

    常用的属性选择器就这些,以后碰到再去看其他的。

  三、过滤选择器

    1 :eq() 在匹配的集合中选择索引值为index的元素。这里要注意":"前后都不能有空格。

    2 :first 获取指定父元素中的首个子元素,但该选择器返回的只有一个元素,并不是一个集合。

    3 :contains(text)  选择某个包含text的元素。

    4 :has(code)  选择某个包含code的元素,其中code为标签名。

    5 :hidden  选择隐藏元素。

    6 :visible  选择可见元素。

    7 :first-child 获取每个父元素中返回的首个子元素,它是一个集合,常用多个集合数据的选择处理。

    8 :last-child 这个就不用说了

    9 :nth-child(index)  选择索引为index的元素,返回的为一个集合。将子集中的一个设为display:none ,不会对结果造成影响。

  四、表单选择器

    1 :input  选择所有input所包含的表单元素,比如button

    2 :text 选择type为text的元素

    其他直接上图吧

    

   这里要注意selected只能用于<selected>标签,选择selected下拉菜单中所有选中项,checked可以运用于复选框和单选框。

时间: 2024-12-13 23:15:50

jquery之selectors的相关文章

jQuery Tocify 定位导航

Tocify是一个jQuery插件,能够动态的生成文章目录,Tocify可以随意的设置Twitter Bootstrap 或者 jQueryUI Themeroller支持的可选动画和jQuery的显示/隐藏效果,Tocify还支持平滑滚动,向前和向后按钮支持,可以监听浏览器的滚动显示当前的目录结构. 插件特点 主题支持 Twitter Bootstrap 或者 jQueryUI Themeroller 风格. 支持动态滚动和jQuery的点击显示/隐藏效果. 支持前进和后退按钮点击效果 支持平

jQuery数据类型总结

jQuery除了包含原生JS中的内置数据类型(built-in datatype),还包括一些扩展的数据类型(virtual types),如Selectors.Events等. 1. String String最常见,几乎任何一门高级编程语言和脚本语言中都支持,比如"Hello world!"即字符串.字符串的类型为string.比如 var typeOfStr = typeof "hello world";//typeOfStr为“string" 1.

学习jQuery之旅

早就听说了Jquery的大名,一直没有细心的学习一下,通过阅读收集的一些资料,感觉Jquery真的很强大.决定开始自己的学习Jquery之旅.在这里不是为大家讲解Jquery(深知水平有限),只是将自己的学习成果分享给大家,共同学习和交流. jQuery简介 我所理解的jQuery就是一个强大的Javascript类库,里面封装好了很多现有的方法和属性.可以使开发人员用很少的代码更好更快的开发出自己想实现的效果.过多的jQquery在这里就不多介绍了,想必很多人都已经看过了更详细的文档,我就不多

jquery选择器 直观实验

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en"><!-- Source is http://training.learningjquery.com/select-css.html -->

jquery autocomplete实现读取sql数据库自动补全TextBox

项目需要这样子一个功能,其他部门提的意见,只好去实现了哦,搞了好久才弄出来,分享一下. 1.前台页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

第五节:JQuery框架源码简析(2)

(续1) 5.选择器Sizzle 我们把选择器Sizzle实现的代码放在文件jquery.sizzle.js中.关于选择器Sizzle的说明,请看<jQuery技术内幕:深入解析jQuery架构设计与实现原理>,这里不再赘述了. /*! * Sizzle CSS Selector Engine *  Copyright 2011, The Dojo Foundation *  Released under the MIT, BSD, and GPL Licenses. *  More info

jQuery Custom Selector JQuery自定义选择器

什么是JQuery的选择器呢,详见JQuery中的Selector: http://docs.jquery.com/Selectors 比如 $("div:contains('John')").css("text-decoration", "underline");的contains选择器等等 JQuery自定义选择器的基本语法: $.expr[':'].test = function(obj, index, meta, stack){ /* o

Golang 网络爬虫框架gocolly/colly 二 jQuery selector

Golang 网络爬虫框架gocolly/colly 二 jQuery selector colly框架依赖goquery库,goquery将jQuery的语法和特性引入到了go语言中.如果要灵活自如地采集数据,首先要了解jQuery选择器.以下内容是翻译jQuery官方网站 <Category: Selectors>章节内容: Category: Selectors Borrowing from CSS 1–3, and then adding its own, jQuery offers

立即执行函数(IIFE)的理解与运用

作为JavaScript的常用语法,立即执行函数IIFE(Immediately-Invoked Function Expression)是值得我们认真去学习探究的. 一.创建函数的两种方式 我们先从基础讲起,要创建一个JS函数,有两种方式. (一)函数定义(Function Declaration) function Identifier ( Parameters ){ FunctionBody } 函数定义中,参数(Parameters)标识符(Identifier )是必不可少的.如果遗漏