Jquery 学习笔记（二）

选择器
从最开始看到Jquery这样的选择器就让我想起了CSS的选择器，简直是同出一辙啊，CSS的选择器语法个人觉得相当的经典，那么Jquery借鉴CSS也就没有多少疑问了。

还是复习一下Jquery的选择器吧

其中h1为选择器，color:red与background:#d00与声明，两者结合也即{}内称为声明块；color与background称为属性；red与#d00称为值。

其中选择器类别可分为以下类别：

标签选择器：p{CSS rules}

id选择器：#ID{CSS rules}

类选择器：.Class{CSS rules}

群组选择器：h1,h2,h3,h4,h5,h6{CSS rules}

后代选择器：div p{CSS rules}

通配选择器：*{CSS rules}

伪类选择器：a:link,a:visited{CSS rules}

另还有不常使用的多类选择器、属性选择器、部分属性选择器、相邻兄弟选择器、子选择器等，详细可参与《CSS权威手册》这本书或者http://www.w3.org/TR/CSS2/selector.html。

相对应，理解Jquery中$("#ID")就不是难事了。
Jquery中基本选择器包括*,class,element,id及这种群组方式selector1,selector2,…

还是看下综合实例

.normalStyle{}{
background:#C3D9FF;
}
.alterStyle{}{
background:#DDF8CC;
}
.h{}{
background:#fcc;
border:solid 1px #d00;
}
.button{}{
background:#FAFAA0;
border:solid 1px #996699;
padding:4px;
}

$(function(){
$("li").addClass("normalStyle");
$(".alter").addClass("alterStyle");
$("h1,h2,h3").addClass("h");
$("#btn").addClass("button");
});

  • 选项一
  • 选项二
  • 选项三
  • 选项四

标题一

标题二

标题三

按钮

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]


2、层次选择器
不用说，层次选择器的思想来自CSS；实际上稍微拓展了
$("div span")//选择<div>里所有<span>元素
$("div>span")//选择<div>元素下元素名为<span>的元素
$('prev+next')//选择紧接在prev元素后的next元素
$('prev~siblings‘)//选择prev元素之后的所有sibling元素
例：


代码如下:

$(function(){
$("ul li").css("color","#f00");
$("div>span").css("color","#008000");
$("div+span").css("color","#d00");
$("div~span").css("background","#ffc");
});
</script>
</head>
<body>
<div>
<span>文字一</span>
</div>
<span>文字二</span>
<span>文字三</span>
<ul>
<li>选项一</li>
<li>选项二</li>
<li>选择三</li>
</ul>

赞 (0)

相关推荐

  • jquery学习笔记二 实现可编辑的表格

    jquery学习笔记二 实现可编辑的表格

    实现可编辑的表格demo: 实例图: 代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runa

  • jQuery学习笔记之Ajax用法实例详解

    本文实例讲述了jQuery学习笔记之Ajax用法.分享给大家供大家参考,具体如下: 一.Ajax请求 1.jQuery.ajax(options) 通过 HTTP 请求加载远程数据.jQuery 底层 AJAX 实现.简单易用的高层实现见 .get,.post 等. .ajax()返回其创建的XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求..ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下.

  • jQuery学习笔记之回调函数

    1.回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,才会真正的执行回调函数内部的方法. 2.代码 JS代码 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opacity:0.1

  • DB2 UDB V8.1管理学习笔记(二)

    正在看的db2教程是:DB2 UDB V8.1管理学习笔记(二).表空间类型分为SMS和DMS,分别是system management space, database management space. SMS使用方便,简单,无需手工创建和维护数据存储文件.DMS需要手动指定container和存储数据的文件名,并保证有足够磁盘空间可用.  对于一个数据库,至少存在一个page size为4K的系统临时表空间,可以额外建立具有更大page size的用户临时表空间,系统会自动进行使用. 无法用

  • Bootstrap3学习笔记(二)之排版

    在上篇文章给大家介绍了BootStrap3学习笔记(一)之网格系统 对于标题,Bootstrap已经修改了h1--h6的样式,如果需要副标题,还可以在其中使用small标记 <h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2>

  • Flutter学习笔记(二)创建一个flutter项目

    目录 开发环境 实践 运行 网络环境配置 (1)进入packages\flutter_tools\gradle 文件夹,然后打开flutter.gradle文件.目录如下图所示: (2)进入 flutter\packages\flutter_tools\gradle 文件夹,然后打开resolve_dependencies.gradle文件,目录如下: 本文就是利用androidstudio创建一个flutter项目并且成功运行起来.其中运行的过程,可能涉及到网络环境配置的问题.觉得过于简单的朋

  • 那些年，我还在学习jquery 学习笔记

    原来Jquery就是一个javascript写的一个库,它给我们提供了很多常用的方法,使用这些方法可以兼容多种浏览器,使用它可以达到很好的动画效果,下面就来看看那些年的学习笔记吧一.$符号 1.选择器 可以选择html标签,也可选择ID,Class等 如下: 复制代码 代码如下: <script type="text/javascript"> $( function() { $("table.datalist tr:nth-child(odd)").ad

  • python网络编程学习笔记(二)：socket建立网络客户端

    1.建立socket 建立socket对象需要搞清通信类型和协议家族.通信类型指明了用什么协议来传输数据.协议的例子包括IPv4.IPv6.IPX\SPX.AFP.对于internet通信,通信类型基本上都是AF_INET(和IPv4对应).协议家族一般表示TCP通信的SOCK_STREAM或者表示UDP通信的SOCK_DGRAM.因此对于TCP通信,建立一个socket连接的语句为:s=socket.socket(socket.AF_INET,socket.SOCK_STREAM)对于UDP通

  • JQuery 学习笔记 选择器之二

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • Jquery 学习笔记（二）

    Jquery 学习笔记（二）

    选择器 从最开始看到Jquery这样的选择器就让我想起了CSS的选择器,简直是同出一辙啊,CSS的选择器语法个人觉得相当的经典,那么Jquery借鉴CSS也就没有多少疑问了. 还是复习一下Jquery的选择器吧 其中h1为选择器,color:red与background:#d00与声明,两者结合也即{}内称为声明块:color与background称为属性:red与#d00称为值. 其中选择器类别可分为以下类别: 标签选择器:p{CSS rules} id选择器:#ID{CSS rules} 类

随机推荐