一.jQuery是什么
<1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
<3>它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器
<4>jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。
<5>jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
二.什么是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()
三 .寻找元素(选择器和筛选器)
3.1选择器
3.1.1基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
3.1.2层次选择器
$(".outer div") $(".outer>div") $(".oute+div") $(".outer~div")
3.1.3基本选择器
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
3.1.4属性选择器
$("[id='div1']") $("['alex'='sb'][id]")
3.1.5表单选择器
$("[type='text']")------->$(":text") 注意适用于input标签: $("input:checked")
选择器示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p id="p1">PPP</p> <div class="c1">DIV</div> <div class="c1">DIV</div> <div class="c1">DIV</div> <div>DIV</div> <script src="jquery-3.2.1.js"></script> <script> // $("#p1") ------>jquery对象 // var ele=document.getElementById("p1"); //ele-----> DOM对象 // // console.log(ele.innerHTML); // console.log($("#p1").html()); // jquery对象与DOM对象下的方法和属性不能混用 //======================选择器 // $("#p1").css({"color":"red","fontSize":"35px"}); //JS实现批量处理 // var eles_div=document.getElementsByClassName("c1"); // // for (var i=0;i<eles_div.length;i++){ // // eles_div[i].style.color="green" // // } // Jquery实现的批量处理 // $(".c1").css("color","green") // $("div").css("background-color","gold") // $("*").css("color","green") </script> </body> </html>
3.1.6 表单属性选择器
:enabled
:disabled
:checked
:selected
<body> <form> <input type="checkbox" value="123" checked> <input type="checkbox" value="456" checked> <select> <option value="1">Flowers</option> <option value="2" selected="selected">Gardens</option> <option value="3" selected="selected">Trees</option> <option value="3" selected="selected">Trees</option> </select> </form> <script src="jquery.min.js"></script> <script> // console.log($("input:checked").length); // 2 // console.log($("option:selected").length); // 只能默认选中一个,所以只能lenth:1 $("input:checked").each(function(){ console.log($(this).val()) }) </script> </body>
3.2 筛选器
3.2.1 过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
3.2.2 查找筛选器
查找子标签: $("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> </head> <body> <div class="c1"> <div class="c3"> DIV <div class="c4"> <p class="p1">P1</p> </div> </div> <p>P2</p> </div> [.c4,.c3,] <div class="c1"> <p class="item" id="d1">p3</p> <p class="item">p3</p> <p class="item">p3</p> <p class="item" id="d4">p3</p> <p class="item">p3</p> </div> <div id="c1" egon="123"></div> <script src="jquery-3.2.1.js"></script> <script> // jquery支持链式操作 //==========================================找兄弟标签 //next // $("#d1").next().css("color","red").next().css("color","green"); //$("#d1").nextAll().css("color","red"); //$("#d1").nextUntil("#d4").css("color","red"); //prev //siblings //$("#d4").siblings().css("color","red"); //================================================== find:找所有后代 children:找所有子代 // $(".c1").children("p").css("border","1px solid red"); //$(".c1").find("p").css("border","1px solid red") // ===============================================找父标签 // console.log($(".p1").parent().parent().attr("class")) // console.log($(".p1").parents().attr("class")) //$(".p1").parents().css("color","red") //$(".p1").parentsUntil(".c1").css("border","1px solid red") </script> </body> </html>
层级选择器:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="outer"> <div class="inner"> <p>p3</p> <div>DIV</div> </div> <p>p2</p> </div> <p>p1</p> <ul class="box"> <li class="item">111</li> <li class="item">222</li> <li class="item">333</li> <li class="item">444</li> <li class="item">555</li> <li class="item">666</li> </ul> <div egon="sb">egon</div> <div egon="sb" class="c1">egon2</div> <input type="text"> <input type="text"> <input type="text"> <input type="checkbox"> <script src="jquery-3.2.1.js"></script> <script> // $(".outer>p").css("color","red") //======================筛选器 // $(".box .item:eq(5)").css("color","red") // $(".box .item:lt(4)").css("color","red") // $(".box .item:gt(3)").css("color","red") // $(".box .item:odd").css("color","red") // $(".box .item:gt(1):eq(3)").css("color","red") // ==================属性选择器 // $("[egon='sb'][class]").css("color","red") // 针对input表单 //$("[type='text']").css("border","1px solid red"); //$(":text").css("border","1px solid green"); //var x=3; //$("ul li:eq(x)").css("color","red"); //$("ul li").eq(x).css("color","red"); // 推荐写法 </script> </body> </html>
四 操作元素(属性,css,文档处理)
4.1 事件
页面载入
ready(fn) // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 $(document).ready(function(){}) -----------> $(function(){})
事件绑定
//语法: 标签对象.事件(函数)
eg: $("p").click(function(){})
事件委派:
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
<ul> <li>1</li> <li>2</li> <li>3</li> </ul> <hr> <button id="add_li">Add_li</button> <button id="off">off</button> <script src="jquery-3.2.1.js"></script> <script> $("ul li").click(function(){ alert(123) }); $("#add_li").click(function(){ var $ele=$("<li>"); $ele.text(Math.round(Math.random()*10)); $("ul").append($ele) }); // $("ul").on("click","li",function(){ // alert(456) // }) $("#off").click(function(){ $("ul li").off() }) </script>
事件绑定
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul id="box"> <li class="item">111</li> <li class="item">111</li> <li class="item">111</li> <li class="item">111</li> <li class="item,m46">111</li> </ul> <button class="add">ADD</button> <button class="releave">off</button> <script src="jquery-3.2.1.js"></script> <script> // 一个标签对象.on事件=function(){} // 一个jquery对象(集合对象).事件(function(){}) // // $(".item").click(function () { // alert(123) // }); // on方法实现的事件委派(新添加的也有上面所有的功能) $("#box").on("click",".item",function () { //alert($(this).html()); alert($(this).index()); }); $(".add").click(function () { $("#box").append("<div class='item'>444</div>") }); // off 方法 $(".releave").click(function () { // 绑定哪个jquery对象就接触哪个对象 $("#box").off("click") }); </script> </body> </html>
事件切换
hover事件:
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .test{ 200px; height: 200px; background-color: wheat; } </style> </head> <body> <div class="test"></div> </body> <script src="jquery.min.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>
4.2 属性操作
<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>
4.3 each循环
我们知道,
$("p").css("color","red")
是将css操作加到所有的标签上,内部维持一个循环;但如果对于选中标签进行不同处理,这时就需要对所有标签数组进行循环遍历啦
jquery支持两种循环方式:
方式一
格式:$.each(obj,fn)
li=[10,20,30,40];
dic={name:"yuan",sex:"male"};
$.each(li,function(i,x){
console.log(i,x)
});
方式二
格式:$("").each(fn)
$("tr").each(function(){
console.log($(this).html())
})
其中,$(this)代指当前循环标签。
each扩展以及示例
<body> <p>111</p> <p>222</p> <p>333</p> <p>444</p> <script> // ------------ 方式1 $.each(obj,callback) // var arr=[111,222,333]; // var obj={"name":"egon","age":123}; // // $.each(obj,function (i,j) { // console.log(i); // console.log(j); // // }); // ----------- --方式2: $("p").click(function () { console.log($(this).index()) }); // $("p").each(function () { // // console.log($(this).index()); // $(this) ----=>代指当前循环到的标签对象 // // }) //jquery扩展 // 示例1 // function f(){ // // for(var i=0;i<4;i++){ // // if (i==2){ // return // } // console.log(i) // } // } // f(); //示例2 li=[11,22,33,44]; $.each(li,function(i,v){ if (v==33){ return false; // ===试一试 return false会怎样? } console.log(v) }); // each的参数function内如果出现return 结束当次循环,类似于continue; //如果出现return False,结束的是整个each循环,类似break。 </script> </body>
文本操作
<body> <div class="c1"> <p>PPP</p> </div> <input type="text" value="123"> <div value="123"></div> <script> // 取值操作 // console.log($(".c1").html()); // console.log($(".c1").text()); //赋值操作 // $(".c1").html("<a href=''>click</a>") // $(".c1").text("<a href=''>click</a>") // 对value属性取值和赋值操作 // console.log($(":text").val()); // // $(":text").val(456); // 注意:value属性必须是固有属性 console.log($("div").val()) // 取不到value属性的值 </script> </body>
4.4 文档节点处理
//创建一个标签对象 $("<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> </head> <body> <div class="outer"> <h4>come on</h4> </div> <script src="jquery-3.2.1.js"></script> <script> // var $ele=$('<p>'); // $ele.text('hello world'); //append:追加到最后的位置 // $('.outer').append($ele); // $ele.appendTo('.outer'); //添加到最上面的位置 // $('.outer').prepend($ele); // var $ele2=$('<p>'); // $ele2.text('AAAAA'); // $('.outer').prepend($ele2); //$('.outer').after($ele); //作为 div的兄弟标签出现 //删除节点 // $('.outer').remove() //清空节点 //$('.outer').empty(); //替换节点 // var $eles=$('<p>'); //<p></p> // $eles.text('hello world'); // // $('h4').replaceWith($eles); //拷贝节点 var $outer=$('.outer').clone(); $('.outer').after($outer); </script> </body> </html>
clone示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src='../day48/jquery-3.2.1.js'></script> </head> <body> <div class="outer"> <div class="item"> <button class="add">+</button> <input type="text"> </div> </div> <script> $(".add").click(function () { var $ele=$(this).parent().clone(); $ele.children("button").text("-").attr("class","removeA"); $(".outer").append($ele); }); $(".outer").on("click",".removeA",function () { $(this).parent().remove() }); // $(".removeA").click(function () { // // alert(1234) // }) </script> </body> </html>
4.5 动画效果
显示隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示隐藏</title> <style> *{ margin: 0; } p{ 500px; height: 200px; text-align: center; line-height: 200px; font-size: 30px; background-color: orange; } </style> </head> <body> <p>hello</p> <button id="hide">隐藏</button> <button id="show">显示</button> <button id="toggle">切换</button> <script src="jquery-3.2.1.js"></script> <script> $(document).ready(function () { $('#hide').click(function () { $('p').hide(1000); }); $('#show').click(function () { $('p').show(1000); }); //用于切换被选元素的 hide() 与 show() 方法 $('#toggle').click(function () { $('p').toggle(); }); }) </script> </body> </html>
滑动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑动</title> <style> #content{ text-align: center; background-color: lightblue; border: 1px solid red; display: none; padding: 50px; } </style> <script src="jquery-3.2.1.js"></script> <script> $(document).ready(function () { $('#slideDown').click(function () { $('#content').slideDown(1000); }); $('#slideUp').click(function () { $('#content').slideUp(1000); }); $('#slideToggle').click(function () { $('#content').slideToggle(1000); }); }) </script> </head> <body> <div id="slideDown">出现</div> <div id="slideUp">隐藏</div> <div id="slideToggle">toggle</div> <div id="content">hello world</div> </body> </html>
淡入淡出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淡入淡出</title> <style> #id1{ 300px; height: 300px; background-color: blueviolet; margin-top: 50px; margin-left: 50px; } </style> </head> <body> <button id="in">fadein</button> <button id="out">fadeout</button> <button id="toggle">fadetoggle</button> <button id="fadeto">fadeto</button> <div id="id1" ></div> <script src="jquery-3.2.1.js"></script> <script> $(document).ready(function () { $('#in').click(function () { $('#id1').fadeIn(1000); }); $('#out').click(function () { $('#id1').fadeOut(1000); }); $('#toggle').click(function () { $('#id1').fadeToggle(1000); }); $("#fadeto").click(function(){ $("#id1").fadeTo(1000,0.4); }); }) </script> </body> </html>
回调函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回调函数</title> </head> <body> <button>hide</button> <p>hello hello hello</p> <script src="jquery-3.2.1.js"></script> <script> $("button").click(function(){ $("p").hide(1000,function(){ alert($(this).html()) }) }); </script> </body> </html>
4.6 css操作
css位置操作
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
元素偏移控制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素偏移控制</title> <style> *{ margin: 0; } .box1{ 200px; height: 200px; background-color: yellowgreen; } .box2{ 200px; height: 200px; background-color: rebeccapurple; } </style> <script src='jquery-3.2.1.js'></script> </head> <body> <div class="box1"></div> <div class="box2"></div> <button>change</button> <script> $("button").click(function () { // $(".box1").offset({left:0,top:200}); $(".box2").offset({left:200,top:400}); }) </script> </body> </html>
css之position
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .box1{ 200px; height: 200px; background-color: wheat; } .box2{ 200px; height: 200px; background-color: green; } /*尝试 注释掉*/ .outer{ position: relative; } </style> <script src='jquery-3.2.1.js'></script> </head> <body> <div class="box1"></div> <div class="outer"> <div class="box2"></div> </div> <script> console.log($(".box2").position().top); console.log( $(".box2").position().left); console.log($(".box1").position().top); console.log( $(".box1").position().left) </script> </body> </html>
panel移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>panel移动</title> <style> *{ margin: 0; } .box{ 200px; height: 200px; background-color: #2459a2; } </style> <script src='jquery-3.2.1.js'></script> </head> <body> <div class="box"> </div> <script> var mouse_x=0; var mouse_y=0; $(".box").mouseover(function () { $(this).css("cursor","move") }); $(".box").mousedown(function (e) { mouse_x=e.clientX; mouse_y=e.clientY; var $box_top= $(this).offset().top; var $box_left=$(this).offset().left; $(document).mousemove(function (e) { var new_mouse_x=e.clientX; var new_mouse_y=e.clientY; $(".box").offset({left:new_mouse_x-mouse_x,top:new_mouse_y-mouse_y}) }); $(document).mouseup(function () { $(document).off() }) }) </script> </body> </html>
返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部</title> <style> .box{ 100%; height: 2000px; background-color: wheat; } #returnTop{ 70px; height: 40px; background-color: royalblue; color: white; font-weight: 800; text-align: center; line-height: 40px; position: fixed; bottom: 20px; right: 20px; display: none; } </style> </head> <body> <div class="box"></div> <div id="returnTop">TOP</div> <script src="jquery-3.2.1.js"></script> <script> $(window).scroll(function () { console.log($(window).scrollTop()); if($(window).scrollTop()>200){ $('#returnTop').show(); // >200 显示 } else { $('#returnTop').hide(); // <200 隐藏 } }); $('#returnTop').click(function () { $(window).scrollTop(0); }); </script> </body> </html>
尺寸操作
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
尺寸操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ 200px; height: 200px; padding: 50px; border: 10px red solid; background-color: green; margin: 20px; } </style> </head> <body> <div class="box">DIV</div> <script src="jquery-3.2.1.js"></script> <script> console.log($('.box').height()); console.log($('.box').width()); console.log($('.box').innerHeight()); console.log($('.box').innerWidth()); console.log($('.box').outerHeight()); console.log($('.box').outerWidth()); </script> </body> </html>
jquery实例
实例之左侧菜单(注意:jquery版本 的引用)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>left_menu</title> <style> .menu{ height: 500px; 30%; background-color: gray; float: left; } .content{ height: 500px; 70%; background-color: darkkhaki; float: left; } .title{ line-height: 50px; background-color: wheat; color: forestgreen;} .hide{ display: none; } </style> </head> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="title" onclick="show(this);">菜单一</div> <div class="con"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="title" onclick="show(this);">菜单二</div> <div class="con hide"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="title" onclick="show(this);">菜单三</div> <div class="con hide"> <div>111</div> <div>111</div> <div>111</div> </div> </div> </div> <div class="content"></div> </div> <script src="jquery-3.2.1.js"></script> <script> function show(self){ $(self).next().removeClass("hide"); $(self).parent().siblings().children(".con").addClass("hide"); } </script> </body> </html>
tab切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab切换</title> <style> *{ margin:0; padding: 0; } .tab_outer{ margin: 20px auto; 60%; } .menu{ background-color: #cccccc; border: 1px solid red; line-height: 40px; text-align: center; } .menu li{ display: inline-block; margin-left: 14px; padding: 5px 20px; } .menu a{ border-right:1px solid red ; padding: 13px; } .content{ background-color: tan; border: 1px solid green; height: 300px; } .hide{ display: none; } .current{ background-color: #2868c8; color: white; border-top: solid 2px rebeccapurple; } </style> </head> <body> <div class="tab_outer"> <ul class="menu"> <li relation="c1" class="current">菜单一</li> <li relation="c2">菜单二</li> <li relation="c3">菜单三</li> </ul> <div class="content"> <div id="c1">内容一</div> <div id="c2" class="hide">内容二</div> <div id="c3" class="hide">内容三</div> </div> </div> <script src="jquery-3.2.1.js"></script> <script> $('.menu li').click(function () { var index=$(this).attr('relation'); $('#'+index).removeClass('hide').siblings().addClass('hide'); $(this).addClass('current').siblings().removeClass('current') }) </script> </body> </html>
leftmenu
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>left_menu</title> <style> .menu{ height: 500px; 20%; background-color: gainsboro; text-align: center; float: left; } .content{ height: 500px; 80%; background-color: darkgray; float: left; } .title{ line-height: 50px; background-color: wheat; color: rebeccapurple; } .hide{ display: none; } </style> </head> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="title">菜单一</div> <div class="con"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="title">菜单二</div> <div class="con hide"> <div>222</div> <div>222</div> <div>222</div> </div> </div> <div class="item"> <div class="title">菜单三</div> <div class="con hide"> <div>333</div> <div>333</div> <div>333</div> </div> </div> </div> <div class="content"></div> </div> <script src="../day48/jquery-3.2.1.js"></script> <script> $(".item .title").click(function () { $(this).next().removeClass("hide"); $(this).parent().siblings().children(".con").addClass("hide"); // $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide") }) </script> </body> </html>
tab全选反选取消
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab全反取</title> </head> <body> <button class="selectAll">全选</button> <button class="reverse">反选</button> <button class="cancel">取消</button> <hr> <table border="1"> <tr> <td><input type="checkbox"></td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td><input type="checkbox"></td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td><input type="checkbox"></td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td><input type="checkbox"></td> <td>111</td> <td>111</td> <td>111</td> </tr> </table> <script src="jquery-3.2.1.js"></script> <script> //全选 $('.selectAll').click(function () { $(':checkbox').prop('checked',true) }); //取消 $('.cancel').click(function () { $(':checkbox').prop('checked',false) }); //反选 $('.reverse').click(function () { $(':checkbox').each(function () { $(this).prop('checked',!$(this).prop('checked')); }) }) //----反选(2) // $('.reverse').click(function () { // $(':checkbox').each(function () { // if ($(this).prop('checked')){ // $(this).prop('checked',false); // } // else { // $(this).prop('checked',true); // } // }) // }); </script> </body> </html>
JD轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.2.1.js"></script> <title>Title</title> <style> .outer{ 790px; height: 340px; margin: 80px auto; position: relative; } .img li{ position: absolute; list-style: none; top: 0; left: 0; } .num{ position: absolute; bottom: 18px; left: 270px; list-style: none; } .num li{ display: inline-block; 18px; height: 18px; background-color: white; border-radius: 50%; text-align: center; line-height: 18px; margin-left: 4px; } .btn{ position: absolute; top:50%; 30px; height: 60px; background-color: lightgrey; color: white; text-align: center; line-height: 60px; font-size: 30px; opacity: 0.7; margin-top: -30px; display: none; } .left{ left: 0; } .right{ right: 0; } .outer:hover .btn{ display: block; } .num .active{ background-color: red; } .hide{ display: none; } </style> </head> <body> <div class="outer"> <ul class="img"> <li><a href=""><img src="img/1.jpg" alt=""></a></li> <li class="hide"><a href=""><img src="img/2.jpg" alt=""></a></li> <li class="hide"><a href=""><img src="img/3.jpg" alt=""></a></li> <li class="hide"><a href=""><img src="img/4.jpg" alt=""></a></li> <li class="hide"><a href=""><img src="img/5.jpg" alt=""></a></li> <li class="hide"><a href=""><img src="img/6.jpg" alt=""></a></li> </ul> <ul class="num"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <div class="left btn"> < </div> <div class="right btn"> > </div> </div> <script> var i=0; //功能1: 鼠标悬浮到图标的位置时实现切换 $(".num li").mouseover(function () { $(this).addClass("active").siblings().removeClass("active"); var $icon_index=$(this).index(); i=$icon_index; $(".img li").eq($icon_index).removeClass("hide").siblings().addClass("hide") }); // 自动轮播 setInterval(fn,1000) function foo() { if(i==5){ i=-1 } i++; $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).fadeIn(1000).siblings().fadeOut(1000); } var ID=setInterval(foo,1000); // 悬浮终止定时器 $(".outer").hover(function () { // 终止定时器 clearInterval(ID) },function () { // 重新开启一个定时器 ID=setInterval(foo,1500); }); // 通过按钮实现切换 $(".right").click(function () { foo() }); function bar() { if(i==0){ i=6 } i--; $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).fadeIn(1000).siblings().fadeOut(1000); //$(".img li").eq(i).removeClass("hide").siblings().addClass("hide"); } $(".left").click(function () { bar() }) </script> </body> </html>