<!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. JAVA为什么要配置环境变量，怎样配置

    自己总结些再加抄点:安装JDK后要配置环境变量,主要有三个:1 JAVA_HOME ->为JDK的安装目录,如:F:\JAVA\jdk1.6.0_042 CLASSPATH ->到哪里找需 ...

  2. android studio新项目时提示：Plugin is too old, please update to a more recent version

    今天想写一个程序来测试一下android studo代码,但是创建好项目后,提示: Error:(1, 0) Plugin is too old, please update to a more re ...

  3. ztree

    http://www.s u c h s o.com/projecteactual/ztree-jiaocheng-mvc-checkbox-quanxuan-demo-down.html http: ...

  4. sencha touch 入门系列 （二）sencha touch 开发准备

    这是本人第一次写博客教程,没什么经验,文笔也不是很好,写这教程一方面为了巩固自己这段时间的学习成果,一方面帮助大家解决问题,欢迎大家多提建议,指出问题.接下来我们就开始我们的sencha touch开 ...

  5. Java中的字符串常量池

    ava中字符串对象创建有两种形式,一种为字面量形式,如String str = "droid";,另一种就是使用new这种标准的构造对象的方法,如String str = new ...

  6. js节点属性

    在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...

  7. windows命令行(Command Prompt / Console)字体设置

    1.运行 regedit 打开注册表编辑器,打开注册表定位至[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Conso ...

  8. JS 之作用域链和闭包

    1.JS无块级作用域 <script> function Main(){ if (1==1){ var name = "alex"; } console.log(nam ...

  9. “数学口袋精灵”第二个Sprint计划(第十天)总结

    第二阶段Sprint完成情况: 目标:完成一个小游戏 情况:ui基本完成. 代码基本也完成了,部分未完善. 音乐方面有点小bug,正在完善. 具体运行结果(截图): 首页: 游戏界面(可以计算多个运算 ...

  10. javascript generate a guid

    function Guid() { var random = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); retu ...