jquery基本选择器，一张页面全搞定
<!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
联系&投稿：service@joyvis.com
jquery基本选择器，一张页面全搞定的更多相关文章
- [转帖]面试问Kafka，这一篇全搞定
面试问Kafka,这一篇全搞定 https://os.51cto.com/art/201911/606207.htm 图片来自 Pexels Kafka 基础 消息系统的作用 大部分小伙伴应该都清楚, ...
- 玩转IDEA项目结构Project Structure，打Jar包、模块/依赖管理全搞定
前言 你好,我是A哥(YourBatman). 如何给Module模块单独增加依赖? 如何知道哪些Module模块用了Spring框架,哪些是web工程? IDEA如何打Jar包?打War包? 熟练的 ...
- SpringBoot就这一篇全搞定
Spring Boot从初识到实战 文章收集在 GitHub JavaEgg 中,欢迎star+指导 JavaEgg--<"Java技术员"成长手册>,包含Java基础 ...
- DIV CSS 网页兼容全搞定 （IE6 IE7 IE8 IE9 火狐 谷歌）
CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...
- FineUIPro v3.5.0发布了，减少 90% 的上行数据量，15行代码全搞定！
一切为客户着想 一切的一切还得从和一位台湾客户的沟通说起: 客户提到将ViewState保存在服务器端以减少上行数据量,从而加快页面的回发速度. 但是在FineUI中,控件状态都保存在FState中, ...
- 面试阿里，美团，京东都会被问到的Spring ，从基础到源码帮你全搞定
1 前言 Spring是一个轻量级开源框架,它是为了解决企业应用开发的复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 J2EE 应用程序开发提供集成的框 ...
- 从代码到发包，一个程序全搞定！Gitea 推出软件包自托管功能 Package Registry
2022 年 7 月的最后一天,随着 Gitea 1.17.0 版本的正式发布,Gitea 开源社区推出了一项名为 Package Registry 的包管理功能,与 Gitea 代码仓库无缝集成,类 ...
- Android 加载gif图片强大框架(支持预加载、缓存，还支持显示静态图片，一行代码全搞定)
之前项目中没有涉及到显示gif图片的功能,也没有着重研究过,最近项目中要用到显示gif图片,于是就在网上一顿搜,用过之后发现如下几个缺点. 1.加载大的gif图片会出现oom. 2.没有预加载和缓存功 ...
- ELK集中化日志解决方案——看这一篇全搞定
一.前言 在软件发开技术管理里有两个永恒经典的问题,适合我们初到一家软件企业或一家公司的科技团队,来判断自己该从哪里入手帮助整个团队提升科技水平和产能.问题一是"在我们团队里,只涉及一行代码 ...
随机推荐
- VS2010 + Entity FrameWork 4.4 +Mvc 4.0 出现的错误
Compiler Error Message: CS0012: The type 'System.Data.Objects.DataClasses.EntityObject' is defined i ...
- DOM节点访问
简而言之,DOM(即文档对象模型)是一种将XML或HTML文档解析成树形节点的方法.通过DOM的方法与属性,我们就可以访问到页面中的任何元素,并进行元素的修改.删除以及添加的操作.同时,DOM也是一套 ...
- 【Python与机器学习】：利用Keras进行多类分类
多类分类问题本质上可以分解为多个二分类问题,而解决二分类问题的方法有很多.这里我们利用Keras机器学习框架中的ANN(artificial neural network)来解决多分类问题.这里我们采 ...
- 谈谈Java利用原始HttpURLConnection发送POST数据
这篇文章主要给大家介绍java利用原始httpUrlConnection发送post数据,设计到httpUrlConnection类的相关知识,感兴趣的朋友跟着小编一起学习吧 URLConnectio ...
- java中string stringbuilder stringbuffer 的区别
1. String 类 String的值是不可变的,这就导致每次对String的操作都会生成新的String对象,不仅效率低下,而且大量浪费有限的内存空间. String a = "a&qu ...
- JavaScript笔记杂谈篇(啥都有)
二维码缩放比例以43PX的倍数缩放最为标准. NuGet相关管理http://www.cnblogs.com/dudu/archive/2011/07/15/nuget.html 学习笔记: http ...
- lintcode-【简单题】链表求和
题目: 你有两个用链表代表的整数,其中每个节点包含一个数字.数字存储按照在原来整数中相反的顺序,使得第一个数字位于链表的开头.写出一个函数将两个整数相加,用链表形式返回和. 样例: 给出两个链表 3- ...
- PAT 1001. 害死人不偿命的(3n+1)猜想 (15)
卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反复砍下去,最后一定在某一步得到 n=1.卡拉兹在1950年的世界 ...
- Inside The C++ Object Model - 01
前言 1.Foundation项目是一个定义大系统开发模型的项目,又叫Grail. 2.Grail中编译器被分为:parser(语法分析)->type checking -> simpli ...
- c# winform 打包部署 自定义界面 或设置开机启动
添加安装部署项目后,鼠标右键安装项目->视图->注册表, 要使软件在开机就运行,可以在HKEY_CURRENT_USER\Software\Microsoft\Windows\Curren ...