jQuery-Selectors(选择器)的使用(一、基本篇)

系列文章导航：

本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及很深，我的学习方法：先入门，后进阶！
本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。
您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com
由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！
您可以到jQuery官网来学习更多的有关jQuery知识。

1. #id用法
定义：根据给定的ID匹配一个元素。
返回值：Element
参数：id (String) : 用于搜索的，通过元素的 id 属性中给定的值
实例：将ID为”div_red”的DIV的边框改为红色
代码：$(“#div_red”).css(“border”,”red 2px solid”); //点击按钮一将执行这句代码

DIV ID=”div_red”

扩展：#id中的id可以是页面任何元素的id,如input,btuuon,div,table,span等等

2. element用法
定义：根据给定的元素名匹配所有元素。
返回值：Array<Element>
参数：element (String) : 一个用于搜索的元素。指向 DOM 节点的标签名。
实例：将页面<P>标记内的文字颜色改为红色
代码：$(“p”).css(“color”,”red”); //点击按钮二将执行这句代码

P标记1 ID=”p1″

P标记2 无ID

扩展：参数值可以是页面任何元素，如div,button,div,table,tr,td,p,h1,span,input

3. .class用法
定义：根据给定的类（样式名称）匹配元素。
返回值：Array<Element>
参数：class (String) 一个用以搜索的类（样式名称）。一个元素可以有多个类（样式名称），只要有一个符合就能被匹配到。
实例：将页面所有引用了”.red_test”样式的元素背景颜色改为蓝色
代码：$(“.red_test”).css(“background-color”,”blue”); //点击按钮三将执行这句代码

DIV ID=”div_red_1″ calss=”red_test” DIV ID=”div_red_2″ 无class

SPAN ID=”span_red_1″ calss=”red_test”

扩展：可以看一下jQuery官网上Selectors/.class的实例。

4. *用法
定义：匹配所有元素多用于结合上下文来搜索。
返回值：Array<Element>
实例：查看页所有元素的数量
代码：$(“*”).length; //点击按钮四将执行这句代码
扩展：可以看一下jQuery官网上Selectors/*的实例。

5. selector1,selector2,selectorN用法
定义：将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
返回值：Array<Element>
参数：selector1 (Selector) : 一个有效的选择器 selector2 (Selector) : 另一个有效的选择器 selectorN (Selector) : (可选) 任意多个有效选择器
实例：将页面上所有引用名称为”li_test”样式的<Li>元素和ID为”li_red”的<Li>元素的边框改为绿色，宽度为5px
代码：$(“.red_test,#btn_5”).css(“border”,”5px solid Green”); //点击按钮五将执行这句代码

Li class=”li_test”
Li id=”li_red”
Li
Li class=”li_test”
Li
Li

千百度

1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。

2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。

3.本文采用知识共享署名4.0国际许可协议 [BY-NC-SA] 进行授权

4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。