前端学习之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 对象
基本语法：$(selector).action()
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。 美元符号定义 jQuery 选择符（selector）"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操作 实例: $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 <p> 元素 $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素 $("#test").hide() - 隐藏所有 id="test" 的元素
开始使用JQuery，首先引用JQ插件
<script src="jquery-3.1.1.js"></script>
二 、寻找元素(重要的选择器和筛选器)
选择器
基本选择器 ：$("*") 所有元素
$("#id") 例如：$("#id") id="id1" 的元素
$(".class") 例如：$(".intro") 所有 class="intro" 的元素
$("element") 例如：$("p") 所有 <p> 元素
$(".class,p,div")
层级选择器 ：$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
基本筛选器 ：$("li:first") 第一个 <li> 元素
$("li:eq(2)") 列表中的第2个元素（index 从 0 开始）
$("li:even") 所有偶数 <li> 元素
$("li:gt(1)") 列出 index 大于 1 的元素
属性选择器 ：$('[id="div1"]') $('["alex="sb"][id]')
表单选择器 ：$("[type='text']")----->$(":text") （简写） 注意只适用于input标签
$("input:checked")
筛选器
过滤筛选器: $("li").eq(2) $("li").first() $("ul li").hasclass("test")
查找筛选器:
$("div").children(".test") $("div").find(".test")
$(".test").next() $(".test").nextAll() $(".test").nextUntil()
$("div").prev() $("div").prevAll() $("div").prevUntil()
$(".test").parent() $(".test").parents() $(".test").parentUntil()
$("div").siblings() //获取div标签的兄弟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.1.1.js"></script> <style> .menu{ height: 500px; width: 30%; background-color: gainsboro; float: left; } .title{ line-height: 50px; background-color: #425a66; 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>222</div> <div>222</div> <div>222</div> </div> </div> <div class="item"> <div class="title" onclick="show(this);">菜单三</div> <div class="con hide"> <div>333</div> <div>333</div> <div>333</div> </div> </div> </div> <div class="content"></div> </div> </body> <script> function show(self){ // console.log($(self).text()) $(self).next().removeClass("hide") //去除选中标签的下一个标签的hide样式 例如选中菜单二标签，就是让<div>222</div>显示 $(self).parent().siblings().children(".con").addClass("hide") } </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.1.1.js"></script> <style> *{ margin: 0px; padding: 0px; } .tab_outer{ margin: 0px auto; width: 60%; } .menu{ background-color: #cccccc; /*border: 1px solid red;*/ line-height: 40px; } .menu li{ display: inline-block; } .menu a{ border-right: 1px solid red; padding: 11px; } .content{ background-color: tan; border: 1px solid green; height: 300px; } .current{ background-color: darkgray; color: yellow; border-top: solid 2px rebeccapurple; } .hide{ display: none; } </style> </head> <body> <div class="tab_outer"> <ul class="menu"> <li xxx="c1" class="current" onclick="tab(this);">菜单一</li> <li xxx="c2" onclick="tab(this);">菜单二</li> <li xxx="c3" onclick="tab(this);">菜单三</li> </ul> <div class="content"> <div id="c1">内容一</div> <div id="c2" class="hide">内容二</div> <div id="c3" class="hide">内容三</div> </div> </div> </body> <script> function tab(self) { $(self).addClass("current"); $(self).siblings().removeClass("current"); var s=$(self).attr('xxx'); //attr 设置或返回被选元素的属性值。当点击菜单一时 s="c1" $("#"+s).removeClass("hide").siblings().addClass("hide");// "#"+s为字符串拼接=#c1 即$("#"+s)=$(#c1) jquery选中的标签去除hide他的兄弟标签添加hide } </script> </html>
三 、操作元素(属性 CSS 和 文档处理)
属性操作
$("p").text() $("p").html() $(":checkbox").val()
$(".test").attr("alex") $(".test").attr("alex","sb")
$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")
$(".test").prop("checked",true)
$(".test").addClass("hide")
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.1.1.js"></script> </head> <body> <button onclick="selectall();">全选</button> <button onclick="che();">取消</button> <button onclick="reverse();">反选</button> <table border="1"> <tr> <td><input type="checkbox"></td> <td>111</td> </tr> <tr> <td><input type="checkbox"></td> <td>222</td> </tr> <tr> <td><input type="checkbox"></td> <td>333</td> </tr> <tr> <td><input type="checkbox"></td> <td>444</td> </tr> </table> </body> <script> function selectall(){ $("table :checkbox").prop("checked",true) } function che(){ $("table :checkbox").prop("checked",false) } function reverse(){ //each() 方法规定为每个匹配元素规定运行的函数。 $("table :checkbox").each(function(){ if ($(this).prop("checked")){ $(this).prop("checked",false) } else { $(this).prop("checked",true) } }); </script> </html>
CSS操作
(样式) css("{color:'red',backgroud:'blue'}")
(位置) offset() position() scrollTop() scrollLeft()
(尺寸) height() width()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.1.1.js"></script> <script> window.onscroll=function(){ var current=$(window).scrollTop(); console.log(current) if (current>100){ $(".returnTop").removeClass("hide") } else { $(".returnTop").addClass("hide") } } function returnTop(){ // $(".div1").scrollTop(0); $(window).scrollTop(0) } </script> <style> body{ margin: 0px; } .returnTop{ height: 60px; width: 100px; background-color: darkgray; position: fixed; right: 0; bottom: 0; color: greenyellow; line-height: 60px; text-align: center; } .div1{ background-color: orchid; font-size: 5px; overflow: auto; width: 500px; } .div2{ background-color: darkcyan; } .div3{ background-color: aqua; } .div{ height: 300px; } .hide{ display: none; } </style> </head> <body> <div class="div1 div"> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> </div> <div class="div2 div"></div> <div class="div3 div"></div> <div class="returnTop hide" onclick="returnTop();">返回顶部</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back{ background-color: rebeccapurple; height: 2000px; } .shade{ position: fixed; top: 0; bottom: 0; left:0; right: 0; background-color: coral; opacity: 0.4; } .hide{ display: none; } .models{ position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; height: 200px; width: 200px; background-color: gold; } </style> </head> <body> <div class="back"> <input id="ID1" type="button" value="click" onclick="action1(this)"> </div> <div class="shade hide"></div> <div class="models hide"> <input id="ID2" type="button" value="cancel" onclick="action2(this)"> </div> <script src="jquery-3.1.1.js"></script> <script> function action1(self) { $(self).parent().siblings().removeClass("hide"); } function action2(self) { $(self).parent().parent().children(".shade,.models").addClass("hide") } // function action(act){ // var ele=document.getElementsByClassName("shade")[0]; // var ele2=document.getElementsByClassName("models")[0]; // if(act=="show"){ // ele.classList.remove("hide"); // ele2.classList.remove("hide"); // }else { // ele.classList.add("hide"); // ele2.classList.add("hide"); // } // } </script> </body> </html>
文档处理
内部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")
prepend() prependTo()
外部插入 before() insertBefore() after insertAfter()
replaceWith() remove() empty() clone()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="outer"> <div class="condition"> <div class="icons" style="display:inline-block"> <a onclick="add(this);"><button>+</button></a> </div> <div class="input" style="display:inline-block"> <input type="checkbox"> <input type="text" value="alex"> </div> </div> </div> <script src="jquery-3.1.1.js"></script> <script> function add(self){ var $duplicate = $(self).parent().parent().clone(); $duplicate.find('a[onclick="add(this);"]').attr('onclick',"removed(this)").children("").text("-"); $duplicate.appendTo($(self).parent().parent().parent()); } function removed(self){ $(self).parent().parent().remove() } </script> </body> </html>
scrollTop()使用
scrollTop() 方法设置或返回被选元素的垂直滚动条位置。当滚动条位于最顶部时，位置是 0。 返回 <div> 元素的垂直滚动条位置： $("button").click(function(){ alert($("div").scrollTop()); }); 返回滚动条距窗口顶部距离 $(window).scrollTop();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .back{ position: fixed; bottom: 0px; right: 0px; background-color: red; } .hide{ display: none; } </style> </head> <body> <div style="height: 1000px;border: 1px solid #ddd;color: yellow;"> <div id="title" style="background-color: black;height: 40px;color: white;"> 标题 </div> </div> <div onclick="GoTop()" class="back hide">返回顶部</div> <script src="jquery-3.1.1.js"></script> <script type="text/javascript"> function GoTop(){ //返回顶部 $(window).scrollTop(0); } $(function(){ $(window).scroll(function(){ //当滚动滑轮时，执行函数体 //获取当前滑轮滚动的高度 var top = $(window).scrollTop(); if(top>40){ //展示“返回顶部” $('.back').removeClass('hide'); }else{ //隐藏“返回顶部” $('.back').addClass('hide'); } }); }); </script> </body> </html>
$(function(){/*...*/});是$(document).ready(function(){/*...*/})的简写形式，是在DOM加载完成后执行的回调函数，并且只会执行一次。
扩展方法
1.类方法（$.extend()）
<script> $.extend({ fun1:function(name){ //fun1是自己定义的函数名字，括号中的name是参数 console.log(name) } }); $.fun1("坤") ; //调用时直接$.函数名(参数); </script>
2.对象方法($.fn.extend())
<body> <input type="text"> <script> $.fn.extend({ getMax:function(a,b){ var result=a>b?a:b; console.log(result); } }); $("input").getMax(1,2); //调用时要$(标签名).函数名(); </script> </body>
3.一般情况下，jQuery的扩展方法写在自执行匿名函数中（原因：在js中是以函数为作用域的，在函数中写可以避免自己定义的函数或者变量与外部冲突）
<script> (function(){ $.extent({ print1:function(){ console.log(123); } }) })(); </script> 说明： f=function () { alert(123) }; f(); 上面的等同于 (function (a) { alert(a) })(234);
Jquery事件绑定
DOM下两种事件绑定方式
第一种 <p id="p1" onclick="fun1(this)">hello p</p> function fun1(self) { alert(self.innerHTML); } 第二种 var ele = document.getElementsByClassName("p")[0]; ele.onclick=function () { alert(this.innerHTML) }
Jquery事件绑定用click
<script> $("p").click=function () { $(this).css("color","red") } </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script>--> <!--// $(document).ready(function () {--> <!--// $("p").css("color","red")--> <!--// })--> <!--//简写方式：--> <!--// $(function () {--> <!--// $("p").css("color","red")--> <!--// })--> <!--// </script>--> </head> <body> <p>hello world</p> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> <input type="button" value="+" onclick="add();"> <script src="jquery-2.1.4.min.js"></script> <script> // $("p").click(function () { // alert(123) // }) // $("p").bind("click",function () { // alert(123) // }) // $("ul li").click(function () { // alert(456); // }) // ---------等同于bind方法-------- // $("ul li").on("click",function () { // alert(456); // }); $("ul").on("click","li",function () { alert(456); }); function add() { $("ul").append("<li>555</li>") } </script> </body> </html>
滚动菜单示例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0px; } img { border: 0; } ul{ padding: 0; margin: 0; list-style: none; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrap{ width: 980px; margin: 0 auto; } .pg-header{ background-color: #303a40; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2); } .pg-header .logo{ float: left; padding:5px 10px 5px 0px; } .pg-header .logo img{ vertical-align: middle; width: 110px; height: 40px; } .pg-header .nav{ line-height: 50px; } .pg-header .nav ul li{ float: left; } .pg-header .nav ul li a{ display: block; color: #ccc; padding: 0 20px; text-decoration: none; font-size: 14px; } .pg-header .nav ul li a:hover{ color: #fff; background-color: #425a66; } .pg-body{ } .pg-body .catalog{ position: absolute; top:60px; width: 200px; background-color: #fafafa; bottom: 0px; } .pg-body .catalog.fixed{ position: fixed; top:10px; } .pg-body .catalog .catalog-item.active{ color: #fff; background-color: #425a66; } .pg-body .content{ position: absolute; top:60px; width: 700px; margin-left: 210px; background-color: #fafafa; overflow: auto; } .pg-body .content .section{ height: 500px; } img{ width: 40px; height: 40px; margin-top: 4px; border-radius: 50%; /*给元素的圆角边框*/ } </style> </head> <body> <div class="pg-header"> <div class="wrap clearfix"> <div class="logo"> <a href="#"> <img src="dva01.jpg"> </a> </div> <div class="nav"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">功能一</a> </li> <li> <a href="#">功能二</a> </li> </ul> </div> </div> </div> <div class="pg-body"> <div class="wrap"> <div class="catalog"> <div class="catalog-item" auto-to="function1"><a>第1张</a></div> <div class="catalog-item" auto-to="function2"><a>第2张</a></div> <div class="catalog-item" auto-to="function3"><a>第3张</a></div> </div> <div class="content"> <div menu="function1" class="section"> <h1>第一章</h1> </div> <div menu="function2" class="section"> <h1>第二章</h1> </div> <div menu="function3" class="section"> <h1>第三章</h1> </div> </div> </div> </div> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="text/javascript"> $(function(){ Init(); }); function Init(){ $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if(scrollTop > 50){ $('.catalog').addClass('fixed'); }else{ $('.catalog').removeClass('fixed'); } $('.content').children().each(function(){ var offSet = $(this).offset(); var offTop = offSet.top - scrollTop; var height = $(this).height(); if(offTop<=0 && offTop> -height){ //去除其他 //添加自己 var docHeight = $(document).height(); var winHeight = $(window).height(); if(docHeight == winHeight+scrollTop) { $('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active'); }else{ var target = $(this).attr('menu'); $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active'); } } }); }); } </script> </body> </html>
