HTML5学堂:在学习JQuery开发的时候,选择器有多种,而我们将接着介绍选择器的其他类型,希望对大家有帮助!...: 把属性选择器不放在css选择器里面是因为jQuery中写法是不一样的.至于css中写法可以参考我之前写的一篇css的选择器一文.jQuery中是和xPath类似的写法: $("mix[@attr]"...:选取单前节点的父节点 @:选取属性,这个在之前说过了(属性选择器) nodename:选取节点下的所有节点 jQuery中的应用: 根节点是很少用到的,常用的如下面的例子: $("div/p")相当于...):查询指定XML文档中的所有div元素 选择器来源可以是:作为上下文的DOM元素,文档或jQuery对象 还有两个:$.extend(prop)和$.noConflict()是和插件以及和其他库兼容的使用...相关阅读:JQuery选择器(上)
DOCTYPE html> 属性选择器的使用 的对象 获取属性值包涵it的对象 获取属性值包涵www的对象并且title包含"是"的对象 div class="divItem"> www.it.com做技术 sina.com.cn新浪 我没有href div>.../js/jquery-1.8.3.js"> $(document).ready(function () { $("button").eq(0).click(function
选择器是 jQuery 最基础的东西,本文中列举的选择器基本上囊括了所有的 jQuery 选择器,也许各位通过这篇文章能够加深对 jQuery 选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写...本文配合截图、代码和简单的概括对所有 jQuery 选择器进行 了介绍,也列举出了一些需要注意和区分的地方。...:empty:获取内容为空的元素 :has(selector) :获取内容包含指定选择器的元素 :parent :获取内容不为空的元素(特殊) 5、可见性选择器 :hidden:获取所有隐藏元素 :visible...:only-child :如果当前元素是唯一的子元素,则匹配 8、表单选择器 :input :选取页面中的所有表单元素,包含 select 以及 textarea 元素 :text :选取页面中的所有文本框...原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:jQuery中的9个选择器
DOCTYPE html> 68-伪元素选择器 <style...::after{ /*指定添加的子元素中存储的内容*/ content: "么么哒"; /*指定添加的子元素的宽度和高度*/...-- 1.什么是伪元素选择器?...伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素 2.格式: 标签名称::before{ 属性名称:值; } 给指定标签的内容前面添加一个子元素...标签名称::after{ 属性名称:值; } 给指定标签的内容后面添加一个子元素 --> div> <!
关于基本选择器包括 “*” ,“.class”,"element","#id","selector1 selementN" "*" 选择器,可以找到文档中的所有的元素,包括 head body $...元素 //}); ".class" 选择给定样式类名的所有的元素。...//$(function(){ //$(".myclass").css("background-color","red"); 找到带有 .myclass 这个选择器的所有的 元素//...","green"); 找到带有 .biaoq这个选择器的所有的下面div 元素 找到带有 .biaoq这个选择器的所有的下面span元素}) “#id”选择一个具有给定id 属性的单个元素...selementN" 将每个选择器匹配到的元素合并后返回 // $(function(){ $(".jh div, .jh .myclass").css("border","3px solid
选取页面中元素可以使用jQuery给我们提供的$()方法,该方法需要提供选择器作为参数,方法执行完成后会返回给我们一个jQuery对象,被选取的元素就包含在该对象中。...$('.box') 选择所有clss属性值为top的元素 多重选择器 $('div, p') 选择所有的div元素和p元素 2.2 按层次结构选取元素 选择器 实列 说明 子代选择器 $('div...> p') 选择作为div元素子元素的所有p元素 后代选择器 $('div p') 选择作为div后代的所有p元素 相邻选择器 $('div + p' 选择紧邻div元素且位于其后的p元素 兄弟选择器...2.6 内容过滤器 选择器 示例 说明 tag:contain(text) $('div:contain("hello")') 选择匹配元素集合中包含指定文本的所有div元素 tag:empty $('...$('div:parent') 选择匹配元素集合中包含子元素的所有div元素(包括文本节点) 2.7 选取表单元素 jQuery提供了一些专门为表单设计的选择器,用于快速访问表单元素。
很明显前者的执行效率高于后者。 2. 在jQuery选择器定位页面元素时,无须考虑定位元素在页面中是否存在,即使不存在,浏览器也不会报错! 二、jQuery选择器: 1....层次选择器:例:$("div span") 例:$("#divMid").siblings("div") 3....表单选择器:例:$("#form1 :input") 例:$("#form1 :password") 三、 jQuery元素属性操作: 1....动态创建节点:$(html) var $div = $("div title="jQuery学习">加油div>"); $("body").append($div);...等价于:$($div).appendTo($("body")); 6. clone()&clone(true) clone()被复制后的元素以不具有任何元素的行为 7. replaceWith
图片猛戳链接
$选择器 例 1.1(ElementApi.html) $选择器 jquery.js"> <!...-- function showHide() { /* toggle() 切换元素的可见状态。
:image:选择所有图像输入框元素。 :reset:选择所有重置按钮元素。 伪类选择器: :first:选择每个集合中的第一个元素。 :last:选择每个集合中的最后一个元素。...:eq(n):选择集合中索引等于 n 的元素。 :not(selector):选择不匹配指定选择器的所有元素。 :gt(n):选择集合中索引大于 n 的元素。...:lt(n):选择集合中索引小于 n 的元素。 :eq(n):选择集合中索引等于 n 的元素。 过滤选择器: :first-child:选择每个集合中的第一个子元素。...:last-child:选择每个集合中的最后一个子元素。 :only-child:选择每个集合中唯一的子元素。 :nth-child(n):选择每个集合中索引为 n 的子元素。...$("div > p").css("color", "blue"); // 将直接在 div> 下的 元素文字颜色设置为蓝色 // 相邻兄弟选择器示例
什么是jQuery选择器 jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。...【查看jQuery文档】 jQuery选择器虽然很多,但是选择器之间可以相互替代,就是说获取一个元素,你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。...css里的选择器jQuery都能写 基本选择器 名称 用法 描述 ID选择器 $(“#id”) $(“#id”) 获取指定ID的元素 类选择器 $(“.class”) 获取同一类class的元素 标签选择器...$(“div” 获取同一类标签的所有元素 并集选择器 $(“div,p,li”) 使用逗号分隔,只要符合条件之一就可。...交集选择器 $(“div.redClass”) 获取class为redClass的div元素 总结:跟css的选择器用法一模一样。 案例: <!
目录 首先在官网下载jquary的js文件 html页面文件里面引入 jQuery中的选择器 基本选择器id 选择器标签选择器 (“a”)类选择器 (“.class”) 首先在官网下载jquary的js...以后就可以在这个HTML页面使用jquary的语法了 jQuery中的选择器 我们打开jquary的中文参考文档 ? ? 打开就是以上的界面。 基本选择器 ?...> 子元素选择器 $(function(){ //第一个 而此选择符将为每个父元素匹配一个子元素...//$("ul li:first-child").css("background-color","green"); //最后一个 而此选择符将为每个父元素匹配一个子元素
CSS中基本选择器有3种,在jQuery中比CSS还多一种,依次分析: ? 为了观看更直接,将每个选择器和一个按钮绑定,通过触发点击事件完成对应的操作。...③标签选择器 格式为:$("div")。 通过它可以操作对应标签名的标签,其效果和类选择器很相似。 ④全选选择器 格式为:$("*")。这是jQuery中多于CSS的。...通过它可以操作所有标签,在数据库中:“*”也代表了查询所有元素的意思。 二、层级选择器 层级选择器一共有4中,逐一说明: ?...四、基本过滤选择器 一共太多种了,说几种常见的: ? HTML中有很多个div标签,其每个标签对应一个索引,从0索引位开始。 ①过滤选择器::first 格式:$("div:first")。...六、总结 选择器之间是可以叠加使用的。比如层级选择器中可以包含基本选择器。 jQuery中的选择器实在是太多了,通过网络查询到jQuery对应里的选择器: ?
例 1.8(colonSelector1.html) 属性选择器 <!...-- .myCla{ background-color:#ff0000; } --> jquery.min.js..."> $(function(){ /*:has(selector) 匹配含有选择器所匹配的元素的元素 */ $("
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器...querySelector 该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素。...elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div 但需要注意的是返回的nodeList集合中的元素是非实时(no-live...)的,想要区别什么是实时非实时的返回结果,请看下例: div id="container"> div>div> div>div>div> //首先选取页面中id为container...理解这点后,可以来看一个更有趣的例子了。比如我们要选择类名里面含反斜杠的元素。是的,我们需要一共使用四个反斜杠!才能正常工作。 div class="foo\bar">div> ?
css后代选择器和子元素选择器的区别 说明 1、后代选择器使用空格作为连接符号,子元素选择器使用>作为连接符号。 2、后代选择器选中所有的特定后代标签,子元素选择器选中所有的特定的直接标签。...后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标 签中的特 定标签都会被选中 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签...实例 比如说只要选择class为box的li标签而不选到最内层的li标签该如何做? 单纯用后代选择器很难做到吧!...这时候子代选择器就出场了,可以这样写: div > ul > li{ 注:>是指只能一代接一代,比如:div > ul > li } 如果想选择div中所有li...> 以上就是css后代选择器和子元素选择器的区别,希望对大家有所帮助。
另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器。由于jQuery支持选择器这一特性,因此有一定CSS经验的开发人员可以很容易的切入到jQuery的学习中来。...开发者可以使用jQuery选择器选中元素,然后直接给元素添加事件。...这个括号中可以传递选择器的名称,也可以传递DOM对象。...传入css中定义的类选择器名称,就可以控制包含该选择器的所有标签,示例: 的id值,然后在值的前面加上 # (与css中的选择器命名一样)即可,无论css中是否有定义该id选择器都可以这么使用,示例: <!
jQuery 选择器允许对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。...它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。 jQuery 中所有选择器都以美元符号开头:$()。...使用jquery请先引入 jquery.com/jquery-3.1.1.min.js"> 元素选择器 $(this)...$("ul li:first") //选取第一个 元素的第一个 元素 $("ul li:first-child")//选取每个 元素的第一个 元素 $("div...#intro .head") //id="intro" 的 div> 元素中的所有 class="head" 的元素 $("*") //所有元素 类别选择器 $(".intro")
class属性值匹配的元素; 4)并集选择器:$("选择器1,选择器2"),获取多个选择器选中的所有元素。...2.2 层级选择器 层级选择器包括两类: 1)后代选择器:$("A B "),选择A元素内部的所有B元素; 2)子选择器:$("A>B"),选择A元素内部的所有B子元素; 【练习案例】:在2.1程序基础上...,包含多个属性条件的选择器 【练习案例】:主要看标签中的内容,注意各种条件的写法 选择器 过滤选择器包含9类: 1)首元素选择器: :first ,获得选择的元素中的第一个元素 2)尾元素选择器: :last ,获得选择的元素中的最后一个元素 3)非元素选择器: :.../复选框选中的元素; 4)选中选择器::selected获得下拉框选中的元素; 【练习案例】:主要看标签中的内容,注意各种条件的写法 <!
在前端工程师的日常工作中,使用 CSS 元素选择器是稀松平常的事;无论你是编写一般的 CSS 还是需要经过编译的 SASS,SCSS,LESS等,最终都被编译成一行一行的 CSS 样式属性,最终交给浏览器解析并套用...: #div1 .c .d .f .c .d .c .d 以此类推,每个 DOM 树上的元素,都必须便利所有的样式规则,才可以取得个别的样式,这样会造成大量冗余的计算,进而严重影响性能。...也可以换个方式思考:在 HTML 的结构中,一个元素可以有无数个子元素,但只能有一个父元素,由子找父(由下往上)搜寻绝对是比较快的。...状态一致就是要满足以下几个条件: 没有设定 ID tag 及 class 必须完全一致 没有设定 style 属性 样式规则中不能使用各种同级选择器(例如:〜,+,:first-child 等) 由于上面的条件...延伸 认识了 CSS 选择器之后,你一定会很好奇,JavaScript 的元素选择器又是怎么回事呢?