jQuery学习笔记

Day two

Chapter two 选择器

类选择器

语法结构:
$(“.classname”)

javascript里面没有类选择器所以这个时候使用jQuery会更加的简便

通配选择器

语法结构:
jQuery(“*”)

例如下列代码就是匹配body里面的所有的元素

<script type="text/javascript">

$(function() {

$("*").css("color","red");

alert("hello");

}

)

</script>

注意:在书本上说可以在* 之前加上body表示范围,但是实际操作上会有问题,我加了body就没有办法显示出我想要的效果,但是如果我没有加body就会显示出我想要的效果,同时他还可以用另一种方法来代替,如下:
<script type="text/javascript">

$(function() {

var all=document.getElementsByTagName("*");

$("all").css("color","red");

alert("hello");

}

)

</script>

组选择器

语法结构:

jQuery(“selector1,selector2,selectorN);

其实组选择器就是上面四种选择器的组合

2.2层级选择器

包含选择器

语法结构:
jQuery(”包含选择器 被包含选择器“)

作用:他能够作用于包含选择器下所有的被包含选择器,不管这个被选择器是在子节点还是子子节点,他唯一不作用的就是外面的节点

注意:在有多个CSS的时候,属性和属性值之间要用冒号,属性与属性之间要用逗号,所有的属性要用大括号包含起来;

<script type="text/javascript">

$(function() {

$("form input").css({"border":"groove 2px red",

"background":"blue"});

}

)

</script>

子选择器

语法结构:
jquery(“父选择器>子选择器”)

作用:他只能够作用于父亲节点下的第一层的子节点,不作用子子节点,更不作用于外面的节点

相邻选择器

语法结构:

jQuery(“相邻的前一个选择器+相邻的后一个选择器”)

作用:他只能作用于和他相邻的同级的一个选择器,但是要保证前一个选择器是唯一的,不然它无法判断你所寻找的到底是哪一个选择器的后面一个选择器。

兄弟选择器

语法结构:
    JQuery(“相邻的前一个选择器~同级的选择器”)

作用:它能够作用于和他同级的后面的所有的选择器,可见他的作用会比相邻选择器强

2.3简单的伪类选择器

特殊位置选择器

:firs表示匹配集合的第一个元素

:last 表示匹配集合的最后一个元素

:eq(index) 表示匹配集合中的第index元素,注意eq是从0开始算起的

指定范围选择器

:even 表示匹配索引值是偶数的,也就是行数是基数的

:odd  表示匹配索引值是奇数的,也就是行数是偶数的

:gt (index)表示匹配大于索引值是index的元素

:lt(index)  表示匹配小于索引值是index的元素

排除选择器:
语法结构:
JQuery(“selector1:not(selector2)”);

作用能够匹配除了selector2以外的元素。

特殊选择器:

JQuery(“selector:animated”) 用来匹配动画元素

JQuery(“selector:header”) 用来匹配标题元素

2.4 与内容相关的伪类选择器

匹配包含给定文本的元素

语法结构:

JQuery(”selector:contains(text)”);

作用:它能够根据指定的文本把包含这个文本的标签里面的内容全部设置成你定义的模式

注意:contains过滤函数中必须使用单引号包含关键字,否则JQuery就无法识别

匹配包含元素选择器

语法结构:
JQuery(“selector:has(selector2)”);

作用:是能够过滤出selector选择器里面的selector2选择器,因此selector2必须包含在selector选择器里面,否则是没有作用的。

包含判断选择器

语法结构:
Jquery(“selector:empty”):  作用:过滤出匹配元素中包含空内容的元素

Jquery(“selector:parent”);   作用:过滤出匹配元素中包含非空内容的元素

2.5 与元素显示状态相关的伪类选择器

语法结构:

Jquery(“selector:hidden”):  作用:过滤出匹配元素中所有不可见的元素

Jquery(“selector:visible”);   作用:过滤出匹配元素中所有可见的元素

注意:他是hidden而不是hide,hide是一个函数名很容易弄混

2.6匹配子元素的为类选择器

语法结构:
:nth-child  作用:匹配其父元素下的第N个或奇偶数

他的具体用法例如:

:nth-child(even);

注意:他和eq()的最大的不同就在于,eq是从0开始算起,但是nth-child是从1开始算起的

:first-child  作用:为每个父元素匹配第一个子元素

:last-child  作用:为每个父元素匹配最后一个子元素

:only-child  作用:父元素中含有其他元素将不会被匹配

注意:他是匹配父元素之中的元素,因此必须是父元素中的元素,否则不能匹配。

2.7与表单对象相关的为类选择器

语法结构:

:表单元素名;

例如:input,text,submit等

2,8与表单属性相关的为类选择器

语法结构:

:enabled 匹配所有可用的元素

:disabled匹配所有不可用的元素

:checked 匹配所有选中的被选中的元素

:selected 匹配所有选中的option元素

2.9属性选择器

属性选择器就是根据属性和属性值作为选择过滤条件,来进行匹配DOM元素

jQuery的学习笔记2的更多相关文章

  1. jQuery源代码学习笔记_工具函数_noop/error/now/trim

    jQuery源代码学习笔记_工具函数_noop/error/now/trim jquery提供了一系列的工具函数,用于支持其运行,今天主要分析noop/error/now/trim这4个函数: 1.n ...

  2. jQuery的学习笔记4

    JQuery学习笔记3 2.9属性选择器 属性选择器就是根据元素的属性和属性值作为过滤条件,来匹配对应的DOM元素.属性选择器一般都以中括号作为起止分界符 它的形式如下: [attribute] [a ...

  3. jQuery的学习笔记

    JQuery学习笔记 Chapter one初识jQuery 1.2测试jQuery 在jQuery库中,$是jQuery的别名,如:$()相当于jQuery() 注意:在使用JQuery进行开发的时 ...

  4. jQuery 基础学习笔记总结(一)

    Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特 ...

  5. Jquery Mobile 学习笔记(一)

    1.模拟器,IOS:XCODE GENYMOTION  ANDROID:ECLIPSE GENYMOTION 2.jquery mobile data-role=page 代表一个页面 data-po ...

  6. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.4.Tabs控件

    之前,我们已经介绍了 jQuery UI 库,CSS 框架.下面,我们将学习这些有增强可视化效果,高度可配置的用户交互组件. Tab 的特性是,点击 tab 后,会高亮该 tab,并显示他的关联con ...

  7. Jquery mobile 学习笔记

    最近学习移动开发,接触到了phonegap,然后又需要开始学习jquery mobile.掌握两者是开发轻应用的前提 在学习jquery mobile中,遇到了许多问题让初学者很是头疼,无意间找到这个 ...

  8. jQuery api 学习笔记(1)

      之前自己的jquery知识库一直停留在1.4的版本,而目前jquery的版本已经更新到了1.10.2了,前天看到1.10中css()竟然扩充了那么多用法,这2天就迫不及待的更新一下自己的jquer ...

  9. jQuery源代码学习笔记:jQuery.fn.init(selector,context,rootjQuery)代码具体解释

    3.1 源代码 init: function( selector, context, rootjQuery ) { var match, elem, ret, doc; // Handle $(&qu ...

随机推荐

  1. 01_Weblogic课程之概念篇:代理服务器,web服务器,应用程序服务器,JNDI概念,JTA概念,Java消息服务,Java验证和授权(JAAS),Java管理扩展,Web客户机,客户机应用程序

     1 什么是服务器 Weblogic中服务器分为两种,一种是受管服务器,另外一种是管理服务器. Weblogic课程(Weblogic是Oracle公司的,最开始的是BEA公司的) 一 系统管理 ...

  2. C语言通讯录管理系统

    本文转载自:http://blog.csdn.net/hackbuteer1/article/details/6573488 实现了通讯录的录入信息.保存信息.插入.删除.排序.查找.单个显示等功能. ...

  3. chrome "Provisional headers are shown"

    我的问题的,每次打开浏览器,点开有视频的页面(云平台的存储),然后当视频还没有加载完,就马上关闭,连续操作很多次(测试的暴力测试把),F12查看就有很多很多在加载中的连接,因为连续点击太多次了,第一个 ...

  4. Adapterview和adapter的联系

    在J2EE中提供过一种非常好的框架--MVC框架,实现原理:数据模型M(Model)存放数据,利用控制器C(Controller)将数据显示在视图V(View)上.在Android中有这样一种高级控件 ...

  5. javascript语法之String对象

    学习String类就是学习它的一些方法,主要用到方法全部罗列出来.如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

  6. ORACLE里锁有以下几种模式,v$locked_object,locked_mode

    ORACLE里锁有以下几种模式: 0:none 1:null 空 2:Row-S 行共享(RS):共享表锁,sub share  3:Row-X 行独占(RX):用于行的修改,sub exclusiv ...

  7. Android 上滑上拉菜单SlidingDrawer 不全屏显示的方法

    这里来说一个已经被废弃的SlidingDrawer.. 他可以实现上拉,下拉的菜单. 但是有个问题就是上拉以后,是全屏显示的. 首先 写一个布局: <RelativeLayout xmlns:a ...

  8. Xcode中的调试工具栏简介

    如下图所示: 从左至右,第一个按钮用来隐藏调试区域. 第二个按钮向你展示断点是否被全局开启或禁用.如果它不是高亮蓝色,则没有断点会被触发. 第三个按钮暂停或继续程序的执行,你一般点击它继续运行到程序的 ...

  9. InfiniDB 修改一行的效率?

    InfiniDB引擎的DML速度比较慢,无论设置自动提交开关为关闭或开启,插入性能都很糟糕,但更新和删除的效率还可以,并且不支持truncate表操作. 删,改 效率高 插入,效率低(测试,在数据量稍 ...

  10. 什么是网络套接字(Socket)?

    什么是网络套接字(Socket)?一时还真不好回答,而且网络上也有各种解释,莫衷一是.下文将以本人所查阅到的资料来说明一下什么是Socket. Socket定义 Socket在维基百科的定义: A n ...