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下的所有的lisiblings(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/heightinnerWidth()/innerHeight()取得匹配元素宽度和高度的值 包含paddingouterWidth()/outerHeight()取得匹配元素宽度和高度的值 包含padding borderouterWidth(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>
