jquery学习记录

推荐一个优秀的jQuery和Ajax学习网站

什么是jQuery？

jQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。

下载jQuery，搭建jQuery环境，jQuery开发下载有两个选择：

jquery-3.3.1.js ，未压缩的文件，适合在学习和研究源码，内部代码排版整齐且含注解, 但文件较大, 大小差不多是压缩的jQuery文件大小的3倍。
jquery-3.3.1.min.js，压缩的文件，适合实际开发，可以节省宽带并提高生产性能。

jQuery选择器表达式有两种写法：$("xxx") 和 jQuery("xxx") , 它们是等价的, 但程序员更喜欢使用$("xxx") 这种写法

基本选择器

基本表达式是jQuery最基础最常用的选择器表达式

<span class="spanClass" id="spanId">我是span标签</span>
<p>我是p标签</p>

名称	语法	举例	解析
类选择器	`$(".class")`	`$(".spanClass")`	获取类为spanClass的元素
id选择器	`$("#id")`	`$("#spanId")`	获取id为spanId的元素
标签选择器	`$("标签")`	`$("span")`	获取标签名为span的元素
组合选择器	`$("S1,S2,...,Sn")`	`$(.spanClass, p)`	获取类名为spanClass的元素和标签名为p的元素

层叠选择器

层叠选择器是根据元素位置来获取元素的选择器表达式

<ul><li><span>哦哦</span><b>嗯嗯<span>啊啊</span></b><span>啊<b>嗯 </b></span></li><li><p>哈哈</p><b>嘻嘻</b><p>呵呵</p></li>
</ul>

名称	语法	举例	说明
后代选择器	`$("ancestor descendant")`	`$("li span")`	获取li标签内所有的span标签,包括子、孙span标签
子选择器	`$("ancestor > descandant")`	`$("li>span")`	获取li标签内所有子级（不包括孙级）span标签
兄弟选择器	`$("pre~siblings")`	`$("b~p")`	获取所有与b标签同级，且在b标签之后的p标签

属性选择器

属性选择器是根据元素的属性值来获取元素的选择器表达式

<ul><li><a href="https://www.baidu.com">百度</a><a href="https://cn.bing.com">必应</a></li>
</ul>

语法	举例	说明
`$("selector[attribute =value]")`	`$("a[href ='https://www.baidu.com']")`	获取所有href属性值为`https://www.baidu.com`的a标签
`$("selector[attribute ^=value]")`	`$("a[href ^='https://www']")`	获取所有href属性值以`https://www`开头的a标签
`$("selector[attribute $=value]")`	`$("a[href $='com']")`	获取所有href属性值以`com`开头的a标签
`$("selector[attribute *=value]")`	`$("a[href *='com']")`	获取所有href属性值中含有`com`的a标签

位置选择器

位置选择器是通过位置来获取指定元素的选择器表达式

<p class="p1">哈哈</p>
<p class="p2">嘻嘻</p>
<p class="p3">呵呵</p>
<span>哦哦</span>
<p class="p1">哈哈</p>
<p class="p2">嘻嘻</p>
<p class="p3">呵呵</p>

语法	举例	说明
`$("selector : first")`	`$(".p1 : first")`	获取第一个类名为p1的元素
`$("selector : last")`	`$(".p1 : last")`	获取最后一个类名为p1的元素
`$("selector : even")`	`$("p : even")`	获取偶数位置的p标签元素（从0开始，0是偶数）
`$("selector : odd")`	`$("p:odd")`	获取奇数位置的p标签（从0开始）
`$("selector : eq(n)")`	`$("p:eq(4)")`	获取第五次出现的p标签（从0开始）

表单选择器

表单选择器是获取表单元素的(注意元素,不是它的值)

语法	说明
`$("selector : input")`	获取所有输入 input 标签元素
`$("selector : text")`	获取文本框
`$("selector : password")`	获取所有密码框
`$("selector : submit")`	获取提交按钮
`$("selector : reset")`	获取重置按钮

获取表单元素的值：js使用value()方法 , jquery使用val()方法

相信看了这么多的jQuery选择器, 你应该有所发现, 它和css选择器的写法非常相似。下面我们对比一下css选择器和jQuery选择器的写法？

id选择器
- css的写法：#id
- jQuery的写法：$(" #id ")
类选择器
- css的写法：.class
- jQuery的写法：$(" .class ")
标签选择器
- css的写法：标签
- jQuery的写法：$(" 标签 ")

等等 . . . . . .

发现, jQuery选择器就是把css选择器写在 $(" ")中, 即$(" css选择器 ") , 所以jQuery选择器和 css选择器的写法是不是非常相似。

但别被误导了, jQuery选择器和 css选择器在写法上虽然十分相似, 但功能却相差十万八千里。

css选择器的作用是: 用来对指定元素设置css样式
jQuery选择器的作用是: 用来获取指定的元素。

比如: $(" #id ") 的作用等同于 document.getElementById(" id ") , 都是通过id获取指定元素

jQuery是对js进行封装后提供的简单的开发的方式, 在获取元素的方式上已经体现了出来：jQuery通过$(“xxx”)就可以获取到所需的元素, 而js则需要通过document.getElementById(“xxx”)、document.getElementsByClassName(“xxx”)、document.getElementsByTagName(“xxx”)等方式来获取所需元素, 显得非常复杂。

那难道jQuery和js的差距仅仅体现在获取元素的方式上而已吗？更过的体现在了操作元素的方法上, 下面看一下jQuery操作元素的方法

操作元素属性值

attr() , 获取或设置元素属性的值（一个参数是表示获取属性值, 两个参数是表示设置属性值）
例如
- $("p").attr(" id ") , 获取p标签元素的id值, (如果是获取多个元素的属性值, 则默认第一个元素的属性值, 而设置元素属性值则没有这个限制, 可以一次性设置多个元素的属性值)
- $("p").attr(" id " , " main ") , 设置p标签元素的id值为main, 会覆盖掉原先的id值
removeAttr(name) , 移除元素属性
例如
- $("p").removeAttr(" id ") , 移除p标签元素的id属性, 即该元素的id属性没了

操作元素css样式

css() , 获取或设置元素的css样式属性, 并且支持在css()方法中传入json对象, 实现一次性设置多个css样式属性和属性值
例如
- $("p").css(" color ") , 获取p标签元素color属性的值
- $("p").css(" color " , " red ") , 设置p标签元素color属性的值为red
- $("p").css({"color":"pink","font-size":"25px"}) , 设置p标签元素color属性的值为pink, font-size属性的值为25px
addClass() , 给某某元素添加指定类名, 可以一次性添加多个类名, 多个类名之间以空格隔开, 且新增的类名并不会覆盖原有的类名
例如
- $("p").addClass(" main ") , 给p标签元素添加一个类名mian（即给某某元素的class属性添加一个值main）
- $("p").addClass(" main1 main2 ") , 给p标签元素添加两个类名, 分别为main1 和 main2
removeClass() , 移除某某元素或所有元素的指定类名(注意了是移除class属性的某某值, 不是移除class属性)
例如
- $("p").removeClass(" main ") , 删除p标签元素class属性中名为main的值
- $("p").removeClass() , 删除p标签元素class属性所有的值

设置元素内容

val() , 获取或设置输入框输入的内容
例如
- $("input[class='main']").val() , 获取类名为main的输入框所输入的内容
- $("input[class='main']").val(" aaa ") , 设置类名为main的输入框的初始内容为aaa

val() ，除了可以获取获取或设置输入框输入的内容，还可以用来获取select下拉框的内容（如果select的option标签有value属性，则val()方法用来获取value属性的值，如果没有value属性，则val()方法用来获取内容）

案例一
（有value属性，用来获取value属性的值）

<select class="area-select"><option class="area" value="">区域名称</option><option class="area" value="21">广东</option><option class="area" value="23">福建</option><option class="area" value="25">云南</option>
</select><script type="text/javascript">$('.area-select').on('change',function (e) {var areaId = $('.area-select').val();console.log(areaId);});
</script>

案例二
（没有value属性，用来获取内容）

<select class="area-select"><option class="area" >区域名称</option><option class="area" >广东</option><option class="area" >福建</option><option class="area" >云南</option>
</select><script type="text/javascript">$('.area-select').on('change',function (e) {var areaId = $('.area-select').val();console.log(areaId);});
</script>

text(), 获取或设置元素的纯文本,即标签的内容。如果设置的元素内容中含有HTML标签, 则设置的内容会全部直接显示，不会对html标签进行转义。
例如
- $("span").text() , 获取span标签的内容
- $("span").text("哈哈哈") , 设置span标签的内容为哈哈哈, 设置的内容会覆盖原有的内容
- $("span").text("哈哈哈") , 这时候得到的不是加粗了的哈哈哈字体, 而是哈哈哈
html(), 获取或设置元素内部的HTML, 其实也是用来获取或设置标签内容的, 和text()一样。唯一的区别是在设置标签内容时, 如果设置的元素内容中含有HTML标签, 则会对标签进行转义, 使标签可以生效
例如
- $("span").html("哈哈哈") , 得到的使加粗了的哈哈哈字体

添加新元素

方法	说明
prepend()	在被选中元素的内容之前插入新元素
append()	在被选中元素的内容之后插入新元素
before()	在被选中元素之前插入新元素
after()	在被选中元素之后插入新元素

有图可知, preappend()方法是将新元素插入到选中元素的内部, before()方法是将新元素插入到选中元素的外部。

删除元素

方法	说明
remove()	删除被选中元素，包括其子元素
empty()	删除被选中元素的子元素，但不删除被选中元素本身

元素的隐藏和显示

方法	说明
hide()	隐藏显示的元素
show()	显示隐藏的元素
taggle()	在隐藏和显示中切换,如果元素是显示着的,则将其隐藏。如果元素是隐藏着的,则将其显示。

并且这三个方法中, 可以传入speed参数来规定显示 / 隐藏的过度事件, 单位为毫秒。

jQuery中.html(“xxx”)和.append(“xxx”) 的区别:

append是追加，html是完全替换

<p id=“1”> <p>123</p> </p>-----------------------------------------------------------------------------------------------$("#1").html("<span>456</span>");
结果是：
<p id=“1”> <span>456</span> </p>-----------------------------------------------------------------------------------------------$("#1").append("<span>456</span>");
结果是：
<p id=“1”> <p>123</p> <span>456</span> </p>$("#1").prepend("<span>456</span>");
结果是：
<p id=“1”> <span>456</span> <p>123</p> </p>-----------------------------------------------------------------------------------------------$("#1").after("<span>456</span>");
结果是：
<p id=“1”> <p>123</p> </p>
<span>456</span>$("#1").after("<span>456</span>");
结果是：
<span>456</span>
<p id=“1”> <p>123</p> </p>

jQuery的 Event 属性中target和currentTarget的区别:

e.target是触发事件元素，e.currentTarget是事件监听元素，一般情况下两者的指向是相同；但在事件委托时，往往e.target指向子元素，而e.currentTarget指向父元素。

案例一：

<div id="div1" class="div11" data-value="25"><button id="button1" class="button11" data-value="55">按钮</button>
</div>
<script type="text/javascript">$('#div1').on('click',function(e){console.log(e.target.id+', '+e.target.className+', '+e.target.dataset.value);console.log(e.currentTarget.id+', '+e.currentTarget.className+', '+e.currentTarget.dataset.value);});
</script>

上面的示例中，当在div上点击时，e.target与e.currentTarget是一样的，都是div；当在按钮上点击时，e.target是button，而e.currentTarget则是div。

案例二：

<div id="div1" class="div11" data-value="25"><button id="button1" class="button11" data-value="55">按钮</button>
</div>
<script type="text/javascript">$('#div1').on('click','#button1',function(e){console.log(e.target.id+', '+e.target.className+', '+e.target.dataset.value);console.log(e.currentTarget.id+', '+e.currentTarget.className+', '+e.currentTarget.dataset.value);});
</script>

结论：currentTarget始终是监听事件者，而target是事件的真正发出者

jQuery的常用事件

鼠标事件	说明
click	鼠标单击时触发的事件
dblclick	鼠标双击时触发的事件
mouseenter	鼠标移入组件区域时触发的事件
mouseleave	鼠标移出组件区域时触发的事件
mouseover	鼠标在组件区域上移动时触发的事件

键盘事件	说明
keypress	键盘键完整的按下并弹起时触发的事件
keydown	键盘键按下时触发的事件
keyup	键盘键弹起时触发的事件

表单事件	说明
submit	表单提交时触发的事件
change	表单输入项内容发生变化时触发的事件
foucs	文本框获取焦点时触发的事件
blur	文本框失去焦点时触发的事件

文档 / 窗口事件	说明
load	文档加载或页面刷新时产生的事件
resize	文档或窗口尺寸发生变化时触发的事件
scroll	窗口滚动时触发的事件
upload	窗口关闭时触发的事件

以鼠标单击事件为例,

看看js是怎样写的：document.getElementById("xxx").onclick=function(){};
在看看jQuery是怎么写的：$("#xxx").click(function(){}); 或者 $("#xxx").on("click",function());

由上可知, jQuery事件处理方法有两种书写格式

on("click",function()) , 为选中的页面元素绑定单击事件
click(function(){}) , 是绑定事件的简写形式

并且, function()处理方法中提供了event参数, event参数中包含了事件相关的信息, 比如：type事件类型、key键入的内容、keyCode键入内容对应的ASCII值（空格对应的ASCII值为32, 0对应的ASCII值为48, A对应的ASCII值为65, a对应的ASCII值为97 ）、等等事件相关信息

//给class名为text的文本框添加键盘按下事件
$(".text").keydown(function (event) {//如果键入空格, 则弹出提示框提示不能出空格if(event.keyCode==32){alert("不能出现空格");}//查看event参数信息console.log(event);
});

页面就绪函数

页面就绪函数是指：在整个页面加载完成后, 才会执行的函数
页面就绪函数有两种书写格式：
- 1、$(document).ready(function(){ /* 代码省略 */ });
- 2、$(function(){ /* 代码省略 */ });

感觉还是有点不理解, 页面就绪函数的意义所在？

我们都知道, 页面的加载是从上往下进行加载的。那么, 如果我们要对某个HTML标签元素添加单击事件, 但我们的js代码却写在<head> 头标签中,由于页面是从上往下执行时, 它首先加载的就是js的代码, 而这个时候还没有加载到HTML的主体内容(即<body>标签内的HTML代码)。所以, 这个时候我们对该HTML标签元素添加的单击事件就无法生效, 为什么呢？因为我还没有加载到该标签元素呀, 我都找不到它, 怎么对它添加单击事件呀？

所以, 这个时候, 就需要对这个单击事件添加一个就绪函数, 就是把单击事件写仅就绪函数中, 告诉浏览器, 你先不要管我, 等你加载完整个也面之后, 你再来执行我。这样, 再加载完整个页面之后, 就获取到了要添加单击事件的标签元素了, 这个时候再对它添加单击事件, 就可以使该单击事件生效。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>就绪函数</title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script type="text/javascript">//就绪函数$(function(){//单击事件$("p").click(function () {$("p").css("color","red");});//双击事件$("p").dblclick(function () {$("p").css("color","black");});});
</script>
</head>
<body><p style="font-size: 25px">我是p标签</p>
</body>
</html>

如上代码, 如果没有添加就绪函数, 那么这两个事件都会无法生效的。

当然, 如果我们将js代码放到<body> 主体内容之后, 那么, 不使用就绪函数也是可以的, 如下:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>就绪函数</title>
</head>
<body><p style="font-size: 25px">我是p标签</p>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script type="text/javascript">//单击事件$("p").click(function () {$("p").css("color","red");});//双击事件$("p").dblclick(function () {$("p").css("color","black");});
</script>
</html>

jquery学习记录相关推荐

JQuery学习记录——DOM的加载
一.加载DOM 在页面加载完毕后,浏览器会通过javaScript为DOM元素加载事件,在js中通常使用window.οnlοad=function(){...}方法,在JQuery中使用$(docu ...
JQuery学习记录——jQuery对象和DOM对象的转换
1.DOM对象:Document Object Model 文档对象模型,每个DOM都可以表示成一棵树,一颗DOM树有很多元素节点,这些节点可以通过js中的getElementById("i ...
jQuery学习记录--ajax
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.原生JavaScript中的Ajax 1.创建Ajax对象: 2.连接到服务器 3.发送请求 4.接收返回值二. ...
jQuery学习记录一
jQuery:就是JavaScript库中的一种,jQuery,很多优点 * JavaScript库也可以叫JavaScript函数库 * JavaScript库:把一些浏览器兼容性的代码或者 ...
Echarts学习记录——如何去掉网格线及网格区域颜色
关键属性 splitLine和splitArea,可以设置相关的属性示例代码 <!DOCTYPE html> <html lang="en"> <h ...
【JQuery】JQuery学习笔记
(function(){}) 与 $(function(){})的区别 1.(function(){})函数 (function(){})表示一个匿名函数.function(arg){...}定义了一 ...
（一）Git学习记录(不断更新)
作为程序员如果你还不知道 Git 和 GitHub,说不过去吧,赶紧来学习一波. 一.认识GitHub Git 是个版本控制系统,说明白点就是进行代码的各种管理,比如你写错代码进行回滚啊.追寻 Bug ...
jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例
day03 - jQuery 学习目标: 能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery ...
gradle 上传jar包_Gradle学习记录014 关于依赖的声明
详细学习Gradle构建的依赖声明.该学习记录基于Gradle官方网站资料.本篇参考链接如下: https://docs.gradle.org/current/userguide/declaring_ ...

jquery学习记录

jquery学习记录相关推荐

最新文章

热门文章