JQuery之选择器篇(一)

??今天回顾了之前学习的JQuery选择器,现在简单的总结一下。



JQuery选择器类型

??主要分为四类

  1. 基本选择器
  2. 层级选择器
  3. 过滤选择器
  4. 表单选择器

基本选择器

??基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM元素。在网页中,每个id名称只能用一次,class允许重复使用。

  1. 标签选择器??div { color:Red;}
  2. ID选择器??#myDiv {color:Red;}
  3. 类选择器??.divClass {color:Red;}
  4. 后代选择器(类选择器的后代选择器)??.divClass span { color:Red;}
  5. 群组选择器??div,span,img {color:Red} ?? 即具有相同样式的标签分组显示


层级选择器

??如果想通过DOM元素之间的层次关系来获取特定的元素,例如后代元素,子元素,相邻元素和兄弟元素等 大专栏  JQuery之选择器篇(一),那么层次选择器是一个非常好的选择。

  1. 后代??$(“ancestor descendant”)??选取ancestor元素里所有
    descendant(后代)元素
  2. 子元素 ?? $(“parent>child”) ??选取parent元素下的child(子)元素
  3. next元素 ??$(“prev+next”) ??选取紧接在prev元素后的next元素
  4. siblings元素 ??$(“prev~siblings”) ??选取prev元素之后的所有siblings元素

?? 在层次选择器中,第1个和第2个比较常用,而后面两个因为在jQuery里可以用更加简单的方法代替,所以使用的机率相对较少,可以用相应的方法代替。

??可以用next()方法来代替$(“prev+next”)选择器,即$(“.one+div”)与$(“.one”).next(“div”)等效

??可以用nextAll()方法来代替$(“prev~siblings”)选择器,即$(“.one~div”)与$(“.one”).nextAll(“div”)等效



小结
本文主要介绍了jQuery选择器中的基本选择器和层次选择器,后两者改天再总结。

原文地址:https://www.cnblogs.com/lijianming180/p/12251182.html

时间: 2024-08-02 22:08:56

JQuery之选择器篇(一)的相关文章

jQuery 复合选择器应用的几个例子

这篇文章主要介绍了jQuery 复合选择器应用的几个例子,本文例子所引用的jQuery版本为 jQuery-1.8.3.min.js,喜欢的朋友可以学习下 <!-- 本文例子所引用的jQuery版本为 jQuery-1.8.3.min.js --> 一. 复合选择器对checkbox的相关操作 ? 1 2 3 4 5 <input type="checkbox" id="ckb_1" />  <input type="chec

jQuery基础——DOM篇

jQuery基础--DOM篇 在javascript中如何创建节点? 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及的一点方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild 例子: document.addEventListener('click',function(){ //创建2个div元素 var rightdiv = document.cre

jQuery基础——样式篇

jQuery基础--样式篇 jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别 在于 2.x 不再兼容 IE6.7.8 为移动端而优化,由于减少了一些代码,使得该版本比 jQuery 1.x 更小且更快. 如果开发者比较在意老版本 IE 用户,只能使用 jQuery 1.9 及之前的版本了. $(document).ready 的意思是等页面的文档(document)中的节点都加载完毕后,在执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正

谜一样的jquery之$选择器

jquery是一个强大的js类库,提供了很多便利的操作方法并兼容不同的浏览器,一旦使用便欲罢不能,根本停不下来,今天我们就来解读一下这个神秘的jquery源代码. 前几天思考再三,自己尝试着封装了一下jquery的$选择器,然而并不完善,我只对id,class,和标签选择器进行了封装,发现其实如果实现浅层的封装那么我们很容易就能够实现,但是一旦我们尝试着选择器的层次嵌套就会出来很多大大小小的坑! 下面我们先来看一下我个人封装的jquery的选择器部分. window.$ = function (

jquery颜色选择器

本站下载 第二种:纯JAVASCRIPT: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2311"> <title>DW调色板</title> <script> var ColorHex=new Array('00','33','66','99','CC','FF') var SpColo

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法

1 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 2 3 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 4 $("div") 选择所有的div标签元素,返回div元素数组 5 $(".myClass") 选择使用myClass类的css的所有元素 6 $("*") 选择文档中的所有的元素,可

关于jquery ID选择器的看法

最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2.  $("div#bar") 下面说说我为什么会给出两种答案 1. 因为页面要求ID是唯一的,题目中的语句,可以直接优化成ID选择 2. 因为jQuery的选择器引擎用的是Sizzle,而$("div#bar")这样的写法,在Sizzle内部,会是一个从右往左的查找顺序,也就是

jQuery 过滤选择器

jQuery 选择器(一) 1.ID选择器根据控件ID获取jQeruy,相当于javascript的getelementById.使用方法:$("#myid"),获取ID等于myid的jquery对象. 2.标签选择器使用标签名称获取jQuery,相当于javascript的getElementsByTagName_r().使用方法:$("p"),获取所有p标签.3.class选择器class为元素的定义样式,根据class名称获取jquery对象.如:$(&quo

关于JQuery的选择器

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div")           选择所有的div标签元素,返回div元素数组 $(".myClass")      选择使用myClass类的css的所有元素 $("*")