一、jQuery基础
1.JavaScript库
是一个封装好的集合(方法和函数),简单理解就是一个JS文件，里面对原生JS进行了封装且可以高效的使用这些封装好的功能
比如jQuery就是为了方便了操作DOM，里面基本上都是函数(方法)
2.jQuery概念
jQuery是一个快速的、简洁的JavaScript库设计总是就是提倡更少的代码、更多的功能实现
3.优点
- 轻量级。核心文件几十kb，不会影响页面加载速度
- 跨浏览器兼容
- 链式编程、隐式迭代
- 对事件、动画、样式支持，大大简化了DOM操作
- 支持插件开发
- 开源免费
4.jQuery入口函数
相当于原生JS中的DOMContentLoaded，不同于原生JS中的load事件
<body>
<style type="text/css">
div{
background-color: pink;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
//script写在html标签之前
//第一种方式,等待DOM元素加载完毕后执行里面的代码
$(document).ready(function(){
//jquery隐藏div的方法
$('div').hide();
})
//第二种方式,等待DOM元素加载完毕后执行里面的代码
$(function(){
$('div').hide();
})
</script>
<div></div>
</body>
5.jQuery的顶级对象$
是 j Q u e r y 的 别 称 ， 这 两 个 等 同 ； 为 了 使 用 方 便 ， 通 常 直 接 使 用 是jQuery的别称，这两个等同；为了使用方便，通常直接使用 是jQuery的别称，这两个等同；为了使用方便，通常直接使用
是 j Q u e r y 的 顶 级 对 象 ， 相 当 于 原 生 J S 中 的 w i n d o w 。 把 元 素 利 用 是jQuery的顶级对象，相当于原生JS中的window。把元素利用 是jQuery的顶级对象，相当于原生JS中的window。把元素利用包装成jQuery对象就可以直接调用jQuery方法
6.jQuery对象与DOM对象
DOM对象：利用原生JS获取来的对象就是DOM对象
jQuery对象：jQuery方法获取的元素就是jQuery对象;本质是利用$对DOM对象包装后产生的对象(伪数组形式存储)
6.1 区别
<body>
<div></div>
<script type="text/javascript">
//利用DOM方式获取的对象就是DOM对象
var div = document.querySelector('div');
//利用jQuery方法获取的对象就是jQuery对象
$('div'); //返回的值是一个伪数组
</script>
</body>
jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法
6.2 相互转换
两个对象之间可以相互转换
因为原生JS比jQuery更大，原生的一些属性和方法jQuery没有被封装，要使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用
6.2.1 DOM–>jQuery
直接将DOM对象放入 的 括 号 内 即 可 ： 的括号内即可： 的括号内即可：(DOM)
<body>
<div></div>
<script type="text/javascript">
//获取DOM对象
var divs = document.querySelector('div');
//DOM转换为jQuery对象,直接写标签名也需要加上 ‘’ 号
$('divs');
</script>
</body>
6.2.2 jQuery–>DOM
因为jQuery对象获取返回的是一个伪数组：
- $(‘div’)[index] index是索引号
- $(‘div’).get(index)
<body>
<div></div>
<script type="text/javascript">
//获取 jQuery 对象
$('div');
//jQuery对象转换为DOM对象
$('div')[0]
$('div').get(0)
</script>
</body>
二、jQuery常用API
1.jQuery选择器
原生JS选择器获取元素对象的方式很多，杂而繁多，兼容性情况不一致，所以jQuery做了封装使获取元素标准统一
1.1 jQuery基础选择器
$(“选择器”)：参数直接写CSS选择器即可,打印出来值都是伪数组形式
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $("#id") | 获取指定ID的元素 |
| 全选选择器 | $("*") | 匹配所有元素 |
| 类选择器 | $(".class") | 获取同一类class的元素 |
| 标签选择器 | $(“div”) | 获取同一类标签的元素 |
| 并集选择器 | $(“div,p,li”) | 选取多个元素 |
| 交际选择器 | $(“li.current”) | 交集元素 |
<body>
<div id = "div" class="divs"></div>
<ul>
<li></li>
</ul>
<script type="text/javascript">
console.log($("#div"));
console.log($(".divs"));
//获得li标签
console.log($("ul li"));
</script>
</body>
1.2 层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(“ul>li”) | 获取儿子级别的元素 |
| 后代选择器 | $(“ul li”) | 获取ul标签下的所有li元素 |
1.3 隐式迭代
遍历内部DOM元素(伪数组形式存储)的过程叫做隐式迭代
简单理解：为匹配到的所有元素进行循环遍历执行相应的方法，简化操作方便调用
<body>
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
<script type="text/javascript">
//选择到li元素，为四个元素同时添加背景颜色
//运用隐式迭代，不用为每个元素进行挨个背景颜色操作
$("li").css("background","red");
</script>
</body>
1.4 筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $(“li:first”) | 获取第一个li元素 |
| :last | $(“li:last”) | 获取最后一个li元素 |
| :eq(index) | $(“li:eq(2)”) | 获取索引号为2的li元素，索引号从0开始 |
| :odd | $(“li:odd”) | 选择索引号为奇数的元素 |
| :even | $(“li:even”) | 选择索引号为偶数的元素 |
1.5 筛选方法
| 方法名 | 用法 | 描述 |
|---|---|---|
| parent() | $(“li”).parent() | 查找父级 |
| children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”),最近子级 |
| find(selector) | $(“ul”).parent(“li”) | 相当于$(“ul li”),后代选择器 |
| siblings(selector) | $(“li”).siblings(“li”) | 查找兄弟节点，不包括本身 |
| nextAll() | $(".first").nextAll() | 查找当前元素之后所有同级 |
| prevtAll() | $(".last").prevtAll() | 查找当前元素之后所有同级 |
| eq(index) | $(“li”).eq(2) | 与:eq(index)效果相同 |
| hasClass(“类名”) | $(“li”).hasClass("") | 判断是否有指定类 |
<body>
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
<script type="text/javascript">
//获得li标签的父标签
console.log($("li").parent());
//获得ul的子标签
console.log($("ul").children("li"));
//后代选择器
console.log($("ul").find("li"));
//除了自己的同级元素
$("li:eq(1)").siblings("li").css("background","red");
//推荐使用此方法而不是选择器，因为可以写入变量
$("li").eq(1).css("background","green");
//判断是否含有指定类
console.log($("ul").hasClass("name"))
</script>
</body>
1.6 jQuery排他思想
<body>
<button>按钮</button>
<button>按钮</button>
<script type="text/javascript">
//jquery隐式迭代自动为所有的按钮标签添加事件
$("button").click(function(){
//设置自己
$(this).css("background","red");
//干掉其他人
//当前对象(button)的兄弟标签(button)设置样式
$(this).siblings("button").css("background","");
});
</script>
</body>
1.7 案例显示图片
$(this).index():获取当前对象的索引号
$(“div”).show():显示div
$(“div”).hide()：隐藏
$(“button”).mouseover(function(){ }) :添加鼠标经过事件
<body>
<style type="text/css">
img{
width: 600px;
height: 400px;
display: none;
}
</style>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<br>
<img src="imgs/20201115.jpg">
<img src="imgs/20201116.jpg">
<img src="imgs/20201117.jpg">
<script type="text/javascript">
//添加鼠标经过事件
$("button").mouseover(function(){
$(this).css("background","red");
$(this).siblings("button").css("background","");
//index()方法获得的索引号是从1开始
var index = $(this).index() -1;
//获得图片元素，内容存储为伪数组形式，索引号从 0 开始
$("img").eq(index).show();
//$("img").eq(index).siblings("img").css("display","none") 这个也可让图片显示，较麻烦
$("img").eq(index).siblings("img").hide();
})
</script>
</body>
2.jQuery样式操作
jQuery 可以使用 CSS方式来修改 简单元素样式 ；也可以 操作类 ，修改多个样式
2.1 操作CSS方法
①参数只写属性名，返回的是属性值:$(this).css(“color”)
console.log($("div").css("width"))
②参数是属性名、属性值，逗号分隔，是设置一组属性，属性必须使用引号(值为数字可以不用跟单位和引号)：$(this).css(“color”,“red”)
$("div").css("width","600px");
//属性名必须加上引号,否则会把它当成一个变量
$("div").css(heigth,"600px");
③参数可以是对象的形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$("div").css({
//对象的方式属性名可以不加上引号
"height":"600px",
width:300, //数字可以不加
//复合属性必须遵守驼峰命名法
backgroundColor:"red" //颜色必须加引号
});
2.2 设置类样式方法
$(“div”).click(function(){ }):添加点击事件
①$(this).addClass(“current”):添加类(类名即可不需要 “ . ”，因为addClass已经表明为类)
<body>
<style type="text/css">
div{
width: 400px;
height: 400px;
background-color: pink;
}
.current{
background-color: red;
}
</style>
<div></div>
<script type="text/javascript">
$("div").click(function(){
$(this).addClass("current");
})
</script>
</body>
②$(this).removeClass(“current”):移除类样式
<div class="current"></div>
<script type="text/javascript">
$("div").click(function(){
$(this).removeClass("current");
})
</script>
③$(this).toggleClass(“current”):更改类样式
<div></div>
<script type="text/javascript">
$("div").click(function(){
$(this).toggleClass("current");
})
</script>
2.3 类操作与className区别
原生JS中的className会覆盖元素原先里面的类名；而类操作只是对指定类进行操作，不影响原先的类名(相当于追加)
3.jQuery效果
效果即为动画效果;jQuery封装了许多动画效果
3.1 常用效果
| 效果 | 方法 |
|---|---|
| 显示隐藏 | show()/hide()/toggle() |
| 滑动 | slideDown()/slideUp()/slideToggle() |
| 淡入淡出 | fadeIn()/fadeOut()/fadeToggle()/fadeTo() |
| 自定义动画 | animate() |
3.2 显示隐藏
①show ( [speed , [ easing ] , [ fn ]] )/ hide ([speed , [ easing ] , [ fn ]])/toggle ([speed , [ easing ] , [ fn ]])
- 参数都可以省略，无动画直接显示
- speed:三种速度的字符串(“slow”,“normal”,“fast”)或者使用毫秒值如：1000
- easing：(Optional)用来指定切换效果，默认为“swing”，可用参数为“linear”
- fn：回调函数，动画执行完毕后执行回调函数，每个元素执行一次
<body>
<style type="text/css">
div{
width: 400px;
height: 400px;
background-color: pink;
}
</style>
<button>显示</button>
<button>隐藏</button>
<button>替换</button>
<div></div>
<script type="text/javascript">
//一般都会省略参数
//测试了两种获取元素的方式，推荐使用第二种：用方法的方式获取
$("button:eq(0)").click(function(){
//一秒钟后显示
$("div").show(1000,function(){
alert("回调函数")
});
})
$("button").eq(1).click(function(){
//速度类似于一秒钟 后隐藏
$("div").hide("fast");
})
//替换即为 显示-->隐藏-->显示
$("button").eq(2).click(function(){
$("div").toggle()
})
</script>
</body>
3.3 滑动效果
slideDown( [speed , [ easing ] , [ fn ]] )/slideUp( [speed , [ easing ] , [ fn ]] )/slideToggle( [speed , [ easing ] , [ fn ]] )
<body>
<style type="text/css">
div{
width: 400px;
height: 400px;
background-color: pink;
}
</style>
<button>显示</button>
<button>隐藏</button>
<button>替换</button>
<div></div>
<script type="text/javascript">
$("button:eq(0)").click(function(){
//一秒钟后显示
$("div").slideDown(1000);
})
$("button").eq(1).click(function(){
//速度类似于一秒钟 后隐藏
$("div").slideUp("fast");
})
//替换即为 显示-->隐藏-->显示
$("button").eq(2).click(function(){
$("div").slideToggle()
})
</script>
</body>
3.4 事件切换
$(“button”).hover([over],out):就是事件经过离开的复合方法
- over:鼠标移动到元素上要触发的函数(相当于mouseenter)
- out:鼠标移出元素要触发的函数(相当于mouseleave)
①方法中两个参数：
<body>
<style type="text/css">
div{
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>
<button>显示</button>
<div></div>
<script type="text/javascript">
$("button").hover(
//参数一：over
function(){
$("div").slideDown();
},
//参数热：out
function(){
$("div").slideUp();
});
</script>
</body>
②继续简化，一个参数函数函数中使用切换方法
<body>
<style type="text/css">
div{
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>
<button>显示</button>
<div></div>
<script type="text/javascript">
$("button").hover(function(){
//正好契合Toggle的用法，秒
$("div").slideToggle();
});
</script>
</body>
3.5 动画队列与停止排队
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队(鼠标不停出发动画,动画排队挨着执行即使鼠标已经离开许久)
停止排队的方法：stop();
- stop()用于停止动画或者效果
- 应写在动画或者效果之前，相当于停止上一次动画或效果
<body>
<style type="text/css">
div{
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>
<button>显示</button>
<div></div>
<script type="text/javascript">
$("button").hover(function(){
//stop要写在动画的前面
$("div").stop().slideToggle();
});
</script>
</body>
3.6 淡入淡出效果
fadeIn( [speed , [easing] , [ fn ]] )/fadeOut( [speed , [easing], [fn]] )/fadeToggle( [speed, [easing] , [fn]] )同上
修改透明度：fadeTo( [speed , opacity,[ easing ] , [ fn ]] )
- opacity透明度必须写上，取值为0~1
- 其他参数同上
<body>
<style type="text/css">
div{
width: 400px;
height: 400px;
background-color: pink;
}
</style>
<button>淡入</button>
<button>淡出</button>
<button>替换</button>
<button>指定透明度</button>
<div></div>
<script type="text/javascript">
$("button:eq(0)").click(function(){
$("div").fadeIn(1000);
})
$("button").eq(1).click(function(){
$("div").fadeOut("fast");
})
$("button").eq(2).click(function(){
$("div").fadeToggle()
})
$("button").eq(3).click(function(){
//速度和透明度必须写,否则效果不出
$("div").fadeTo(1000,0.5)
})
</script>
</body>
3.7 图片变暗
核心代码只有两句，其他皆为样式设计罢了
<body>
<style type="text/css">
body{
background-color: black;
}
div{
margin-top: 100px;
margin-left: 400px;
width: 600px;
height: 400px;
}
img{
width: 300px;
height: 180px;
}
li{
display: block;
float: left;
}
</style>
<div>
<ul>
<li><img src="imgs/20201115.jpg" ></li>
<li><img src="imgs/20201116.jpg" ></li>
<li><img src="imgs/20201117.jpg" ></li>
<li><img src="imgs/20201118.jpg" ></li>
</ul>
</div>
<script type="text/javascript">
//功能实现是因为背景是黑色，标签透明度越高图片就会些许变黑
//如果使用img，则即使鼠标经过，图片也不会亮度变暗
$("li").hover(
function(){
//鼠标移入，其他兄弟标签透明度调为 0.5
$(this).siblings().stop().fadeTo(400,0.5);
},
function(){
//鼠标移出，其他兄弟标签透明度调为 1
$(this).siblings().stop().fadeTo(400,1);
}
);
</script>
</body>
3.8 自定义动画
animate(params,[speed],[easing],[fn])
- params:想要更改的样式属性，以对象形式传递(必须写)。属性名可以不用带引号，若为复合属性需用驼峰命名法
- 其他参数同上无须赘述
<body>
<style type="text/css">
div{
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
</style>
<button>点击</button>
<div></div>
<script type="text/javascript">
$("button").click(function(){
//动画方法中的参数必须使用对象形式
$("div").animate({
left:800,
top:400,
//改变图片透明度
opacity:0.5,
//改变大小
width:200
},500)
});
</script>
</body>
4.jQuery属性操作
4.1 设置/获取元素固有属性值
①$(“标签”).prop(“属性名”)：获取标签的指定属性名称
②$(“标签”).prop(“属性名”,“属性值”)：设置属性值
<body>
<a href="#">链接</a>
<input type="checkbox"/>
<script type="text/javascript">
//获取超链接的href属性值
console.log($("a").prop("href"));
$("input").change(function(){
//当复选框状态改变时获取其属性值
console.log($(this).prop("checked"));
})
</script>
</body>
4.2自定义属性
自定义属性只能通过attr()获取
<body>
<a href="#" index = "1">链接</a>
<script type="text/javascript">
//prop()获取不到a标签的index属性
console.log($("a").prop("index"));
//attr()可以获取到a标签的自定义属性
console.log($("a").attr("index")) //类似原生JS的 setAttribute()
//attr()设置自定义属性
$("a").attr("index",5) //类似于原生JS的 getAttribut()
</script>
</body>
4.3 数据缓存data
4.3.1 设置获取属性
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构；一但页面刷新，之前存放的数据都将被移除
<body>
<a href="#" index = "1">链接</a>
<script type="text/javascript">
//存放数据，数据放在了内存中标签内部并没有
$("a").data("uanme","jack");
//获取标签上的数据
console.log($("a").data("uanme"))
</script>
</body>
4.3.2设置获取H5自定义属性
<body>
<a href="#" data-index = "1">链接</a>
<script type="text/javascript">
//prop()获取不到
console.log($("a").prop("data-index"))
//attr()也可以获取H5自定义属性，返回值为字符串类型
console.log($("a").attr("data-index"))
//因为使用data()方法，所以属性名可以省略data关键字
//返回值为数字型
console.log($("a").data("index"))
</script>
</body>
4.4 全选按钮实例
$(".Singal:checked"):此方法可以获得复选框被选中的个数
<body>
全选按钮①：<input type="checkbox" class="All"/><br>
<input type="checkbox" class="Singal"/>选择一
<input type="checkbox" class="Singal"/>选择一
<input type="checkbox" class="Singal"/>选择一<br>
全选按钮②：<input type="checkbox" class="All"/>
<script type="text/javascript">
//只要按钮状态发生改变就触发事件
$(".All").change(function(){
//将全选框的状态赋予给单选框
//使用并集选择器，让所有的全选按钮也发生改变
$(".Singal,.All").prop("checked",$(this).prop("checked"))
});
//单选框状态改变就触发事件
$(".Singal").change(function(){
//判断单选按钮个数是否为3,
if($(".Singal:checked").length == ($(".Singal").length)){
$(".All").prop("checked",true);
}else{
$(".All").prop("checked",false);
}
})
</script>
</body>
5.jQuery内容文本值
主要针对元素内容和表单的值操作
5.1普通元素内容html()
相当于原生innerHtml；方法参数为空则为获取标签内容，参数有值则为设置标签内容
<body>
<div>
<span>我是内容</span>
</div>
<script type="text/javascript">
//此种获取将HTML标签也获取到
console.log($("div").html())
//修改html中的值
$("div").html("123");
</script>
</body>
5.2 普通元素文本内容text()
相当于原生innerText
<body>
<div>
<span>我是内容</span>
</div>
<script type="text/javascript">
//仅仅获取元素内容，标签不获取
console.log($("div").text())
//直接修改html标签内部内容
$("div").text("123");
</script>
</body>
5.3 表单内容值val()
<body>
<input type="text" />
<script type="text/javascript">
//获取输入框中的值
console.log($("input").val())
//修改输入框中的值
$("input").val("123");
</script>
</body>
5.4 表单值增减
<body>
商品数量：<input type="text" value="1"/><br />
<button>添加数量</button>
<button>减少数量</button>
<script type="text/javascript">
$("button").eq(0).click(function(){
var num = $("input").val();
$("input").val(++num);
})
$("button").eq(1).click(function(){
var num = $("input").val();
if(num==1){
return false;
}else{
$("input").val(--num);
}
})
</script>
</body>
6.jQuery元素操作
主要是遍历、创建、添加、删除元素操作
6.1 遍历元素
jQuery为元素设置了隐式迭代，如果想要对单个元素样式进行更改就需要用到便遍历
①$(‘div’).each(function(index,domEle){ }) :此div元素进行遍历
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script type="text/javascript">
//设置数组，里面存放颜色
var color = ["red","green","blue"]
//each遍历方法
$('div').each(function(i,domEle){
//函数第一个参数一定是索引号(jQuery自动添加)
var index = i;
//第二个参数是DOM对象，使用jQuery方法必须转换对象
$(domEle).css('color',color[index]);
})
</script>
</body>
② . e a c h ( .each( .each((‘div’),function(index,domEle){ }):先遍历，指明遍历对象为div元素
**方便对于数据的遍历，处理数据(可以遍历所有数据)；**上一个方法不方便
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script type="text/javascript">
//设置数组，里面存放颜色
var color = ["red","green","blue"]
//each遍历方法
$.each($('div'),function(i,domEle){
//函数第一个参数一定是索引号(jQuery自动添加)
var index = i;
//第二个参数是DOM对象，使用jQuery方法必须转换对象
$(domEle).css('color',color[index]);
})
</script>
</body>
6.2 创建元素
$(’
- ’):动态创建了li标签；添加了元素不会显示，还需要添加元素
6.3 添加元素
6.3.1 内部添加
element.append(‘内容’)：把内容放入匹配元素内部的后面，类似原生 appendChild
<body> <ul> <li>本来就有的li标签</li> </ul> <script type="text/javascript"> //创建li标签 var li = $('<li>动态创建的li标签</li>'); //添加元素：内部添加 $('ul').append(li); //类似于 appendChild原生JS方法 //添加元素到内容前面 $('ul').prepend(li); </script> </body>6.3.2 外部添加
element.after(‘内容’): 把内容放在目标元素的后面
element.before(‘内容’): 把内容放在目标元素的前面
<body> <div>原本就存在</div> <script type="text/javascript"> var div =$('<div>动态生成</div>') //添加到内容后面 $('div').after(div); //添加到内容前面 $('div').before(div); </script> </body>内部添加元素生成之后，它们是父子关系
外部元素添加生成之后，它们是兄弟关系
6.4 删除元素
element.remove(): 删除匹配元素本身
element.empty(): 删除匹配元素集合中的所有子节点，本身元素不删除
element.html(’’) :清空匹配元素内容(内容为空字符串表示为清空)
<body> <div>原本就存在</div> <script type="text/javascript"> //删除了div元素 $('div').remove(); </script> </body>7.jQuery事件
7.1 事件注册
element.事件(function(){ }):创建方式与原生JS语法大致相同
但是创建事件只能创建单个事件，不能创建多个事件
7.2 事件处理
on()事件处理：在匹配的元素上绑定一个或多个事件的事件处理函数
element.on(events,[selector],fn):
- events:一个或者多个用空格分隔的事件类型，例如 "click"或者“keydown”
- selector:元素的子元素选择器
- fn回调函数
<body> <style type="text/css"> div{ background-color: pink; width: 200px; height: 200px; } </style> <div></div> <script type="text/javascript"> //on()处理函数，可以使用对象方式创智 $('div').on({ mouseenter:function(){ $(this).css("background","red") }, mouseleave:function(){ $(this).css("background","green") } }) //on()处理函数 $('div').on("mouseenter mouseleave",function(){ alert("11") }) </script> </body>on()处理函数优点：
- 可以绑定多个事件
- 可以事件委派操作(将原来加在子元素身上的事件绑定在父元素身上，就是将事件委派给父元素)
- 动态创建的元素，click()无法绑定事件，on()可以为动态生成的元素绑定事件
<body> <ul> <li>1</li> <li>2</li> </ul> <script type="text/javascript"> //先绑定了事件，再创建标签 //事件绑定在ul标签上，触发事件的对象为li $('ul').on('click','li',function(){ alert('1') }) //即使动态创建的li标签也可以绑定事件 var li = $('<li></li>') $('ul').append(li) </script> </body>7.3 事件解绑
off()方法可以移除通过on()方法添加的事件处理程序
$(‘div’).off() :将div标签上的所有事件全部解绑
$(‘div’).off(‘click’) :将div标签上的点击事件解绑
$(‘ul’).off(‘click li’) :将div标签上的委托点击事件
one()绑定事件只会触发一次
<body> <ul> <li>1</li> <li>2</li> </ul> <script type="text/javascript"> //事件绑定在ul标签上，触发事件的对象为li //只会触发一次，第二次不会触发 $('ul').one('click','li',function(){ alert('1') }) </script> </body>7.4 自动触发事件
方式一：element.事件()
<body> <div>按钮</div> <script type="text/javascript"> //为div标签绑定事件 $('div').one('click',function(){ alert('1') }) //直接调用，自动加载事件 $('div').click(); </script> </body>方式二：element.trigger():有些事件需要自动触发，不必再用鼠标触发
<body> <div>按钮</div> <script type="text/javascript"> //为div标签绑定事件 $('div').one('click',function(){ alert('1') }) //直接调用，自动加载事件 $('div').trigger('click') </script> </body>方式三：element.triggerHandler(type):与上面两个区别为不会触发元素默认行为(光标不会闪烁)
<body> 输入框：<input type="text"/> <script type="text/javascript"> $('input').on('focus',function(){ $(this).val('你好么'); }) //自动调用焦点事件 $('input').triggerHandler('focus') </script> </body>7.5 事件对象
与原生JS没有什么区别(函数中的参数为 e)
8.jQuery其他事件
8.1 jQuery拷贝对象
把某个对象拷贝(合并)给另外一个对象使用，此时可以使用 $.extend() 方法
$.extend([deep],target,object,[objectN]):
- deep:true表示为深拷贝，默认为浅拷贝
- target：要被拷贝的目标
- object1：待拷贝的第一个对象
- 浅拷贝：将拷贝的内容地址给了目标对象，目标对象修改数据为影响原先对象中的值(对象地址复制)
- 深拷贝：将数据完整的复制给目标对象，而不是地址(重新开辟一个空间并将地址赋予目标对象，不会影响另一个)
<body> <script type="text/javascript"> //目标中没有属性直接赋予，相同名字的属性覆盖 var target ={ id:2 }; var obj= { id:1, age:18, address:{ info:'河南省' } } //浅拷贝 $.extend(target,obj); console.log(target) //深拷贝 $.extend(true,target,obj); </script> </body>8.2 多库共存
$也许会与JS库引起冲突，完成同时存在且不会冲突的问题
直接将$符号写为 jQuery 或者直接释放jQuery对 $ 的控制权
8.3 jQuery插件
插件是依赖于jQuery来完成，所以必须先引入jQuery文件
9.jQuery尺寸、位置操作
9.1 尺寸
语法 用法 width()/height() 匹配元素高度、宽度值 只算width/height innerWidth()/innerHeight 匹配元素宽度、高度值 包含padding outerWidth()/outerHeight() 匹配元素宽度、高度值 包含padding、border outerWidth(true)/outerHeight(true) 匹配元素宽度、高度值 包含padding、border、margin 9.2 位置
主要分为三个：offset()/postion()/scrollTop()、scrollLeft() :设置值则直接赋值
offset():设置返回被选取元素相对于 文档 的便宜坐标，跟父级没有关系 ( ′ d i v ′ ) . o f f s e t ( ) / ('div').offset()/ (′div′).offset()/(‘div’).offset().top
postion():设置返回被选取元素相对于 带有定位的父级 便宜坐标，如果没有父级都没有定位则按照文档为主;只能获取不能设置
scrollTop()/scrollLeft():设置返回被选取元素 被卷曲的头部
扫一扫
2467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
