前端(JQuery语言）
一、jQuery的优势
• jQuery是一个轻量级的、兼容多浏览器的JavaScript库
• 链式表达式：jQuery的链式操作可以把多个操作写在一行代码里，更加简洁
• Ajax操作支持：jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信
二、jQuery的引入方式
注意： 直接下载文件到本地（最常用），从本地中导入 使用文件的网络地址 示例： <script src="jquery-3.4.1.js"></script> // 本地导入 <<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script> // 网络地址导入(bootcdn)
三、jQuery对象
注意： 通过jQuery包装DOM对象后产生的对象 jQuery对象是 jQuery独有的(jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法) 通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象 jQuery与dom语法对比： var $variable = jQuery对像 // 声明一个jQuery对象变量的时候在变量名前面加上$ var variable = DOM对象 jQuery与dom转换： $variable[0] // jQuery对象转成DOM对象（通过一个jQuery对象+[0]索引零，就变成了DOM对象，就可以使用JS的代码方法了) $(DOM对象) // DOM对象转换成jQuery对象($(DOM对象)，通过$符号包裹一下就可以了) jQuery与dom示例对比： $("#i1").html(); // jQuery对象可以使用jQuery的方法 $("#i1")[0].innerHTML; // DOM对象使用DOM的方法
$(selector).action() // $(selector)找到某个标签，.action()通过这个标签对象调用它的一些方法
四、jQuery基础语法( 查找标签)
• html语法： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { height: 100px; width: 100px; background-color: red; } </style> </head> <body> <script src="jquery-3.4.1.js"></script> <div id="d1" class="c1"> <div class="c3"> 儿子标签 <div class="c4">孙子标签1</div> <div class="c5">孙子标签2</div> </div> </div> <p id="d4">毗邻标签</p> <div id="d2" class="c1"></div> <div id="d3" class="c2"></div> </body> </html>
• id选择器： 语法： $("#id") // 不管找什么标签，用什么选择器，都必须要写$("") 示例： $("#d1"); //获取到id=d1的所有标签 • 标签选择器： 语法： $("tagName") // 通过标签名字查找对应标签 示例： $("div"); // 获取所有div标签 • class选择器： 语法： $(".className") // 通过标签的类名查找对应标签 示例： $(".c1"); // 获取所有class=c1的标签 • 配合使用： 语法： $("div.c1") // 找到有class=c1类的div标签 示例： $("div.c1"); // 找div标签，条件：类名为c1 • 所有元素选择器： 语法： $("*") // html所有标签有效，查找所有标签 • 组合选择器： 语法： $("#id, .className, tagName") // 通过组合(id，类名，标签名)查找标签 示例： $("#d1, .c2"); // 查找id=d1，class=c2的所有标签
五、jQuery基础语法(层级选择器)
注意：x和y可以为任意选择器(（同css）) 语法： $("x y"); // x的所有后代y（子子孙孙） $("x > y"); // x的所有儿子y（儿子） $("x + y"); // 找到所有紧挨在x后面的y $("x ~ y"); // x之后所有的兄弟y 示例： $(".c1 div"); // 找到class=c1标签下的所有div标签 $(".c1 > div"); // 找到class=c1标签下所有儿子标签(第二层子标签)div标签 $(".c1 + p"); // 找到class=c1标签下的毗邻标签p $(".c1 + div"); // 找到class=c1标签下的所有div标签
六、jQuery基础语法(基本筛选器)
选择之后进行过滤
html文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="jquery-3.4.1.js"></script> <div> <ul> <li id="d1">1</li> <li id="d2">2 <p>222</p> <h1>h标签</h1> </li> <li>3</li> <li id="d3">4</li> <li class="c1">5</li> </ul> </div> <div class="c2"> <p>hello</p> </div> </body> </html>
语法： :first // 第一个 :last // 最后一个 :eq(index) // 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index) // 匹配所有大于给定索引值的元素 :lt(index) // 匹配所有小于给定索引值的元素 :not(元素选择器) // 移除所有满足not条件的标签 :has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 示例： $("ul li"); // 查找ul标签下的所有li标签 $("li:first"); // 找到第一个li标签 $("li:last"); // 找到最后一个li标签 $("li:eq(2)"); // 找到下标索引为2的标签 $("li:even"); // 找到为偶数的所有标签 $("li:odd"); // 找到为奇数的所有标签 $("li:gt(2)"); // 找到下标索引大于2的所有标签 $("li:lt(2)"); // 找到下标索引小于2的所有标签 $("li:odd"); // 找到为奇数的所有标签 $("div:has(h1)") // 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来 $("div:has(.c1)") // 找到所有后代中有c1样式类（类属性class='c1'）的div标签 $("li:not(.c1)") // 找到所有不包含c1样式类的li标签 $("li:not(:has(h1))") // 找到所有后代中不含h1标签的li标签
七、jQuery基础语法( 属性选择器)
语法： [attribute] [attribute=value] // 属性等于 [attribute!=value] // 属性不等于 示例： // 示例,多用于input标签 <input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']");// 取到checkbox类型的input标签 $("input[type!='text']");// 取到类型不是text的input标签
八、jQuery基础语法(表单筛选器)
多用于找form表单里面出现的input标签，当然通过属性选择器找肯定也是没问题的，这样就是写着简单一些
html文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="jquery-3.4.1.js"></script> <div class="c1"> <form action=""> <input type="text"> <input type="text" disabled> <input type="checkbox" name="hobby">篮球 <input type="checkbox" name="hobby" checked>足球 </form> </div> </body> </html>
语法： :text // 单行输入文本 :password // 密码输入框 :file // 文本选择框 :radio // 单选框 :checkbox // 复选框 :submit // 提交按钮 :reset // 重置按钮 :button // 普通按钮 表单对象属性: :enabled // 使能 :disabled // 失能 :checked // 单选&多选默认选中 :selected // select标签默认选中 示例： $("input:text") // 找到所有的text $("input:checked"); // 找到所有的checked $("input:disabled") // 找到不可用的input标签
九、jQuery基础语法(筛选器方法）
html文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="jquery-3.4.1.js"></script> <div class="c3"> <div class="c2">标签1</div> <div class="c2">标签1</div> <div class="c1">标签2</div> </div> </body> </html>
注意： 选择器或者筛选器选择出来的都是对象，而筛选器方法其实就是通过对象来调用一个进一步过滤作用的方法 示例：查找下一个元素 $("#id").next() // 找到下一个元素 $("#id").nextAll() // 找后面的所有元素 $("#id").nextUntil("#i2") // 直到找到id为i2的标签就结束查找，不包含它 示例：查找上一个元素 $("#id").prev() // 找到上一个元素 $("#id").prevAll() // 找前面的所有元素 $("#id").prevUntil("#i2") // 直到找到id为i2的标签就结束查找，不包含它 示例：父亲元素 $("#id").parent() // 查找当前元素的父辈元素 $("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到） $("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。 示例：儿子和兄弟元素 $("#id").children();// 儿子们 $("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选 示例：查找元素 注意：搜索所有与指定表达式匹配的元素 $("div").find("p") // 找到div标签下的所有p标签元素(等价于$("div p")) 示例：筛选元素 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式 $("div").filter(".c1") // 从结果集中过滤出有c1样式类的，从所有的div标签中找出有class='c1'属性的div(等价于:过滤 $("div.c1")的标签) 补充： .first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素 示例： $("div").first() // 第一个div标签 $("div").last() // 最后一个div标签 $("div").not(".c2") // 找到除class=c2的所有div标签 $("div").has(".c2") // 找到class=c2的所有div标签 $("div").eq(2) // 找到索引为2的div标签
十、操作标签(class操作)
• 样式操作： 注意： 样式类（添加删除class类的值来修改样式） 语法： addClass(); // 添加指定的CSS类名。 removeClass(); // 移除指定的CSS类名。 hasClass(); // 判断样式存不存在 toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。 示例： $("div").addClass("c1"); // 在div标签中添加一个class= c1 $("div").removeClass("c1"); // 在div标签中删除一个c1类 $("div").hasClass("c1"); // 在div标签中是否存在c1，存在：true，不存在：false $("div").toggleClass("c1"); // 如果div标签中有c1类有就移除，如果没有就添加。
十一、操作标签(修改样式)
语法： css("属性", "值"); // 设置单个样式 css({"属性1"："值1"，"属性2"："值2"}); // 设置多个样式 示例： css("color","red") //DOM操作：tag.style.color="red" $("p").css("color", "red"); //将所有p标签的字体设置为红色 $("div").css({"color":"yellow", "width":"300px"}); //将所有div标签的字体设置为红色,边框宽度为300px
十二、位置操作
注意： .offset()方法：允许我们检索一个元素相对于文档（document）的当前位置 .position()方法： 获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离 语法： offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置 position() // 获取匹配元素相对父元素的偏移，不能设置位置 $(window).scrollTop() //滚轮向下移动的距离 $(window).scrollLeft() //滚轮向左移动的距离 示例： $(".c1").offset(); // 获取当前标签位置 $(".c1").offset({top:100, left:100}); // 当前标签相对与dom文档偏移位置 $(".c1").position(); // 获取相对于父级标签的偏移位置
$(window).scroll(function(e){$(window).scrollTop()}) // 滚轮事件scroll
$(window).scrollTop(); // $(window):dom对象转化程jquery对象，获取当前鼠标向下移动的位置
$(window).scrollTop(100); // 设置鼠标下滑移动的位置(100px)，也叫屏幕溢出位置
十三、尺寸属性
语法： height() //盒子模型content的大小，就是我们设置的标签的高度和宽度 width() innerHeight() //内容content高度 + 两个padding的高度 innerWidth() outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度，不包括margin的高度，因为margin不是标签的，是标签和标签之间的距离 outerWidth() 示例： $(".c1").height(); // 当前标签的content高度 $(".c1").width(); // 当前标签的content宽度 $(".c1").innerHeight(); // 当前标签的content高度 + 2* padding高度 $(".c1").innerWidth(); // 当前标签的content宽度 + 2* padding宽度 $(".c1").outerHeight(); // 当前标签的content高度 + 2* padding高度 + 2* border高度 $(".c1").outerWidth(); // 当前标签的content宽度 + 2* padding宽度 + 2* border宽度
十四、文本操作
html文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="c1"> <input type="text"> <input type="checkbox" value="basketball" name="hobby">篮球 <input type="checkbox" value="football" name="hobby">足球 <select id="s1"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> </select> </div> <script src="jquery-3.4.1.js"></script> <script> </script> </body> </html>
语法： HTML代码： html() // 取得第一个匹配元素的html内容，包含标签内容 html(val) // 设置所有匹配元素的html内容，识别标签，能够表现出标签的效果 文本值： text() // 取得所有匹配元素的内容，只有文本内容，没有标签 text(val) // 设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去 示例： $(".c1").text("123") // 设置当前标签的文本内容为：123 $(".c1").text(); // 获取当前标签的文本内容 $(".c1").html("123"); // 设置当前标签的文本内容为：123 $(".c1").html("<a>百度</a>"); // 通过字符串形式创建html标签 $(".c1").html(); // 获取当前标签内容："<a>百度</a>"，此处是一个标签 注意： radio&checkbox获取值操作，只能获取到第一标签的值，需要循环才能获取所有的值 checked能选中所有select和checkbox所有的标签 其他值操作：例如input&select&textarea操作 val() // 取得第一个匹配元素的当前值 val(val) // 设置所有匹配元素的值 val([val1, val2]) // 设置多选的checkbox、多选select的值 示例： text标签： $(":text").val(); // 获取当前input标签的value值 $(":text").val("abc"); // 设置当前input标签的值为："abc" checkbox标签： $("input[name = 'hobby']").val(["football"]); // $("input[name = hobby]").val(["football"]); 相同效果 $("input[name = hobby]").val(["basketball","football"]); // 设置多个选择 $(":checked:checked").val(); // 这样的方式获取值，只能获取到第一值，需要通过循环获取值 radio&checkbox获取值： for(var i=0;i<$(':checkbox:checked').length;i++){console.log($(":checkbox:checked").eq(i).val())} // 通过for循环获取选择的值 select标签： $("#s1").val(); // 获取当前select标签的value值(也可获取多个值) $("#s1").val("1"); // 选中value="1"的标签
$("#s1").options[this.selectedIndex].innerText; // 根据索引取值
十五、属性操作
注意： 在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。 语法： 用于自带属性等或自定义属性 attr(attrName) // 返回第一个匹配元素的属性值 attr(attrName, attrValue) // 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值 removeAttr(attrName) // 从匹配的元素中删除一个属性 用于checkbox和radio： prop() // 获取属性 示例： $(".c1").attr("age","18"); // 添加一个类属性:age="18" $(":checkbox").attr("checked","checked"); // checkbox添加checked属性 $(':checkbox').eq(0).attr('checked','checked'); // 指定第一个标签添加checked属性 $(".c1").attr("age"); // 查看类属性:age $('.c1').attr({'k1':'v1','k2':'v2'}) // 添加多个类属性 $('.c1').removeAttr('age') // 删除类属性：age prop示例： $(':checkbox').eq(0).prop('checked'); // 标签属性存在则返回true，否则为false $(':checkbox').eq(0).prop('checked',true); // 添加标签的checked属性(false为取消属性) $(':radio').eq(0).prop('checked',true); // radio标签 扩展： prop和attr的区别： attr全称attribute(属性) prop全称property(属性) 虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。 prop不支持获取标签的自定义属性 示例： <input type="checkbox" checked id="i1" value="1" me="自定义属性"> $("#i1").attr("me") // "自定义属性" $("#i1").prop("me") // undefined 总结一下： 1.对于标签上有的能看到的属性和自定义属性都用attr 2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
十六、文档属性
• 添加到指定元素内部的后面： 语法： $(A).append(B) // 把B标签追加到A标签内部子标签的后面(append(a)，例子(标签的字符串拼接)：a="<a>"+"数据”+"</a>") $(A).appendTo(B) // 把A标签追加到B标签内部子标签的后面 示例： var a = document.createElement("a"); // 创建一个a标签 $(a).attr("href", "http://www.baidu.com"); // 添加一个href属性 $(a).text("百度") // 添加文本属性 $('#d1').append(a) // 添加标签a到标签#d1的标签最后面 $(a).appendTo('#d1') // 同上，写法不同而已 • 添加到指定元素内部的前面： 语法： $(A).prepend(B) // 把B标签追加到A标签内部子标签的前面 $(A).prependTo(B) // 把B标签追加到A标签内部子标签的前面 示例： $('#d1').append(a) // 添加标签a到标签#d1的标签最前面 $(a).appendTo('#d1') // 同上，写法不同而已 • 添加到指定元素外部的后面： 语法： $(A).after(B) // 把B标签追加到A标签外部毗邻位置 $(A).insertAfter(B) // 把A标签追加到B标签外部毗邻位置 示例： $("#d1").after(a); // 把a标签放在#d1标签后面(同一级) ("#d1").insertAfter(a); // 把a标签放在#d1标签前面(同一级) • 添加到指定元素外部的前面： 语法： $(A).before(B) // 把B放到A的前面 $(A).insertBefore(B) // 把A放到B的前面 示例: $("#d1").before(a); // 把a标签放在#d1标签前面(同一级) ("#d1").insertBefore(a); // 把a标签放在#d1标签后面(同一级) • 移除和清空元素: 语法： remove() // 从DOM中删除所有匹配的元素。 empty() // 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在 示例： $("#d1").empty(); // 清空匹配元素下的所有子元素，匹配元素保留 $("#d1").remove(); // 删除匹配元素及所有子元素 • 替换： 语法： $(A).replaceWith(B) // B标签替换掉A标签 $(A).replaceAll(B) // A标签替换掉B标签 示例： $('#d1').replaceWith(a) // 用a标签替换前面的匹配的元素标签#d1 $(a).replaceAll("#d1"); // 用a标签替换前面的匹配的元素标签#d1
十七、克隆
语法：
clone() // 参数
示例： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>克隆</title> <style> #b1 { background-color: deeppink; padding: 5px; color: white; margin: 5px; } #b2 { background-color: dodgerblue; padding: 5px; color: white; margin: 5px; } </style> </head> <body> <button id="b1">屠龙宝刀，点击就送</button> <hr> <button id="b2">屠龙宝刀，点击就送</button> <script src="jquery-3.4.1.js"></script> <script> // clone方法不加参数true，克隆标签但不克隆标签带的事件 $("#b1").on("click", function () { $(this).clone().insertAfter(this); }); // clone方法加参数true，克隆标签并且克隆标签带的事件 $("#b2").on("click", function () { $(this).clone(true).insertAfter(this); }); </script> </body> </html>
十八 、事件
18.1 事件绑定:
注意： input事件只能通过on方法绑定 事件：ev keydown和keyup事件（键盘按键按下和抬起的事件，还有一些其他的key事件）组合示例：按住shift实现批量操作 语法： .on( events [, selector ],function(){}) 1.events： 事件 2.selector: 选择器（可选的） 3.function: 事件处理函数 方法： click(function(){...}) // 鼠标点击事件 hover(function(){...}) // 光标选中 blur(function(){...}) // 取消光标选中 focus(function(){...}) // 聚焦事件 input等 change(function(){...}) //内容发生变化，input，select等 keyup(function(){...}) // 键盘事件 mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象 input事件：只要input框里面的值发生变化就触发某个事件，注意input事件不能直接绑定，必须用on绑定才行($('#d1').on('input',function(){}))
• 鼠标点击事件(click)： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: green; height: 100px; width: 100px; } </style> </head> <body> <div class="c1"> </div> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> // 标签对象.onclick = function $('.c1').click(function () { // this是dom对象 $(this).css('background-color','pink'); }) </script> </body> </html>
• hover事件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ border: 1px solid red; height: 200px; width: 200px; } .c2{ background-color: yellow; } </style> </head> <body> <div class="c1"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> $('.c1').hover( function () { $(this).addClass('c2') // 鼠标进入事件 }, function () { $(this).removeClass('c2') // 鼠标离开事件 } ); </script> </body> </html>
• 光标的聚焦和失去焦点事件示例（input标签）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c2 { background-color: yellow; } </style> </head> <body> 用户名：<input type="text" id="username"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> $('#username').focus(function () { // 获取焦点后触发的事件 $(this).addClass('c2') }); $('#username').blur(function () { // 失去焦点后触发的事件 $(this).removeClass('c2') }); </script> </body> </html>
• 内容改变事件(change)示例(select标签)： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ border: 1px solid red; height: 200px; width: 200px; } .c3{ background-color: red; } </style> </head> <body> <div class="c1"></div> <select name="" id="s1"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> </select> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> // 选择的内容出现变化，触发change事件 $('#s1').change(function () { $('.c1').toggleClass('c3') }); </script> </body> </html>
• 键盘事件(keydown + keyup)示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> // 键盘按下事件 $(window).keydown(function (e) { // console.log('xxx') // console.log(e.keyCode); // 获取键盘的值 if (e.keyCode === 16){ console.log('按下了shift键') } }); // 键盘放开事件 $(window).keyup(function (e) { // console.log('xxx') // console.log(e.keyCode); if (e.keyCode === 16){ console.log('松开了shift键') } }); </script> </body> </html>
• input输入事件： 注意：input事件只能on绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 内容：<input type="text" id="i1"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> // 绑定事件的第二种方式,input事件只能on绑定 $('#i1').on('input',function () { console.log($(this).val()); // 获取输入框(input)的值 }) </script> </body> </html>
• 鼠标事件（mouseover + mouseenter + mouseout）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c4{ border: 1px solid red; height: 200px; width: 200px; } .c5{ background-color: blue; height: 60px; width: 60px; } </style> </head> <body> <div class="c4"> <div class="c5"> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> // mouseenter事件： // $('.c4').mouseenter(function () { // console.log('进来了') // }); // mouseover事件： $('.c4').mouseover(function () { console.log('进来了') }); // mouseout事件： // $('.c4').mouseout(function () { // console.log('出去了') // }) </script> </body> </html>
• scroll元素滚动事件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { background-color: #3f89ec; width: auto; height: 600px; } .div-1 { background-color: #B9B5A8; } .div-2 { background-color: brown; } .div-3 { background-color: #b6976b; } .div-4 { background-color: #2b669a; } #btn { position: fixed; left: 20px; bottom: 20px; } .hide { display: none; } </style> </head> <body> <span>顶部位置</span> <div class="c1"></div> <div class="c1 div-1"></div> <div class="c1 div-2"></div> <div class="c1 div-3"></div> <div class="c1 div-4"></div> <button id="btn">回到顶部</button> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> $(window).scroll(function () { // 元素滚动事件scroll if($(window).scrollTop() > 1000) {$("#btn").removeClass("hide")} else { {$("#btn").addClass("hide")} } }) $("#btn").click(function () { $(window).scrollTop(0); // 鼠标移动位置设置到顶部 }) </script> </body> </html>
18.2 移除事件:
注意：off() 方法移除用 .on()绑定的事件处理程序。 语法： .off( events [, selector ][,function(){}]) 1.events： 事件 2.selector: 选择器（可选的） 3.function: 事件处理函数 示例： $("li").off("click")； // 移除li标签的click事件
实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="c1"> </div> <script src="jquery-3.4.1.js"></script> <script> // 创建.c1标签的click事件 $(".c1").click(function () { alert("我是父标签"); }); // 移除.c1标签的click事件，此时设置的事件无效 $(".c1").off("click"); </script> </body> </html>
18.3 事件冒泡与解决事件冒泡：
事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。） • 阻止后续事件执行(解决事件冒泡)： 1. return false; // 常见阻止表单提交等，如果input标签里面的值为空就组织它提交，就可以使用这两种方法 2. e.stopPropagation(); // 用事件对象的这个方法就能阻止冒泡 （e:事件）
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1, .c2 { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="c1"> <div class="c2"></div> </div> <script src="jquery-3.4.1.js"></script> <script> // 父级标签设置click事件 $(".c1").click(function () { alert("我是父标签"); }) // 子标签设置click事件，点击子标签事件后，因为事件冒泡机制，点击设置的click事件，事件发生会从子标签内部、 // 一层一层往父级标签依次判断，有click事件都会执行，造成事件冒泡机制 $(".c2").click(function (e) { alert("我是子标签"); // 方式一: // return false // 阻止事件冒泡 // 方式二: e.stopPropagation(); // 通过用事件对象的方法来阻止事件冒泡 }) </script> </body> </html>
18.4 事件委托：
• 注意： 事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件 示例： //中间的参数是个选择器，前面这个$('table')是父级标签选择器，选择的是父级标签，意思就是将子标签（子子孙孙）的点击事件委托给了父级标签 //但是这里注意一点，你console.log(this)；你会发现this还是触发事件的那个子标签 $("table").on("click", ".delete", function () {}) // table:祖先标签，delete:子孙标签
实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="c1"> <button id="btn">点我</button> </div> <script src="jquery-3.4.1.js"></script> <script> // 父级标签设置click事件，子标签通过事件委托，让父级标签事件帮子标签响应事件 $(".c1").on("click", "#btn", function () { alert("我是子标签button按钮") }) </script> </body> </html>
十九、页面载入(ready)
注意： 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数，极大地提高web应用程序的响应速度 ready与window.onload区别： ready特点： jQuery的这个入口函数在文档加载完就触发，且不存在覆盖问题(建议使用) window.onload特点： 1、window.onload会等到页面上的文档、图片、视频等所有资源都加载完才执行里面的js代码，导致有些效果的加载比较慢 2、onload()函数存在覆盖现象(多个文件导入时，后引入的文件会把前面引入的文件的window.onload里面的js代码全部覆盖掉，那么第一个文件的js代码就失去了效果) 语法： $(document).ready(function(){}) // 方式一 $(function(){}) // 方式二(简写)
实例： html文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1,.c3{ width: 100px; height: 100px; background-color: red; } .c3 { background-color: deeppink; } .c2{ background-color: black; } </style> </head> <body> <div class="c1"></div> <div class="c3"></div> <script src="jquery-3.4.1.js"></script> <script src="页面载入.js"></script> <script> // 页面载入 $(function () { $('.c1').click(function () { $(this).addClass('c2'); }); }); </script> </body> </html> js文件： $(function () { $('.c3').click(function () { $(this).addClass('c2'); }); });
二十、动画效果
语法： // 基本 show([s,[e],[fn]]) //show(5000),就是5秒之后显示出来这个标签，并且有一个动画效果，（搞个img图片看看效果），后面两个参数先不用管 hide([s,[e],[fn]]) // 隐藏 toggle([s],[e],[fn]) //这几个toggle的意思就是你原来是什么效果，我就反着来 示例： $('.c1').show() // 马上显示 $('.c1').show(2000) // 2s后显示标签 $('.c1').hide() $('.c1').hide(2000) // 滑动（拉窗帘一样） slideDown([s],[e],[fn]) //使用的时候别忘了给标签设置一个高度和宽度，其实就是控制你的标签高度，如果你写$('#di').slideUp(5000)；意思就是5秒内把你的高度变为0 //还有如果你直接操作的是img标签和操作img标签的父级标签，两个的效果是不同的 slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) 示例： $('.c1').slideDown() // 马上滑动显示 $('.c1').slideDown(2000) // 2s后滑动显示标签 $('.c1').slideUp() $('.c1').slideUp(2000) // 淡入淡出（控制透明度） fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) o参数是透明度，0-1的区间，意思是淡入或者淡出到一个多大的透明读 fadeToggle([s,[e],[fn]]) 示例： $('.c1').fadeTo(2000, 0.5) // 2s后淡入，0.5的透明度 // 自定义（了解即可） animate(p,[s],[e],[fn])
二十一、each方法
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。 语法： jQuery.each(collection, callback(indexInArray, valueOfElement))： 示例一： 描述：循环迭代一个数组(array): li =[10,20,30,40] $.each(li,function(i, v){ console.log(i, v); // function里面可以接受两个参数，i是索引，v是每次循环的具体元素。 if(i === 2) { return;} // 判断条件：退出本次循环(return;),退出整个循环(return false;),此处没有continue和break语法 }) 示例二： 描述：循环自定义对象： var d1 = {'name':'chao','age':18} $.each(d1,function(k,v){console.log(k,v)}) 示例三： 描述：遍历一个jQuery对象，为每个匹配元素执行一个函数 .each(function(index, Element))： // 语法 $("li").each(function(){ $(this).addClass("c1"); // 为每一个li标签添加foo }); $(".u1 li").each(function(k,v) {console.log(k,v); if(k===2){return false;}}); // 遍历li标签，直到第三个结束循环
二十二、data()方法
描述：任意jQuery对象都有data方法，可以保存任意值，可以用来代替全局变量 语法： .data(key, value) // 设置值 .data(key) // 取值，没有的话返回undefined .removeData(key) // 移除存放在元素上的数据，不加key参数表示移除所有保存的数据 示例： $("div").data("k",100); // 给所有div标签都保存一个名为k，值为100 $("div").data("k"); // 返回第一个div标签中保存的"k"的值 $("div").removeData("k"); // 移除元素上存放k对应的数据 $('tbody')).data('select',$('select')) // 保存一个select标签
二十三、插件(创建扩展方法)
描述： jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。 语法： jQuery.extend(object) // 给jQuery对象添加一个方法 jQuery.fn.extend(object) // 给任意的jQuery标签对象添加一个方法
示例(jQuery对象方法)： <script> jQuery.extend({ //$.extend({}) min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function max:function(a, b){return a > b ? a : b;} }); jQuery.min(2,3); // => 2 jQuery.max(4,5); // => 5 </script>
示例(jQuery对象的标签方法)： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="jquery-3.4.1.js"></script> <div class="c1"> <form action=""> <input type="checkbox" checked>篮球 <input type="checkbox">足球 <input type="checkbox">羽毛球 </form> </div> <script> $.fn.extend({ check:function () { return this.each(function () { this.checked = true; }); }, uncheck:function () { return this.each(function () { this.checked = false; }); } }); // jQuery对象可以使用新添加的check()方法了。 $("input[type='checkbox']").check(); // 选中 $("input[type='checkbox']").uncheck(); // 取消选中 </script> </body> </html>
https://www.cnblogs.com/WiseAdministrator/
