JavaWeb之jQuery基础学习与总结
jQuery是一个兼容多浏览器的、轻量级的JavaScript库。
jQuery是继prototype之后又一个优秀的JavaScript库，如今，jQuery已经成为最流行的JavaScript库
jQuery，顾名思义，也就是JavaScript和查询（Query），其宗旨是
——WRITE LESS,DO MORE（写的少，做的多）
笔记大纲
-
jQuery使用
-
核心函数"$"
-
jQuery对象和DOM对象的转换
-
jQuery的选择器
- 基本选择器、层级选择器、过滤选择器、表单对象属性过滤选择器
-
经典案例（选中问题）
-
DOM操作
-
事件（冒泡）
jQuery重点标记
1.jQuery使用
jQuery的核心语法：$(selector).action()
A.selector:选择器（迅速定位）
B.action()：方法()||事件
注意：jQuery（正确书写）与JQuery，区分大小写！
1.1.jQuery库
实际上即是一个js文件，只需要在网页中直接引入文件就OK。
<script type="text/javascript" src="路径/jquery-1.7.2.js">script>
2.2.JQuery库版本
A.开发测试时，用未压缩的版本
B.上线项目中，用压缩后的版本
2.3.案例应用
<html>
<head>
<meta charset="UTF-8">
<title>HellojQuerytitle>
<script type="text/javascript" src="../script/jquery-1.7.2.js">script>
<script type="text/javascript">
//使用$()代替window.onload
$(function(){
<!--获取按钮对象并绑定单机响应函数 click是方法-->
$("#btnId").click(function(){
alert('Hello,codinglin');
});
});
script>
head>
<body>
<button id="btnId">jQuery小案例测试button>
body>
html>
2.核心函数
2.1.$是什么？
$本质是核心函数的作用，是jQuery函数的引用。
$ ==（等价于） jQuery == $() == jQuery()==核心函数
2.2.核心函数的作用
A.$(function(){})=== 相当于window.onload = function(){}
即：传入参数为【函数】时，在文档加载完成后执行这个函数。
B.$(“选择器”) ======根据这个选择器查找元素节点对象
即：传入参数为【选择器字符串】时，根据这个字符串查找元素节点对象。
C.$(“html字符串”)=== 根据这个html字符串创建元素节点对象
即：传入参数为【HTML字符串】时，根据这个字符串创建元素节点对象。
D.$(“DOM对象”)=======将DOM对象包装为jQuery对象
即：传入参数为【DOM对象】时，将DOM对象包装为jQuery对象返回。
3.jQuery对象和DOM对象的转换
jQuery对象本质上是DOM对象的数组。
3.1.DOM对象为什么要转换为jQuery对象？
因为需要使用jQuery强大的方法。
DOM对象–>jQuery对象 $(DOM对象)
3.2.jQuery对象为什么要转换为DOM对象？
因为在特殊情况，jQuery对象没有实现，需要原生的js实现。
jQuery对象–DOM对象> ：将jQuery看成数组或集合。（本质jQuery是伪数组实现的）
A. $xxx.[0]–数组 B.xxx.get[0]–集合
4.jQuery的选择器
jQuery操作（如：改变指定元素节点的背景颜色）样式表
css(参数1，参数2)：为参数1赋值，值为参数2
css(参数1：获取参数1的样式值
jQuery中获取元素个数：①.length②.size()
jQuery操作属性
attr(参数1，参数2)：为参数1赋值，值为参数2
attr(参数1：获取参数1的属性值
jQuery操作文本
| 序号 | Javascript（DOM） | jQuery |
|---|---|---|
| ⑴ | .innerText（取值、赋值操作即“=”在其前后位置） | .text（取值.text()、赋值text(“文本”)） |
| ⑵ | .innerHTML | .html |
| ⑶ | .value | .val |
说明：val()主要作用：操作value属性，针对下拉框、单选、多选框主要作用为”选中“!
对象：this表示当前触发函数得对象（就近的），this是DOM对象
4.1.基本选择器
| 序号 | 格式 | 说明 |
|---|---|---|
| 1 | element | 【标签选择器】根据给定的元素名匹配所有元素如$(“P”) |
| 2 | #id | 【id选择器】根据给定一个id匹配一个元素 如$("#id名") |
| 3 | .class | 【类选择器】根据给定的类匹配元素如$(".类名") |
| 4 | * | 【全局（所有）选择器】匹配所有元素如$("*") |
| 5 | selector1,selector2,selectorn | 【并集选择器】将每一个选择器匹配到的元素合并后一起返回。如$("#id名，h2,.class名") |
4.2.层次（层级）选择器
| 序号 | 格式 | 说明 |
|---|---|---|
| 1 | ancestor[祖先] descendant[子孙] | 【后代选择器】在给定的祖先元素下匹配所有的后代元素如：$(“E F”) |
| 2 | parent > child | 【子代选择器】在给定的父元素下匹配所有的元素如：$(“E > F”) |
| 3 | prev +next | 【相邻选择器（下一个相邻）】匹配所有紧接在prev元素后的next元素如：$(“E+F”) |
| 4 | prev ~ siblings[兄弟姐妹] | 【同辈（兄弟）选择器（后面的兄弟）】匹配prev元素后的所有的siblings元素 如：$(“E ~ F”) |
4.3.过滤选择器
以下参看jQuery1.7API:
（1）基本
| 序号 | 格式 | 说明 |
|---|---|---|
| 1 | :first | 获取【第一个】元素 |
| 2 | :last | 获取【最后一个】元素 |
| 3 | :not(selector) | 去除所有与给定选择器匹配的元素【非】 |
| 4 | :even | 匹配所有索引值为【偶数】的元素，从0开始计数 |
| 5 | :odd | 匹配所有索引值为【奇数】的元素，从0开始计数 |
| 6 | :eq(index) | 匹配一个给定索引值的元素，从0开始计数【等于】 |
| 7 | :gt(index) | 匹配所有【大于】给定索引值的元素，从0开始计数 |
| 8 | :lt(index) | 匹配所有【小于】给定索引值的元素，从0开始计数 |
| 9 | :header | 匹配如h1、h2…h6之类的【标题】元素 |
| 10 | :animated | 匹配所有正在执行【动画】效果的元素 |
| 11 | :focus | 触发每一个匹配元素的focus事件（函数）。【焦点】 |
（2）内容
| 序号 | 格式 | 说明 |
|---|---|---|
| 1 | :contains(text) | 匹【包含】给定文本的元素 |
| 2 | :empty | 匹配所有不包含子元素或者文本的【空元素】 |
| 3 | :has(selector) | 匹配含有选择器所匹配的元素的元素 |
| 4 | :parent | 匹配含有子元素或者文本的元素 |
（3）可见性
| 序号 | 格式 | 说明 |
|---|---|---|
| 1 | :hidden | 匹配所有不可见元素，或者type为hidden的元素【隐藏】 |
| 2 | :visiable | 匹配所有的【可见】元素 |
（4）属性
| 序号 | 格式 | 说明 |
|---|---|---|
| 1 | [attribute] | 匹配包含给定【属性的元素】 |
| 2 | [attribute=value] | 匹配给定的【属性是某个特定值】的元素 |
| 3 | [attribute!=value] | 匹配所有不含有指定的元素，或者属性不等于特定值的元素 |
| 4 | [attribute^=value] | 匹配给定的属性是以某些值【开始】的元素—类似模糊查找（头） |
| 5 | [attribute$=value] | 匹配给定的属性是以某些值【结尾】的元素—类似模糊查找（尾） |
| 6 | [attribute*=value] | 匹配给定的属性是以【包含】某些值的元素—类似模糊查找（全） |
| 7 | [attrSel1] [attrSel2] [attrSelN] | 复合属性选择器，需要同时满足多个条件时使用—（同时成立） |
（5）子元素
| 序号 | 格式 | 说明 |
|---|---|---|
| 1 | :nth-child [() ] | 匹配其父元素下的第N个子或奇偶元素 |
| 2 | :first-child | （每个父元素）匹配第一个元素 |
| 3 | :last-child | （每个父元素）匹配第最后一个子元素 |
| 4 | :only-child | 如果某个父元素是父元素中唯一的子元素，那将会匹配，如果父元素中含有其他元素，那将不会被匹配 |
（6）表单
①所有的表单项：$(":inpput")
②单个表单项：$(":text|:password|:radio|:checkbox|：submit…")
| 序号 | 格式 | 说明 |
|---|---|---|
| 1 | :input | 匹配所有input、textarea、select、button元素 |
| 2 | :text | 匹配所有的单行文本框 |
| 3 | :password | 匹配所有的密码框 |
| 4 | :radio | 匹配所有的单选框 |
| 5 | :checkbox | 匹配所有复选框 |
| 6 | :submit | 匹配所有提交按钮 |
| 7 | :image | 匹配所有图像域 |
| 8 | :reset | 匹配所有重置按钮 |
| 9 | :button | 匹配所有按钮 |
| 10 | :file | 匹配所有文件域 |
| 11 | :hidden | 匹配所有不可元素，或者为type为hidden的元素 |
4.4.表单对象属性过滤选择器
| 序号 | 格式 | 说明 |
|---|---|---|
| 1 | :enabled | 匹配所有可用户元素 如：$(“input:enabled”) |
| 2 | :disabled | 匹配所有不可用元素 如：$(“input:disabled”) |
| 3 | :checked | 匹配所有选中的被选中元素（单选框、复选框等，不包括select中的option）如：$(“input:selected”) |
| 4 | :selected | 【下拉框】匹配所有选中的option元素 如：$(“select option:selected”) |
5.经典案例（选中问题）
5.1.功能需求
（1）点击【全选】按钮后，以上所有精通的技术都会选中
（2）点击【全不选】按钮后，以上所有精通的技术都不会选中
（3）点击【反选】按钮后，以上所有精通的技术选中的状态进行反转
（4）点击【提交】按钮后，以上所有精通的技术选中的内容一次弹出
代码示例：
<html>
<head>
<meta charset="UTF-8">
<title>全选全不选案例1title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js">script>
<script type="text/javascript">
$(function(){
$("#checkedAllBtn").click(function(){
//获取所有的复选框，为checked属性赋值，true
$(":checkbox").attr("checked",true);
});
$("#checkedNoBtn").click(function(){
//获取所有的复选框，为checked属性赋值，false
$(":checkbox").attr("checked",false);
});
$("#checkedRevBtn").click(function(){
var $cb =$(":checkbox");
//遍历获取所有的复选框
$cb.each(function(){
//checked属性为false 更改为checked属性为true(没选中->选中)
this.checked=!this.checked;
});
});
$("#sendBtn").click(function(){
//遍历获取选中的复选框
$(":checkbox:checked").each(function(){
//窗口弹出值
alert(this.value);
});
});
});
script>
head>
<body>
<form method="post" action="">
您精通的技术是：
<br/>
<input type="checkbox" name="skill" value="Java" />Java
<input type="checkbox" name="skill" value="Oracle" />Oracle
<input type="checkbox" name="skill" value="Linux" />Linux
<input type="checkbox" name="skill" value="框架" />框架
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
form>
body>
html>
页面效果：
5.2.功能需求
（1）点击【全选框】（选中/不选中）后，则所有的【岗位框】状态与自己一致
（2）点击所有【岗位框】即选中状态 ，则【全选框】选中，否则全选框不选中
代码示例：
<html>
<head>
<meta charset="UTF-8">
<title>全选全不选案例2title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js">script>
<script type="text/javascript">
$(function(){
$("#checkedAllBox").click(function(){
//获取全选框checked
var ce =this.checked;
//将全选框checked的状态赋值给爱好框
$("input[name='position']").attr("checked",ce);
});
$("input[name='position']").click(function(){
//获取所有的岗位框的个数
var lenAll =$("input[name='position']").length;
//获取选中的岗位框的个数
var lenCheck =$("input[name='position']:checked").length;
if(lenAll == lenCheck){
$("#checkedAllBox").attr("checked",true);
}else{
$("#checkedAllBox").attr("checked",false);
}
});
});
script>
head>
<body>
<form method="post" action="">
您求职的岗位是：<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="position" value="开发" />开发
<input type="checkbox" name="position" value="前端" />前端
<input type="checkbox" name="position" value="运维" />运维
form>
html>
页面效果：
6.DOM操作
6.1.DOM常用查询
（1）过滤
| 序号 | 格式 | 说明 |
|---|---|---|
| 1 | eq() | 获取第N个元素 |
| 2 | first() | 获取第一个元素 |
| 3 | last() | 获取最后一个元素 |
| 4 | filter() | 筛选出与指定表达式匹配的元素集合 |
| 5 | has() | 保留包含特定的后代元素 |
（2）查找
| 序号 | 格式 | 说明 |
|---|---|---|
| 1 | children() | 查询子元素 |
| 2 | find | 查询后代元素 |
| 3 | parents() | 查询父n代 |
| 4 | next() | 查询下一个兄弟的元素 |
| 5 | prex() | 查询上一个兄弟的元素 |
（3）串联
| 序号 | 序号 | 说明 |
|---|---|---|
| 1 | add() | 把表达式匹配的元素添加到jQuery对象中（用于连接） |
| 2 | end() | 将匹配的元素列表变为之前一次的状态 |
6.2.DOM增删改
（1）增加
| 序号 | 类型 | 格式 | 说明 |
|---|---|---|---|
| 1 | 内后 | append() | a.ppend(b) 将b追加到a的内后 |
| 2 | appendTo() | a.ppend(b):将a追加到b的内后 | |
| 3 | 内前 | prepend() | |
| 4 | prependTo() | ||
| 5 | 外后 | after() | |
| 6 | insertAfter() | ||
| 7 | 外前 | before() | |
| 8 | insertBeFore() |
（2）删除
| 序号 | 格式 | 说明 |
|---|---|---|
| 1 | empty() | 删除匹配的元素集合中所有的子节点 |
| 2 | remove() | 从DOM中删除所有匹配的元素 |
（3）修改
| 序号 | 格式 | 说明 |
|---|---|---|
| 1 | replaceWith() | a.replaceWith(b) 将b替换a |
| 2 | repalceAll() | a.replaceWith(b) 将a替换b |
7.事件
7.1.文档加载
window.onload与$(区别：
| 比较内容 | window.onload | 核心函数$() |
|---|---|---|
| 触发时机 | 在整个文档完全加载后执行（标签、图片等） | 在整个文档绘制成功后执行（标签） |
| 书写数量 | 整个文档中只可以书写一次，书写多次，后面会覆盖前面的代码 | 可以书写多次 |
| 语法格式 | 只有一种语法格式 | 两种语法格式 |
说明：HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
7.2.事件冒泡
（1）定义
当触发内部节点元素事件时，同时也会触发外部与之关联的节点事件。此现象称之为事件冒泡。
取消事件冒泡：return false;
（2）常用事件
| 序号 | 格式 | 说明 |
|---|---|---|
| 1 | read(fn) | 当DOM载入就绪可查询及操纵时绑定一个要执行的事件 |
| 2 | click(fn) | 触发每一个匹配元素的click事件 |
| 3 | bind(fn) | 为每个匹配元素的特定事件绑定事件处理函数 |
| 4 | live(“事件名”,“fn”) | 这个元素是以后再添加进来的也有效 |
| 5 | delegate(“子元素”,“事件名”，fn) | 指定的元素添加一个或多个事件处理程序，并规定事件发生时运行的函数 |
| 6 | blur(fn) | 失去焦点事件 |
| 7 | change(fn) | 文本改变且失去焦点时触发 |
| 8 | mouseover() | 鼠标移入时触发 |
| 9 | mouseout() | 鼠标移除时触发 |
☝上述分享来源个人总结，如果分享对您有帮忙，希望您积极转载；如果您有不同的见解，希望您积极留言，让我们一起探讨，您的鼓励将是我前进道路上一份助力，非常感谢！我会不定时更新相关技术动态，同时我也会不断完善自己，提升技术，希望与君同成长同进步！
☞本人博客：https://coding0110lin.blog.csdn.net/ 欢迎转载，一起技术交流吧！