jQuery不需要安装,把下载的jquery.js文件放在网站上的一个公共的位置,需要在某个页面使用jQuery时,再相对引用即可。——其中有压缩版和未压缩版,分别用于开发和发布。http://jquery.com/
使用微软或谷歌等CDN的好处是:
- 用户在访问其他网站时,很多时候都已经从谷歌、微软加载过jQuery。如果是这样,那么用户再访问自己的网站时,就会从缓存中调用jQuery——减少了加载时间。
- 大多数CDN都能确保加载jQuery,从最近的服务器上加载——提高加载速度(不管有没有第一种情况,都可以提高速度)。
jQuery的引用:
<head> <!-- 例如 --> <script src="../scripts/jquery-3.1.1.js" type="text/javascript"></script> </head>
在jQuery库中,会创建一个名为jQuery的对象,其别名为$。
JavaScript中window.onload和jQuery中$(document).ready()的区别:
- $(document).ready(function(){函数体});——绘制完DOM后,就执行,不必等待DOM元素关联的资源加载完。
- window.onload = function(){函数体};——必须等待网页中,所有内容加载完毕后,才能执行。所以这个方法只会执行最后一个,而前者可以依次执行多个。
$(document).ready(function)的简写:
// $() 等效于 $(document).ready(),接收一个 function 参数
$(function () { alert("等效于$(document).ready(function () {};"); });
选择器:
jQuery使用CSS的选择器来操纵HTML元素(DOM):选择器函数$()+CSS选择器 —— $("CSS选择器")。
JQuery对象与JavaScript对象的转换:
//DOM转jQuery对象 var txtName = document.getElementById("txtName"); var $txtName = $(txtName); //jQuery对象 //jQuery转DOM对象 var $txtName = $("#txtName"); //jQuery对象 var txtName = $txtName[0]; //DOM对象 //或者var txtName = $txtName.get(0); //DOM对象
jQuery特有的选择器:
$('a:first') //选择网页中第一个a元素 $('tr:odd') //选择表格的奇数行 $('#myForm :input') // 选择表单中的input元素 $('div:visible') //选择可见的div元素 $('div:gt(2)') // 选择所有的div元素,除了前三个 $('div:animated') // 选择当前处于动画状态的div元素
在JS中,如果页面中不存在”test”这个id,var d = document.getElementById("test")语句将会返回null,即对象d为null——此时再对这个对象进行操作,浏览器将会生成错误,而jQuery选择器则不会报错。
显示、隐藏:
<p id="p1">段落1</p> <button id="b1">hide</button> <button id="b2">show</button> <script> $(document).ready(function () { $("#b1").click(function () { $("p").hide(); //隐藏后的效果就跟删除了一样,不会继续占位置:转换成样式 —— style="display: none;" }); $("#b2").click(function () { $("p").show(); }); }); </script>
使用带参数的hide、show:
<button>隐藏</button> <p>这是一个段落。</p> <p>这是另一个段落。</p> <script> //$(selector).hide(speed, callback);$(selector).show(speed, callback); //二者皆可选。speed 规定隐藏/显示的速度,可以取以下值:"slow"、"fast"、"normal" 或毫秒。 // callback 是隐藏或显示完成后所执行的函数名称。此参数除了达到某种效果之外,还可以避免动画还未完成时,JS导致的页面冲突、错误等。 $(document).ready(function () { $("button").click(function () { $("p").hide(1000, function () { alert("hello"); //这里要弹出两次:因为有两个p,隐藏两次 }); }); }); </script>
使用toggle切换隐藏hide、显示show的状态:
<button>切换键</button> <p>这是一个段落。</p> <p>这是另一个段落。</p> <script> $(document).ready(function () { $("button").click(function () { //和hide、show的用法一样 $("p").toggle(1000); }); }); </script>
淡入淡出效果:
<button class="show">fadeIn</button> <button class="hide">fadeOut</button> <button class="toggle">fadeToggle</button> <button class="fadeTo">fadeTo</button> <p>这是一个段落。</p> <p>这是另一个段落。</p> <script> $(document).ready(function () { //元素显示、隐藏淡入淡出:fadeIn、fadeOut、fadeToggle与hide、show的参数相同,但fadeTo多一个参数 $(".hide").click(function () { $("p").fadeOut("slow"); }); $(".show").click(function () { $("p").fadeIn("slow"); }); $(".toggle").click(function () { $("p").fadeToggle("slow"); }); $(".fadeTo").click(function () { // $(selector).fadeTo(speed, opacity, callback);
// opacity:不透明度(透明0 — 不透明1),透明度为0与hide不一样,opacity=0会占位置、默认opacity=1,所以opacity不设置就没有丁点儿hide效果;其他两个参数和hide一样 $("p").fadeTo("slow", 0.5); }); }); </script>
滑动效果:
<button>滑呀滑</button> <div class="box"> <p>hello</p> <p>world</p> </div> <script> $(document).ready(function () { $("button").click(function () { //slideDown、slideUp、slideToggle的参数和hide一样(没有opacity参数) $(".box").slideToggle("slow"); }); }); </script>
自定义动画效果:
<button>动画帝君</button> <div> <p>段落一</p> <p>段落二</p> </div> <style> div{ /*默认情况,所有HTML元素的位置都是静态的,所以无法移动。*/ /*因此要想移动一个元素,首先要把元素的position属性设置为absolute、fixed、relative */ position: absolute; background-color: red; } </style> <script> $(document).ready(function () { $("button").click(function () { //$(selector).animate({ params}, speed, callback); 参数1:操纵几乎所有CSS属性 //但是所有的属性必须采用Camel写法,如不能用"padding-left",而是"paddingLeft" //而且色彩动画不在核心jQuery库中:如果要使用颜色动画,必须从jQuery.com下载Color Animations 插件 $("div").animate({ //position属性的值,是相对于原来位置的偏移量 right: '250px' }); //再来一个:形成动画队列,依次调用 $("div").animate({ left: '250px', opacity: "0.5", height: '+=50px', //使用相对值:每一次都相对于当前(不是原来的)位置 width: "toggle" //show、hide —— toggle }); }); }); </script>
停止动画stop:
<button class="b1">动画帝君</button> <button class="b2">stop</button> <div> <p>段落一</p> <p>段落二</p> </div> <script> $(document).ready(function () { $(".b1").click(function () { $("div").slideToggle(5000); $("div").fadeOut(5000); }); $(".b2").click(function () { //$(selector).stop(stopAll, goToEnd);在jQuery效果结束之前,将其停止 //stopAll:是否清除所有动画队列。默认是false,即仅清除当前动画,队列后面的动画继续执行 //goToEnd:是否立即完成操作(动画:操作+效果)。默认是false。 $("div").stop(true, false); }); }); </script>
方法链接(chaining):
通常也称作链式操作:由于jQuery的方法都是返回对象自身,所以可以在一条语句上,隐式迭代执行多个函数(链式)。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
DOM操作:
<p class="p1"><b>测试文本</b></p> <p class="p2"></p> <input type="text" class="p3" /> <button>显示值</button> <script> $(document).ready(function () { //text() - 设置或返回所选元素的文本内容(只有文本,设置、返回都会当作纯文本,面向页面输出) alert($(".p1").text("<b>hello</b>").text()); //设置返回的是this,空参数返回的是String //html() - 设置或返回所选元素的内容(包括 HTML 标记,面向HTML源代码) alert($(".p2").html("<b>hello</b>").html()); //获取或设置 input 输入框的输入 $("button").click(function () { alert($(".p3").val(125454).val()); }); }); </script>
设置/获取DOM属性:
<a href="http://www.qunyh.cn">群影汇影视平台</a> <a class="a1">群影汇</a> <script> $(document).ready(function () { $("a").attr("href", "http://www.baidu.com"); alert($("a").attr("href")); //设置多个属性 $(".a1").attr({ "href": "http://www.qunyh.cn", "title": "群影汇-影视戏曲特色文化产业公共服务平台-平台首页" }); }); </script>
利用DOM添加新的文本/HTML:
<ol> <li>Item one</li> </ol> <p class="p1">段落1</p> <script> //追加新文本/HTML的方法有:innerHTML、jQuery、JavaScript DOM //在标签的原有内容的结尾,追加新内容 $("ol").append("<li>Item two</li>"); //在开头,追加新内容 $("ol").prepend("<li>Items zero</li>"); //append、prepend可以有多个参数,但始终都当作一个整体来加到最后、开头 //在选中元素之前、之后新增内容 $(".p1").before("<p>段落0</p>"); $(".p1").after("<p>段落2</p>"); //before、after也可以有多个参数,用法一样 </script>
删除元素、内容:
<ol id="one"> <li>Item one</li> </ol> <ol id="two"> <li>Item one</li> </ol> <ol> <li id="item1">Item one</li> <li id="item2">Item two</li> </ol> <script> $("#one").remove(); //删除选中元素及其所有子元素 //带参(jQuery选择器)的remove:此时的选择器不是对子元素进行过滤 $("li").remove("#item1"); $("#two").empty(); //仅仅清空掉选中元素的所有子元素(本身不删掉);empty无论带不带参,效果都一样 </script>
增加、删除类(样式):
<button id="b1">red</button> <button id="b2">deepskyblue</button> <button id="b3">toggle</button> <p>test</p> <style> .p1{ color: red; } .p2{ color: deepskyblue; } </style> <script> $("#b1").click(function () { $("p").removeClass().addClass("p1"); //如果不先删除,那么就有可能会有多个class组合到一起(例如此处可能变成"p1 p2") //$("p").removeClass("p1"); //上面是删掉元素的所有类。但是如果多个类组合到一起了,也可以指定某一个删掉 }); $("#b2").click(function () { $("p").removeClass().addClass("p2"); }); $("#b3").click(function () { $("p").toggleClass("p1"); //切换:如果有这个类,就只删掉这个类;如果没有,就增加这个类 }); </script>
直接设置CSS样式:
<p style="color: red">test</p> <script> //获得propertyname的value:css("propertyname")只返回首个匹配元素的属性value document.write($("p").css("color")); //css("propertyname", "value"); $("p").css("color", "deepskyblue"); //设置:还是返回对象,而不是value //设置多个CSS属性,把所有CSS属性用{}括起来:js对象 $("p").css({ "color": "red", "background-color": "black" }); </script>
设置元素和浏览器窗口的尺寸:
<div>hello</div> <script> //width()、height() 方法设置或返回元素的宽度、高度(不包括内边距、边框或外边距) document.write($("div").width() + " and " + $("div").height(100) + "<br />"); //设置返回的是对象 //innerWidth()、innerHeight() 方法返回元素的宽度、高度(包括内边距) document.write($("div").innerWidth() + " and " + $("div").innerHeight() + "<br />"); //outerWidth()、outerHeight() 方法返回元素的宽度、高度(包括内边距和边框) document.write($("div").outerWidth() + " and " + $("div").outerHeight(true) + "<br />"); //参数true,表示在无参的基础,还要算上margin //当然以上的结果都是一样的,因为没有设置padding、border、margin,就是说=0 //通过代表浏览器的对象,获得浏览器的相关参数(浏览器的高度、宽度等都由用户操控,所以我们只读取相关参数就行了) document.write($(document).width() + " and " + $(window).width() + "<br />"); </script>
遍历:
1、先查找:
找爸爸:
<div id="grandparent"> <ul id="parent"> <li><p><span>test</span></p></li> </ul> </div> <script> //向上遍历(祖先) document.write($("li").parent().attr("id")); //直接父元素 $("li").parents().css("color", "red"); //返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>) //使用参数对得到的祖先元素进行过滤 $("li").parents("ul").css("color", "deepskyblue"); //只要ul祖先 //直到(until)某个祖先为止:parentsUntil方法的参数为截至的那个祖先元素 $("span").parentsUntil("li").css("color", "red"); //ul是deepskyblue,所以是蓝色的小圆点;li是red,所以li的text是红色的 </script>
找娃娃:
<div id="grandparent"> <ul id="parent1"> <li id="one"><p><span>test1</span></p></li> <li id="two"><p><span>test2</span></p></li> </ul> <ol id="parent2"> <li><p>Item</p></li> </ol> </div> <script> //向下遍历(后代) $("#parent1").children().css("color", "red"); //返回所有直接子元素 document.write($("#parent1").children("#one").html()); //使用参数(选择器)从所选直接子元素中过滤 //从后代中寻找,指定的后代(不一定是直接后代) document.write($("#parent2").find("p").html()); //寻找ol的所有p后代;*可代表所有后代 </script>
找兄弟:
<div id="grandparent"> <ul id="parent1"> <li id="one"><p><span>test1</span></p></li> <li id="two"><p><span>test2</span></p></li> <li id="three"><p><span>test3</span></p></li> <li id="four"><p><span>test4</span></p></li> <li id="five"><p><span>test5</span></p></li> </ul> </div> <script> //水平遍历(同胞,即有相同的父元素) $("#one").siblings().css("color", "red"); //返回所有同胞(不包括自己) document.write($("#one").siblings("#three").html()); //过滤 //只返回下一个同胞元素 document.write($("#one").next().html()); //返回向后的所有同胞元素(前面的就不要了,自然也不包括自己) $("#three").nextAll().css("color", "deepskyblue"); //直到型nextAll $("#two").nextUntil("#four").css("color", "blue"); //居然不包括#four //prev(), prevAll() 以及 prevUntil()自然同理,只不过方向相反 </script>
专门的过滤(事先缩小搜索元素的范围):
<ul id="parent1"> <li id="one"><p><span>test1</span></p></li> <li id="two"><p><span>test2</span></p></li> <li id="three"><p><span>test3</span></p></li> </ul> <script> //最基本的过滤方法:first(), last() 和 eq() —— 基于在一组元素中的位置,来选择某一个特定的元素 document.write($("li").first().html() + $("li").last().html() + $("li").eq(0).html()); //获得一组元素 — 过滤:只要first、last;指定位置eq(0-length) //过滤器:不满足条件(选择器)的会从选择结果中去掉(不会影响网页DOM结构) document.write($("li").filter("#two").html()); //not过滤器:与filter相反 $("li").not("#one").css("color", "red"); //满足的去掉:2、3变红了 </script>
2、找到后遍历:
var children = $("#ListBox2").children(); for (var i = 0; i < children.length; i++) { //这样只是JavaScript的对象:因此children[i].text()是会报错的,后面的代码就不执行了 if (children[i].innerText == $(this).text()) { } }
多个框架,使用"$"符号冲突时:
var jq = $.noConflict(); //jQuery.noConflict();这样写,jQuery依然可以使用,只是$不能用了
比较高级、细节的东西:
1、Attribute和Property的区别:
问题(摘自于实验报告):JQuery中如何获取某个元素的属性?结合互联网中关于DOM中的Attribute和Property两种属性的解释回答,何时该访问Attribute,何时该访问Property?
答:特性Attribute:是DOM节点自身所带的属性,如id、class、href等。获取特性如下:$("a").attr("href");
属性Property:为DOM对象所附加的内容,例如childNodes、firstChild等。可以在浏览器审查的Properties栏中查看。如何获取暂时不知道,遇到了再说。
好,现在遇到了:$("#test").prop("checked");//得到的结论是(且不论对错):Attribute是不一定有的,例如这里的input[type=checkbox],如果没写checked这个Attribute,则不能获取(无论是否选中,都只能得到undefined);而属性Property是一直都有的,只是选中与否,对应的值不一样。
查自于jQuery官网:
事件绑定:
.on(events [,selector] [,data],handler) //为selector的元素的events事件 (复数是因为on函数可以为多个事件绑定相同/不同的handler) 附加handler事件处理函数