jQuery从0到1
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事件处理函数
jQuery从0到1的更多相关文章
- jQuery 2.0.3 源码分析core - 选择器
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象 ...
- jQuery 3.0的domManip浅析
domManip 这个函数的历史由来已久,从 jQuery 1.0 版本开始便存在了,一直到最新的 jQuery 版本.可谓是元老级工具函数. domManip 的主要功能是为了实现 DOM 的插入和 ...
- jQuery 3.0 的 Data 浅析
jQuery 3.0 在6月9日正式发布了,3.0 也被称为下一代的 jQuery .这个版本从14年10月开始,其中发布过一次beta 版(2016/1/14,)和候选版(2016/05/20).一 ...
- jQuery 3.0正式发布
jQuery 基金会刚刚发布了该 JavaScript 框架的 3.0 版本,并且首次抛弃了对老旧的 IE 浏览器的支持.jQuery 3.0 的工作始于 2014 年 10 月,其最初目标是在 2. ...
- jQuery 3.0 的变化
时隔 3 个月,jQuery 团队终于发布了 3.0 Alpha 版本.有两个版本 jQuery compat 3.0 和 jQuery 3.0. jQuery compat 3.0 对应之前的 1. ...
- jQuery 2.0发布，不再支持IE6/7/8
有时发现jQuery库引用的都对,javascript代码写的也没问题,可是jquery就是出现问题,额--我发现换个jquery库就没问题了,长时间不关注jquery的问题而已: 很多人都没有使用最 ...
- PJax在jQuery 3.0无法运行问题修复
PJax在jQuery 3.0无法运行 [现象] 页面报错:Uncaught TypeError: Cannot read property 'push' of undefined [原因] jQue ...
- jQuery 3.0 的 Data
jQuery 3.0 的 Data Snandy If you cannot hear the sound of the genuine in you, you will all of your li ...
- jQuery 2.0.3 源码分析Sizzle引擎解析原理
jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + ...
- jquery ajax自定义分页组件(jquery.loehpagerv1.0)原创
简单的两个步骤截可调用 <script src="<%=basePath%>/resources/js/jquery-1.7.1.min.js"></ ...
随机推荐
- mybatis源码解析3---XMLConfigBuilder解析
1.XMLConfigBuilder XMLConfigBuilder类位于Mybatis包的org.apache.ibatis.builder.xml目录下,继承于BaseBuilder类,关于Ba ...
- [Android相机]通过手机摄像头识别环境亮度（转）
源: [Android相机]通过手机摄像头识别环境亮度 iOS利用摄像头获取环境光感参数
- Web安全学习笔记之更新kali国内源
vi /etc/apt/sources.list #中科大 deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contrib ...
- Golang的数组初始化方式及for-range遍历
package main import ( "fmt" ) func main() { ]], , } //定义并初始化长度为3的数组 fmt.Println(arr1) //[1 ...
- python类的组合
类的组合,即在类实例化时,将另一个类的实例作为参数传入,这样可以将两个实例关联起来. 当类之间有显著不同,并且较小的类是较大的类所需要的组件时,用组合比较好. 例如,描述一个机器人类,这个大类是由很多 ...
- HashMap的实现原理总结
HashMap基于hashing原理,我们通过put()和get()方法储存和获取对象. 当我们将键值对传递给put()方法时,它调用键对象的hashCode()方法来计算hashcode,让后找到b ...
- Kali linux 2018安装后全屏乱码解决
安装的时候选择了中文, 后来安装成功后成了全部乱码的. 原因是,系统没有中文字体显示安装包, 下载一个 sudo apt-get install ttf-wqy-zenhei 重启解决!
- UML状态机图【图3】--☆
UML状态机图 基本概述 状态机图描述的是围绕某一事物状态变化的图.它也是三大流程分析利器之一.它和活动图的区别在于,活动图是描述事物发生的流程,是多个角色参与的,而状态机描述的是事物的状态变化 ...
- bzoj 1014 火星人prefix - 链表 - 分块
Description 火星人最近研究了一种操作:求一个字串两个后缀的公共前缀.比方说,有这样一个字符串:madamimadam,我们将这个字符串的各个字符予以标号:序号: 1 2 3 4 5 6 7 ...
- volatile的陷阱
对于volatile关键字,大部分C语言的教程都是一笔带过,并没有做太深入的分析,所以这里简单的整理了一些 关于volatile的使用注意事项.实际上从语法上来看volatile和const ...