第一章 、选择器
基本选择器
语法 | 名称 | 描述 |
* | 全局选择器 | 匹配所有元素。 |
#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 请求从服务器上请求数据