jQuery-Selectors(选择器)的使用(一、基本篇)
发布时间：2018-08-22 06:22:59 所属栏目：传媒 来源：站长网
导读：1. #id用法 定义：根据给定的ID匹配一个元素。 返回值：Element 参数：id (String) : 用于搜索的，通过元素的 id 属性中给定的值 实例：将ID为div_red的DIV的边框改为红色 代码：$(#div_red).css(border,red 2px solid); //点击按钮一将执行这句代码 DIV I
|
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"); //点击按钮五将执行这句代码
您可以下载这个文件：download 感谢 シ上官メGT 提醒我文章中的第5个实例与源码中第5个实例不一样，我在此解释一下：原本发现的文章与源码是一致的，但园子里的这个显示博文内容的页面中P标记太多，导致点击第5个实例中的按钮时，会使页面上所有P标记全部加上粗粗的边框，很难看，所以我把文章中的P标记改为了Li标记，由于我的粗心，忘记改源码了，在此深表歉意。虽然两个实例不一样，但说明的问题是一样的，读者参考哪一个都可以。 提供与发表文章一致的源文件下载：download 文章导读： jQuery-Selectors(选择器)的使用(一、基本篇) jQuery-Selectors(选择器)的使用(二、层次篇) jQuery-Selectors(选择器)的使用(三、简单篇) jQuery-Selectors(选择器)的使用(四-五、内容篇&可见性篇) jQuery-Selectors(选择器)的使用(六、属性篇) jQuery-Selectors(选择器)的使用(七、子元素篇) （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
