jquery
三层架构
web 表示层：与前端页面交互，获取前段页面的数据，返回数据/页面 html/jsp/servlet
service 业务逻辑层 处理具体业务逻辑以及管理事务，登陆注册：处理具体的某项业务，根据实际需求做处理开发 java
dao 数据访问层 与数据库交互 增删改查 jsbc，mybatis
javaScript弊端：
1、复杂的文档对象 模型
2、不一样的浏览器实现 等
javascript库
为了简化javascript的开发，javascript库封装了很多预定义的对象和使用函数
jquery 是js的一个库，//别人封装好的js文件
Jquery简洁的语法和跨平台兼容性，极大的简化了 javascript开发人员遍历 html文档，操作DOM，处理事件，执行动画和开发ajax 其理念 write less do more
jquery优势
1、轻量级
2、强大的选择器
3、出色的DOM操作的封装；
4、可靠的事件处理机制
5、完善的Ajax、$、ajax（）无需关心复杂的浏览器兼容性和XMLHTTPRequest 对象的创建和使用
6、不污染顶级变量 只建立一个名为jquery的对象，其所有函数方法都在这个对象之下 $("")
7、出色的浏览器兼容性
8、链式操作方式、发生在同一个jquery对象上的一组动作，可以直接连写而不用重复获取对象。
jqnode.css().attr.css()
jqsnode.style()
完整版本： jquery.js
用于测试 学习 开发
mini版本 jquery.min.js
用于产品项目
使用时在响应的html中引入jquery的库文件即可
jquery函数
jquery库只提供了一个jquery的函数 该函数中预定义了很对方法
1、参数为选择器 字符串
jquery函数通过该选择器 获取对应的DOM，然后将这些DOM封装到一个Jquery对象中并返回///选择器
2、参数为DOM对象 // node的实例
jquery的函数将该dom封装为jquery对象并返回
3、参数为html文本字符串
jquery函数会根据传入的文本 创建好html元素并封装为jquery对象返回
$("<div class='one'>one</div>")
4、参数为一个匿名函数
$(function(){
});
4 jquery对象
1、jquery对象是jquery函数的一个实例 该对象可以调用jquery原型中的方法，
2、jquery对象是一个类数组对象，数组中存放的是dom对象
3、jquery对象的获取通常是使用选择器来获取
比如 获取所有class为one 的元素
$(".one")
Dom对象和jquery对象
jquery是jquery函数的实例 而Dom对象是Node对象的实例
jquery对象类数组的元素为dom对象，对jquery对象的操作实际上就是对jquery数组中dom对象的批量操作，
jquery对象和dom对象可以相互转换
1、Dom对象转化为jquery对象
var dom = document.getElementById("one")
Dom对象也就是node的一个实例 htmlElement的实例
var $dom = jquery(dom);
dom.onclick = function(){}
为dom元素绑定事件处理函数
$dom.click(function(){});
2、jquery对象转换为DOm对象
var $doms = jquery(".one");
获取所有class为one 的对象，可能有多个，$doms为jquery对象
var dom = $doms[0];
获取封装在jquery对象中的第一个dom对象 dom1为dom对象
jQuery语法
jquery语法是为html元素选取编制的 可以对元素执行某些操作，
基础语法是 jQuery
选择符 selector 查找和 查询 html元素 jquery的action执行对元素的操作
jquery选择器
查找结点 jquery的选择机制 构建于css的选择器，他提供了快速查询dom文档中元素的能力，强化了获取页面元素能力
$("字符串");
基本选择器
所有选择器 *
标签选择器 标签名
id选择器 #id
类选择器 .className
群组选择器 selector1，selector2
多个选择器使用，分割，取并集
复合选择器 selector1selector2
多个选择器组合使用 取交集
层次选择器
后代选择器 selector1 selector2
两个选择器用空格隔开 表示可以获取当前元素的子代以及孙子后代元素
子代选择器 selector1>selector2
两个选择器使用>隔开 表示只能获取当前选中元素的子代元素
兄弟选择器
下一个兄弟选择器
selector1+selector2
两个选择器使用+隔开 表示可以获取 当前元素下一个兄弟元素，下一个兄弟元素要能复合selector2
之后所有的兄弟选择器 selector1~selector2
之后所有兄弟选择器 selector1~selector2
jQuery选择器
jquery选择器必须用在jquery选择器后 表示对通过前面的jquery选择器选择到的内容的过滤。是建立在前面选择器已经选择到元素的基础之上的
基本过滤器
语法selector ：过滤器
语法：selector:过滤器
selector:first 获取所有已选择到的元素中的第一个元素
selector:last 获取所有已选择到的元素中的最后一个元素
selector:even 获取所有已选择到的元素中的索引为偶数元素
selector:odd 获取所有已选择到的元素中的索引为奇数元素
selector:eq(index) 获取所有已选择到的元素中的索引为index的元素
selector:lt(num) 获取所有已选择到的元素中的索引值小于num的元素
selector:gt(num) 获取所有已选择到的元素中的索引值大于num的元素
selector1:not(selector2) 获取所有已选择到的元素中的除了selector2的元素
selector :header 标题h1~h6 获取所有已选择到的元素中的标题元素
2) 内容过滤器
语法：selector:过滤器
selector:contains(text); 获取所有已选择到的元素中文本包含text的元素,包括后代节点中
selector:empty 获取所有已选择到的元素中空元素（没有子节点）
selector:parent 获取所有已选择到的元素中非空元素（有子节点）
$("div:parent")
selector:has(selector2) 获取所有已选择到的元素中包含selector2元素的元素
$("div:has('span')") /$("li").has("h1")
3) 可见性过滤器
语法：selector:过滤器
隐藏类型
1. 不占据屏幕空间
display:none
<input type="hidden">
<head></head>
2. 占据屏幕空间
visibility:hidden 透明度 0 ,由于占据空间，所以jQuery中visibility: hidden被视作可见的
:visible
选择所有占据屏幕空间的元素
:hidden
选择所有不占据屏幕空间的元素
4) 属性过滤器
语法：selector[属性过滤器]
selector[attrKey] 获取所有已选择到的元素中具有属性attrKey的元素
selector[attrKey=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为attrVal的元素
selector[attrKey^=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal开头的元素
selector[attrKey$=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal结尾的元素
selector[attrKey*=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为包含attrVal的元素
selector[attrKey!=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值不为attrVal的元素或者没有属性attrKey的元素
selector[attrKey1][attrKey2]
$("div['class']['title']") 包含这两种属性
5) 后代过滤器
选择器一定要先选择到后代元素，是对选择到的后代元素的过滤,【注意】空格与>的区别
$("div :nth-child")
selector :nth-child(index) 获取每个selector元素中索引为index的子元素【注意】index从1开始
(选择元素下所有作为第二个孩子元素存在的元素)
selector :first-child 获取每个selector元素中第一个子元素（每个父元素的第一个子元素）
注意与selector :first的区别，获取所有selector元素的子元素中的第一个（只有一个）
selector :last-child 获取每个selector元素中第最后一个子元素（每个父元素的最后一个子元素）
selector :only-child 获取每个selector元素中独生子子元素（每个父元素如果只有一个孩子元素，获取该元素）
selector :first-of-type 获取每个selector元素中每种类型子元素中的第一个
selector:last-of-type 获取每个selector元素中每种类型子元素中的最后一个
不加空格不加>://选中作为第二个孩子元素存在的p标记
$("p:nth-child(2)");
6) 表单过滤器：主要是对选择的表单元素进行过滤。
:enabled
选取所有可用元素该选择器仅可用于选择支持disabled属性（attribute）的HTML元素(<button>, <input>, <optgroup>, <option>, <select>, 和 <textarea>)。form :enabled
:disabled
选取所有不可用的元素该选择器也是仅可用于支持disabled属性的HTML元素
:checked
选取所有被选中的元素，用于复选框和单选框,下拉框
:selected
选取所有被选中的选项元素，该选择器只适用于<option>元素
:focus
选择当前获取焦点的元素。
:input
选取所有的<input><textarea><select><button>元素
$(":input")现在可以让用户输入的标签元素
$("input")选择名字为input的标签元素
:text
选取所有的单行文本框（<input type="text">）password
:password
选取所有的密码框
:radio
选取所有的单选框
:checkbox
选取所有的多选框 $("input[type=checkbox]:checked")
:submit
选取所有的提交按钮
:image
选取所有input类型为image的表单元素
:reset
选取所有input类型为reset的表单元素
:button
选取所有input类型为button的表单元素
:file
选取所有input类型为file的表单元素
Dom对象与Jquery对象的转换
$("字符串选择器")查找节点 css
选择器：
基本选择
后代 空格 >
兄弟 + ～
jquery中的dom操作
1、查找节点
通过jquery选择器完成
2、创建节点
创建元素节点：var newTd = $("<td></td>")
创建文本节点：在创建元素节点时直接把文本内容写出来，var newTd =$("<td>文本内容</td>")
3、插入节点
append()
在每个匹配元素里面的末尾插入参数内容。作为他的最后一个子元素
参数 一个或多个dom
元素 dom元素数组 heml字符串 或者jquery对象，用来插入每个匹配元素里面的末尾
appendTo（target） 颠倒了
peopend（） 将参数内容插入到每个匹配元素前面 元素内部 也就是当前元素中的第一个子元素
prependTo(target)
颠倒了 $(A).prepend(B)的效果.
after()
在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点插在每个匹配元素的后面
insertAfter(target)
在目标元素后面插入集合中每个匹配的元素(插入的元素作为目标元素的兄弟元素)。颠倒了 $(A).after(B)的效果
before()
在匹配元素的前面插入内容（外部插入）作为其兄弟节点插在集合中每个匹配元素前面。
insertBefore(target)
颠倒了 $(A).before(B)的效果
4）删除节点
remove([selector])
从DOM中删除所有匹配的元素，返回值是一个指向已经被删除的节点的引用，可以在以后再使用这些元素。该方法会移除元素，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据
empty()
无参数。从DOM中移除集合中匹配元素的所有子节点。
5）复制节点
$("#id").clone(false)
深复制
该方法返回的是一个节点的引用,参数默认为false，clone()方法中传递了一个参数true，含义是复制元素的同时复制元素中所绑定的事件
6）替换节点
replaceWith(newContent):
用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。该方法会删除与节点相关联的所有数据和事件处理程序
参数 用来插入的内容，可能是HTML字符串，DOM元素，或者jQuery对象。
replaeAll(target ) :
用集合的匹配元素替换每个目标元素。颠倒了replaceWith()操作效果
7）包裹节点
wrap([wrappingElement])
在每个匹配的元素外层包上一个html元素。
wrapAll([wrappingElement]) :
将所有匹配的元素用一个元素来包裹，在所有匹配元素外面包一层HTML结构。这种结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。
wrapInner([wrappingElement]):
每个匹配元素里面内容(子元素)都会被这种结构包裹。
8）节点遍历
注意:使用这些方法去解析html文档和xml文档都是可以的,因为html文档和xml文档都可以转换为dom模型.(也就是说在ajax中,如果后台传过来的是xml文档,那么我们使用jquery也可以用下面方法解析)
children([selector])
用于取得匹配元素的子元素集合（只考虑子元素而不考虑任何后代元素）
$(".content>.inner")
=>
$(".content").children(".inner");
不加参数，则为所有的直接子代元素
find(selector)
在当前元素对象中的子元素中查找，和参数所匹配的所有的后代元素。
$("body").find("span:nth-first(2)")
next([selector])
取得匹配的元素集合中每一个元素紧邻的后面兄弟元素。
.next()
nextAll([selector])
查找当前元素之后所有的同辈元素。
prev([selector])
取得匹配元素前面紧邻的兄弟元素
prevAll([selector])
查找当前元素之前所有的同辈元素。
siblings([selector])
取得匹配元素前后所有的兄弟元素
前面这些都可以不加参数选择器进行匹配
closest( selector)
取得和参数匹配的最近的祖先元素，如果匹配不上继续向上查找父元素(从当前元素开始找，即自己可以是自己的closest父元素)
filter(selector)
把当前所选择的所有元素再进行筛选过滤
parent([selector])
取得匹配元素集合中，每个元素的父元素(从父元素开始，不包含自己(换句话说自己不是自己的父元素))
parents([selector])
获得集合中每个匹配元素的祖先元素，
9)jQuery中属性设置函数
attr( key|key,val|{key:val,key2:val2} )
获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。
removeAttr( attributeName )
为匹配的元素集合中的每个元素中移除一个属性（attribute）。
10)css属性设置
css( key|key,val|{key:val,key2:val2} )
获取匹配元素集合中的第一个元素的样式属性的计算值 或设置每个匹配元素的一个或多个CSS属性。
addClass( className )
为每个匹配的元素添加指定的样式类名
hasClass( className )
确定任何一个匹配元素是否有被分配给定的（样式）类。
removeClass([className ])
移除集合中每个匹配元素上一个，多个或全部样式。
toggleClass(className):
如果有，就移除，如果，没有就添加
11)jQuery中的html() text() val() 方法
val([value])用来读取或修改【表单元素】的value属性的值。
参数：
无参 获取value值
参数 value，设置value的值
参数 function(index,oldVal) 回调函数，index索引，oldVal当前val
html([html])用为读取和修改元素的HTML标签
参数：
无参 获取html的值
参数 html，设置html的值
参数 function(index,oldhtml) 回调函数，index索引，oldhtml当前html
text([text])用来读取或修改元素的纯文本内容
参数：
无参 获取文本值
参数 text，设置文本值
参数 function(index,oldText) 回调函数，index索引，oldText当前text
3. 事件
1.bind(eventType[,eventData ],handler(eventObject) )
eventType:事件类型 ，字符串 'click' 'submit'多个事件类型可以通过用空格隔开一次性绑定'click submit'
eventData:事件数据，一个对象
handler :事件处理函数
eventObject： 事件对象
currentTarget 在事件冒泡过程中的当前DOM元素。
target 触发事件的DOM元素。
preventDefault()阻止默认事件行为
stopPropagation()防止事件冒泡到DOM树上
type 描述事件的性质。
data 传递给一个事件方法的数据对象
metaKey 表示事件触发时哪个Meta键被按下
pageX 鼠标相对于文档的左边缘的位置
pageY 鼠标相对于文档的顶部边缘的位置
bind(events) events :一个对象,key为事件类型，val为事件处理函数
events = {
click: function() {},
mouseenter: function() {}
}
2. unbind([eventType][,handler(eventObject)])
从元素上删除一个以前附加事件处理程序。
无参时 .unbind() 将移除元素上所有绑定的处理程序。
参数为某事件类型时，移除该事件类型上的所有绑定的处理程序
参数为事件类型,事件处理函数，移除该事件类型上绑定的该处理函数
3.on( events[,selector][,data],handler(eventObject))
在选定的元素上绑定一个或多个事件处理函数。
selector:一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件。
4.off( events [, selector ] [, handler ] )
移除一个事件处理函数。
5.trigger( eventType[,extraParameters])
根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。extraParameters 传递给事件处理程序的额外参数。为数组类型
$("#one").trigger("click");//模拟点击
向事件中传入任意的数据：
$("p").click( function (event, a, b) {
}).trigger("click", ["foo", "bar"]);
6. 其他事件方法
鼠标事件
click()
dblclick()
focusin()
focusout()
hover()
mousedown()
mouseup()
mouseenter()
mouseleave()
mouseout()
mouseover();
mousemove()
键盘事件:
keypress()
keyup()
keydown()
表单事件:
blur()
change()
focus()
select()
suubmit()
2. jQuery中常用API
1）jQuery中的工具方法
get()
无参 调用这个方法将会返回所有匹配的DOM节点，这些节点包含在一个标准的数组中
参数 index: 索引，从0开始计数，用来确定获取索引指定元素。如果index的值超出范围 小于元素数量的负数或等于或大于元素的数量 - 那么它将返回undefined
toArray()
无参 返回一个包含jQuery对象集合中的所有DOM元素的数组。
eq(index)
参数 index,用于指示元素的索引，当为负数时从集合中的最后一个元素开始倒数
返回值 jQuery对象
filter() 过滤器函数
参数 选择器字符串
参数 function(index){} 匿名函数，如果函数返回true ，该元素将被包含在筛选集合中;
返回值 : jQuery对象
map() 该方法特别适用于获取或设置元素集合中的值
参数 function(index,item){}回调函数
例如
可以得到一个用逗号分隔的复选框 ID:
$(':checkbox').map(function() {
return this.id;
}).get().join();
each() 遍历一个jQuery对象，为每个匹配元素执行一个函数。
参数 function(index, Element)
first() 获取匹配元素集合中第一个元素。无参数
last() 获取匹配元素集合中最后一个元素。无参数
has() 筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素
is() 判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true。
返回值 ： boolean类型
not() 从匹配的元素集合中移除指定的元素。
slice()根据指定的下标范围，过滤匹配的元素集合，并生成一个新的 jQuery 对象。
参数(start [, end ])
start整数，从0开始计数的下标。代表将要被选择的元素的起始下标。如果指定的下标是一个负数，那么代表从末尾开始计数。
end整数，从 0 开始计数的下标。代表将要被选择的元素的结束下标。如果指定的下标是一个负数，那么代表从末尾开始计数。如果忽略此参数，则选择的范围是从 start 开始，一直到最后。
jquery一周学习总结
最新推荐文章于 2023-05-17 14:44:05 发布
355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
