<!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. [ActionScript 3.0] AS3.0 涂鸦及擦除功能，撤销重做步骤记录实例

    package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.BlendMo ...

  2. cordova-plugin-unionpay

    https://github.com/Santino-Wu/cordova-plugin-unionpay

  3. 树莓派make 360wifi2报错

    输入make命令后报错 make: *** /lib/modules/3.10.25+/build: No such file or directory. Stop. 系统缺少编译模块所需要的内核头文 ...

  4. 新建jsp报错“The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path”

    今天新建jsp文件时,就报错“Visual Page Editor has experimental support for Windows 64-bit”,然后刚好stackoverflow上面有这 ...

  5. 关于yaha中文分词（将中文分词后，结合TfidfVectorizer变成向量）

    https://github.com/jannson/yaha # -*- coding: utf-8 -*- """ Created on Wed Aug 10 08: ...

  6. 登陆mysql时出现unknown variable 'character_set_client=UTF8' 的错误

    今天,登陆数据库服务器的时候,出现了下面的错误: [root@localhost app]# mysql -uroot -p mysql: unknown variable 'character-se ...

  7. jQuery Mobile 脚本加载问题

    刚开始使用jQuery Mobile,发现很多问题需要重新考虑,比如脚本加载问题. 在普通html中,如果a.html中有链接到b.html,b.html中有类似代码: $(document).rea ...

  8. ---iproute2 策略路由

    http://linux.chinaunix.net/techdoc/net/2007/03/30/953750.shtml 这篇文章写的例子讲明白策略路由的使用,但是本身好像不用这么麻烦, 用系统默 ...

  9. I/O阻塞非阻塞，同步异步

    http://www.cnblogs.com/luotianshuai/p/5098408.html "阻塞"与"非阻塞"与"同步"与&qu ...

  10. mysql数据类型最大长度记录

    MySQL中各数据类型的取值范围 转在这里,慢慢记下来. TINYINT -128 - 127 TINYINT UNSIGNED 0 - 255 SMALLINT -32768 - 32767 SMA ...