<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2-4</title>
<!-- 引入jQuery -->
<script src="scripts/jquery-1.11.3.js" type="text/javascript"></script>
<script src="scripts/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<h3>基本选择器.</h3>

<!-- 控制按钮 -->
<input type="button" value="选择 id为 one 的元素." id="btn1"/>
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
<input type="button" value="选择 所有的元素." id="btn4"/>
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
<input type="button"value="选择所有动画的元素。"id="btn6"/>
<input type="button"value="选择文本中含有di元素"id="btn7"/>
<input type="button"value="选择空文本的元素"id="btn8"/>
<input type="button"value="选择所有可见的div"id="btn9"/>
<input type="button"value="选择所有不可见的div"id="btn10"/>
<input type="button"value="选择每个class为one父元素的第二个元素"id="btn11"/>
<input type="button"value="选择每个class为one父元素的第一个元素"id="btn12"/>
<input type="button"value="选择每个class为one父元素的最后个元素"id="btn13"/>
<input type="button"value="选择每个class为one父元素的唯一一个个元素"id="btn14"/>
<br /><br />

<!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>

<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>

<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>

<div style="display:none;" class="none">style的display为"none"的div</div>

<div class="hide">class为"hide"的div</div>

<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>

<span id="mover">正在执行动画的span元素.</span>

</body>
<script>
/*
* window.onload事件
* * 保证HTML页面的元素加载完毕之后再执行js代码
* * 原生DOM编写在<body>元素后,不需要window.onload
* * jQuery代码无论写在哪里都需要
* * window.onload属于原生DOM
* * $().ready(function(){}); - jQuery提供
*/
//window.onload = function(){
$().ready(function(){

//<input type="button" value="选择 id为 one 的元素." id="btn1"/>
/*
* 对应按钮绑定onclick事件
* * jQuery封装了DOM事件(Event)
* * 将onclick封装成click(fn)
* * fn参数 - 绑定到事件的处理函数
*/
$("#btn1").click(function(){
/*
* 背景颜色属性CSS内容
* * jQuery也可以操作CSS内容
* * css(name, value)
* * name - CSS的属性名
* * value - 属性值
*/
$("#one").css("background","yellow");
});

//<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
$("#btn2").click(function(){
/*
* * 匹配class名称的元素是多个(数组)
* * jQuery支持类似于批处理的操作
* * 底层进行遍历
*/
$(".mini").css("background","yellow");
});

//<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
$("#btn3").click(function(){
$("div").css("background","yellow");
});

//<input type="button" value="选择 所有的元素." id="btn4"/>
$("#btn4").click(function(){
// 所有元素 - 当前HTML页面中
$("*").css("background","yellow");
});

//<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
$("#btn5").click(function(){
// 多个选择器并列使用,中间使用","隔开 - 并集
$("span,#two").css("background","yellow");
});
$("#btn6").click(function(){
$(":animated").css("background","red");
})
$("#btn7").click(function(){
$("div:contains('di')").css("background","red");
})
$("#btn8").mouseover(function(){
$("div:empty").css("background","red");
})
$("#btn8").mouseout(function(){
$("div:empty").css("background","#fff");
})
$("#btn9").click(function(){
$("div:visible").css("background","red");
})
$("#btn10").click(function(){
$("div:hidden").show(3000).css("background","red");
})
$("#btn11").click(function(){
$("div[class=one] :nth-child(2)").css("background","red");
})
$("#btn12").click(function(){
$("div[class=one] :first-child").css("background","red");
})
$("#btn13").click(function(){
$("div[class=one] :last-child").css("background","red");
})
$("#btn14").click(function(){
$("div[class=one] :only-child").css("background","red");
})

});
</script>
</html>

悦为（深圳）科技有限公司

乐享其志

微信：JoyVisYOJOY

微博：http://weibo.com/JoyVis

官网：http://www.yuevis.com/

联系&投稿：service@joyvis.com

jquery基本选择器，一张页面全搞定的更多相关文章

  1. [转帖]面试问Kafka，这一篇全搞定

    面试问Kafka,这一篇全搞定 https://os.51cto.com/art/201911/606207.htm 图片来自 Pexels Kafka 基础 消息系统的作用 大部分小伙伴应该都清楚, ...

  2. 玩转IDEA项目结构Project Structure，打Jar包、模块/依赖管理全搞定

    前言 你好,我是A哥(YourBatman). 如何给Module模块单独增加依赖? 如何知道哪些Module模块用了Spring框架,哪些是web工程? IDEA如何打Jar包?打War包? 熟练的 ...

  3. SpringBoot就这一篇全搞定

    Spring Boot从初识到实战 文章收集在 GitHub JavaEgg 中,欢迎star+指导 JavaEgg--<"Java技术员"成长手册>,包含Java基础 ...

  4. DIV CSS 网页兼容全搞定 （IE6 IE7 IE8 IE9 火狐 谷歌）

    CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...

  5. FineUIPro v3.5.0发布了，减少 90% 的上行数据量，15行代码全搞定！

    一切为客户着想 一切的一切还得从和一位台湾客户的沟通说起: 客户提到将ViewState保存在服务器端以减少上行数据量,从而加快页面的回发速度. 但是在FineUI中,控件状态都保存在FState中, ...

  6. 面试阿里，美团，京东都会被问到的Spring ，从基础到源码帮你全搞定

    1 前言 Spring是一个轻量级开源框架,它是为了解决企业应用开发的复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 J2EE 应用程序开发提供集成的框 ...

  7. 从代码到发包，一个程序全搞定！Gitea 推出软件包自托管功能 Package Registry

    2022 年 7 月的最后一天,随着 Gitea 1.17.0 版本的正式发布,Gitea 开源社区推出了一项名为 Package Registry 的包管理功能,与 Gitea 代码仓库无缝集成,类 ...

  8. Android 加载gif图片强大框架(支持预加载、缓存，还支持显示静态图片，一行代码全搞定)

    之前项目中没有涉及到显示gif图片的功能,也没有着重研究过,最近项目中要用到显示gif图片,于是就在网上一顿搜,用过之后发现如下几个缺点. 1.加载大的gif图片会出现oom. 2.没有预加载和缓存功 ...

  9. ELK集中化日志解决方案——看这一篇全搞定

    一.前言 在软件发开技术管理里有两个永恒经典的问题,适合我们初到一家软件企业或一家公司的科技团队,来判断自己该从哪里入手帮助整个团队提升科技水平和产能.问题一是"在我们团队里,只涉及一行代码 ...

随机推荐

  1. 隐语义模型LFM（latent factor model）

    对于某个用户,首先得到他的兴趣分类,然后从分类中挑选他可能喜欢的物品.总结一下,这个基于兴趣分类的方法大概需要解决3个问题. 如何给物品进行分类? 如何确定用户对哪些类的物品感兴趣,以及感兴趣的程度? ...

  2. Oracle游标示例

    -- 声明游标:CURSOR cursor_name IS select_statement --For 循环游标 --(1)定义游标 --(2)定义游标变量 --(3)使用for循环来使用这个游标 ...

  3. ArcGIS 10.1 中的style和serverstyle及制作方法

    图层的符号都是随机的,动态变化的,所以不利于图层的美观.还有一点就是符号有增加电子地图可读性的功能. Desktop的符号文件 把要用的符号用desktop的style manage制作相应符号,并把 ...

  4. 【摘】使用tail、head命令过滤行

    tail  -n  10  test.log   查询日志尾部最后10行的日志; tail -n +10 test.log    查询10行之后的所有日志; head -n 10  test.log  ...

  5. nmap十条常用命令行格式

    1) 获取远程主机的系统类型及开放端口 nmap -sS -P0 -sV -O <target> 这里的 < target > 可以是单一 IP, 或主机名,或域名,或子网 - ...

  6. app测试与web测试的区别

    1.从功能测试的来讲的话,在流程和功能测试上是没有区别的.系统测试和一些细节可能会不一样. 那么我们就要先来了解,web和app的区别. web项目,一般都是b/s架构,基于浏览器的,而app则是c/ ...

  7. java测试题总结

    1.Struts2处理来自多个页面的同一个Action请求,那么它们是不是同一个action. struts2中每个请求都是独立的.每一次请求都会去new一个新的action,所有写在action中的 ...

  8. 通过WinForm控件创建的WPF控件无法输入的问题

    今天把写的一个WPF程序发布到别的机器上执行,发现一个比较奇怪的问题:在那个机器上用英文输入法无法输入数字,非要切换到中文输入法才行:但在我的机器上却是好好的. 最开始以为是输入法的问题,弄了好一阵子 ...

  9. JavaScript高级程序设计笔记之面向对象

    说起面向对象,大部分程序员首先会想到 类 .通过类可以创建许多具有共同属性以及方法的实例或者说对象.但是JavaScript并没有类的概念,而且在JavaScript中几乎一切皆对象,问题来了,Jav ...

  10. UVa 10300 - Ecological Premium

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=94&page=s ...