3.toggleClass():切换class属性(如果存在该属性值就删除掉，不存在该属性值就添加)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>样式操作</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="http://www.likecs.com/js/jquery-3.3.1.min.js"></script> <style type="text/css"> .one{ width: 200px; height: 140px; margin: 20px; background: red; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 40px; height: 40px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 40px; height: 40px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } /*待用的样式*/ .second{ width: 300px; height: 340px; margin: 20px; background: yellow; border: pink 3px dotted; float:left; font-size: 22px; font-family:Roman; } </style> <script type="text/javascript"> $(function () { // <input type="button" value="采用属性增加样式(改变id=one的样式)"/> //使用attr获取/设置属性的值 $("#b1").click(function () { $("#one").attr("class","second"); }) // <input type="button" value=" addClass"/> $("#b2").click(function () { $("#one").addClass("second"); }) // <input type="button" value="removeClass"/> $("#b3").click(function () { $("#one").removeClass("second"); }) // <input type="button" value=" 切换样式"/> $("#b4").click(function () { $("#one").toggleClass("second"); }) // <input type="button" value=" 通过css()获得id为one背景颜色"/> $("#b5").click(function () { alert($("#one").css("backgroundColor")) }) // <input type="button" value=" 通过css()设置id为one背景颜色为绿色"/> $("#b6").click(function () { $("#one").css("backgroundColor","green") }) }); </script> </head> <body> <input type="button" value="保存" /> <input type="button" value="采用属性增加样式(改变id=one的样式)"/> <input type="button" value=" addClass"/> <input type="button" value="removeClass"/> <input type="button" value=" 切换样式"/> <input type="button" value=" 通过css()获得id为one背景颜色"/> <input type="button" value=" 通过css()设置id为one背景颜色为绿色"/> <h1>有一种奇迹叫坚持</h1> <h2>自信源于努力</h2> <div> id为one </div> <div > id为two class是 mini <div >class是 mini</div> </div> <div > class是 one <div >class是 mini</div> <div >class是 mini</div> </div> <div > class是 one <div >class是 mini01</div> <div >class是 mini</div> </div> <span> span </span> </body> </html> CRUD操作 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>内部插入脚本</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="http://www.likecs.com/js/jquery-3.3.1.min.js"></script> <style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div.visible{ display:none; } </style> <script type="text/javascript"> $(function () { // <input type="button" value="将反恐放置到city的后面"/> $("#b1").click(function () { $("#city").append($("#fk")); }) // <input type="button" value="将反恐放置到city的最前面"/> $("#b2").click(function () { $("#city").prepend($("#fk")); }) // <input type="button" value="将反恐插入到天津后面"/> $("#b3").click(function () { $("#tj").after($("#fk")); }) // <input type="button" value="将反恐插入到天津前面"/> $("#b4").click(function () { $("#tj").before($("#fk")); }) }); </script> </head> <body> <input type="button" value="将反恐放置到city的后面"/> <input type="button" value="将反恐放置到city的最前面"/> <input type="button" value="将反恐插入到天津后面"/> <input type="button" value="将反恐插入到天津前面"/> <ul> <li>北京</li> <li>天津</li> <li>重庆</li> </ul> <ul> <li>反恐</li> <li>星际</li> </ul> <div>Hello1</div> </body> </html> JQuery高级 动画 三种方式显示和隐藏元素1.默认显示和隐藏方式
show([speed],[easing],[fn])
hide([speed],[easing],[fn])
toggle([speed],[easing],[fn])
speed:动画的速度，三个预定义的值("slow","normal","fast")或表示动画时长的毫秒数值
easing:用来指定切换效果，默认是"swing",可用参数"linear"
fn:在动画完成是执行的函数，每个函数执行一次
2.滑动显示和隐藏方式
1.slideDown([speed],[easing],[fn])
2.slideUp([speed],[easing],[fn])
3.slideToggle([speed],[easing],[fn])
3.淡入淡出显示和隐藏方式
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])