2.8 学习总结 之 JQ初识
一、说在前面
昨天 | 学习了kotlin的相关知识 |
今天 | 学习JQ |
Jquery它是javascript的一个轻量级框架,对javascript进行封装,它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。
二、JQ入门
1、jq的导入
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
2、jq的基本选择器
1)五种选择器:#id,.class,*所有的标签,select1,select2,selectN几种标签的并集,element元素选择器
2)案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#one").css("background-color","pink");
}); $("#btn2").click(function(){
$(".mini").css("background-color","pink");
}); $("#btn3").click(function(){
$("div").css("background-color","pink");
}); $("#btn4").click(function(){
$("*").css("background-color","pink");
}); $("#btn5").click(function(){
$("#two,.mini").css("background-color","pink");
});
});
</script> </head>
<body>
<input type="button" id="btn1" value="选择为one的元素"/>
<input type="button" id="btn2" value="选择样式为mini的元素"/>
<input type="button" id="btn3" value="选择所有的div元素"/>
<input type="button" id="btn4" value="选择所有元素"/>
<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div> <div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div> <div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div> <span id="four"> </span>
</body>
</html>
3)案例演示
1>id选择器
2>class选择器
3>*选择所有
4>element选择器
5>select1,select2,selectN几种标签的并集
2、jq的层级选择器
1)知识点:四种层级选择器
1>返回值:Array<Element(s)> ancestor descendant 在给定的祖先元素下匹配所有的后代元素
2>返回值:Array<Element(s)> parent > child 在给定的父元素下匹配所有的子元素
3>返回值:Array<Element(s)> prev + next 匹配所有紧接在 prev 元素后的 next 元素
4>返回值:Array<Element(s)> prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素
2)案例源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","gold");
}); $("#btn2").click(function(){
$("body>div").css("background-color","gold");
}); $("#btn3").click(function(){
$("#two+div").css("background-color","gold");
}); $("#btn4").click(function(){
$("#one~div").css("background-color","gold");
});
});
</script> </head>
<body>
<input type="button" id="btn1" value="选择body中的所有的div元素"/>
<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/> <hr/>
<div id="one">
<div class="mini">
111
</div>
</div> <div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div> <div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div> <span id="four"> </span>
</body>
</html>
3)案例测试
1>返回值:Array<Element(s)> ancestor descendant 在给定的祖先元素下匹配所有的后代元素
2>返回值:Array<Element(s)> parent > child 在给定的父元素下匹配所有的子元素
3>返回值:Array<Element(s)> prev + next 匹配所有紧接在 prev 元素后的 next 元素
4>返回值:Array<Element(s)> prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素
3、jq基本过滤器
1)常见的过滤器
1>返回值:jQuery first() 获取第一个元素
2>返回值:jQuery last() 获取最后个元素
3>返回值:Array<Element(s)> :even 匹配所有索引值为偶数的元素,从 0 开始计数
4>返回值:Array<Element(s)> :odd 匹配所有索引值为奇数的元素,从 0 开始计数
2)案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("body div:first").css("background-color","red");
}); $("#btn2").click(function(){
$("body div:last").css("background-color","red");
}); $("#btn3").click(function(){
$("body div:odd").css("background-color","red");
}); $("#btn4").click(function(){
$("body div:even").css("background-color","red");
});
});
</script> </head>
<body>
<input type="button" id="btn1" value="body中的第一个div元素"/>
<input type="button" id="btn2" value="body中的最后一个div元素"/>
<input type="button" id="btn3" value="选择body中的奇数的div"/>
<input type="button" id="btn4" value="选择body中的偶数的div"/> <hr/>
<div id="one">
<div class="mini">
111
</div>
</div> <div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div> <div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div> <span id="four"> </span>
</body>
</html>
3)案例测试
1>返回值:jQuery first() 获取第一个元素
2>返回值:jQuery last() 获取最后个元素
3>返回值:Array<Element(s)> :even 匹配所有索引值为偶数的元素,从 0 开始计数
4>返回值:Array<Element(s)> :odd 匹配所有索引值为奇数的元素,从 0 开始计数
4、属性选择器(以id为例)
1)案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("div[id]").css("background-color","red");
}); $("#btn2").click(function(){
$("div[id='two']").css("background-color","red");
}); });
</script> </head>
<body>
<input type="button" id="btn1" value="选择有id属性的div"/>
<input type="button" id="btn2" value="选择有id属性的值为two的div"/> <hr/>
<div id="one">
<div class="mini">
111
</div>
</div> <div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div> <div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div> <span id="four"> </span>
</body>
</html>
2)案例测试
1>包含id属性
2>id属性 = “特定值”
2.8 学习总结 之 JQ初识的更多相关文章
- Linux学习之CentOS(三)--初识linux的文件系统以及用户组等概念
Linux学习之CentOS(三)--初识linux的文件系统以及用户组等概念 进入到了Linux学习之CentOS第三篇了,这篇文章主要记录下对linux文件系统的初步认识,以及用户组.用户权限.文 ...
- Linux学习之CentOS(二)--初识linux的一些常用命令
Linux学习之CentOS(二)--初识linux的一些常用命令 在VM上安装完了CentOS6.4以后,看着linux系统成功跑起来,心里小激动了一把......但是前方学习的道路还很遥远... ...
- day 81 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...
- day 80 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...
- shell编程学习之使用jq对json数据进行提取
shell编程学习之使用jq对json提取 jq命令允许直接在命令行下对JSON进行操作,包括分片.过滤.转换等 ,jq是用C编写,没有运行时依赖,所以几乎可以运行在任何系统上.预编译的二进制文件可以 ...
- 我们一起学习WCF 第一篇初识WCF(附源码供对照学习)
前言:去年由于工作需要我学习了wcf的相关知识,初期对wcf的作用以及为何用怎么样都是一知半解,也许现在也不是非常的清晰.但是通过项目对wcf的运用在脑海里面也算有了初步的模型.今天我就把我从开始wc ...
- 学习web安全之--初识安全
随笔:随着互联网行业的飞速发展,互联网行业可谓日新月异,然而在繁华的背后,大多的互联网公司对于网络安全还是处于无重视,不作为的阶段,而作为一个程序员,如果也对信息安全视而不见的话,那将是这个公司的噩梦 ...
- JavaWeb学习总结第一篇--初识JavaWeb
JavaWeb学习总结(一)-- 初识JavaWeb 一:Web相关概念 Web程序也就是一般所说的网站,由服务器.客户端浏览器和网络组成.Web程序的好处就是使用简单,不需要安装.学习,有一台电脑. ...
- 我的angularjs源码学习之旅1——初识angularjs
angular诞生有好几年光景了,有Google公司的支持版本更新还是比较快,从一开始就是一个热门技术,但是本人近期才开始接触到.只能感慨自己学习起点有点晚了.只能是加倍努力赶上技术前线. 因为有分析 ...
随机推荐
- 碰到的问题——建设基于TensorFlow的深度学习环境
1.解决jupyter notebook问题:socket.error: [Errno 99] Cannot assign requested address 首先要生成一个jupyter的配置文件: ...
- Controller 层类
package com.thinkgem.jeesite.modules.yudengji.web; import java.util.Date; import javax.servlet.http. ...
- 使用HttpURLConnection通过post请求服务器时,URLEncode编码的必要性
通过Post提交表单数据时,数据类型为x-www-urlencoded,提交到服务器的数据服务器默认是通过URLEncoder.encode()编码过得,所以服务器处理时会用URLDecoder.de ...
- H.264 中的Annex B格式和AVCC格式
首先要理解的是没有标准的H.264基本流格式.文档中的确包含了一个Annex,特别是描述了一种可能的格式Annex B格式,但是这个并不是一个必须要求的格式.标准文档中指定了视频怎样编码成独立的包,但 ...
- redis 之redis集群与集群配置
一.为什么要用集群 redis3.0集群采用P2P模式,完全去中心化,将redis所有的key分成了16384个槽位,每个redis实例负责一部分slot,集群中的所有信息通过节点数据交换而更新. r ...
- 120、Java中String类之实现首字母大写
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- 中山Day10——普及
今天又是愚蠢的一天,估分230,实得110.其中T2.4不会,这里就只说题意和简要思路. 收获:scanf>>a,以及printf<<a. T1:模板题 此题相对简单,就是读入 ...
- 特约稿件 Java并发教程(Oracle官方资料)
本文是Oracle官方的Java并发相关的教程,感谢并发编程网的翻译和投递. (关注ITeye官微,随时随地查看最新开发资讯.技术文章.) 计算机的使用者一直以为他们的计算机可以同时做很多事情.他 ...
- 五 Mybatis一对一关联查询的两种方式(基于resultType&基于resultMap)
关联查询: 一个用户对应多个订单,一个订单只有一个用户 订单关联用户:两种方式 一:基于resultTYpe,一个与表关系一样的pojo实现 主表订单,从表用户 首先要有一个与关联查询表关系一样的po ...
- 通过python 构建一个简单的聊天服务器
构建一个 Python 聊天服务器 一个简单的聊天服务器 现在您已经了解了 Python 中基本的网络 API:接下来可以在一个简单的应用程序中应用这些知识了.在本节中,将构建一个简单的聊天服务器.使 ...