前端jQuery学习（一）
把最近学习的前端框架jQuery整理一下。你可能听说过jQuery，因为他是JavaScript世界中使用最广泛的一个库。
江湖传言，全世界大约有80~90%的网站直接或间接地使用了jQuery。鉴于它如此流行，又如此好用，所以每一个入门JavaScript的前端工程师都应该了解和学习它。
一、什么是jQuery？
1.jquery是由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
2.jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
3.它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
4.jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
5.jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择
二、什么是jQuery对象？
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的。如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html()
//意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
// 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
//虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
//约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$
所以，$variable = jQuery对象，variable = DOM对象（variable指的是变量）。通过$variable[0]，可以将jQuery对象转为DOM对象，比如：$("#test").html()和$("#test")[0].innerHTML
就是一个意思。
jQuery的基础语法：$(selector).action()
三、寻找元素(选择器和筛选器)
3.1 选择器
前端操作元素的两个步骤，就是找到这个元素，然后操作他，首先看一下jQuery是怎么寻找元素的：
| 选择器 | 实例 | 选取 |
|---|---|---|
基本选择器 |
||
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 <p> 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
基本筛选器 |
||
| :first | $("p:first") | 第一个 <p> 元素 |
| :last | $("p:last") | 最后一个 <p> 元素 |
| :even | $("tr:even") | 所有偶数 <tr> 元素 |
| :odd | $("tr:odd") | 所有奇数 <tr> 元素 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四个元素（index 从 0 开始） |
| :gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
| :header | $(":header") | 所有标题元素 <h1> - <h6> |
| :animated | 所有动画元素 | |
| :contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
| :empty | $(":empty") | 无子（元素）节点的所有元素 |
| :hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
| :visible | $("table:visible") | 所有可见的表格 |
| s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
属性选择器 |
||
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
| [attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
表单选择器 |
||
| :input | $(":input") | 所有 <input> 元素 |
| :text | $(":text") | 所有 type="text" 的 <input> 元素 |
| :password | $(":password") | 所有 type="password" 的 <input> 元素 |
| :radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
| :checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
| :submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
| :reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
| :button | $(":button") | 所有 type="button" 的 <input> 元素 |
| :image | $(":image") | 所有 type="image" 的 <input> 元素 |
| :file | $(":file") | 所有 type="file" 的 <input> 元素 |
| :enabled | $(":enabled") | 所有激活的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有被选取的 input 元素 |
| :checked | $(":checked") | 所有被选中的 input 元素 |
3.1.1 左侧菜单练习
根据上面的选择器，做了一个简单的左侧菜单练习，大概的功能就是点击菜单选项，下面的子选项就显示，其他菜单选项的子选项就隐藏：
首先，我们把基本的标签都写好，设置好初始状态：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
height: 600px;
width: 100%;
}
.menu{
float: left;
width: 30%;
height: 600px;
background-color: blue;
}
.content{
float: left;
width: 70%;
height: 600px;
background-color: #84a42b;
}
.m{
line-height: 40px;
background-color: mediumaquamarine;
}
.hide{
display: none;
} </style>
</head>
<body> <div class="back">
<div class="menu">
<div class="item">
<div class="m" >菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="m" >菜单二</div>
<div class="con hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div>
<div class="item">
<div class="m" >菜单三</div>
<div class="con hide">
<div>333</div>
<div>333</div>
<div>333</div>
</div>
</div> </div>
<div class="content"> </div> </div> </body>
</html>
现在的状态是这样：
但是这只是静态的，点击菜单二没有任何反应。下一步，我们应该要给三个菜单标签绑定点击事件了，就是点击他之后，其他两个下面的子标签要隐藏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
height: 600px;
width: 100%;
}
.menu{
float: left;
width: 30%;
height: 600px;
background-color: blue;
}
.content{
float: left;
width: 70%;
height: 600px;
background-color: #84a42b;
}
.m{
line-height: 40px;
background-color: mediumaquamarine;
}
.hide{
display: none;
} </style>
</head>
<body> <div class="back">
<div class="menu">
<div class="item">
<div class="m" onclick="show(this)">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="m" onclick="show(this)">菜单二</div>
<div class="con hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div>
<div class="item">
<div class="m" onclick="show(this)">菜单三</div>
<div class="con hide">
<div>333</div>
<div>333</div>
<div>333</div>
</div>
</div> </div>
<div class="content"> </div> </div> <script src="jquery-3.4.0.js"></script>
<script>
function show(ele) {
//首先我们要把点击的菜单下面并列的div标签找到，通过.next(),
//然后移除hide属性
$(ele).next().removeClass('hide');
//第二步就是把其他的菜单下面并列的div标签加上这个hide属性
//我的思路是先找到父级，然后找父级的兄弟级，然后是兄弟级下面子级中有class=con的
//注意con前面要加上那个点
$(ele).parent().siblings().children('.con').addClass('hide');
}
</script>
</body>
</html>
下面是一个切换table的练习，可以试着做一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style> *{
margin: 0px;
padding: 0px;
}
.tab_outer{ width: 60%;
margin: auto;
}
.menu{
background-color: #5689ff;
line-height: 40px;
}
.content{
background-color: yellowgreen;
height: 300px;
} .menu li{
display: inline-block;
color: #f9f9f9;
}
.current{
background-color: dimgrey;
color: orangered;
} .hide{
display: none;
}
</style> </head>
<body>
<div class="tab_outer">
<ul class="menu">
<li xxx="c1" class="current" onclick="tab(this);">菜单一</li>
<li xxx="c2" onclick="tab(this);">菜单二</li>
<li xxx="c3" onclick="tab(this);">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div> </div> </div> <script src="jquery-3.4.0.js"></script>
<script>
function tab(ele) {
var index = $(ele).attr('xxx');
$('#'+index).removeClass('hide').siblings().addClass('hide');
$(ele).addClass('current').siblings().removeClass('current');
}
</script>
</body>
</html>
3.2 筛选器
在上面两个练习中，还是出现了没有讲到的筛选器，下面说一下筛选器：
3.2.1 过滤筛选器
下面这几个是常用的基本筛选器，在上面的表中也可以找到，所以上面表格中的内容背都要背下来。
$("li").eq(2) 也可以写为$("li:eq(2)"),就是所有li标签的第3个，index从0开始
$("li").first() 也可以写为$("li:first"),就是所有li标签中的第一个
$("ul li").hasclass("test") 列表中，有class="test"的li标签
3.2.2 查找筛选器
$("div").children(".test")
.children()返回匹配元素集合中每个元素的所有子元素（仅儿子辈）。参数可选，添加参数表示通过选择器进行过滤，对元素进行筛选
$("div").find(".test")
.find()方法是返回匹配元素集合中每个元素的后代。参数是必选的，可以为选择器、jquery对象可元素来对元素进行筛选。
<div class="outer">outer
<div class="inner">
inner
<p>inner p</p>
</div>
<p>alex</p>
</div> <script src="jquery-3.4.0.js"></script>
<script>
$(".outer").children("p").css("color","red");
// $(".outer").find("p").css("color","red");
</script>
.children()和.find()
最后结果：
.siblings(expr) ---查找所有兄弟（包括哥哥和弟弟）
.next(expr) ---查找紧挨着的弟弟
.nextAll(expr) ---查找所有的弟弟
.nextUntil(expr) ---查找所有弟弟，直到碰到符合expr条件，不包含符合expr条件的那个元素
.prev(expr) ---查找紧挨着的哥哥
.prevAll(expr) ---查找所有哥哥
.prevUntil(expr) ---查找所有哥哥，直到碰到符合expr条件，不包含符合expr条件的那个元素
注：expr是指可选的参数，包含用于匹配元素的选择器表达式。
<ul class="test">
<li class="begin">1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<ul>
<li>aaaaaaaaaaaaaa</li>
</ul>
<h2>hahaha</h2>
<li>4444</li>
<li id="end">5555</li>
<li>6666</li>
</ul>
测试代码
$("li:eq(1)").siblings().css("color","red") //让第二个li的所有兄弟改变颜色，如果不加eq(1),所有的都变红
$("li").eq(2).next().css("color","red"); //让第三个li后面的弟弟变色
$("li").eq(2).nextAll().css("color","red"); //让第三个li后面所有的弟弟变色
$("li").eq(2).nextUntil("#end").css("color","red"); //让第三个li后面所有的弟弟变色，直到出现一个id是end的弟弟为止，这个弟弟不变色
.prev的用法也是一样的，就是换成了前面的哥哥。
$(".test").parent() 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）
$(".test").parents() 获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）
$(".test").parentUntil() 获得当前匹配元素集合中每个元素的祖先元素，直到（但不包括）被选择器、DOM 节点或 jQuery 对象匹配的元素
经过了前面的学了，这三个大概都能猜到怎么用了：
<div class="outer">outer
<div class="inner">
inner
<p>inner p</p>
</div>
<p>pengfy</p>
</div>
测试代码
console.log($(".outer .inner p").parent().html()) //p标签打印父元素中的内容
$(".outer .inner p").parents().css("color","red"); //p标签祖先元素都变色
这里如果也打印的话，你会发现找到的祖先元素已经到了html标签了
$(".outer .inner p").parentsUntil("body").css("color","red");
这里暂时看不出差别，试着打印一下内容就清楚了，这里只到了outer类这一层。
下一篇会介绍操作元素，操作属性等内容。
前端jQuery学习（一）的更多相关文章
- 前端jquery学习--03
1.tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- web前端开发学习：jQuery的原型中的init
web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...
- python学习之路前端-jQuery
jQuery简介 JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safa ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- Web前端的学习介绍(截止今天还有Bootstrap没有学，要腾点时间解决掉)
Web前端的学习分为以下几个阶段,具体的学习路线图如图所示. 第一阶段——HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静 ...
- web前端的学习误区
web前端的学习误区 网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们 ...
- 大量Javascript/JQuery学习教程电子书合集
［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人 不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pd ...
- ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
- JQuery学习笔记——基础选择器
第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...
随机推荐
- Laravel中我们登录服务器通过 Tinker 手动创建后台管理用户
Laravel中我们可以登录到服务器通过 Tinker 手动创建后台用户 laravel中tinker命令的作用是用来调试laravel,可以打印变量或对象信息,显示函数代码,对数据库写入和查询数据. ...
- [转]深入了解iPad上的MouseEvent
iPad上没有鼠标,所以手指在触发触摸事件(TouchEvent)的时候,系统也会产生出模拟的鼠标事件(MouseEvent). 这对于普通网页的浏览需求而言,基本可以做到与PC端浏览器无明 ...
- 【Netty整理03-NIO】Java 实现 NIO demo
jdk提供的NIO使用: 概览:https://blog.csdn.net/the_fool_/article/details/83000648 博主抄写了网上的demo,略作修改与调整,原文链接: ...
- auth-booster配置和使用（yii1.5）
auth-booster这个是一个yii框架扩展中的一个模块.是非常好用的(但是里面的说明都是英文的,所以国人用还需要改一点里面的汉化) 1.下载auth-booster这个:http://www.y ...
- asyncio源码分析之基本执行流程
基于async关键字的原生协程 # 定义一个简单的原生协程cor async def cor(): print('enter cor') print('exit cor') print(type(co ...
- 设计模式-抽象工厂模式（AbstractFactory）
抽象工厂模式是向客户端提供一个接口(FruitFactory),,使得客户端在不必指定产品的具体类型的情况下,能够创建多个产品族(NorthFruit.SouthFruit)的产品对象. 角色和职责: ...
- centos7安装hadoop完全分布式集群
groupadd test //新建test工作组 useradd -g test phpq //新建phpq用户并增加到test工作组 userdel 选项 用 ...
- RT-Thread定时器以及结构体指针的一些思考
定时器分为软件定时器和硬件定时器.顾名思义,软件定时器就是有操作系统提供的软件定时器,硬件定时器就是用硬件芯片提供的定时器. 而在RT-Thread操作系统提供的定时器是软件定时器,但是为了便于管理, ...
- 嵊州D3T3 light
嵊州D3T3 light 光恰似水 兄弟俩曾经 k 次受到过父母的物质激励. 一开始,兄弟俩的能力值为 1,最后,兄弟俩的能力值是 1 + (2 ^k−1)/ n . 当兄弟俩受到价值为 mi 的物质 ...
- Android开发-百度地图之电子围栏
功能实现:根据经纬度创建一个坐标,判断该坐标是否在指定圆形覆盖范围内 两个计算方法,直接套用: /** * 地球半径 */private static double EARTH_RADIUS = 63 ...