首页 > 代码库 > 前端基础之JQuery - day15
前端基础之JQuery - day15
写在前面
上课第15天，打卡：
张国臂掖，以通西域；
############ 课上简书 ###########http://jquery.cuishifeng.cn/index.htmlJQuery对象： Jquery.方法 $.方法# Jquery和$是完全一样的JQuery的方法只能JQuery对象调用JS的方法只能JS使用变量命名：JS var $variable = jQuery 对象JQuery var variable = DOM 对象JQuery语法：$(selector).action() selector 选择器 action 对标签的操作JQuery的选择器(selector) 基本选择器 层级选择器 ...$(".p1").css("color","red");JQuery 选择器选到的是一个集合对象(一组标签)，后面的操作会循环加载；但是JS不支持，JS必须自己写循环处理；JQuery支持链式操作JQuery固有属性 --> prop input type="checked" selected=selected自定义的属性 --> attrclone
参考：http://www.cnblogs.com/yuanchenqi/articles/6936986.html
一、JQuery对象
jQuery 对象就是通过jQuery包装DOM对象后产生的对象;jQuery 对象是 jQuery 独有的.;如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错 约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. var $variable = jQuery 对象var variable = DOM 对象$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
jquery的基础语法：$(selector).action() 参考：http://jquery.cuishifeng.cn/
二、JQuery查找元素
1.选择器
基本选择器$("*") $("#id") $(".class") $("element") $(".class,p,div")层级选择器$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")基本筛选器$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")属性选择器$(‘[id="div1"]‘) $(‘["alex="sb"][id]‘)表单选择器 $("[type=‘text‘]") ---可简写成-->$(":text") // 注意只适用于input标签 : $("input:checked")<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--首先引入Jquery库--> <script src="http://www.mamicode.com/jquery-3.1.1.js"></script></head><body><!--<span>span</span>--><!--<p>ppp</p>--><!--<p class="p1">ppp</p>--><!--<p class="p1">ppp</p>--><!--<div id="d1">DIV</div>--><!--++++++++++--><div class="outer"> <p>p1</p> <div class="inner"> <p>p2</p> </div></div><p>p3</p><a href="">click</a><p>p4</p><div egon="xialv">11</div><div egon="xialv2">22</div><input type="checkbox"><input type="text"><script>//基本选择器// $("span")// $("*")// $(".p1").css("color","red");// $("#d1").css("color","blue");// $(".class,p,div") // 多元素选择器//层级选择器 // 后代选择器// $(".outer p").css("color","red"); // 子代选择器// $(".outer>p").css("color","red"); // 毗邻选择器 (紧挨着的兄弟标签)// $(".outer+p").css("color","red"); // 兄弟选择器 (所有的兄弟标签)// $(".outer~p").css("color","red");//属性选择器 // 自定义属性 $("[egon]").css("color","green"); $("[egon=‘xialv2‘]").css("color","green");//表单选择器 $("[type=‘text‘]").css("border","1px solid red"); // 可以简写成如下形式，仅适用于input标签 $(":text").css("border","1px solid red");</script></body></html>2.表单属性选择器
:enabled :disabled :checked :selected
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form> <!--<input type="checkbox" value="http://www.mamicode.com/123">--> <!--<input type="checkbox" value="http://www.mamicode.com/456" checked>--> <select id="sel"> <option value="http://www.mamicode.com/1" selected="selected">Flowers</option> <option value="http://www.mamicode.com/2">Gardens</option> <option value="http://www.mamicode.com/3">Trees</option> <option value="http://www.mamicode.com/4">Fruits</option> </select></form><script src="http://www.mamicode.com/jquery-3.1.1.js"></script><script>// $("input:checked").each(function(){// console.log($(this).val())// })// console.log($("input:checked").length); // 1 console.log($("option:selected").length); // 只能默认选中一个,所以只能lenth:1 $("option:selected").each(function () { console.log("--> " + $(this).val()); }) $("#sel").change(function () { console.log($(this).val()); })</script></body></html>3.筛选器
# 过滤筛选器$("li").eq(2) $("li").first() $("ul li").hasclass("test")<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://www.mamicode.com/jquery-3.1.1.js"></script></head><body><ul class="outer"> <li class="item">11</li> <li class="item">22</li> <li class="item">33</li> <li class="item">44</li> <li class="item">55</li> <li class="item">66</li> <li class="item">77</li> <li class="item">88</li> <li class="item">99</li> <li class="item">1010</li></ul><script> // eq 索引// $("ul li").eq(4).css("color","red"); // 推荐// $("ul li:eq(4)").css("color","red"); // 需要自己拼接字符串，比较麻烦 $("ul li").first().css("color","red"); $("ul li:lt(5)").css("color","red"); $("ul li:gt(5)").css("color","red"); $("ul li:even").css("color","red"); // 奇数 $("ul li:odd").css("color","red"); // 偶数</script></body></html># 导航查找(查找筛选器) 查找子标签： $("div").children(".test") $("div").find(".test") 向下查找兄弟标签： $(".test").next() $(".test").nextAll() $(".test").nextUntil() 向上查找兄弟标签： $("div").prev() $("div").prevAll() $("div").prevUntil() 查找所有兄弟标签： $("div").siblings() 查找父标签： $(".test").parent() $(".test").parents() $(".test").parentUntil() <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://www.mamicode.com/jquery-3.1.1.js"></script></head><body><div class="item1">11</div><div class="item2">22</div><div class="item3">33</div><div class="item4">44</div><div class="item5">55</div><div class="outer"> <div class="inner"> <p id="p1">p1</p> </div> <p>p2</p></div><p>p3</p><script> // 向下查找兄弟标签// $(".item1").next().css("color","red");// $(".item1").nextAll().css("color","red");// $(".item1").nextUntil(".item5").css("color","red"); // 查找所有兄弟标签 $(".item3").siblings().css("color","red"); // 查找子代标签// $(".outer").children().css("color","red"); $(".outer").children("p").css("color","red"); // 查找后代标签 $(".outer").find("p").css("color","red"); // 查找父标签 $("#p1").parent().css("color","red"); $("#p1").parents().css("color","red"); $("#p1").parentsUntil(".outer").css("color","red");</script></body></html>
三、JQuery操作元素
1.JQuery事件
# 页面载入<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://www.mamicode.com/jquery-3.1.1.js"></script> <script> // 对应 JS 的onload事件// $(document).ready(function () {// $(".p1").css({"color":"red","font-size":"50px"});// }); // 可以简写成如下形式： $(function () { $(".p1").css("color","blue"); }) </script></head><body><p class="p1">PPP</p></body></html># 事件绑定//JS事件绑定： js的标签对象.on事件=函数//JQuery事件绑定： $().事件(函数)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://www.mamicode.com/jquery-3.1.1.js"></script></head><body><ul> <li>11</li> <li>22</li> <li>33</li> <li>44</li> <li>55</li></ul><button>ADD</button><script> $("button").click(function () { $("ul").append("<li>666</li>"); }); //JS事件绑定： js的标签对象.on事件=函数 //JQuery事件绑定： $().事件(函数) // 给 li 绑定点击事件(第一种绑定方式)，点击一次就执行相关操作 // 但是 button 增加的li点击不生效 $("ul li").click(function () { console.log($(this).text()); alert(123); }); // 第二种绑定方式 // on方法实现事件绑定 (JQuery 3 里统一用on) $("ul li").on("click",function () { alert(456); }); // 事件委派 -> ul 把事件下发到子标签li // 这样写会避免新添加的子标签无法响应事件的bug $("ul").on("click","li",function () { console.log($(this).text()); // 获取li标签里写好的值 alert(789); }) // 要注意 on 前面是什么，以及on的参数</script></body></html># 关于事件委派：$("").on(eve,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数。# 事件切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .test{ width: 200px; height: 200px; background-color: wheat; } </style></head><body><div class="test"></div></body><script src="http://www.mamicode.com/jquery-3.1.1.js"></script><script> // 第一种方式 function enter(){ console.log("enter") } function out(){ console.log("out") } $(".test").hover(enter,out) // 第二种方式 $(".test").mouseenter(function(){ console.log("enter") }); $(".test").mouseleave(function(){ console.log("leave") });</script></html>2.JQuery属性操作
--------------------------CSS类$("").addClass(class|fn)$("").removeClass([class|fn])--------------------------属性$("").attr();$("").removeAttr();$("").prop();$("").removeProp();--------------------------HTML代码/文本/值$("").html([val|fn])$("").text([val|fn])$("").val([val|fn|arr])---------------------------$("#c1").css({"color":"red","fontSize":"35px"})
# attr 和 prop<input id="chk1" type="checkbox" />是否可见<input id="chk2" type="checkbox" checked="checked" />是否可见<script>//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此//需要使用prop方法去操作才能获得正确的结果。// $("#chk1").attr("checked")// undefined// $("#chk1").prop("checked")// false// ---------手动选中的时候attr()获得到没有意义的undefined-----------// $("#chk1").attr("checked")// undefined// $("#chk1").prop("checked")// true console.log($("#chk1").prop("checked"));//false console.log($("#chk2").prop("checked"));//true console.log($("#chk1").attr("checked"));//undefined console.log($("#chk2").attr("checked"));//checked</script>
# 文本操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://www.mamicode.com/jquery-3.1.1.js"></script></head><body><div class="c1"> <p>DIV-PPP</p></div><input type="text" id="inp" value="http://www.mamicode.com/123"><p class="p1" value="http://www.mamicode.com/standby">PPP</p><script> console.log($(".c1").html()); // <p>DIV-PPP</p> console.log($(".c1").text()); // DIV-PPP $(".c1").html("<b>LIU</b>"); // LIU console.log($("#inp").val()); // 123 $("#inp").val(999); console.log($("#inp").val()); // 999 // p标签没有value属性，是自己加的属性，用val()是获取不到的；可以用attr console.log($(".p1").val()); // 设置CSS样式 $(".p1").css({"color":"red","fontSize":"35px"})</script></body></html>
# JQuery重写 左侧菜单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://www.mamicode.com/jquery-3.1.1.js"></script> <style> .item { margin: 20px;/*上 下 左 右*/ } .left_menu { width: 20%; height: 500px; background-color: wheat; float: left; } .title { text-align: center; background-color: #53e3a6; line-height: 30px; color: red; } .hidden { display: none; } .content_menu { width: 80%; height: 500px; background-color: green; float: left; } </style></head><body> <div class="outer"> <div class="left_menu"> <div class="item"> <div class="title">菜单一</div> <div class="con"> <p>111</p> <p>112</p> <p>113</p> </div> </div> <div class="item"> <div class="title">菜单二</div> <div class="con hidden"> <p>211</p> <p>212</p> <p>213</p> </div> </div> <div class="item"> <div class="title">菜单三</div> <div class="con hidden"> <p>311</p> <p>312</p> <p>313</p> </div> </div> </div> <div class="content_menu"></div> </div><script> $(".title").click(function () {// $(this).next().removeClass("hidden");// $(this).parent().siblings().children(".con").addClass("hidden"); // JQuery 支持链式操作，所以上面两句可以简写为下面一句： $(this).next().removeClass("hidden").parent().siblings().children(".con").addClass("hidden"); })</script></body></html>
# JQuery 重写 表格全选、反选、取消<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://www.mamicode.com/jquery-3.1.1.js"></script></head><body><button>全选</button><button>反选</button><button>取消</button><table border="1"> <tr> <th> </th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td><input type="checkbox"></td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td><input type="checkbox"></td> <td>222</td> <td>222</td> <td>222</td> </tr> <tr> <td><input type="checkbox"></td> <td>333</td> <td>333</td> <td>333</td> </tr></table><script> $("button").click(function () { if ("全选" == $(this).text()) { $("input").prop("checked",true); } else if ("取消" == $(this).text()) { $("input").prop("checked",false); } else { $("input").each(function () { $(this).prop("checked",!$(this).prop("checked")); }) } })</script></body></html>
# Jquery实现 tab切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .outer { width: 60%; height: 300px; background-color: wheat; margin: 100px auto; } .outer ul.title { background: darkgrey; padding: 10px; } .outer ul.title li { display: inline-block; list-style: none; padding: 5px; } .hide { display: none; } .outer .content { padding: 20px; } .active { background-color: red; color: white; border-top: 3px solid blue; } </style> <script src="http://www.mamicode.com/jquery-3.1.1.js"></script></head><body> <div class="outer"> <ul class="title"> <li class="active" relation="c1">商品介绍</li> <li relation="c2">商品规格</li> <li relation="c3">售后保障</li> </ul> <div class="content"> <div class="item" id="c1">这里是商品介绍</div> <div class="item hide" id="c2">这里是商品规格</div> <div class="item hide" id="c3">售后服务在这里</div> </div> </div> <script src="http://www.mamicode.com/jquery-3.1.1.js"></script> <script> $(".title li").click(function () { // 更改 title 的背景色 $(this).addClass("active"); $(this).siblings().removeClass("active"); // 更改title对应的content显示 // 通过在 li 标签里埋了一个自定义属性，对应到content里面id值 var $id_val = $(this).attr("relation"); var $sel = "#" + $id_val; // 拼接字符串 $($sel).removeClass(‘hide‘); $($sel).siblings().addClass(‘hide‘); }) </script></body></html>3.JQuery each循环
<!--循环方式1: $.each(obj,func(){})--><script> // JQuery遍历数组 var arr = [11,22,33,44]; $.each(arr,function (i,j) { console.log(i); // 索引 console.log(j); // 值// console.log(arr[i]); // 值 }); // JQuery遍历object // 支持类似字典的数据类型，实际是object对象 var info = {"name":"egon","age":18,"gender":"male"}; $.each(info,function (i,j) { console.log(i); console.log(j); })</script><!--循环方式2: $("").each(func(){})--><body><p class="item">P1</p><p class="item">P2</p><p class="item">P3</p><p class="item">P4</p><script> // JQuery遍历标签 $(".item").each(function () { if ($(this).text()=="P3") { console.log($(this).text()); console.log($(this).html()); $(this).css({"color":"red","font-size":"20px"}) } })</script></body>
# each循环扩展# 示例1<script> function f(){ for(var i=0;i<4;i++){ if (i==2){ return } console.log(i) } } f(); // 输出 0 和 1</script># 示例2<script src="http://www.mamicode.com/jquery-3.1.1.js"></script><script> li=[11,22,33,44]; $.each(li,function(i,v){ if (v==33){// return ; // 输出 11 22 44// return true; // 输出 11 22 44 return false // 输出 11 22 } console.log(v) });</script>function里的return只是结束了当前的函数,并不会影响后面函数的执行；如果你想return后下面循环函数继续执行,那么就直接写return或return true如果你不想return后下面循环函数继续执行,那么就直接写return false4.文档节点处理
//创建一个标签对象 $("<p>")//内部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>"); $("").appendTo(content) ----->$("p").appendTo("div"); $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>"); $("").prependTo(content) ----->$("p").prependTo("#foo");//外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>"); $("").before(content|fn) ----->$("p").before("<b>Hello</b>"); $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo");//替换 $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");//删除 $("").empty() $("").remove([expr])//复制 $("").clone([Even[,deepEven]])
# 示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .outer { width: 500px; height: 300px; background-color: wheat; margin: 100px auto; } </style></head><body><div class="outer"> <h4>hello node</h4></div><button class="add-node">ADD</button><button class="del-node">DEL</button><div class="box"> <p class="p1">PPP</p></div><div class="outerBox"> <div></div></div><script src="http://www.mamicode.com/jquery-3.1.1.js"></script><script> $(".add-node").click(function () { var $ele_p = $("<p>"); $ele_p.text("--->ppp"); // 添加子标签 $(".outer").append($ele_p); // 等价于下面这种写法:// $ele_p.appendTo(".outer");// // 添加兄弟标签// $(".outer").after($ele_p); // 等价于下面这种写法:// $ele_p.insertAfter(".outer");// 类似于appendTo()//// // 清空标签// $(".box").empty();//// // 删除标签// $(".box").remove();//// // 复制标签// var $p1_clone = $(".p1").clone();// $(".box").append($p1_clone); })</script></body></html># 节点clone示例<body><div class="outer"> <div class="box"> <button class="add">+</button> <input type="text" placeholder="请输入..." id="line"> </div></div><script> $(".add").click(function () {// var $new_box = $(".box").clone(); // 错误 var $new_box = $(this).parent().clone();// $new_box.children("button").attr("class","to_remove");// $new_box.children("button").html("-"); // 可以简写成下面这一句： $new_box.children("button").html("-").attr("class","to_remove"); $(".outer").append($new_box); }); // 这样写是不生效的，需要改成事件委派的形式// $(".to_remove").click(function () {// var $ele_del = $(this).parent();// console.log($ele_del);//// $ele_del.remove();// }) // 事件委派 -> 解决新添加的标签事件绑定失败的问题 $(".outer").on("click",".to_remove",function () { var $ele_del = $(this).parent(); console.log($ele_del); $ele_del.remove(); })</script></body>5.动画效果
# 显示和隐藏<body><p>hello egon</p><button id="hide_btn">隐藏</button><button id="show_btn">显示</button><button id="toggle_btn">Toggle</button><script src="http://www.mamicode.com/jquery-3.1.1.js"></script><script> $("#hide_btn").click(function () {// $("p").hide();// $("p").hide(1000); // 添加回调函数 $("p").hide(1000,function () { alert(123); }); }); $("#show_btn").click(function () {// $("p").show(); $("p").show(1000); }); $("#toggle_btn").click(function () {// $("p").toggle(); $("p").toggle(1000); });</script></body>
# 滑动滑出<body><img src="http://www.mamicode.com/tsl.jpg" class="tsl"><button class="slide_out">滑出</button><button class="slide_in">滑出</button><button class="switch">切换</button><script src="http://www.mamicode.com/jquery-3.1.1.js"></script><script> $(".slide_out").click(function () { $(".tsl").slideDown(1000); // 1000 ms 完成 }) $(".slide_in").click(function () { $(".tsl").slideUp(1000); }) $(".switch").click(function () { $(".tsl").slideToggle(1000); })</script></body>
# 淡入淡出<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://www.mamicode.com/jquery-3.1.1.js"></script> <style> .item { width: 200px; height: 200px; background-color: blue; } </style></head><body><div class="item"></div><button class="fade_in">淡入</button><button class="fade_out">淡出</button><button class="fade_switch">切换</button><script> $(".fade_in").click(function () { $(".item").fadeIn(3000); }); $(".fade_out").click(function () { $(".item").fadeOut(3000); }); $(".fade_switch").click(function () { $(".item").fadeToggle(3000); });</script></body></html>
# CSS位置操作$("").offset([coordinates])$("").position()$("").scrollTop([val])$("").scrollLeft([val])# CSS尺寸操作$("").height([val|fn])$("").width([val|fn])$("").innerHeight()$("").innerWidth()$("").outerHeight([soptions])$("").outerWidth([options])
四、实用例子
五、day15课后作业
题目要求
代码实现
前端基础之JQuery - day15
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。