jQuery框架:
内容:掌握jQuery的思想设计与理念
官网:http://jquery.com/
;
汉化:http://www.css88.com/jqapi-1.9/
;
在线API:http://api.jquery.com/
;
jQuery在线API: http://hemin.cn/jq/
;
所谓框架:
就是个人或者团队开发出来的帮助程序猿快速开发的工具代码。第三方(第三方框架) 说的是:我一方、我的代码一方、别人的代码一方(第三方框架)。一般形容框架都是完整的一套代码体系;简单的封装三两个方法不能称之为框架。
- jQuery框架就是一套其他团队开发出来的完整的框架工具。主要是针对JS的DOM操作的封装 ,dom节点获取、增删改查、dom操作等等。
- API
(Application Programming Interface应用程序编程接口)
在使用jQuery
的API
时,都是方法调用,也就是说要加小括号()
,小括号
里面是相应的参数,参数不同,功能不同。
为什么要学习jQuery?
原因1:
目前jQuery框架已经是主流的 非标准的 公司标准框架
原因2:
因为jQuery可以解决我们js的dom操作的那些痛点!
js操作dom的痛点:
- 原生js所有对象的事件
(window.onload)
有层叠覆盖问题(后面事件覆盖前面的事件)
。 - 原生js的代码容错性差。
//例如:
document.getElementById("id写错了");
var box=document.getElementById("bo");
// 一旦使用box对象 则报错,报错意味着程序停止运行
- 存在着大量浏览器兼容问题
jQuery分为1.X版本
2.X版本
3.X版本
;
如果我们下载使用的是1.X版本
那么只要这个方法能用,就没有任何兼容问题 一直兼容到IE5
。 - 原生js简单功能实现过程繁琐
举例: 显示盒子设置文字效果;分别使用原生js
和jQuery
两套实现方式作对比
//原生js
var btn=document.getElementsByTagName("button")[0];
var liArr=document.getElementsByTagName("li");
var ul=document.getElementsByClassName("box")[0];
btn.onclick=function () {
for(var i=0;i<liArr.length;i++){
liArr[i].style.display="block";
liArr[i].innerHTML="待我长发及腰,遮住一身肥膘,纵然虎背熊腰,也要高冷傲娇。"
}
}
// jQuery实现
$("button").click(function () {
$(".box>li").show(5000).html("待我长发及腰,遮住一身肥膘");
})
jQuery最核心的两大特点:
1.链式编程
2.隐式迭代
JQ入口函数
方式一:$(document).ready(function(){});
方式二:$(function(){ });
JQ
比js
入口函数优点在于:
js
的入口函数是:文档
、节点
、图片
都加载完成后才执行。JQ
的入口函数只是:文档
、节点
加载完成后就执行。- JQ最重要的就是
$
符号,$符号
是JQ的核心。
为什么选择$
?
jQuery使用$符号
原因:书写简洁、相对于其他字符与众不同、容易被记住。
理解JQ的$符号
$();
// 调用上面我们自定义的函数$
;
$(document).ready(function(){});
// 调用入口函数;
$(function(){});
// 调用入口函数;
$(“#btnShow”)
// 获取id属性为btnShow的元素;
$(“div”)
// 获取所有的div元素;
jQuery和$是===的关系
完全一样
JQ对象和js对象的相互转换
JQ对象转换成JS对象:
JQ对象.get(索引值)
返回值是JS对象
;
这里面的索引值表示:JQ的一次性会选择很多元素,想要哪个就使用哪个元素的索引值。JQ对象[索引值]
;
JS对象转换成JQ对象:$(js对象)
;
JQ所支持的选择器
JQ几乎支持所有CSS以及CSS3选择器
- ID选择器
console.log($("#box"))
; - class选择器
console.log($(".pox"))
; - 元素选择器
console.log($("li"))
; - 子代选择器
console.log($("ul>li"))
; - 后代选择器
console.log($("#box .inner"))
; - 并集选择器
console.log($("#box,.pox"))
; - 交集选择器
console.log($("p.pox"))
; - css3选择器也都支持
console.log($("li:nth-child(2)"))
;
JQ的过滤选择器
JQ过滤选择器,能够过滤掉一部分元素,只选择一部分。
:eq(index) $("选择器:eq(索引值)")
表示在已经选择的众多元素中找到指定索引值的那个元素;
:odd $("选择器:odd")
表示在已经选择的众多元素中找到索引值为奇数的元素;
:even $("选择器:even")
表示在已经选择的众多元素中找到索引值为偶数的元素;
:first $("选择器:first")
表示在已经选择的众多元素中找到第一个元素;
:last $("选择器:last")
表示在已经选择的众多元素中找到最后一个元素;
:lt(index) $("选择器:lt(index)")
表示在已经选择的众多元素中找到比当前 lt
索引值还小的那些元素不包括自己
;
:gt(index) $("选择器:gt(index)")
表示在已经选择的众多元素中 到比当前 gt
索引值还大的那些元素不包括自己
;
:not(选择器) $("选择器:not('选择器')")
表示在已经选择的众多元素中排除not选择器选择
的元素选择剩下那些元素;
JQ的筛选选择器
JQ的筛选选择器都是一些方法,跟原生js的节点访问关系很像。
.parent()
—找到父元素(亲的);
.children(选择器)
—找到子元素参数可选
传入选择器表示找到指定的子元素,否则就是默认找到所有元素;
.find(选择器selector)
—找到后代指定选择器
的元素 参数必须传
否则找不到;
.siblings(选择器)—找到所有兄弟元素 如果选择器 则表示筛选指定选择器的兄弟
.eq(index)
和:eq()
功能一样–在已经选择众多元素中找到指定索引值的元素;
.eq比:eq方便:
例如如果索引值是变量的情况
$("ul>li:eq("+变量+")")
$("ul>li").eq(变量)
.first()
.last()
.next()
—找到下一个兄弟节点;
.prev()
—找到上一个兄弟节点;
jQuery操作DOM
A. 样式操作
一、样式属性操作 .css()
JQ的css方法可以设置
和获取
css样式;
$("选择器").css("css属性名")
表示获取元素指定css属性的值(包括内嵌和外链);$("选择器").css("属性名","属性值")
设置元素单个css样式;$("选择器").css(json对象)
可以一次性设置多个css样式;
二、JQ关于类的操作的方法
addClass("类名")
增加一个类
$(selector).addClass(“liItem”);
$("button").eq(0).click(function () {
$("#box").addClass("fz co ml");
})
removeClass("类名")
删除一个类
$(selector).removeClass(“liItem”);
$(selector).removeClass(); 不指定参数,表示移除被选中元素的所有类
$("button").eq(1).click(function () {
$("#box").removeClass("ml");
})
hasClass("类名")
判断是否包含指定类名
$(selector).hasClass(“liItem”);此时,会返回true或false;
$("button").eq(2).click(function () {
// console.log($("#box").hasClass("ml"));
if($("#box").hasClass("ml")){
$("#box").removeClass("ml")
}else{
$("#box").addClass("ml")
}
})
- toggleClass(“类名”)
判断是否包含指定类名;如果包含 则自动删除,如果不包含 则自动添加;
$(selector).toggleClass(“liItem”);
$("button").eq(3).click(function () {
$("#box").toggleClass("ml")
})
注意点:操作类样式的时候,所有的类名,都不带点(.)
经验:
- 操作的样式非常少,那么可以通过.css()这个 方法来操作
- 操作的样式很多,那么要通过使用类的方式来操作
- 如果考虑以后维护方便(把CSS从js中分离出来)的话,推荐使用类的方式来操作。(把css从html中分离出来)
B. jQuery动画
一、隐藏显示动画
- show() 显示动画
作用:让匹配的元素展示出来
-
用法一:
$(selector).show(2000)
;
参数为数值类型
,表示:执行动画时长
单位为:
毫秒(ms)
,参数2000即2秒钟显示完毕; -
用法二:
$(selector).show(“slow”)
;
参数为字符串类型
,是jQuery预设的值,共有三个,分别是:slow
、normal
、fast
;
跟用法一的对应关系为:slow:600ms
、normal:400ms
、fast:200ms
;
有动画效果主要控制的属性
是:width;height;opacity;display:block;overflow:hidden
; -
用法三:
$(selector).show(2000, function() {})
;
参数一可以是数值类型
或者字符串类型
;
参数二表示:动画执行完后立即执行的回调函数
; -
用法四:
$(selector).show()
;
不带参数
,作用等同于css(“display”, ”block”)
注意:此时没有动画效果;
$("button").eq(0).click(function () {
// $("#box").show()
// $("#box").show(10000)
// $("#box").show("slow");
// $("#box").show("normal");
// $("#box").show("fast");
$("#box").show(5000,function () {
alert("终于显示了")
})
})
- hide() 隐藏动画
作用:让匹配的元素隐藏起来
参数格式跟show()
一样,只不过hide
最后是display:none
;
$("button").eq(1).click(function () {
// $("#box").hide();
// $("#box").hide(2000);
// $("#box").hide("slow");
$("#box").hide(3000,function () {
alert("终于隐藏了")
});
})
toggle(毫秒值) 显示隐藏切换动画
二、滑入滑出动画
- slideDown() 滑入动画
- 不传参数
默认normal速度的动画; 控制的是height属性
- 传入 毫秒值
表示动画时间 - 传入速度和回调函数
$("button").eq(0).click(function () {
// 滑入动画
// $("#box").slideDown();
// $("#box").slideDown(3000);
$("#box").slideDown("slow",function () {
alert("总算滑完了")
})
})
- slideUp() 滑出动画 参数跟
slideDown()
滑入一样
$("button").eq(1).click(function () {
$("#box").slideUp(3000,function () {
alert("总算出去了")
})
})
- slideToggle() 滑入滑出切换
$("button").eq(2).click(function () {
// $("#box").slideToggle(2000)
$("#box").toggle(1000)
})
三、淡入淡出动画
- fadeIn() 淡入动画
参数
跟滑入滑出
一样;控制的是opacity
;
$("button").eq(0).click(function(){
$("#box").fadeIn(2000);
})
- fadeOut() 淡出动画
$("button").eq(1).click(function(){
$("#box").fadeOut(2000);
})
- fadeToggle() 淡入淡出切换
$("button").eq(2).click(function(){
$("#box").fadeToggle(400);
})
- fadeTo(毫秒值,透明度值)
表示动画淡出/淡入到指定透明度
参数1:毫秒值 ,参数2:透明度值
$("button").eq(3).click(function(){
$("#box").fadeTo(1000,0.3);
})
四、animate自定义动画
animate自定义动画参数:
json对象
必选执行的时长
毫秒值
或者字符串值
必选动画执行完的回调函数
可选
animate动画
所支持的属性 是那些单位是px
的css属性
;
$(function () {
$("button").click(function () {
/* $("#box").animate({
width:400,
height:200,
},2000)*/
$("#box").animate({
width:400,
height:"200px",
fontSize:30,
left:200,
borderWidth:30,
borderRadius:200,
opacity:0.3
},2000,function () {
alert("总算执行完了")
})
})
})
五、JQ停止动画
对象.stop(boolean,boolean)
传入两个布尔值; 默认
都是false
;
- 第一个参数表示
后续动画是否要执行
(true:后续动画不执行;false:后续动画会执行) - 第二个参数表示
当前动画是否执行完
(true:立即执行完成当前动画;false:立即停止当前动画)
如果传入两个false
表示:马上去执行下一个排队的动画,然后立即停止当前正在进行的动画;
1true,2false
表示:立马停止当前动画 后续动画也不执行
1false,2true
1true,2true
$(function () {
$("button").eq(0).click(function(){
/*$("#box").animate({
width:400,
height:400,
left:100,
top:50
},3000)*/
$("#box").slideToggle(3000);
})
$("button").eq(1).click(function(){
// $("#box").stop();
// $("#box").stop(false,false);
// $("#box").stop(true,false);
// $("#box").stop(false,true);
$("#box").stop(true,true);
})
})
下拉菜单划入画出版本:
在JQ动画中 一般先stop再调用动画,除非特殊需求
$(function () {
$(".wrap>ul>li").mouseenter(function () {
$(this).children("ul").stop(true,false).slideDown(200);
})
$(".wrap>ul>li").mouseleave(function () {
$(this).children("ul").stop(true,false).slideUp(200);
})
})
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
</ul>
</div>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(image/bg.jpg);
}
.wrap li{
background-image: url(image/libg.jpg);
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
C. jQuery关于DOM节点操作的方法:
回顾之前原生js关于DOM增删改操作的方法
createElement("标签名")
创建节点appendChild(元素对象)
增加一个子节点insertBefore(新,参考老)
插入新节点removeChild(子节点)
移除replaceChild(新,老)
替换cloneNode(boolean)
克隆
一、动态创建元素
- 创建节点对象
var $newDiv= $("<div >我是新节点</div>")
;
二、添加元素
- 在页面上拼接节点对象
父节点.append(标签字符串或者节点对象)
;
子节点对象.appendTo(父节点对象)
;
上面两个 都是拼接到父节点最后一位
;
父节点.prepend(标签字符串或者节点对象)
;
子节点对象.prependTo(父节点对象)
;
上面两个 都是拼接到父节点第一位
; - 兄弟节点之
前
插入
节点对象.before(标签字符串/节点对象)
; - 兄弟节点之
后
插入
节点对象.after(标签字符串/节点对象)
;
总结:
append
prepend
after
before
,这四个方法参数
都能传入标签字符串
或节点对象
。
appendTo
和prependTo
不行 必须是节点对象
调用。
$(function () {
$("button").click(function () {
/*JQ创建一个新节点 创建出来的是JQ对象 可以直接写一个完整的标签*/
var $newDiv= $("<div class='pox'>我是新节点</div>");
console.log($newDiv);
/*拼接节点对象*/
$("#box").append($newDiv)
/*拼接标签字符串*/
$("#box").append("<p>我是新来的p元素</p>")
$newDiv.appendTo($("#box"));
/*拼接节点对象到第一位*/
$("#box").prepend($newDiv)
/*拼接标签字符串到第一位*/
$("#box").prepend("<p>我是新来的p元素</p>");
/*子节点拼接到父节点第一位*/
$newDiv.prependTo($("#box"))
/*在指定兄弟节点之前查新新节点对象*/
$(".hox").before($newDiv)
/*在指定兄弟节点之前查新标签字符串对象*/
$(".hox").before("<p>我是新来的p元素</p>")
/*在指定兄弟节点之后查新标签字符串对象*/
$(".hox").after("<p>我是新来的p元素</p>")
/*在指定兄弟节点之前查新新节点对象*/
$(".hox").after($newDiv)
})
})
三、html()方法创建元素
原生JS
有innerHTML
属性,JQ
对应的就是html()
方法
html()方法的使用:
元素.html("新标签内容")
;
表示:把元素内部所有内容清空
并替换新内容
;元素.html("")
;
表示:清空
当前元素内部所有内容元素.html()
;
表示:获取元素内部所有内容 返回字符串
text()方法的使用:
text()
方法的使用 跟innerText
效果一样
具体使用跟html()
方法一样
四、清空元素的操作
$("#box").html("")
;$("#box").empty()
;
表示:清空指定元素的所有子元素(光杆司令),没有参数$("#box").remove()
;
表示:元素"自杀" 表示连自己也干掉
五、复制元素
JQ
的clone
默认是带着内部内容一起克隆
虽然JQ的clone参数也是传一个布尔值
但是,这个布尔值(true 或者 false)
表示:指示事件处理函数
是否会被复制。V1.5以上版本默认值是:false;
是否复制标签上面的事件,实际操作不好用!!
D. JQ中标签属性的操作
原生js
中操作标签属性的方法:setAttribute
removeAttribute
getAttribute
一、属性操作.attr()和.prop()
JQ是通过attr()
方法 来实现原生js的这三个功能
.attr()方法:
.attr()
方法参数
- 增加一个标签属性节点
元素.attr("属性名","属性值")
; - 删除一个属性节点
元素.removeAttr("属性名")
; - 修改一个属性节点的名字
元素.attr("已经存在的属性名","新属性值")
; - 获取属性节点的值
元素的.attr("属性名")
返回当前属性节点的值
,如果属性
不存在 则返回undefined
但是: 三个特殊的 属性 无法通过attr
进行操作:checked
selected
disabled
经过测试attr()
无法操作checked
属性 只有第一次生效 后面不生效,需要通过 prop()
方法操作prop()
方法跟attr()
方法操作一模一样;
prop()方法
通常用来影响DOM元素
的动态状态,而不是改变的HTML属性
。例如:input
和button
的disabled
特性,以及checkbox
的checked
特性。
.prop()
方法参数 操作form表单
-
.prop(name)
String 属性名称
选中复选框为true,没选中为false:
$("input[type='checkbox']").prop("checked");
-
.prop(properties)
Map 作为属性的“名/值对”对象
禁用页面上的所有复选框:
$("input[type='checkbox']").prop({disabled: true});
-
.prop(key,value)
String,Object 属性名称,属性值
禁用和选中所有页面上的复选框:
$("input[type='checkbox']").prop("disabled", false)
;$("input[type='checkbox']").prop("checked", true)
; -
.prop(key,function(index, attr))
String,Function
1:属性名称。
2:返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值。
通过函数来设置所有页面上的复选框被选中:
$("input[type='checkbox']").prop("checked", function( i, val ) {return !val;})
;
$(function () {
$("button").eq(0).click(function () {
$("#box").attr("title","我时粉盒子")
})
$("button").eq(1).click(function () {
$("#box").removeAttr("title")
})
$("button").eq(2).click(function () {
$("#box").attr("class","kox")
})
$("button").eq(3).click(function () {
console.log($("#box").attr("title"));;
})
$("button").eq(4).click(function () {
//多选按钮选中
// $("#cb").attr("checked",true);
$("#cb").prop("checked",true)
})
$("button").eq(5).click(function () {
// 多选按钮 取消选中
// $("#cb").attr("checked",false);
$("#cb").prop("checked",false)
})
$("button").eq(6).click(function () {
//输入框禁用
$("#inp").prop("disabled",true)
})
$("button").eq(7).click(function () {
// 输入框取消禁用
$("#inp").prop("disabled",false)
})
})
二、值和内容
1. .val()
方法是专门用在输入框对象的 用来获取和设置
输入框输入的内容
input.val()
获取输入的内容
input.val("内容")
设置输入框
内部输入的内容
2. html()
和text()
方法是专门用来获取和设置
元素内部内容的方法,三种用法:
-
html()
/text()
不传参数 表示获取
html()
获取内部所有内容 包括标签本身
text()
获取内部文本内容 不包括标签本身 -
html("内容")
/text("内容")
传入指定内容
都是清空标签内部原有内容 设置为新内容
如果内容包含标签字符串
则:
html()
会渲染标签效果
text()
不会渲染标签效果 -
html("")
/text("")
都是将元素内部内容清空
3. .index()
方法,JQ
每个对象都有.index()
方法,默认是当前元素在父元素中的索引值
。
4. .hover()
方法,鼠标移入移出,暂停开始定制器。
.hover(回调函数,回调函数)
方法 有两个参数:
1:回调函数;表示鼠标移入
2:回调函数;表示鼠标移出
$("#box").hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(autoPlay,1000);
})
5. 元素.prevAll()
选择当前元素前边的所有兄弟
6. 元素.nextAll()
选择当前元素后边的所有兄弟
7. .end()
不忘初心方法
JQ虽然有链式编程方法(每次操作完都返回当前操作过的对象)
但是在不停的链式当中 对象可能发生切换
比如 prevAll()
返回值是前边所有的兄弟元素 返回值发生了切换,不再是原来的$(this)
这种情况下 就需要用到.end()
方法 把当前对象切换回上一次调用的那个对象
var shi="★";
var kong="☆";
$("ul>li").mouseenter(function () {
$(this)
.text(shi).prevAll().text(shi)
.end().nextAll().text(kong);
})
E. JQ中event对象的使用
JQ的event是直接参数接收即可 没有兼容问题
$("#box").click(function (event) {
console.log(event);
跟原生JS的event对象一样
clientX/Y pageX/Y screenX/Y
target timeStamp type button
offsetX/Y (鼠标到盒子的距离)
})
onkeydown
onkeyup
键盘按下和抬起事件 一定要是能获取焦点的元素才可以添加触发该事件
document/html/body
添加keydown
事件都能响应
$("#inp").keydown(function (event) {
//key是返回按键的名称 keycode返回按键码
// console.log(event.key,event.keyCode);
if(event.key=="Enter"){
alert("你按了回车!!!")
}
})
$("#box").html(`
当前键盘码(keycode):`+event.keyCode+` <br>
当前按键是:`+event.key+`
`)
F. JQ关于尺寸和位置操作
一、高度和宽度操作
元素.height()
;获取或者设置元素的高度
元素.width()
;获取或者设置元素的宽度
参数传入数字表示设置宽高
上面两个获取的就是元素设置的css样式
的宽高,如果未设置宽高则无法获取
。
.css()
获取高度和.height()
获取高度的区别?
元素.css("height")
和元素.height()
的区别:
元素.css("height")
返回值的number类型
例如 200
元素.height()
返回的是带px的string字符串
例如 200px
所以元素.css("height")
可以进行下一步的数学运算
二、坐标值操作
-
元素.offset()
返回一个对象
{top: 50, left: 108}
表示距离最近的有定位的父盒子的左侧和上边的距离;如果父系盒子都没有定位 则距离到body;
该方法还可以设置left
和top
值,元素.offset({left:数值,top:数值})
;
例如:$(this).offset({top:200})
;也可以单独设置一边。
如果元素本身没有定位
则该方法 会给元素动态添加相对定位
并设置位置
.offset()
方法 能获取
能设置
。 -
.position()
也返回一个对象
{top: 50, left: 108}
但是.position()
方法只能获取
不能设置
。 -
获取被卷去的头部:
console.log($(this).scrollTop());
对.scrollTop()
的理解:
垂直滚动条位置 是可滚动区域 在 可视区域上方的 被隐藏区域的高度。
如果滚动条在最上方没有滚动 或者 当前元素没有出现滚动条,那么这个距离为0。
设置被卷去的头部:$(this).scrollTop(2500);
-
.scrollLeft()
同理
G. jQuery事件机制
一、JQ事件绑定的方式
<button>增加元素</button>
<div id="box">
<p>我是第一个p元素</p>
<p>我是第二个p元素</p>
<p>我是第三个p元素</p>
</div>
JQ给元素绑定事件的方式:
- 简单事件绑定
$("选择器").事件名称(驱动函数)
;
$("button").click(function () {
$("#box").append("<p>我是新来的p元素</p>")
})
.delegate()
方式绑定事件
父元素.delegate("子元素选择器","不带on的事件名称",事件驱动函数)
;
优点:
1.可以批量添加事件 给父元素下面的一堆子元素同时添加点击事件;
2.默认自带事件委托功能;
/*单独给box添加点击事件*/
$(document.body).delegate("#box","click",function () {
alert("点我干嘛")
})
/*为box下面所有的p元素添加点击事件*/
$("#box").delegate("p","click",function () {
alert("我是p元素,你点我干嘛")
})
.on()
的方式绑定事件 (最流行 最新 最潮流的绑定方式 强烈推荐!!)
jQuery1.7版本
后,jQuery用.on()
统一了所有的事件处理的方法,给匹配的元素绑定事件,包括了上面所有绑定事件方式的优点。
格式:
父元素.on("不带on的事件名称","子代或者后代选择器",data(传给事件所需要的数据),事件驱动函数)
;
优点:
整合了.delegate()
特点:
1.批量添加事件 减少绑定次数;
2.自带事件委托功能;
3.可以一次性添加多个事件。
var data={
name:"小强",
age:15
}
/*on绑定事件*/
$("#box").on("click","p",data,function (event) {
alert("我是p元素,点我干嘛")
//事件触发时 可以获取传入的事件(后面讲)
console.log(event.data);
})
/*on 可以一次性绑定多个事件 多个事件用空格隔开*/
$("#box").on("click contextmenu mouseover","p",function () {
alert("我是p元素,请问你是单击还是右击呢?")
})
ps: 所有绑定事件的方式都没有层叠覆盖问题
二、JQ事件解绑的方式
用什么方式绑定的 就用什么方式解绑
<button>click()绑定事件</button>
<button>delegate绑定事件</button>
<button>on绑定事件</button>
<button>解绑click()事件</button>
<button>解绑delegate事件</button>
<button>解绑on事件</button>
<div id="box">
<p>我是第一个p元素</p>
<p>我是第二个p元素</p>
<p>我是第三个p元素</p>
<div>我是div里面的div</div>
</div>
.undelegate()
解绑.delegate()
绑定的事件:
父元素选择器.undelegate()
;解绑当前父元素选择器下面所有子元素绑定的事件
;
父元素选择器.undelegate("click")
; 解绑当前父元素下面所有子元素的click事件
;.off()
解绑.on()
方式绑定的事件
父元素选择器.off()
;解绑当前父元素选择器下面所有子元素绑定的事件
;
父元素选择器.off("click")
; 解绑当前父元素下面所有子元素的click事件
;
/*以下是事件绑定*/
$("button").eq(0).click(function(){
$("#box>p").click(function () {
alert("我是click()方式绑定事件")
})
})
$("button").eq(1).click(function(){
$("#box").delegate("p","click",function () {
alert("delegate方式绑定的点击事件")
})
$("#box").delegate("div","click",function () {
alert("delegate方式绑定的点击事件")
})
})
$("button").eq(2).click(function(){
$("#box").on("click","p",function () {
alert("on方式绑定的点击事件")
})
$("#box").on("click","div",function () {
alert("on方式绑定的点击事件")
})
})
/*以下是事件解绑*/
$("button").eq(3).click(function(){
//只有此种写法才能解绑简单事件绑定
$("#box>p").prop("onclick",null).off("click")
})
$("button").eq(4).click(function(){
// 解绑delegate绑定的事件
$("#box").undelegate();
})
$("button").eq(5).click(function(){
// 解绑on方式绑定的事件
$("#box").off()
})
三、JQ事件事件触发
<button>事件触发</button>
<div id="box"></div>
<input type="text" id="inp">
什么是事件触发:
执行了事件驱动函数里面的代码,但是又不用去操作事件
JQ的事件触发的方式:
元素.事件名称()
;会触发浏览器默认行为。元素.trigger("不带on的事件名称")
;会触发浏览器默认行为。元素.triggerHandler("不带on的事件名称")
;不会触发浏览器默认行为。
$("#box").click(function () {
alert("你点我粉盒子干嘛???")
})
$("#inp").focus(function () {
console.log("我是输入框获取焦点事件");
})
$("button").eq(0).click(function () {
// $("#box").click();
// $("#box").trigger("click")
// $("#box").triggerHandler("click");
// $("#inp").focus();
// $("#inp").trigger("focus");
$("#inp").triggerHandler("focus");
})
var data={
name:"小强强",
age:16
}
/*on绑定的事件 只能通过 focus或者trigger两种事件触发的方法 触发该事件*/
$(document.body).on("focus","#inp",data,function (event) {
console.log("我是输入框获取焦点事件");
//事件触发时 同样能够拿到该数据
console.log(event.data);
})
- 让当前文本框文本默认选中
.select()
; oninput
事件没有keycode
属性
jQuery补充
一、链式编程原理
链式编程原理:当前方法 return this
;
这个this
就表示当前已经设置好的对象返回给下一个调用者。
通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 this。
var per=new Object();
per.setName=function (name) {
this.name=name;
return this;
}
.end()
; // 结束当前链最近的一次过滤操作,并且返回匹配元素之前的状态。
二、隐式迭代
隐式迭代的意思是:在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用。
如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。
JQ自带 隐式迭代操作 就是内部自动帮助我们完成循环 针对每一个元素操作。但是在某些情况下 我们还是需要每个元素单独操作 就需要用到each方法。
有了隐式迭代,为什么还要使用each函数遍历?
大部分情况下是不需要使用each方法的,因为jQuery的隐式迭代特性。
如果要对每个元素做不同的处理,这时候就用到了each方法
三、each方法
- 作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数;
参数一表示当前元素在所有匹配元素中的索引号
参数二表示当前元素(DOM对象)
$(selector).each(function(index,element){})
;Element是一个 js对象,需要转换成jquery对象
each方法的使用:
$("选择器").each(function(索引值,ele元素){ })
;
选择器选择几个元素 那么回调函数就会触发几次,
会针对每一个元素执行一次回调函数 把当前元素的索引值
和元素的js对象
传入回调函数
<ul>
<li>0</li><li>1</li><li>2</li><li>3</li>
<li>4</li><li>5</li><li>6</li><li>7</li>
<li>8</li><li>9</li>
</ul>
$(function () {
$("ul>li").each(function (index,element) {
// console.log(index,element);
$(element).css("opacity",index/10);
})
})
四、多库共存
- 此处多库共存指的是:
jQuery
占用了$
和jQuery
这两个变量。当在同一个页面中引用了jQuery
这个js库
,并且引用的其他库(或者其他版本的jQuery库)中也用到了$
或者jQuery
这两个变量,那么,要保证每个库都能正常使用,这时候就有了多库共存的问题。 - 什么是JQ的多库共存?
就是可以同时引入多个版本的jQuery 还可以同时存在;想调用哪个版本的jQuery就可以任意切换;
模拟另外的库使用了 $ 这个变量
此时,就与jQuery库产生了冲突
var $ = { name : “itszt” }
;
解决方式:
让jQuery
释放对$
的控制权,让其他库能够使用$
符号,达到多库共存的目的。此后,只能使用jQuery
来调用jQuery
提供的方法;
$.noConflict()
; //true两个都交出来,返回值是新的调用方法;
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery-1.11.1.js"></script>
<script>
// 打印当前jQuery版本
console.log($.fn.jquery);//1.11
$.noConflict(); //让当前$对象放弃当前版本
console.log($.fn.jquery);//1.8
console.log(jQuery.fn.jquery);//1.11
/*如果引入了两个版本的jQuery 这样完成*/
</script>
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery-1.11.1.js"></script>
<script src="jquery-3.2.1.js"></script>
<script>
/*如果引入了三个版本*/
/*.noConflict()传入true 表示$和jQuery对象同时放弃一个版本
.noConflict()方法的返回值是当前被放弃的版本*/
console.log($.fn.jquery);//3.2
var q= $.noConflict(true);
console.log($.fn.jquery);//1.11
console.log(jQuery.fn.jquery);//1.11
$.noConflict();
console.log(q.fn.jquery);//3.2
console.log($.fn.jquery);//1.8
console.log(jQuery.fn.jquery);//1.11
</script>
jQuery插件机制
一、第三方插件
jQuery
这个js
库,虽然功能强大,但也不是面面俱到包含所有的功能。
jQuery
是通过插件的方式,来扩展它的功能:
当你需要某个插件的时候,你可以“安装”到jQuery上面,然后使用。
当你不再需要这个插件,那你就可以从jQuery
上“卸载”它。
(联想:手机软件,安装的app就好比插件,用的时候安装上,不用的时候卸载掉)
;
<script src="jquery.color-2.1.0.js"></script>
;
.animate()
自定义动画:不支持背景的动画效果
.animate()
动画支持的属性列表
<!--先保证引入JQ核心文件-->
<script src="jquery-1.11.1.js"></script>
<!--再引入插件文件-->
<script src="jquery.color-2.1.0.js"></script>
<script>
/*什么是插件开发:
又叫二次开发 表示在原有基础上 新增一些新的功能,新的功能是依赖原来功能存在的 只不过比原有功能更加强大,这就是插件的开发 也是二次开发*/
$("#box").click(function () {
alert("开始变化")
$(this).animate({
backgroundColor:"purple"
},2000)
})
</script>
jQuery.lazyload.js
;
使用步骤:
- 引入jQuery文件
- 引入插件
- 使用插件
二、自定义制作插件
如何创建jQuery插件:http://learn.jquery.com/plugins/basic-plugin-creation/
全局jQuery函数扩展方法:$.pluginName = function() { }
;
jQuery对象扩展方法:$.fn. pluginName = function() { }
;
/*JQ已经内置了 扩展插件的功能
$.fn.方法名=function(){ }
此功能表示给全局 页面所有的JQ对象 绑定一个方法
自定义插件的方法 里面的this 表示 当前调用该方法的盒子
对象默认是JQ对象*/
<script src="jquery-1.11.1.js"></script>
<!--引入自己定义的插件-->
<script src="jQuery-setColor-my-1.0.1.js"></script>
<script>
$("button").click(function () {
$("#box").setColor("blue");
})
</script>
//自己定义的插件
$.fn.setColor=function (color) {
// console.log(this);
this.css("background-color",color);
}
三、jQueryUI
jQueryUI
专指由jQuery官方
维护的UI方向
的插件。
官方API:http://api.jqueryui.com/category/all/
其他教程:jQueryUI教程
基本使用:
- 引入jQueryUI的样式文件
- 引入jQuery
- 引入jQueryUI的js文件
- 使用jQueryUI功能
四、jQuery插件之懒加载
<div></div>
<img class="lazy" data-original="http://tools.yufenghen.cn/mock/ajaxdemo/getstar/liying.jpg" width="200" alt="">
<div></div>
<script src="jquery-1.11.1.js"></script>
<script src="jquery_lazyload/jquery.lazyload.js"></script>
<script>
$(function () {
$("img.lazy").lazyload({
effect:"fadeIn";
});
})
</script>