jQuery:JavaScript库,即 library，是一个封装好的特定的集合（方法和函数）。设计的宗旨是“write Less，Do More”
优点:
-
轻量级。核心文件才几十kb，不会影响页面加载速度。
-
跨浏览器兼容，基本兼容了现在主流的浏览器。
-
链式编程、隐式迭代。
-
对事件、样式、动画支持，大大简化了DOM操作。
-
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
-
免费、开源。
jQuery入口函数
//简单易用 $(function(){ ... // 此处是页面 DOM 加载完成的入口 }); //繁琐方法 $(document).ready(function(){ ... // 此处是页面 DOM 加载完成的入口 }) /* 总结： 1. 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。 2. 相当于原生 js 中的 DOMContentLoaded。 3. 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。 4. 更推荐使用第一种方式。 */$ jQuery的顶级对象
-
$是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。
-
$是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。
-
jQuery对象和DOM对象
-
用原生 JS 获取来的对象就是 DOM 对象
-
jQuery 方法获取的元素就是 jQuery 对象。
-
jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
jQuery对象和DOM对象的转换
<button>点击</button>
<script>
var btn = document.querySelector('button');
console.log(btn instanceof Element);//true
// 把DOM对象转换为 jQuery 对象
console.log($(btn) instanceof jQuery);//true
console.log($('button') instanceof jQuery);//true
// 2.jQuery 对象转换为 DOM 对象有两种方法：
// 2.1 jQuery对象[索引值]
console.log($('button')[0] instanceof Element);//true
// 2.2 jQuery对象.get(索引值)
console.log($('button').get(0) instanceof Element);//true
</script>
/*
总结：实际开发比较常用的是把DOM对象转换为jQuery对象，这样能够调用功能更加强大的jQuery中的方法。
*/
基础选择器
$("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $("#id") | 获取指定的ID的元素 |
| 全选选择器 | $("*") | 匹配所有元素 |
| 类选择器 | $(".class") | 获取同一类名的元素 |
| 标签选择器 | $("div") | 获取同一标签的元素 |
| 并集选择器 | $("div,p,li") | 获取多个元素 |
| 交集选择器 | $("li.current") | 交集元素(例如类名是current的li标签) |
层次选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $("ul>li") | 使用>号,获取亲儿子层级的元素,注意并不会获取孙子层级的元素 |
| 后代选择器 | $("ul li") | 使用空格,代表后代选择器,获取后代选择器,获取ul下的所有li元素,包括孙子 |
基础选择器和层级选择器案例代码
<div>我是div</div>
<div class="nav">我是nav div</div>
<ul>
<li>我是ul 的</li>
<li>我是ul 的</li>
<li>我是ul 的</li>
</ul>
<script>
$(".nav").css('color', 'yellow')
$(function () {
console.log($(".nav"));
console.log($("ul li"));
})
</script>
筛选选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| :first | $("li:first") | 获取第一个li元素 |
| :last | $("li:last") | 获取最后一个li元素 |
| :eq(index) | $("li:eq(index)") | 获取到li元素中索引号是index的元素,索引号从0开始 |
| :odd | $("li:odd") | 获取带li元素中所有的索引号为奇数的元素 |
| :even | $("li:even") | 获取带li元素中所有的索引号为偶数的元素 |
案例
<ol>
<li>ol的1li</li>
<li>ol的2li</li>
<li>ol的3li</li>
<li>ol的4li</li>
<li>ol的5li</li>
<li>ol的6li</li>
</ol>
<ul>
<li>ul的1li</li>
<li>ul的2li</li>
<li>ul的3li</li>
<li>ul的4li</li>
<li>ul的5li</li>
<li>ul的6li</li>
</ul>
<script>
$('ol li:first').css('color', 'green')//第一个
$("ol li:eq(3)").css('color', 'gold')//eq(索引号),索引号从0 开始
$('ol li:last').css('color', 'red')//最后一个
$('ul li:odd').css('background-color', 'red')//奇数
$('ul li:even').css('background-color', 'green')//偶数
</script>
jQuery中还有一些筛选方法，类似DOM中的通过一个节点找另外一个节点，父、子、兄以外有所加强。
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $('li').parent() | 查找父级,获取到的是上一级(获取到亲生父亲,无法获取爷爷) |
| children(selector) | $('ul').children('li') | 相当于$('ul>li')获取亲儿子层级的元素,注意并不会获取孙子层级的元素 |
| find(selector) | $('ul').find('li') | 相当于$('ul li')获取到的是ul下的所有的li |
| siblings(selector) | $('.first').siblings('li') | 获取到l类名是first的li元素所有的兄弟元素 |
| nextAll() | $('.first').nextAll() | 获取到l类名是first的li元素后面所有的同辈元素 |
| prevAll() | $('.last').prevAll() | 获取到l类名是last的li元素前面所有的同辈元素 |
| next() | $('.first').next() | 获取到l类名是first的li元素后面第一个的同辈元素 |
| prev() | $('.last').prev() | 获取到l类名是last的li元素前面第一个的同辈元素 |
| hasClass(class) | $('div').hasClass('className') | 返回的是布尔值,判断div是否含有某个类名 |
| eq(index) | $('li'):eq(index) | 获取到li元素中索引号是index的元素,索引号从0开始 |
案例
<div class="grandfather">
<div class="father">
<div class="son">儿子</div>
</div>
</div>
<div class="nav">
<p>我是P1</p>
<div>
<p>我是p2</p>
</div>
</div>
<script>
// 注意一下都是方法 带括号
$(function () {
// 1. 父 parent() 返回的是 最近一级的父级元素 亲爸爸
console.log($('.son').parent());
// 2. 子
// (1) 亲儿子 children() 类似子代选择器 ul>li
// $(".nav").children("p").css("color", "red");
// (2) 可以选里面所有的孩子 包括儿子和孙子 find() 类似于后代选择器
$(".nav").find("p").css("color", "red");
})
</script>
jQuery设置样式
$('div').css('属性', '值')
jQuery排他思想
<body>
<button>排他</button>
<button>排他</button>
<button>排他</button>
<script>
$(function () {
// 隐式迭代给每一个button添加了点击事件
$('button').click(function () {
// 给当前点击的元素添加背景颜色
// console.log($(this).index()); //获取当前点击按钮的索引号
$(this).css('background', 'green');
// 当前点击的元素的所有兄弟元素去掉背景色
$(this).siblings('button').css('background', '')
})
})
</script>
jQuery隐式迭代
// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide(); // 页面中所有的div全部隐藏，不用循环操作
jQuery链式编程
<script src="./jquery.min.js"></script>
<script>
// 入口函数
$(function () {
$('button').click(function () {
// 给当前这个元素添加背景色同样给他的所有兄弟元素设置其他颜色
$(this)
.css('background', 'pink')
.css('color', 'green')
.siblings()
.css('background', 'green')
.css('color', 'pink');
// 给当前这个元素的的兄弟元素设置字体颜色
// $(this).siblings().css('color','green');
})
})
</script>
</head>
<body>
<button>排他</button>
<button>排他</button>
<button>排他</button>
</body>
jQuery操作css方法
//获取设置css样式
<script>
// 入口函数
$(function () {
//返回字符串,当前设置的宽度带单位
console.log($('div').css('width'));
// 多个属性样式的情况下的语法 .css({'key':'value','key':'value',...})
$('div').css({
// 如果是复合属性不加引号的时候必须采用驼峰命名,如果值不是数字就必须加引号
// 'background-color': 'gray',
backgroundColor: 'yellow',
width: '100px',
border: '1px solid black'
})
})
//设置删除切换类
// 1.添加类
$("div").addClass("current");
// 2.删除类
$("div").removeClass("current");
// 3.切换类
$("div").toggleClass("current");
</script>
jQuery效果
-
显示隐藏：show() / hide() / toggle() ;
-
划入画出：slideDown() / slideUp() / slideToggle() ;
-
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
-
自定义动画：animate() ;
注意：
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
jQuery为我们提供另一个方法，可以停止动画排队：stop() ;
显示隐藏: show() / hide() / toggle()
show/hide/toggle(speed,[easing],[fn])
1.参数都可以省略,无动画直接显示(隐藏)
2.speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值
3.[easing]:(Optional)用来切换效果.默认是会"swing"可用参数"linear"
4.[fn]:回调函数,在动画完成时执行的函数,每个元素执行一次
案例
<style>
div {
width: 150px;
height: 200px;
background-color: red;
}
</style>
<script src="./jquery.min.js"></script>
<script>
// 入口函数
$(function () {
// 点击第一个按钮以后盒子显示 时间是1秒
$('button').eq(0).click(function () {
$('div').show('1000'); //显示
})
// 点击第二个按钮以后盒子隐藏 时间是1秒
$('button').eq(1).click(function () {
$('div').hide('1000'); //隐藏
})
// 点击第三个按钮以后盒子切换显示 时间是1秒
$('button').eq(2).click(function () {
$('div').toggle('1000'); //切换
})
})
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
滑入滑出:slideDown() / slideUp() / slideToggle()
slideDown/ slideUp/ slideToggle(speed,[easing],[fn])
1.参数都可以省略
2.speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值
3.[easing]:(Optional)用来切换效果.默认是会"swing"可用参数"linear"
4.[fn]:回调函数,在动画完成时执行的函数,每个元素执行一次
案例
<style>
div {
width: 200px;
height: 200px;
background-color: red;
display: none;
}
</style>
<script src="./jquery.min.js"></script>
<script>
// 入口函数
$(function () {
// 上拉滑动
$('button:eq(0)').click(function () {
$('div').slideUp()
})
// 下拉滑动
$('button:eq(1)').click(function () {
$('div').slideDown(500)
})
// 切换滑动
$('button:eq(2)').click(function () {
$('div').slideToggle(500)
})
})
</script>
</head>
<body>
<button>上拉滑动</button>
<button>下拉滑动</button>
<button>切换滑动</button>
<div></div>
淡入淡出:fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
fadeIn/ fadeOut/ fadeToggle([speed,[easing],[fn]])
1.参数都可以省略
2.speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值
3.[easing]:(Optional)用来切换效果.默认是会"swing"可用参数"linear"
4.[fn]:回调函数,在动画完成时执行的函数,每个元素执行一次
fadeTo([speed,Opacity,[easing],[fn]])
1.Opacity:透明度,取值0~1之间(必须写)
2.speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值(必须写)
3.[easing]:(Optional)用来切换效果.默认是会"swing"可用参数"linear"
4.[fn]:回调函数,在动画完成时执行的函数,每个元素执行一次
案例
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 淡入 fadeIn()
$("div").fadeIn(1000);
})
$("button").eq(1).click(function() {
// 淡出 fadeOut()
$("div").fadeOut(1000);
})
$("button").eq(2).click(function() {
// 淡入淡出切换 fadeToggle()
$("div").fadeToggle(1000);
});
$("button").eq(3).click(function() {
// 修改透明度 fadeTo() 这个速度和透明度要必须写
$("div").fadeTo(1000, 0.5);
});
});
</script>
</body>
自定义动画:animate
animate(params,[speed],[easing],[fn])
1.params:想要更改的样式属性,以对象的形式传递,必须写.属性名可以不用带引号,如果是符合属性则需要采取驼峰命名法,例如backgroundColor
2.speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值
3.[easing]:(Optional)用来切换效果.默认是会"swing"可用参数"linear"
4.[fn]:回调函数,在动画完成时执行的函数,每个元素执行一次
案例
<body>
<button>动起来</button>
<div></div>
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
width: 500
}, 500);
})
})
</script>
</body>
停止动画排队:stop()
-
stop() 方法用于停止动画或效果。
-
stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。
总结: 每次使用动画之前，先调用 stop() ,在调用动画。
案例
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
ul li {
margin-top: 100px;
float: left;
margin-left: 10px;
width: 50px;
height: 50px;
background-color: green;
}
</style>
<script src="./jquery.min.js"></script>
<script>
// 入口函数
$(function () {
$('ul li').hover(function () {
$(this).stop().animate({
width: 100
}, 200)
}, function () {
$(this).stop().animate({
width: 50
}, 200)
})
})
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
jQuery属性操作
元素固有属性prop(),更适合操作表单属性：disabled / checked / selected 等。
//获取语法
prop('属性')
//设置语法
prop('属性','属性值)
元素自定义元素attr().用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。
//获取语法
attr('属性')//类似原生的getAttribute()
//设置语法
attr('属性','属性值)//类似原生的setAttribute()
// 注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）
数据缓存data()
//获取语法
data('name')//向被选元素获取数据
//设置语法
data('name','value')//向被选元素附加数据
// 注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。
案例
<script src="./jquery.min.js"></script>
<script>
// jq中的API一个参数数获取,两个参数是设置 input相关的(checked disabled selected)值是布尔值
// prop 固有属性(内置属性) 获取或设置
// attr 自定义属性 获取或设置
// data 忽略 ,不要用,容易出问题 出现获取不到jQuery的值
// 入口函数
$(function () {
// 获取 布尔值
console.log($('input').prop('checked'));
// 设置
$('input').prop('checked', false)
console.log($('div').attr('data-index'));
$('div').attr('data-index', '100')
})
</script>
</head>
<body>
<a href="www.baidu.com" title="Hello World">
你好
</a>
<input type="checkbox" name="" id="" >
<div index="1" data-index="2">div盒子</div>
<span data-a="a">123</span>
</body>
演示代码
<body>
<a href="http://www.itcast.cn" title="都挺好">都挺好</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>123</span>
<script>
$(function() {
//1. element.prop("属性名") 获取元素固有的属性值
console.log($("a").prop("href"));
$("a").prop("title", "我们都挺好");
$("input").change(function() {
console.log($(this).prop("checked"));
});
// console.log($("div").prop("index"));
// 2. 元素的自定义属性 我们通过 attr()
console.log($("div").attr("index"));
$("div").attr("index", 4);
console.log($("div").attr("data-index"));
// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
console.log($("div").data("index"));
})
</script>
</body>
jQuery文本属性
常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作.
1.普通元素内容html()(相当与原生的innerHTML)
html()//获取元素内容
html("内容")//设置元素的内容
1.普通元素内容text()(相当与原生的innerText)
text()//获取元素内容
text("内容")//设置元素的内容
1.普通元素内容val()(相当与原生的value)
val()//获取表单的值
val("内容")//设置表单的值
案例
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
// 1. 获取设置元素内容 html()
console.log($("div").html());
// $("div").html("123");
// 2. 获取设置元素文本内容 text()
console.log($("div").text());
$("div").text("123");
// 3. 获取设置表单值 val()
console.log($("input").val());
$("input").val("123");
</script>
</body>
jQuery元素操作
遍历元素
//1. each(方法遍历匹配的每一个元素。主要用DOM处理。each 每个
//2.里面的回调函数有2个参数: index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
//3.所以要想使用jquery方法，需要给这个dom元素转换为jquery对叙$(domEle)
$('div').each(function(index,domEle){...})
//1. S.each0方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
//2, 里面的国数有2个参数: index 是每个元素的索引号;element遍历内容
注意:此方法用于遍历jQuery对象中的每一项，回调函数中元素为DOM对象，想
$.each(object,function(index,element)(...))
案例
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
var sum = 0;
var arr = ["red", "green", "blue"];
// 1. each() 方法遍历元素
$("div").each(function(i, domEle) {
// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
// console.log(i);
// 回调函数第二个参数一定是 dom 元素对象，也是自己命名
// console.log(domEle); // 使用jQuery方法需要转换 $(domEle)
$(domEle).css("color", arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);
// 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
// $.each($("div"), function(i, ele) {
// console.log(i);
// console.log(ele);
// });
// $.each(arr, function(i, ele) {
// console.log(i);
// console.log(ele);
// })
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 输出的是 name age 属性名
console.log(ele); // 输出的是 andy 18 属性值
})
})
</script>
</body>
创建,添加,删除
1.创建
$("<li></i>");//动态的创建了-一个<li>
2.1.内部添加
element.append("内客")
//把内容放入匹配元素内部最后面，类似原生appendChild.element.prepend("内容")
element.prepend("内客")
//把内客放入匹配元素内部最前面。
2.2.外部添加
element.after("内容")//把内容放入目标元素前面,类似原生appendChild
element.before("内容") //把内容放入目标元素前面
2.2.1.内部添加元素，生成之后，它们是父子关系。
2.2.2.外部添加元素，生成之后，他们是兄弟关系，
3.删除元素
element.remove()// 删除匹配的元素(本身)
element.empty()// 删除匹配的元素集合中所有的子节点
element.html("")// 清空匹配的元素内容
3.1remove()删除元素本身
3.2.empt() 和html(")" 作用等价，都可以删除元表里面的内容，只不过html还可以设置内容
注意:以上只是元素的创建、添加、删除方法的常用方法，其他方法请参详API。
案例
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
// 1. 创建元素
var li = $("<li>我是后来创建的li</li>");
// 2. 添加元素
// 2.1 内部添加
// $("ul").append(li); 内部添加并且放到内容的最后面
$("ul").prepend(li); // 内部添加并且放到内容的最前面
// 2.2 外部添加
var div = $("<div>我是后妈生的</div>");
// $(".test").after(div);
$(".test").before(div);
// 3. 删除元素
// $("ul").remove(); 可以删除匹配的元素 自杀
// $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
$("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
})
</script>
</body>
jQuery尺寸操作
| 语法 | 用法 |
|---|---|
| width()/height() | 取得匹配元素宽度和高度的值 只算width/height |
| innerWidth()/innerHeight() | 取得匹配元素宽度和高度的值 包含padding |
| outerWidth()/outerHeight() | 取得匹配元素宽度和高度的值 包含padding border |
| outerWidth(true)/outerHeight(true) | 取得匹配元素宽度和高度的值 包含padding , border , margin |
以上参数为空,获取的是相应的值,返回值是数字型
如果参数为数字,修改的是相应的值
参数可以不必写单位
<body>
<div></div>
<script>
$(function() {
// 1. width() / height() 获取设置元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true));
})
</script>
</body>
jQuery位置操作
jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft()
-
语法 用法 offset() 设置或获取元素偏移 1.offset()方法设置或返回被选元素相对于文档的便宜坐标,跟父级没有关系2.该方法有两个属性left,top.offset().top(left)获取的是距离文档顶部(左侧)的距离3.可以设置元素的偏移:offset({top:10,left:30}) position() 获取元素偏移 1.position()方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级没有定位,则以文档为准2.该方法有两个属性left,top.positiont().top(left)获取的是距离带有定位的父级顶部(左侧)的距离3.该方法只能获取 scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧 1.scrollTop()/scrollLeft()方法设置或返回被选元素被卷去的头部2.不跟参数是获取,参数为不带单位的数字则是被卷去的头部 <body> <div class="father"> <div class="son"></div> </div> <div class="back">返回顶部</div> <div class="container"></div> <script> $(function() { // 1. 获取设置距离文档的位置（偏移） offset console.log($(".son").offset()); console.log($(".son").offset().top); // $(".son").offset({ // top: 200, // left: 200 // }); // 2. 获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级，则以文档为准 // 这个方法只能获取不能设置偏移 console.log($(".son").position()); // $(".son").position({ // top: 200, // left: 200 // }); // 3. 被卷去的头部 $(document).scrollTop(100); // 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft() // 页面滚动事件 var boxTop = $(".container").offset().top; $(window).scroll(function() { // console.log(11); console.log($(document).scrollTop()); if ($(document).scrollTop() >= boxTop) { $(".back").fadeIn(); } else { $(".back").fadeOut(); } }); // 返回顶部 $(".back").click(function() { // $(document).scrollTop(0); $("body, html").stop().animate({ scrollTop: 0 }); // $(document).stop().animate({ // scrollTop: 0 // }); 不能是文档而是 html和body元素做动画 }) }) </script> </body>jQuery事件注册 -
优点: 操作简单，且不用担心事件覆盖等问题。
-
缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。
语法
element.事件(function(){}) $('div').click(function(){ //事件处理程序 })案例
<body> <div></div> <script> $(function() { // 1. 单个事件注册 $("div").click(function() { $(this).css("background", "purple"); }); $("div").mouseenter(function() { $(this).css("background", "skyblue"); }); }) </script> </body>jQuery事件处理
-
on(): 用于事件绑定，目前最好用的事件绑定方法
-
off(): 事件解绑
-
trigger() / triggerHandler(): 事件触发
事件处理on()绑定事件
//优点1:可以绑定多个事件,多个处理事件处理程序 $('div').on({ 'click', function () { console.log('456');}, 'mouseleave', function () {console.log('789');},}) // 优点2: on可以实现事件委派/事件委托 // 事件委托:原来加载子元素身上的事件绑定在父元素身上,就是把事件委派给父元素 $("ul").on("click", "li", function () { console.log(this); //this指向的是li console.log($(this).index()); }) // 优点3: on可以给动态添加的元素绑定事件 var li = '<li>事件委派/事件委托</li>'; $('ol').append(li) $('ol').on("click", "li", function () { console.log(this); //this指向的是li console.log($(this).index()); })事件处理off()解绑事件
$(function () { /* 优点: 操作简单，且不用担心事件覆盖等问题。 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。 */ // 给同一个元素绑定多个事件 链式编程 $('div').on('click', function () { console.log('456'); }) .on('mouseleave', function () { console.log('789'); }) //给同一个元素绑定多个事件,这多喝事件做的事情是一样的的(回调函数是一样) $('div').on('mouseenter mouseleave', function () { $(this).toggleClass('current') }) // 优点2: on可以实现事件委派/事件委托 // 事件委托:原来加载子元素身上的事件绑定在父元素身上,就是把事件委派给父元素 $("ul").on("click", "li", function () { console.log(this); //this指向的是li console.log($(this).index()); }) // 优点3: on可以给动态添加的元素绑定事件 var li = '<li>事件委派/事件委托</li>'; $('ol').append(li) $('ol').on("click", "li", function () { console.log(this); //this指向的是li console.log($(this).index()); }) $('div').off(' mouseleave') $('ul').off('click') //不能写到li //如果有的事件只想触发一次,可以使用one()来绑定事件 // 只能执行一次 $("ul").one("click", "li", function () { console.log(this); //this指向的是li console.log($(this).index()); }) }) </script> </head> <body> <div></div> <ul> <li>事件委派/事件委托</li> <li>事件委派/事件委托</li> <li>事件委派/事件委托</li> <li>事件委派/事件委托</li> <li>事件委派/事件委托</li> </ul> <ol></ol> 事件处理 trigger() 自动触发事件
自动触发事件 trigger() 和 triggerHandler() ;
语法
//第一种 tigger() element.click()//第一种简写形式 element.tigger('type')//第二种自动触发模式 //第二种 tiggerHandler() 不会触发元素的默认行为 element.tiggerHandler(type) //第三种自动触发模式案例
<style> div { width: 100px; height: 100px; background-color: pink; } </style> <script src="jquery.min.js"></script> <script> $(function () { $("div").on("click", function () { alert(11); }); // 自动触发事件 // 1. 元素.事件() // $("div").click();会触发元素的默认行为 // 2. 元素.trigger("事件") // $("div").trigger("click");会触发元素的默认行为 $("input").trigger("focus"); // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为 $("div").triggerHandler("click"); $("input").on("focus", function () { $(this).val("你好吗"); }); // $("input").triggerHandler("focus"); $('a').triggerHandler() }); </script> </head> <body> <div></div> <input type="text"> <a href="www.baidu.com"> 百度一下</a> </body>jQuery事件对象
语法
element.on(events,[selector],function(event){}) //阻止默认行为:event.preventDefault() 或者 return false //阻止冒泡: event.stopPropagation()案例
<body> <div></div> <script> $(function() { $(document).on("click", function() { console.log("点击了document"); }) $("div").on("click", function(event) { // console.log(event); console.log("点击了div"); event.stopPropagation(); }) }) </script> </body>jQuery拷贝对象
语法
$.extend([deep],target,object1,[objectN])
-
deep:如果设为true为深拷贝，默认为false 浅拷贝
-
target:要拷贝的目标对象
-
object1:待拷贝到第一个对象的对象。
-
objectN:待拷贝到第N个对象的对象。
5.浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。6.深拷贝，前面加true,完全克隆，修改目标对象不会影洞被拷贝对象。
案例
<script> $(function() { // 1.合并数据 var targetObj = {}; var obj = { id: 1, name: "andy" }; // $.extend(target, obj); $.extend(targetObj, obj); console.log(targetObj); // 2. 会覆盖 targetObj 里面原来的数据 var targetObj = { id: 0 }; var obj = { id: 1, name: "andy" }; // $.extend(target, obj); $.extend(targetObj, obj); console.log(targetObj); }) </script> -
-