jQuery入门导读
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
jQuery是一个主流的优秀的JavaScript类库,是由John resig在2006年1月创建的。
jQuery库包含核心库、UI、插件和jQuery Mobile等模块。(LayUI)
jQuery凭借着强大的选择器、链式操作以及出色的浏览器兼容性,极大的简化访问和更新HTML页面、DOM操作、事件处理以及执行动画等操作。
“写得少,做的多“
JavaScrit库
jQuery 库包含以下功能:
- HTML 元素选取 √
- HTML 元素操作 √
- CSS 操作 √
- HTML 事件函数 √
- JavaScript 特效和动画
- HTML DOM 遍历和修改 √
- AJAX √
- Utilities
jQuery概述
通过封装JS代码的方式简化 操作
jQuery基本使用-文档就绪事件
$(document).ready(function(){
//代码内容
});
还有更简洁的做法
$(function(){
// 开始写 jQuery 代码...
});
jQuery顶级对象$
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
-
$(this).hide() - 隐藏当前元素
-
$(“p”).hide() - 隐藏所有
元素
-
$(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
-
$(“#test”).hide() - 隐藏 id=“test” 的元素
DOM对象和jQuery对象
1、jQuery获取的对象,不能直接使用DOM中的方法
2、JQuery获取的对象加上[] 后可以使用DOM中的内容(包括使用get() 方式)
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
3、同一函数实现set和get
$("#msg").html(); // 返回id 为msg 的元素节点的html 内容。
$("#msg").html("<b>new content</b>"); // 将“<b>new content</b>” 作为html 串写入id 为msg 的元素节点内容中, 页面显示粗体的new content
$("#msg").text(); // 返回id 为msg 的元素节点的文本内容。
$("#msg").text("<b>new content</b>"); // 将“<b>new content</b>” 作为普通文本串写入id 为msg 的元素节点内容中, 页面显示<b>new content</b>
$("#msg").height(); // 返回id 为msg 的元素的高度
$("#msg").height("300"); // 将id 为msg 的元素的高度设为300
$("#msg").width(); // 返回id 为msg 的元素的宽度
$("#msg").width("300"); // 将id 为msg 的元素的宽度设为300
$("input").val("); // 返回表单输入框的value 值
$("input").val("test"); // 将表单输入框的value 值设为test
$("#msg").click(); // 触发id 为msg 的元素的单击事件
$("#msg").click(fn); // 为id 为msg 的元素单击事件添加函数
4、集合处理
使用each 配合函数可以做集合的遍历和处理
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]}) // 为索引分别为0 ,1 ,2 的p 元素分别设定不同的字体颜色。
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]}) // 实现表格的隔行换色效果
$("p").click(function(){alert($(this).html())}) // 为每个p 元素增加了click 事件,单击某个p 元素则弹出其内容
5、扩展 JQuery对象
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); // 为jquery 扩展了min,max 两个方法
6、链式写法
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});
7、元素操作
$("#msg").css("background"); // 返回元素的背景颜色
$("#msg").css("background","#ccc") // 设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); // 设定宽高
$("#msg").css({ color: "red", background: "blue" });// 以名值对的形式设定样式
$("#msg").addClass("select"); // 为元素增加名称为select 的class
$("#msg").removeClass("select"); // 删除元素名称为select 的class
$("#msg").toggleClass("select"); // 如果存在(不存在)就删除(添加)名称为select 的class
jQuery常用AI导读
JQuery中文手册
jQuery基本和层级选择器
基础选择器的使用
复合选择器的使用
jQuery隐式迭代
let arr = document.querySelectorAll('li')
for(let i = 0;i < liArr.length;i++) {
arr[i].onclick = function () {
console.log('原生循环');
}
}
// 隐式迭代实现
$(function () {
$('li').on('click',function () {
console.log('隐式迭代');
})
})
//可以用无序列表体验一下
jQuery筛选选择器
属性筛选选择器
[att=val] 选取att属性等于val的标记
[att] 选择有att属性的标记
[att|=val] 选取att中以val开头的属性
[att~=val] 选取att中包含val的属性
[att^=val] 选取att中以val开头的属性
[att*=val] 选取att中包含val的属性
[att$=val] 选取att中以val结尾的属性
[att!=val] 选取att中不包含val的属性
jQuery筛选方法-选取父子元素
jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,
比如$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr),类似于jQuery.parents(expr),
但是是查找所有祖先元素,不限于父元素
jQuery.children(expr).返回所有子节点,这个方法只
会返回直接的孩子节点,不会返回所有的子孙节点
jQuery对象返回,children()则只会返回节点
jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点
jQuery.prevAll(),返回所有之前的兄弟节点
jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点
jQuery.nextAll(),返回所有之后的兄弟节点
jQuery.siblings(),返回兄弟姐妹节点,不分前后
jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是
从初始的jQuery对象集合中筛选出一部分,而jQuery.find()
的返回结果,不会有初始集合中的内容,比如$("p"),find("span"),是从
p元素开始找,等同于$("p span")
新浪下拉菜单
jQuery其他筛选方法
在jQuery对象数组中,过滤出一部分元素 :
1)、首先获取ul中所有的li子元素,即会产生一个li数组uls
var uls =$("ul>li");
2)、first():获取数组uls中的第一个元素,即第一个li标签.
ls.first().css({"background":"pink"});
3)、last():获取数组uls中的最后一个元素,即最后一个li标签.
=uls.last().css({"background":"pink"});
4)、eq(index):从数组uls中找到下标为2的元素.
uls.eq(2).css({"background":"pink"});
4.1)、从数组uls中找到倒数第2个元素.
uls.eq(-2).css({"background":"yellow"});
5)、filter(selector):匹配到类名为sa的元素。
uls.filter(".sa").css({"background":"yellow"});
5.1)、匹配到有属性title,并且值为a的元素.
uls.filter("[title=a]").css({"background":"yellow"});
5.2)、匹配到属性title的值不为a的元素
uls.filter("[title!=a]").css({"background":"yellow"});
5.3)、匹配到有title属性,且属性值不为a的元素.
uls.filter("[title][title!=a]").css({"background":"yellow"});
5.4)、从数组uls中过滤出有title属性的元素集合.
uls.filter("[title]").css({"background":"blue"});
6)、has(selector):从数组uls中过滤出有<span>标签的元素集合.
uls.has("span").css({"background":"blue"});
7)、从数组uls中过滤出没有title属性的元素集合.
uls.not("[title]").css({"background":"blue"});
jQuery排他思想
1、siblings
语法:siblings(selector)
用法:$(".frist").siblings(“li”)
说明:查找兄弟节点,不包括自身元素
2、排他思想
想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。
16-淘宝服饰精品案例
jQuery链式编程
jQuery修改样式css方法
css() | 设置或返回匹配元素的样式属性。 |
---|---|
height() | 设置或返回匹配元素的高度。 |
offset() | 返回第一个匹配元素相对于文档的位置。 |
offsetParent() | 返回最近的定位祖先元素。 |
position() | 返回第一个匹配元素相对于父元素的位置。 |
scrollLeft() | 设置或返回匹配元素相对滚动条左侧的偏移。 |
scrollTop() | 设置或返回匹配元素相对滚动条顶部的偏移。 |
width() | 设置或返回匹配元素的宽度。 |
jQuery修改样式操作类
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
tab栏切换案例
jQuery类操作和className区别
jquery 相当于类名的追加
className相当于覆盖
jQuery显示与隐藏效果
show()
hide()
jQuery滑动效果以及事件切换
jQuery停止动画排队stop
jQuery淡入淡出以及突出显示案例
jQuery自定义动画animate方法
王者荣耀手风琴案例布局分析
王者荣耀手风琴案例制作
jQuery属性操作
方法 | 描述 |
---|---|
attr() | 设置或返回匹配元素的属性和值。 |
removeAttr() | 从所有匹配的元素中移除指定的属性。 |
购物车模块-全选(上)
购物车模块-全选(下)
jQuery内容文本值
$("#msg").html(); // 返回id 为msg 的元素节点的html 内容。
$("#msg").html("<b>new content</b>"); // 将“<b>new content</b>” 作为html 串写入id 为msg 的元素节点内容中, 页面显示粗体的new content
$("#msg").text(); // 返回id 为msg 的元素节点的文本内容。
$("#msg").text("<b>new content</b>"); // 将“<b>new content</b>” 作为普通文本串写入id 为msg 的元素节点内容中, 页面显示<b>new content</b>
$("input").val("); // 返回表单输入框的value 值
$("input").val("test"); // 将表单输入框的value 值设为test
购物车模块-增减商品数量
购物车模块-修改商品小计
jQuery遍历对象each方法
$('div').each(function(){
if($(this).is(':hidden')) return;//跳过隐藏的元素
//对可见的元素操作
});
jQuery遍历数据$.each
var myArray = ["apple", "mango", "orange", "grapes", "banana"];
$.each(myArray, function (index, value) {
console.log(index+' : '+value);
});
购物车模块-计算总件数和总额
创建、添加、删除元素
创建元素
$("<li></li>"); // 动态创建了一个li标签
内部添加
// 把内容放入到元素的最后面
element.append("内容");
// 把内容放入到元素的最前面
element.prepend("内容");
外部添加
// 把内容放到元素最后面
element.after("内容");
// 把内容放到元素最前面
element.before("内容");
删除元素
// 删除匹配元素本身 自杀
element.remove();
// 删除匹配元素中所有的子节点 也就是删除孩子
element.empty();
// 清空匹配的元素内容 也是删除孩子
element.html("");
购物车模块-清理购物车
购物车模块-选中商品添加背景颜色
jQuery尺寸方法
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
jQuery位置方法
$(".btn1").click(function(){
x=$("p").offset();
$("#span1").text(x.left);
$("#span2").text(x.top);
});
事件方法
方法 | 描述 |
---|---|
bind() | 向匹配元素附加一个或更多事件处理器 |
blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
change() | 触发、或将函数绑定到指定元素的 change 事件 |
click() | 触发、或将函数绑定到指定元素的 click 事件 |
dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
die() | 移除所有通过 live() 函数添加的事件处理程序。 |
error() | 触发、或将函数绑定到指定元素的 error 事件 |
event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 |
event.pageX | 相对于文档左边缘的鼠标位置。 |
event.pageY | 相对于文档上边缘的鼠标位置。 |
event.preventDefault() | 阻止事件的默认动作。 |
event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 |
event.target | 触发该事件的 DOM 元素。 |
event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
event.type | 描述事件的类型。 |
event.which | 指示按了哪个键或按钮。 |
focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
load() | 触发、或将函数绑定到指定元素的 load 事件 |
mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
ready() | 文档就绪事件(当 HTML 文档就绪可用时) |
resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
select() | 触发、或将函数绑定到指定元素的 select 事件 |
submit() | 触发、或将函数绑定到指定元素的 submit 事件 |
toggle() | 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。 |
trigger() | 所有匹配元素的指定事件 |
triggerHandler() | 第一个被匹配元素的指定事件 |
unbind() | 从匹配元素移除一个被添加的事件处理器 |
undelegate() | 从匹配元素移除一个被添加的事件处理器,现在或将来 |
unload() | 触发、或将函数绑定到指定元素的 unload 事件 |
事件处理on绑定一个或者多个事件
-
jQuery1.7版本后,jQuery用on统一了所有的事件处理的方法
-
语法格式:$(selector).on( events [, selector ] [, data ], handler )
-
参数介绍:
-
第一个参数:events,事件名
-
第二个参数:selector,类似delegate
-
第三个参数: 传递给事件响应方法的参数
-
第四个参数:handler,事件处理方法
例如:
//绑定一个方法
$( “#dataTable tbody tr” ).on( “click”, function() {
console.log( $( this ).text() );
});
//给子元素绑定事件
$( “#dataTable tbody” ).on( “click”, “tr”, function() {
console.log( $( this ).text() );
});
//绑定多个事件的方式
$( “div.test” ).on({
click: function() {$( this ).toggleClass( "active" );
}, mouseenter: function() {
$( this ).addClass( "inside" );
}, mouseleave: function() {
$( this ).removeClass( "inside" );
}
});
-
one绑定一次事件的方式
-
.one( events [, data ], handler )
例如:
$( "p" ).one( "click", function() { alert( $( this ).text() ); });
delegate方式(推荐,性能高,支持动态创建的元素)
-
语法格式:$(selector).delegate( selector, eventType, handler )
-
语法说明:
-
第一个参数:selector, 子选择器
-
第二个参数:事件类型
-
第三个参数:事件响应方法
例如:
$(".parentBox").delegate("p", "click", function(){ //为 .parentBox下面的所有的p标签绑定事件 });
-
*优势:效率较高
-
off解绑事件
$("button").click(function(){
$("p").off("click");
});
$(selector).undelegate(selector,event,function)
jQuery自动触发事件
<div class="login-btn">
<input type="button" value=“登录” onclick="checkLogin"/>
</div>
$("login-btn input").trigger("click")