`

选择器学习

阅读更多

  选择器,第一次听到这个名词很蒙蔽,那么现在了解选择器

    选择器允许您对元素组或单个元素进行操作。

 

 

 

学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

 

选择器允许您对 HTML 元素组或单个元素进行操作。

 

在 HTML DOM 术语中:

 

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

 

概念:

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

 

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

 

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色:

 

实例:

 代码:html文件

 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color","red");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>

</html>

  效果:点击按钮,css样式变化,

分享到:
评论
1 楼 麦田的设计者 2016-04-26  
文章来自www.w3school.com.cn,借鉴的,本人就一枚渣渣

相关推荐

    CSS3选择器学习笔记代码

    在CSS(层叠样式表)3版本中,选择器的引入极大地...在“CSS3选择器学习笔记代码”中,你将找到这些知识点的实例和示例代码,帮助你更好地理解和运用CSS3选择器。通过实践和调试这些代码,你的CSS技能将得到显著提升。

    vue2.0 基础 v-show 数据选择器 学习 视频

    老师发的一个作业学习视频, 放到这里,分享出来。

    前端css选择器练习diner.zip

    "前端css选择器练习diner.zip" 是一个针对CSS选择器学习和实践的资源包,名为"css-diner"。 在"css-diner"这个练习中,你可以深入理解并掌握各种CSS选择器的用法,从而提升你的前端开发技能。以下是一些关于CSS选择...

    jQuery基本选择器和层次选择器学习使用

    通过对基本选择器和层次选择器的学习和使用,开发者可以灵活地对网页中的元素进行操作和样式设置。这些选择器是实现动态网页和交云响应用户操作的基础工具。此外,通过示例代码的学习,开发者可以更好地掌握jQuery...

    juqery 学习之三 选择器 简单 内容

    jQuery 是一个强大的 JavaScript 库,它极大地简化了 JavaScript 对网页DOM(文档对象模型)的操作。...对于学习jQuery的朋友来说,熟练掌握这些基础选择器是非常重要的,它们是构建动态和响应式网页的基础。

    H5移动端选择器,layPicker移动端日期选择器

    在移动应用开发中,UI组件的选择器是必不可少的一部分,它们为用户提供友好的交互方式,比如日期选择、级联选择等。`layPicker`是一个专为移动端设计的jQuery选择器插件,尤其适用于微信环境和一些老旧版本的浏览器...

    自定义滑动选择器简单示例

    在Android开发中,滑动选择器(Slider)是一种常见的用户界面元素,用于提供用户友好的交互体验,特别是在需要用户从一系列选项中进行选择时。本示例“自定义滑动选择器简单示例”旨在帮助开发者理解如何在Android...

    CSS基本选择器实用PPT学习教案.pptx

    CSS 基本选择器实用学习教案 本学习教案主要介绍了 CSS 基本选择器的概念、语法和应用,旨在帮助学生掌握基本的 CSS 选择器,并实践于个人主页项目中。 一、CSS 概念和语法 CSS(Cascading Style Sheets)是用来...

    深度学习(js)颜色选择器ver1_0_0

    深度学习(js)颜色选择器ver1_0_0

    数据选择器及其应用

    数字电路数据选择器实验报告 本实验报告旨在研究数字电路中的数据选择器,了解组合逻辑电路的设计步骤、分析方法和测试方法,并掌握数据选择器的工作原理与逻辑功能。同时,本报告还将介绍双四选一数据选择器 74LS...

    基于Qt自定义的滑动选择器

    **基于Qt自定义的滑动选择器** 在软件开发中,UI界面的用户体验往往起着至关重要的作用。Qt是一个跨平台的应用程序开发框架,广泛应用于桌面、移动和嵌入式设备。它提供了一系列丰富的控件,帮助开发者创建美观且...

    CSS学习之二 选择器

    在CSS学习中,选择器是非常关键的一部分,因为它们控制着页面的布局和视觉呈现。 1. **元素选择器**:元素选择器是最基础的选择器类型,直接基于HTML元素名称来定义样式。例如,`h1`、`p` 或 `div` 都是元素选择器...

    Android 选择器类库,地址、时间日期、时间等选择器源码

    通过阅读和理解源码,开发者不仅可以学习如何创建自定义选择器,还能学习到如何优化选择器的性能和用户体验。此外,源码还包含了丰富的注释和示例,有助于快速理解和使用。 这个库的优势在于它的模块化设计,使得...

    数电实验 数据选择器和译码器PPT学习教案.pptx

    "数电实验 数据选择器和译码器PPT学习教案.pptx" 根据提供的文件信息,我们可以生成以下相关知识点: 1.译码器的介绍 译码器是一种多输入多输出的组合逻辑电路,功能是将给定的代码所代表的含义“翻译”出来,从...

    简单的选择器Demo

    在编程领域,选择器是一种非常基础且重要的工具,特别是在前端开发中,用于定位和操作HTML元素。本Demo主要关注的是CSS选择器的使用,旨在...继续深入学习和实践,你会发现CSS选择器是构建动态、响应式网页的关键工具。

    Android自定义漂亮Dialog中嵌入自定义时间选择器和日期选择器

    本文将深入探讨如何在Android自定义Dialog中嵌入自定义的时间选择器和日期选择器,以实现更加美观且用户体验良好的界面。 首先,我们需要理解Android原生的DatePicker和TimePicker组件。DatePicker用于让用户选择...

    重新实现的Qt颜色选择器

    通过以上核心知识点的学习和实践,开发者可以创建出满足特定需求的、功能强大的颜色选择器,提升应用的交互性和用户体验。而`ColorRect`这个文件可能就是重新实现的`QColorDialog`中的关键部分,包含了颜色选择的...

    8选1数据选择器电路原理图+Proteus仿真

    通过学习和理解8选1数据选择器的工作原理及其实现方式,我们不仅可以深入理解数字逻辑设计的基础,还可以掌握Proteus软件的使用,这对于电子工程的学习和实践都是非常有价值的。在实际操作中,结合电路原理图和...

    数据选择器PPT学习教案.pptx

    数据选择器PPT学习教案.pptx

    Android颜色选择器大全

    解压后,可以查看源码学习如何在你的项目中应用这些选择器。通过研究示例代码,你可以理解它们的工作原理,以及如何将这些功能整合到你的应用中。 总的来说,Android颜色选择器是提升用户体验的重要组件,根据用户...

Global site tag (gtag.js) - Google Analytics