jQuery核心特性
时间：2023-3-1 22:12 作者：wen 分类： F2E
<script type="text/javascript" src="jquery-3.3.1.min.js">
js对象和jQuery对象互相转换
jQuery对象转js对象
(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的js对象。
如：var $v =$("#v") ; //jQuery对象
var v=$v[0]; //js对象
(2)jQuery本身提供，通过.get(index)方法，得到相应的js对象
如：var $v=$("#v"); //jQuery对象
var v=$v.get(0); //js对象
js对象转成jQuery对象:
如：var v=document.getElementById("v"); //js对象
var $v=$(v); //jQuery对象
//jQuery核心特性
具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对css选择器进行扩展;拥有便携的插件扩展机制和丰富的插件
jQuery库包含以下功能:
1 HTML元素选取
2 HTML元素操作
3 css操作
4 HTML事件函数
5 JavaScript特性和动画
6 HTML DOM遍历和修改
7 AJAX
避免冲突可以用 jQuery 代替 $
入口函数
$(document).ready(function(){})
简写
$(function(){})
选择器
基本选择器
1 id选择器 :#id
2 class选择器 : .class
3 元素选择器: element
4 组合选择器: selector1,selector2
5 特殊选择器: this,*等
//多选择器用逗号(,)给开
层次选择器
1 后台选择器 :父元素 子元素
2 子类选择器 :父元素>子元素
3 相邻元素选择器 :我+邻居 //只选择它相邻的下一个
4 兄弟元素选择器 :我~兄弟 //选择相邻的下面的所有元素
过滤选择器
:first 选择元素的第一个
:last 选择最后一个
:odd 选择奇数行
:even 选择偶数行
:gt(index) 选择大于索引的元素
:lt(index) 选择小于索引的元素
:eq(index) 只给某一行设置样式
:header 针对标题 H1-H6
子元素选择器
:nth-child(index) 选择属于其父元素的第index个子元素 参数:index|even(奇数)|odd(偶数)|2n(偶数)|2n-1(奇数)
:nth-of-type(index) p:nth-of-type(index) 选择属于其父元素唯一的 <p> 元素的第index个 <p> 元素。参数:index|even(奇数)|odd(偶数)|2n(偶数)|2n-1(奇数)
:first 第一个
:first-child 择属于父元素的第一个子元素
:last 最后一个
:last-child 择属于父元素的最后一个子元素
表单过滤选择器
input 过滤所有的输入框
:text 过滤说有的文本框
:password 过滤所有的密码框
:radio 过滤所有的单选框
:CheckBox 过滤所有的复选框
:submit 过滤所有的提交按钮
:reset 过滤所有的重置按钮
:button 过滤所有的点击按钮
:file 过滤所有的文件上传框
checked
selected
disabled //表单不可用
enaabled //启用表单(默认)
可见元素选择器和隐藏元素
:visible 所有可见元素
:hidden 所有隐藏元素
属性选择器
1 [attr] 选择具有attr属性的元素
2 [attr='val'] 选择具有attr属性并且值是val的元素
3 [attr != 'val'] 选择具有attr属性并且值不是val的元素
4 [attr ^= 'val'] 选择具有attr属性并且值得开头是val的元素
5 [attr $= 'val'] 选择具有attr属性并且值得结尾是val的元素
6 [attr *= 'val'] 选择具有attr属性并且值得任何位置是val的元素
7 [attr |= 'val'] 选择具有attr属性并且值val后面有连接符的元素 链接符 -
8 [attr ~= 'val'] 选择具有attr属性并且值val后面有空格的元素
其他选择器
:has(span) 选择所有包含一个或多个元素在其内的元素,匹配指定的选择器
:empty 选择空元素
:parent 过滤出内容孩子的元素和empty相反
:contains(val) 包含内容选择器
:not() 选择除了指定元素以外的所有元素
jQuery对元素的操作
属性操作
1 查询属性 attr('scr')
2 添加属性 attr(name,val); 添加多个以对象的方式传递
3 删除属性 removeAttr('attribute name') 删除多个属性用空格隔开
内容的操作
html() 获取和设置标签的HTML内容 相当于js的 innerHTML属性
text() 获取和设置标签的文本内容 相当于js的 innerText属性或者textContent
val() 获得或设置表单的value属性值 相当于js的 value属性
css样式的操作
css('property') :读取一个或多个css属性的值多个用['width','heigth']
css('property', 'value'); 设置一个css样式
css({
property1: 'value1',
property2: 'value2'
}); 设置多个css样式
addClass('class_name') 一个或多个要添加到元素中的CSS类名，请用空格分开
removeClass('class name') 一个或多个要删除的CSS类名，请用空格分开
toggleClass('selector'); 切换样式,
尺寸的操作
1 width(integer) 设置或返回元素的宽度
2 height(integer) 设置或返回元素的高度
3 innerWidth() 返回元素的宽度(包括内边距)
4 innerHeight() 返回元素的高度(包括内边距)
5 outerWidth() 返回元素的宽度(包括内边距和外边距) 设置为 true 时，计算边距在内。
6 outerHeight() 返回元素的高度(包括内边距和外边距) 设置为 true 时，计算边距在内。
位置的操作
1 offset(coordinates) 获取或设置匹配元素在当前视口的相对偏移。{top:100,left:100}
2 position() 获取匹配元素相对父元素的偏移。
3 scrollTop(value) 设置或返回被选元素的水平滚动条位置
4 scrollLeft(value) 设置或返回被选元素的垂直滚动条位置
//jQuery DOM操作
DOM内部追加 js appendChild() js insertBefore() 在某个元素的前面插入
append() 父元素追加子元素,放在后面
appendTo() 子元素追加到父元素内部后面
prepend() 父元素追加子元素,放在前面
prependTo() 子元素追加到父元素内部前面
DOM外部追加 js insertBefore() 在某个元素的前面插入
after('Some text') 在指定元素后面追加内容
before('content'); 在指定元素前面追加内容
insertAfter('selector') 将添加的内容追加到指定元素后面
insertBefore('selector') 将添加的内容追加到指定元素前面面
DOM包裹节点
wrap('<div class="extra-wrapper"></div>') 使用HTML标签单独包裹匹配的元素
wrapAll('<div class="extra-wrapper"></div>') 使用HTML标签将匹配的元素整体包裹
DOM替换节点 js replaceChild()
replaceWith() 把被选元素替换为新的内容
replaceAll() 把被选元素替换为新的HTML元素
DOM删除节点
remove() 直接删除节点,事件也没有了
detach() 直接删除节点,事件保留
empty() 仅仅清空内容
克隆节点
参数1:指示事件处理函数是否会被复制。默认false
参数2:指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。
clone(boolean, boolean) 克隆节点
筛选
jQuery遍历-祖先
1 parent(selector) 返回被选元素的直接父元素
2 parents(selector) 返回被选元素的所有祖先元素,直到根元素HTML
3 parentsUntil(selector) 返回两个被选元素之间的所有祖先元素
jQuery遍历-后代
children('selector') 返回被选元素的所有直接子元素
find('selector') 返回被选元素的后代子元素,一路向下直到最后一个后代
jQuery遍历-同胞
siblings('selector') 返回被选元素的所有同胞元素
next(selector) 返回被选元素的下一个同胞元素,
nextAll(selector) 返回被选元素的所有跟随的同胞元素
nextUntil(selector) 返回两个被选元素之间的所有跟随的同胞元素
prev(selector) 返回被选元素的上一个同胞元素
prevAll(selector) 返回被选元素的所有前面的同胞元素
prevUntil(selector) 返回两个被选元素之间的所有前面的同胞元素
jQuery-过滤
eq(index) 被选元素集合的第index个元素
first() 被选元素集合的第一个元素
last() 被选元素集合的最后一个元素
hasClass('className') 检查当前的元素是否有某个特定的类,如果有,返回true
filter(); 筛选出与指定 选择器 匹配的元素集合
not('selector') 筛选出与指定选择器不匹配的元素集合
is('selector') 用一个选择器来检查当前选择的元素集合
has() 返回拥有匹配指定选择器的一个或多个在其内的所有元素,保留包含特定后代的元素,去掉那些不含有指定后代的元素
jQuery事件
加载完毕事件
ready(fn) 在DOM加载完成时运行的代码
鼠标事件
click() 点击事件
dblclick() 双击事件
mouseenter();鼠标移入,移入子元素数不触发事件
mouseleave();鼠标移出,移出子元素数不触发事件
mouseover(); 鼠标移入
mouseout() 鼠标移出
mousemove(); 鼠标移动
mouseup() 鼠标抬起
mousedown(); 鼠标按下
键盘事件
keypress();
keydown(); 键盘按下
keyup(); 键盘抬起
表单事件
submit(); 提交事件
focus(); 获得焦点事件
blur(); 失去焦点事件
change() 当元素的值发生改变时，会发生 change 事件。
文档/窗口事件
load(); 载入远程 HTML 文件代码并插入至 DOM 中。
unload(); 在当用户离开页面时，会发生 unload 事件
resize(); 浏览器窗口大小发生变化时触发
scroll(); 滚动条事件
select(); 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
事件绑定
on() 在选择元素上绑定一个或多个事件的事件处理函数。bind()3.0弃用
off() 在选择元素上移除一个或多个事件的事件处理函数。unbind()3.0弃用
one() 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
事件切换
hover(); mouseover mouseout 的集合
toggle() 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
jQuery event对象的属性
e.type 事件的类型
e.target 那个元素的事件
e.which 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮
e.currentTarget 在事件冒泡阶段中的当前DOM元素
e.data 当函数执行的处理程序被绑定时传递事件方法的可选数据
e.pageX 返回鼠标指针的位置;现对于文档的左边缘
e.pageY 返回鼠标指针的位置,相对于文档的上边缘
e.stopPropagation() 阻止事件冒泡的父元素,
e.preventDefault() 阻止元素发生默认的行为 可以 return false;
//自定义事件
*在每一个匹配的元素上触发某类事件。
trigger('event name')
* 第一，他不会触发浏览器默认事件。
* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。
* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。
triggerHandler('event name')
jQuery动画效果
参数1:时间 slow/400/fast 默认normal 或者毫秒数
参数2:切换效果 默认是"swing"[慢快慢]，可用参数"linear"[匀速]
参数3:回调函数
基本
show();
hide();
toggle(slow/400/fast) //显示隐藏
滑动
slideDown();
slideUP()
slideToggle(slow/400/fast)
淡入淡出
fadeIn(); 淡入
fadeOut(); 淡出
fadeTo() 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
fadeToggle() //渐变显示隐藏
自定义
参数1:样式
参数2:时间
参数3:回调函数
animate()
stop() 停止所有在指定元素上正在运行的动画。
jQuery AJAX操作
ajax:它就是在不重载网页的情况下,异步的发送网络请求,改善用户体验的
参数1:url:待载入页面的URL地址
参数2:data:待发送 Key/value 参数。
参数3:callback:载入成功时回调函数。
参数4:type:返回内容格式，xml, html, script, json, text, _default。
$.get(url,{},function(){},dataType);
$.post(url,{},function(){},dataType)
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
*表单序列化
serialize()
serializeArray()
each函数
*1
参数1:object:需要遍历的对象或数组。
参数2:callback:每个成员/元素执行的回调函数。
参数1:索引
参数2:值
$.each(obj,function(i,v){})通用遍历方法，可用于遍历对象和数组。
*2
参数:callback:每个成员/元素执行的回调函数。
参数1:索引
参数2:元素对象
$('li').each(function(i,e){})
* for in for of
Jquery 插件开发
1 jQuery.extent(object);为扩展jQuery类本身添加新的方法
2 jQuery.fn.extent(object);给jQuery对象添加方法
</script>标签: jquery