JQurey总结-CSDN博客

本文链接：https://blog.csdn.net/2201_75521456/article/details/133348550

第一章、选择器

基本选择器

语法	名称	描述
*	全局选择器	匹配所有元素。
#id	ID选择器	根据给定的ID匹配一个元素。
.class	clsaa选择器	根据给定的类匹配元素。
element	标签选择器	根据给定的元素名匹配所有元素。
selector1，selector2	并集选择器	将每一个选择器匹配到的元素合并后一起返回。

层级选择器

语法	名称	描述
select1 select2	后代选择器	匹配select1下的所有儿子元素（不包含孙子元素）
select1>select2	子选择器	匹配select1下的所有子元素（包含孙子元素）
select1+select2	相邻元素选择器	匹配紧跟在select1后的第一个兄弟元素（同辈元素）
select1~select2	同辈元素选择器	匹配select1后的所有兄弟元素（及找到所有的同辈元素）

属性选择器

语法	描述	示例
[attribute]	选取给定属性是以某些特定值开始的元素	$("[href^='en']")选取href属性值以en开头的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素
[attribute*=value]	选取给定属性是以包含某些值的元素	$(" [href* ='txt']" )选取href属性值中含有txt的元素

过滤选择器

基本过滤选择器

语法	描述	示例
:eq(index)	选取索引等于index的元素（index从0开始）	$("li:eq(1)" )选取索引等于1的<li>元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1）
:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
:focus	选取当前获取焦点的元素	$(":focus" )选取当前获取焦点的元素
:animated	选择所有动画	$(":animated" )选取当前所有动画元素
:first	选取第一个元素	$(" li:first" )选取所有<li>元素中的第一个<li>元素
:last	选取最后一个元素	$(" li:last" )选取所有<li>元素中的最后一个<li>元素
:not(selector)	选取去除所有与给定选择器匹配的元素	$(" li:not(.three)" )选取class不是three的元素
:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有<li>元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有<li>元素

可见性过滤选择器

语法	描述	示例
:visible	选取所有可见的元素	$(":visible" )选取所有可见的元素
:hidden	选取所有隐藏的元素	$(":hidden" ) 选取所有隐藏的元素

第二章、事件与特效

jQuery事件是JavaScript编程语言中一种用于在网页中触发特定代码的多种方式。jQuery提供了一些内置的事件处理程序，如点击、悬停、键盘输入、表单提交等。通过使用jQuery事件，可以编写交互性更强的网页。

JQ事件

鼠标点击事件

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout( )	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时
mouseenter( )	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
mouseleave( )	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

键盘事件

方法	描述	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress( )	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

浏览器事件

调整窗口大小

$('#element').resize( );

绑定事件

$('#element').on(“click”,myFunction;}

移除事件

$('#myButton').unbind('click', myFunction);

复合事件

1. hover（）方法

$('#element').hover(function() {  
  // 进入元素时的处理函数  
}, function() {  
  // 离开元素时的处理函数  
});

2. toggle（）方法

$('#element').toggle(function() {  
  // 第一次点击时的处理函数  
}, function() {  
  // 第二次点击时的处理函数  
}, function() {  
  // 第三次点击时的处理函数  
});

JQ动画

元素显示与隐藏

显示元素：show（）

$('#element').show();

隐藏元素：hide（）

$('#element').hide();

元素淡出淡入

元素淡出：fadeOut（）

$('#element').fadeOut();

元素淡入：fadeIn（）

$('#element').fadeIn();

改变元素高度

元素逐渐缩短

$('#element').slideUp ()；

元素逐渐延伸

$('#element').slideDown ()；

自定义动画

$('#element').animate ()；

第三章、操作CSS与DOM

样式操作

1. css（）获取和设置样式

2. addClass（）追加样式

3. removeClass（）移除样式

4. toggleClass（）切换样式

内容操作

1. html（）代码操作

2. text（）内容操作

3. val（）属性值操作

节点操作

1. 查找节点

通过属性、标签、class、ID、等查找节点


$('p') // 通过标签名选择所有p元素
$('.my-class') // 通过class名称选择所有拥有my-class类的元素
$('#my-id') // 通过ID选择元素
$('[attr]') // 通过属性选择元素

2. 创建节点

$();

3. 插入节点

// 在元素的末尾插入一个新节点  
$('#element').append(p);  
  
// 在元素的开头插入一个新节点  
$('#element').prepend(p);  
  
// 在元素的指定位置插入一个新节点  
$('#element').after(p);  
$('#element').before(p);

4. 删除节点

// 删除指定的元素及其子元素  
$('#element').remove();  
  
// 删除指定的元素，但保留其子元素  
$('#element').empty();

5.替换节点

$('#element').replaceWith('');
$('').replaceAll('#element');

6.复制节点

$('#element').clone() ;

属性操作

attr（）获取与设置元素属性

$('#element').attr();

removerAttr()删除元素属性

$('#element').removerAttr();

节点遍历

1. 遍历子元素

$('#element').childen();

2. 遍历同辈元素

//获取紧邻匹配元素之后的元素
$('#element').next();
//获取紧邻匹配元素之前的元素
$('#element').prev();
//获取位于匹配元素前面和后面的所有同辈元素
$('#element').slibings();

3. 遍历前辈元素

//遍历父级元素
$('#element').parent();
//遍历祖先元素
$('#element').parents();

第四章、表单验证

第五章、处理Ajax

处理Ajax的方法

1. $（）.ajax（）方法：通过HTTP请求加载远程数据

2. $（）.load（）方法：从服务器加载数据，并把返回的数据放入被选元素中

3. $（）.get（）方法：通过 HTTP GET 请求从服务器上请求数据

4. $（）.post（）方法：通过 HTTP POST 请求从服务器上请求数据