<!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. Yii里增删改查的操作方法

    一.AR $model=New user();//user是数据库中的一张表,有id,name,pwd字段 1.增加: <1. $model->name='张三': $model-> ...

  2. java io流 对文件操作

    检查文件是否存在 获取文件路径 获取文件大小 ...... 更多参考手册 //对文件的操作 //检查文件是否存在 //获取文件路径 //获取文件大小 //文件是否可读 //文件是否可写 //.... ...

  3. 设置ajax 同步执行

    Ajax请求默认的都是异步的如果想同步 async设置为false就可以(默认是true) var html = $.ajax({  url: "some.php",  async ...

  4. 【javascript基础】8、闭包

    前言 函数和作用域啥的我们前面已经了解了,现在就要学习闭包了,这是一个挺晦涩的知识点,初学者可能会感觉不好理解,但是高手都不不以为然了,高手就给我提点意见吧,我和新手一起来学习什么是闭包. 例子 先不 ...

  5. delphi 常用的将窗口置前的函数

    function BringWindowToTopEx(hWnd: HWND): Boolean;begin if IsIconic(hWnd) then ShowWindow(hWnd, SW_RE ...

  6. 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 ...

  7. Flex中使用CSS控制页面样式

    Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也 ...

  8. C# 自定义序列化问题

        public class overdue     {         public int overdueTimes { get; set; }         /// <summary ...

  9. Python之路【第十五篇】：Web框架

    Python之路[第十五篇]:Web框架   Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 2 3 4 5 6 ...

  10. 关于新闻，在线编辑器建表时此字段一定要为text

    create table about( content text )engine=myisam default charset=utf8; 项目的各个建表语句 create database day4 ...