jQ学习之基础选择器的测试

一:基础选择器参数主要包含了:id,标签名,类,*,还有就是多个选择器共同作为筛选条件的测试

主要测试内容为每个按钮的value

html代码:

 1 <input type="button" id="btn1" value="选择为one的元素" />
 2         <input type="button" id="btn2" value="选择样式为mini的元素" />
 3         <input type="button" id="btn3" value="选择所有的div元素" />
 4         <input type="button" id="btn4" value="选择所有元素" />
 5         <input type="button" id="btn5" value="选择id为two并且样式为mini的元素" />
 6         <hr />
 7         <div id="one">
 8             <div class="mini">
 9                 111
10             </div>
11         </div>
12
13         <div id="two">
14             <div class="mini">
15                 222
16             </div>
17             <div class="mini">
18                 333
19             </div>
20         </div>
21
22         <div id="three">
23             <div class="mini">
24                 444
25             </div>
26             <div class="mini">
27                 555
28             </div>
29             <div class="mini">
30                 666
31             </div>
32         </div>
33
34         <span id="four">
35
36         </span>

CSS代码:

 1   div,span,p {
 2     width:140px;
 3     height:140px;
 4     margin:5px;
 5     background:#aaa;
 6     border:#000 1px solid;
 7     float:left;
 8     font-size:17px;
 9     font-family:Verdana;
10   }
11    div.mini {
12     width:55px;
13     height:55px;
14     background-color: #aaa;
15     font-size:12px;
16   }
17   div.hide {
18     display:none;
19   }

JS代码:

 1 //定义一个页面加载事件
 2                 $(function(){
 3                     //为按钮1设置点击事件
 4                     $("#btn1").click(function(){
 5                         //注意方法
 6                         $("#one").css("backgroundColor","pink");
 7                     })
 8                     $("#btn2").click(function(){
 9                         //注意方法
10                         $(".mini").css("backgroundColor","pink");
11                     })
12                     $("#btn3").click(function(){
13                         //注意方法
14                         $("div").css("backgroundColor","pink");
15                     })
16                     $("#btn4").click(function(){
17                         //注意方法,注意参数,所有指的是包含body内部所有的元素
18                         $("*").css("backgroundColor","pink");
19                     })
20                     $("#btn5").click(function(){
21                         //注意参数,当多个筛选条件的时候用‘,‘分割选择条件
22                         $("#two,.mini").css("backgroundColor","pink");
23                     })
24                 })

原文地址:https://www.cnblogs.com/zhang188660586/p/11183601.html

时间: 2024-11-06 03:30:26

jQ学习之基础选择器的测试的相关文章

jQ学习之层级选择器的测试

一:层级选择器 主要有以下几种: a b: 即选择a中所有的b元素 a>b:既选择 a中 所有处在第一级且属性为b的孩子 a+b:选择 与a相邻的(在a后面)的b元素 a~b:选择 a的且属性为b的兄弟(不包括a) HTML代码: 1 <input type="button" id="btn1" value="选择body中所有的div元素" /> 2 <input type="button" id=&

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法 一丶什么是JQuery JQuery: ???????JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 ??????js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ???????链式编程:可以.的形式实现多个功能 ?

JQuery基础选择器

jQuery选择器类似css选择器,所以学习起来也更加容易1.基础选择器 1.All Selector("*") 描述:选择所有元素 语法:$("*") 注意:实践证明,由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也许谨慎使用 2.Class Selector(".class") 描述:选择给定样式类名的所有元素 语法:$(".class") 3.Element Selector("el

Ant学习-001-ant 基础知识及windows环境配置

一.Ant 概要基础知识 Apache Ant 是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发,用以构建应用,或结合其他开源测试工具例如 git.TestNG等搭建持续集成测试开发环境,从而高效.高质量的构建产品. Ant 有以下一些优点: 跨平台,可移植.Ant 是 Java 语言编写的,所以有很好的跨平台性和可移植性,无论是在 windows.Linux,还是 mac. 操作简单. Ant 是由一个内置任务和可选任务组成的,运行时需要一个构

hadoop学习笔记——基础知识及安装

1.核心 HDFS  分布式文件系统    主从结构,一个namenoe和多个datanode, 分别对应独立的物理机器 1) NameNode是主服务器,管理文件系统的命名空间和客户端对文件的访问操作.NameNode执行文件系统的命名空间操作,比如打开关闭重命名文件或者目录等,它也负责数据块到具体DataNode的映射 2)集群中的DataNode管理存储的数据.负责处理文件系统客户端的文件读写请求,并在NameNode的统一调度下进行数据块的创建删除和复制工作. 3)NameNode是所有

一步步学习javascript基础篇(3):Object、Function等引用类型

我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂数据类型(即引用数据类型) Object类型 我们用的最多的引用类型就属object类型了,一般用来存储和传输数据是再好不过的.然,它的两种创建方式我们是否了解呢? 1.通过构造函数来创建 如: var obj = new Object(); 在js中的引用类型有个非常灵活的用法,可以动态的附加属性和赋值.

渗透学习笔记--基础篇--sql注入(字符型)

环境:dvwa1.7数据库:mysql前置知识:sql语句(Click me)      在进行sql注入前,我们先熟悉熟悉select语句.一.打开我们的sql终端 二.进入之后可以看到有mysql>我们输入sql语句,即可返回我们想要的结果,注意分号哟!我们使用的dvwa,在我们前几章设置的时候,会在数据库中生成一个dvwa的database:这里我们使用它来进行我们的select 语句:(1)使用dvwa数据库use dvwa;(2)在users表里查询用户名为'admin'的所有信息se

CSS3选择器(基础选择器、属性选择器、伪类选择器、选择器策略)

<CSS3基本选择器> 一.通配符选择器(*) *{ marigin: 0; padding: 0; } 二.元素选择器(E) li {background-color: grey;color: orange;} 三.类选择器(.className) 四.id选择器(#ID) #first {background: lime;color: #000;} #last {background: #000;color: lime;} 五.后代选择器(E F) .demo li {color: blu

Scala的安装,入门,学习,基础

1:Scala的官方网址:http://www.scala-lang.org/ 推荐学习教程:http://www.runoob.com/scala/scala-tutorial.html Scala是一种多范式的编程语言,其设计的初衷是要集成面向对象编程和函数式编程的各种特性.Scala运行于Java平台(Java虚拟机),并兼容现有的Java程序. 2:Scala的优点: (1):优雅:这是框架设计师第一个要考虑的问题,框架的用户是应用开发程序员,API是否优雅直接影响用户体验. (2):速