up:: 一个jQuery简单示例

jQuery的主要工作就是简化JavaScript的开发;其主要包括(1)选中页面元素;(2)对选中的元素进行操作;两个部分;

本篇博客主要介绍如何选中页面元素,主要内容是基本选择器、层叠选择器、属性选择器;这三类选择器是在实际中比较常用的选择器;


一:引文:

两个要素:

在JavaScript中有document.getElementById()等方式获取元素,但这种方式有点古老、麻烦、局限;

jQuery选择器是一种更加快捷高效的方式:

下面语法1和语法2是等价的,当在页面中引入jQuery文件后,使用JQuery关键字和$是完全等价的;符合需求,高效准确地选择器表达式是关键!


二:基本选择器:id选择器、标签选择器、类选择器、组合选择器

id选择器和类选择器最常用;

标签选择器杀伤面积太大,所以用的并不多;

组合选择器有点提升页面元素间的耦合性,所以可能用的也不多;

组合选择器的范例:组合选择器中,选择器表达式之间用逗号隔开;通过一个jQuery简单示例中的小例子可以试一试;


三:层叠选择器

通过一个jQuery简单示例中的小例子:

后代选择器示例1

选择a标签,这个a标签必须是li标签的后代标签;


后代选择器示例2 :即使a标签不是div标签的直接子标签,但是后代选择器依旧能够选中;


后代选择器示例3


子选择器示例1 :必须得是直接子节点才会被选中;

选择a标签,这个a标签必须是li标签的直接子标签;


兄弟选择器示例1

选择p标签,这个p标签需要是span标签的兄弟标签,是平级节点;

而且这个p标签必须是span标签 之后的 标签:


四:属性选择器

比如当前需求是:获取到超链接地址为“网易”的元素;

属性选择器中,selector是前面讲到的选择器表达式,其他选择器后面跟个[ ], [ ]中的是某个属性的属性值,相当于是在原有选择器的基础上二次筛选;

示例1:完全匹配 :a[href=‘http://www.baidu.com’]:是选中a标签,这个a标签的href属性的属性值是“http://www.baidu.com”;


示例2:开头匹配 :拿到所有邮箱的超链接:a[href^=‘http://mail.‘]:


示例3:结尾匹配 :a[href$=‘edu.cn’]


示例4:包含匹配 :a[href*=‘edu.cn’]


说明1 :属性选择器中,属性可以是其他任何属性:input[type=‘text’];这个意思是选择input标签,且其type属性为text的元素:


说明2 :如上input[type=‘text’];为什么选择旁边的那个文本框也是文本框,为什么没有被选中?这是因为, 属性选择器只会选择明确书写了某个属性的元素


说明3 :如上input[type=‘text’];形如这个,其需要用单引号的;

很显然因为:$(“input[type=‘text’]”).addClass(“highlight”); 所以需要使用单引号。