对jQuary选择器的全面总结

jQuary基础选择器

$("div*")获取div下面的所有元素

$(".red,.green").html("怎么") // 需要注意的是要把两个选择前写在同一个引号内 （需要同时选择多个选择器的时候用）

$("ance desc") //ancestor祖先选择器 descendant子孙选择器

$(“parent > child”) //只包含子辈选择器 不包含孙辈选择器

$(“prev + next”) // "+"表示一种上下级的关系，prev元素最紧邻的下一个元素是next，选择器返回的并且只返回唯一的元素

$("p+label").css("background-color","red"); 给紧邻着的邻居加个背景颜色

$(“prev ~siblings”) //获取prev后面所有的相邻元素（相邻只包含同一个父级元素内的）

jQuary的过滤性选择器

:first $(“li:first”)获得一组相同标签中的第一个元素 是一个元素不是一个集合

:last 最后一个元素

:eq(index) 按照索引查找元素

$("li:eq(2)") 索引从零开始 获取li标签中的第三个元素

:contains(text) 按照内容查找元素

$(“li:contains('张三')”） 获取到内容包含张三的所有li元素 张三为什么必须加单引号呢？因为它是一个字符串，而不是一个变量，所以不加单或双引号的话是会报错的。

:has(slector) 按照元素获取

$("li:has('p')")获取了包含<p>元素的全部<li>元素

:hidden 获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素。$("li:hidden")获取li 下面所有display：none的元素或者是hidden的元素

:visible 获取的是全部可见的元素,只要不将元素的display属性值设置为“none”，都可以通过该选择器获取。

$("p:visible")获取可见的<p>元素

[attribute=value] 获取属性名等于属性值的元素

$("li[title='小超人']") 加了li是确定了范围如果不加li则选择的是全部的

[attribute!=value] 获取属性名不等于属性值的元素

[attribute*=value] 获取属性值中包含指定内容的全部元素

$("li[title*='新']")获取了属性值中包含“新”的li元素

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

$("li:first-child")获取了所有个<ul>父元素中的第一个<li>元素

:last-child 获取父元素总的最后一个子元素 常用多个集合数据的选择处理

表单选择器

:input 获取表单全部元素 返回全部的表单元素，不仅包括所有<input>标记的表单元素，而且还包括<textarea>、<select> 和

<button>标记的表单元素,它选择的表单元素是最广的

:text 获取表单中全部单行的文本输入框 对textarea不起作用

:password 获取表单中全部的密码输入文本框元素

:radio 获取表单中的全部单选按钮元素。

:checkbox 获取表单中的复选框元素。（）

:submit 获取表单中的提交按钮元素。（一般一个表单中只有一个type属性是“submit”的按钮） 如果button没有定义会默认是

submit的提交按钮

:image 获取当“input元素的type属性是image时，这个元素就是一个图像域”这个类下的元素

:image 选择器只能获取<input>图像域，而不能获取<img>格式的图像元素

:button 选择器能获取且只能获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素。

:checked 获取处于选中状态的全部元素。

:selected 只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。

以上这篇对jQuary选择器的全面总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈jQuery 选择器和dom操作

    浅谈jQuery 选择器和dom操作 JQuery选择器 1.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class 和标签名来查找DOM元素.这个非常重要,下面的内容都是以此为基础,逐级提高的. 1)."$("#id")",获取id指定的元素,id是全局唯一的,所以它只有一个成员. 2)."$(".class")",获取class指定的元素,不同的元素可以具有相同的class属性

  • jQuery四种选择器使用及示例

     jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 <p> 元素. $("p#demo") 选取所有 id="demo" 的 <p> 元素. 示例代码: jquery 部分 $(document).ready(function(){/

  • jQuery原理系列-css选择器的简单实现

    jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和document.querySelectorAll直接查找元素,如果是做移动端开发的,使用jQuery的必要性大大降低. 用js代码实现css选择器,必然是用正则表达式来识别字符串了,当然浏览器提供的原生api 效率更高,以下代码只做原理性展示,并未优先性能, 例如 1)查找id显然是用document.

  • jQuery中选择器的基础使用教程

    其实选择器就像开罐器一样,会用这个工具的人,自然吃的到甜头,但不会用这个工具的人,不管罐头里面的面筋土豆有多美味,吃不到就是吃不到,就如同jquery再怎么强大,也只能看着荧幕,而不知该如何下手,不过虽然选择器不难,也容易上手,但老实说,我用了一年多下来,还是觉得自己只有用皮毛而已,所以希望藉着这一系列的笔记,让自己能更长进一些 DOM怎么吃 DOM可以说是JavaScript与网页之间的联系管道,他提供了一个模型,让JavaScript能藉由此模型来改变或操作整个网页, <div class=

  • jQuery中的通配符选择器使用总结

    jquery选择器中的通配符经常用到,大致的用法总结如下: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']");//id属性以code结束的所有input标签 $("input[id*='code']");//id属性包含code的所有input标签 $("input[name^='code']");//name属性以code开始的所有in

  • 对jQuary选择器的全面总结

    jQuary基础选择器 $("div*")获取div下面的所有元素 $(".red,.green").html("怎么") // 需要注意的是要把两个选择前写在同一个引号内 (需要同时选择多个选择器的时候用) $("ance desc") //ancestor祖先选择器 descendant子孙选择器 $("parent > child") //只包含子辈选择器 不包含孙辈选择器 $("pr

  • jquery之基本选择器practice(实例讲解)

    jquery之基本选择器practice(实例讲解)

    一.在输入框中输入数字,点击按钮,实现对应事件的功能. html代码: <input id="txt1" type="text" value="2" /> <input id="Button5" type="button" value="改变大于N的行背景为绿色" /> jQuery代码: //改变大于N的行背景为绿色 $("#Button5"

  • jQuery选择器之子元素过滤选择器

    本文实例为大家分享了jQuery子元素过滤选择器的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="

  • jQuery选择器之属性过滤选择器详解

    本文实例为大家分享了jQuery属性过滤选择器的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="t

  • Mootools 1.2教程(2) DOM选择器

    如果你还没有准备好,请先阅读上一篇<Mootools 1.2教程(1)--MooTools介绍>.我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本. 今天开始本系列教程的第2讲.在这一讲中,我们会学习几种选择HTML元素的方法.在许多方面,这是MooTools用得最多最基本的.毕竟,要创建一个基于HTML元素的交互性用户体验,你必须首先把它们掌握在手中. 基本的方法 $(); $函数是MooTools中基本的选择器.你可以通过它来根据一个ID选择DOM元素.

  • JavaScript获取系统自带的颜色选择器功能（图）

    JavaScript获取系统自带的颜色选择器功能（图）

    效果如图所示:下面是获取系统自带的颜色选择器的代码: function $(obj) { return document.getElementById(obj); } function pickColor() { if (!window.isIE) return; var sColor = $('dlgHelper').ChooseColorDlg(); var color = sColor.toString(16); while (color.length [Ctrl+A 全选 注:如需引入外

  • JS仿JQuery选择器功能

    JQuery作为应用最广的JS库,其最强大的功能之一就是几乎涵盖所有方法的且代码十分简短的选择器功能,我们也可用自己的代码实现此功能,代码逻辑.使用方法与JQuery一致 function ZQuery(arg){ this.elements = []; //存东西 this.domString = ''; //保存字符串标签 if(typeof arg=='function'){ //DOMReady DOMReady(arg); }else if(typeof arg=='string'||

  • vue与bootstrap实现时间选择器的示例代码

    一.下载bootstrap-datetimepicker时间选择器js,css文件. 1. github地址:bootstrap-datetimepicker 2. 官方网站地址:官网bootstrap-datetimepicker地址,有具体的例子与解释 二.在vue项目文件中引入 import './assets/css/bootstrap.min.css' import "./assets/css/bootstrap-datetimepicker.min.css" import

  • flex4.5中CSS选择器的应用小结

    CSS选择器可以包括,标签选择器.类别选择器.ID选择器.交集选择器.并集选择器.后代选择器.全局选择器.伪类等,这些样式应用都已经在flex得到支持 1.标签选择器标签选择器是根据MXML文件中组件的类型来设置的,示例如下: 复制代码 代码如下: <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx&qu

  • jQuery.prototype.init选择器构造函数源码思路分析

    一.源码思路分析总结 概要: jQuery的核心思想可以简单概括为"查询和操作dom",今天主要是分析一下jQuery.prototype.init选择器构造函数,处理选择器函数中的参数: 这个函数的参数就是jQuery()===$()执行函数中的参数,可以先看我之前写的浅析jQuery基础框架一文,了解基础框架后,再看此文. 思路分析: 以下是几种jQuery的使用情况(用于查询dom),每种情况都返回一个选择器实例(习惯称jQuery对象(一个nodeList对象),该对象包含查询

随机推荐