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', //使用相对值：每一次都相对于当前(不是原来的)位置 "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事件处理函数