jQuery实践——选择器篇
一、基本
- #id:
html:<div id="demo1">demo1</div> jQuery:$("#demo1").css("background","red");
- element:
html:<div>demo2</div> jQuery:$("div").css("background","blue");
- .class:
html:<div class="demo3">demo3</div> jQuery:$(".demo3").css("background","yellow");
- *
jQuery:$("*").css("background","green");
- selector1,selector2,selectorN
html:<div class="demo3">demo3</div>
<div id="demo4">demo4</div> jQuery:$(".demo3,#demo4").css("background","orange");二.层级:
- ancestor descendant
html:<div><span>demo5</span></div> jQuery:$("div span").css("background","aqua");
- parent > child
html:<div><p>demo6</p></div> jQuery:$("div>p").css("background","purple");
- prev + next
html:<div><p>demo6</p></div>
<p>demo7</p> iQuery:$("div+p").css("background","chartreuse"); - prev ~ siblings
html:<p>demo7</p>
<div>demo8</div>
<div>demo8</div> jQuery:$("p~div").css("background","skyblue");3.基本筛选器:
- :first
html: <ul>
<li>demo9</li>
<li>demo9</li>
<li>demo9</li>
<li>demo9</li>
<li>demo9</li>
</ul> Jquery:$("li:first").css("background","crimson"); :not
jQuery:$("li:not(:first)").css("background","cadetblue");
:even
jQuery:$("li:even").css("background","fuchsia");
:odd
jQuery:$("li:odd").css("background","greenyellow");
:eq(index)
jQuery:$("li:eq(2)").css("background","gold");
:gt(index)
jQuery:$("li:gt(2)").css("background","blueviolet");
:lang
html: <ul>
<li>demo9</li>
<li>demo9</li>
<li lang="en">demo9</li>
<li>demo9</li>
<li>demo9</li>
</ul> jQuery: $("li:lang(en)").css("background","salmon");:last:
jQuery:$("li:last").css("background","slateblue");
- :lt(index)
jQuery:$("li:lt(2)").css("background","teal");
- :header
html:<h1>demo10</h1>
<h2>demo10</h2> jQuery:$(":header").css("background","darkred"); - :animated:
html:<div id="demo11">demo11</div> jQuery:$("#demo11").click(function(){
$("#demo11:not(:animated)").animate({
width:"+=20px"
},1000);
}); - :focus
html:<input type="text" id="demo12" value="demo12" autofocus="autofocus"/> jQuery:$("input:focus").css("background","darkkhaki");
- :root
jQuery:$(":root").css("background","seagreen");
- :target
不会使用三、内容
- :contains(text)
html:<div>demo13</div> jQuery:$("div:contains('demo13')").css("background","turquoise");
- :empty
html:<input type="text" id="demo14" placeholder="demo14" /> jQuery:$("input:empty").css("background","gray");
- :has(selector)
html:<div><p>demo15</p></div> jQuery:$("div:has(p)").css("background","darkgreen");
- :parent
html:<div><p>demo16</p></div> jQuery:$("p:parent").css("background","hotpink");
四、可见性
- :hidden
html:<div id="demo17" style="display: none;"></div> jQuery:console.log($("div:hidden"));
- :visible
html:<p>demo18</p> jQuery:$("p:visible").css("background","lightseagreen");
五、属性
- [attribute]
html: <p id="demo18">demo19</p>
<p id="demo19">demo19</p>
<p id="test19">demo19</p>
<p>demo19</p>jQuery:$("p[id]").css("background","olive");
- [attribute=value]
jQuery:$("p[id='demo18']").css("background","lightcoral");
- [attribute!=value]
jQuery:$("p[id!='demo18']").css("background","darkslategray");
- [attribute^=value]
jQuery:$("p[id^='demo']").css("border","1px solid red");
- [attribute$=value]
jQuery:$("p[id$='19']").css("border","1px solid blue");
- [attribute*=value]
jQuery:$("p[id*='1']").css("border","1px solid green");
- [attrSel1][attrSel2][attrSelN]
html:<div id="demo20" class="demo20">demo20</div> jQuery:$("div[id][class = 'demo20']").css("border","1px solid black");
六、子元素
html: <ul>
<li>demo21</li>
<li>demo21</li>
<li>demo21</li>
<li>demo21</li>
<li>demo21</li>
</ul> - :first-child
$("ul li:first-child").css("border","1px solid blueviolet")
- :first-of-type
$("li:first-of-type").css("border","1px solid green");
- :last-child
$("ul li:last-child").css("border","1px solid lightcoral");
- :last-of-type
$("ul li:last-of-type").css("border","1px solid turquoise");
- :nth-child()
$("ul li:nth-child(2)").css("border","1px solid firebrick");
- :nth-last-child()
$("ul li:nth-last-child(2)").css("border","1px solid blueviolet");
- :nth-last-of-type()
$("ul li:nth-last-of-type(2)").css("border","1px solid fuchsia");
- :nth-of-type()
$("ul li:nth-of-type(2)").css("border","1px solid crimson");
- :only-child
$("ul li:only-child").css("border","1px solid teal");
- :only-of-type
$("ul li:only-of-type").css("border","1px solid orange");
七、表单
html:<form >
<input type="text" value="demo22" disabled="disabled"/><br />
<input type="password" /><br />
<input type="radio" name="radio" checked="checked"/><label>radio1</label>
<input type="radio" name="radio"/><label>radio2</label><br />
<input type="checkbox" /><label>checkbox1</label>
<input type="checkbox" checked="checked"/><label>checkbox2</label>
<input type="checkbox" /><label>checkbox3</label><br />
<input type="file"disabled="disabled"/><br />
<input type="hidden" />
<select name="selector">
<option value="1">selector1</option>
<option value="2">selector2</option>
<option value="3" selected="selected">selector3</option>
</select><br />
<input type="submit" value="提交" /><br />
<input type="image" value="images" /><br />
<input type="reset" value="重置"/><br />
<input type="button" value="btn1"/>
<button>btn2</button>
</form> - :input
$(":input").css("border","1px solid darkblue");
- :text
$(":text").css("color","goldenrod");
- :password
$(":password").css("background","fuchsia");
- :radio
- :checkbox
console.log($(":radio"));
console.log($(":checkbox")); - :submit
$(":submit").css("border","1px solid red");
- :image
$(":image").css("border","1px solid blue");
- :reset
$(":reset").css("background","green");
- :button
$(":button").css("background","blue");
- :file
$(":file").css("border","1px solid orange");
- :hidden
console.log($("input:hidden"));
九、表单属性
- :enabled
$("input:enabled").css("color","red");
- :disabled
$("input:disabled").css("color","blue");
- :checked
console.log($("input:checked"));
- :selected
console.log($("select option:selected").html());
- #id:
jQuery实践——选择器篇的更多相关文章
- JQuery之选择器篇(一)
今天回顾了之前学习的JQuery选择器,现在简单的总结一下. JQuery选择器类型 主要分为四类 基本选择器 层级选择器 过滤选择器 表单选择器 基本选择器 基本选择器是jQuery中最 ...
- ABP框架实践基础篇之开发UI层
返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 说明 其实最开始写的,就是这个ABP框架实践基础篇.在写这篇博客之前,又回头复习了一下ABP框架的理论,如果你还没学习,请查看AB ...
- jQuery实践树(2)
上一个实践主要对jquery的ready事件进行.本实践要来使用jQuery改变页面的背景图片.可以先试试效果:http://hovertree.com/texiao/jquerytree/2/ 当你 ...
- 从零开始学习jQuery (一) 入门篇
本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些 ...
- jQuery 各种选择器 $.()用法
jQuery 元素选择器jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选 ...
- jQuery实践-别踩白块儿网页版
▓▓▓▓▓▓ 大致介绍 终于结束了考试,放假回家了.这次的别踩白块儿网页版要比之前做的 jQuery实践-网页版2048小游戏 要简单一点,基本的思路都差不多. 预览:别踩白块网页版 这篇博客并不是详 ...
- jquery 常用选择器和方法以及遍历(超详细)
jQuery 常用选择器和和方法 学习总结 一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍 二.jQuery 对象 1. jQuery ...
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- HTML 学习笔记 JQuery(选择器)
学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...
随机推荐
- c# unchecked关键字。byte 合并short
参考MSDN 代码: public class BytesOperate { /// <summary> /// 计算校验和,SUM /// </summary> public ...
- visio取消自动粘附
有时候画直线的时候需要直线摆在任意位置,这个时候自动粘附就很碍事了,总是自动把你的直线给摆到粘附的特殊位置上 如何取消: 视图->视觉帮助(点右下角的小箭头)->当前活动的->取消勾 ...
- rosetta2014/2015安装时出现INCLUDE(keyerror)错误,解决。
错误: KeyError: 'INCLUDE' 使编译出错 解决方法: [usrname@host source]$ vim tools/build/site.settings 注释# "i ...
- 闭包内的微观世界和js垃圾回收机制
一.什么是闭包? 官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.相信很少有人能直接看懂这句话,因为他描述的太学术.其实这句话 ...
- (一)NOR FALSH 讲解
nor flash 起始地址: 1F FFFF = 1 1111 1111 1111 1111 1111 = 2^20 *2 = 2^21=2M Nor Flash 采用了 A0- ...
- Tomcat源码导入eclipse的步骤
Tomcat源码导入eclipse 一.下载源码 1. 进入Apache 官网:http://tomcat.apache.org/ 2. 在左边侧选择要下载的源码的版本. 3. 或者直接通过Ar ...
- EditPlus 3.7.164 中文版(4月3日更新)
新的版本汉化了之前无法汉化的部分内容,并修复了旧汉化版的部分问题. 欢迎下载新的翻译文件.
- 【转】sql各种查询技巧
高级查询在数据库中用得是最频繁的,也是应用最广泛的. Ø 基本常用查询 --select select * from student; --all 查询所有 select all sex from ...
- java第二次作业
这次通过学习,我掌握了下拉菜单和单选按钮的使用下拉菜单构造方法:JComboBox() 创建具有默认数据模型的 JComboBox.JComboBox(ComboBoxModel aModel) 创建 ...
- cocopods 安装与使用
iOS 最新版 CocoaPods 的安装流程 1.移除现有Ruby默认源 $gem sources --remove https://rubygems.org/ 2.使用新的源 $gem sourc ...