共计 5225 个字符，预计需要花费 14 分钟才能阅读完成。
jQuery 简介
jQuery: JavaScript Query JS 查问
jQuery 是一门轻量的、收费开源的 JS 函数库（就是 JS 的简略框架）
jQuery 能够极大的简化 JS 代码
jQuery 的核心思想：“写的更少，但做的更多”
jQuery 的劣势
- 能够极大的简化 JS 代码
- 能够像 css 选择器一样获取元素
- 能够批改 css 款式来管制页面的成果
- 能够兼容罕用的浏览器
引入 jQuery
jQuery 函数库文件就是一个 js 文件，要想应用 jQuery，须要先引入 jQuery 的函数库文件
<script src="./js/jquery-1.8.3.js"></script>
文档就绪事件函数
<head>
<meta charset="UTF-8">
<!-- 在应用 jQuery 之前，必须先引入 jQuery 的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
//1. 获取 id 为 demo 的 h1 元素
var h1 = document.getElementById("demo");
//2. 获取 h1 元素中的内容(innerHTML)
alert(h1.innerHTML);
</script>
</head>
<body>
<h1 id="demo">jQuery 的引入示例...</h1>
</body>下面的代码在执行时，会报一个谬误
起因形容：在执行获取 id 为 demo 的元素时, h1 元素还没有被浏览器加载到，所以获取不到 h1 元素。
解决形式一：
将 script 标签移到 body 外部，也就是 h1 元素的前面这样浏览器在加载时，会先加载 h1 元素，再执行获取 h1 元素的代码，因为在获取 h1 元素之前，h1 元素曾经被浏览器加载过了，所以前面再获取就可能获取到！
<body>
<h1 id="demo">jQuery 的引入示例...</h1>
<script>
//1. 获取 id 为 demo 的 h1 元素
var h1 = document.getElementById("demo");
//2. 获取 h1 元素中的内容(innerHTML)
alert(h1.innerHTML);
</script>
</body>解决形式二：
将获取元素的代码放在文档就绪事件函数中，文档就绪事件函数会在浏览器加载完所有的 html 元素后（也就是加载完最初一个 html 元素时）立刻执行。因为以后网页中的所有元素都被加载了，h1 元素必定也被加载了，此时再获取 h1 元素就肯定能获取到。
<head>
<meta charset="UTF-8">
<!-- 在应用 jQuery 之前，必须先引入 jQuery 的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
$(function(){
//1. 获取 id 为 demo 的 h1 元素
var h1 = document.getElementById("demo");
//2. 获取 h1 元素中的内容(innerHTML)
alert(h1.innerHTML);
});
</script>
</head>
<body>
<h1 id="demo">jQuery 的引入示例...</h1>
</body>解决形式三：
将获取元素的代码放在一个自定义的函数中，并将该函数绑定在 h1 元素的点击事件上，当咱们点击 h1 元素时会执行自定义的函数，函数执行时才获取 h1 元素，此时就可能获取到 h1 元素。
<head>
<meta charset="UTF-8">
<!-- 在应用 jQuery 之前，必须先引入 jQuery 的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
function fn1(){
//1. 获取 id 为 demo 的 h1 元素
var h1 = document.getElementById("demo");
//2. 获取 h1 元素中的内容(innerHTML)
alert(h1.innerHTML);
}
</script>
</head>
<body>
<h1 id="demo">jQuery 的引入示例...</h1>
</body>总结：什么时候须要用到文档就绪事件函数:
通常是在获取元素时, 如果 ” 获取元素的代码 ” 执行的工夫, 比 “ 元素自身加载的工夫 ” 还要早 (也就是说, 在获取元素时, 元素还没有被浏览器加载), 那么元素必然是获取不到的!
能够将获取元素的代码放在文档就绪事件函数中, 因为文档就绪事件函数是在浏览器加载残缺个网页后立刻执行，因而在这个函数中获取任何元素都能够获取到。
jQuery 选择器
根本选择器
(1)元素名选择器
$("div") -- 选中所有的 div 元素
$("span") -- 选中所有的 span 元素
(2)class/ 类选择器
$(".s1") -- 选中所有 class 值为 s1 的元素(class 值为 s1 的元素可能是任何元素)
$("span.s1") -- 选中所有 class 值为 s1 的 span 元素
(3)id 选择器
$("#one") -- 选中 id 为 one 的元素
(4)多元素选择器
$("div,span,.s1,#one") -- 选中所有的 div 元素, 以及所有的 span 元素, 以及所
有 class 值为 s1 的元素, 以及 id 为 one 的元素层级选择器
$("div span") -- 选中所有 div 外部的所有 span 元素
$("#one span") -- 选中 id 为 one 的元素外部的所有 span 元素
$("#two+span") -- 选中 id 为 two 的元素前面紧邻的 span 兄弟元素
$("#two").next("span") -- 选中 id 为 two 的元素前面紧邻的 span 兄弟元素
$("#two").prev("span") -- 选中 id 为 two 的元素后面紧邻的 span 兄弟元素
$("#two~span") -- 选中 id 为 two 的元素前面所有的 span 兄弟元素
$("#two").nextAll("span") -- 选中 id 为 two 的元素前面所有的 span 兄弟元素
$("#two").prevAll("span") -- 选中 id 为 two 的元素后面所有的 span 兄弟元素
$("#two").siblings("span") -- 选中 id 为 two 的元素前、后所有的 span 兄弟元素根本过滤选择器
(1) 选中第一个 div 元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)
(2) 选中最初一个 div 元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)
(3) 选中第 n + 1 个 div 元素(n 从零开始)
$("div:eq(n)")
$("div").eq(n)其余选择器
$(":input") -- 匹配所有的表单项元素(能够是 input、select、option、textarea 等元素)
$(":checkbox") -- 匹配所有的复选框
等价于 $("input[type='checkbox']") -- 匹配所有的复选框
$(":checked") -- 能够匹配所有被选中的单选框或复选框, 以及被选中的 option 选项
$("input:checked") -- 示意匹配所有被选中的单选框或复选框
$("input[type='checkbox']:checked") -- 示意匹配所有被选中的复选框
$("input[type='checkbox']:not(:checked)") -- 示意匹配所有没有被选中的复选框jQuery API
html 元素操作
(1)创立 html 元素
$("<div></div>") -- 创立一个 div 元素, 返回一个 jQuery 对象
$("<div> 这是一个 div 元素 </div>") -- 创立一个蕴含内容的 div 元素, 返回一个 jQuery 对象
$("<input type='text'/>") -- 创立文本输入框, 返回一个 jQuery 对象(2)增加子元素 — append()
$("body").append("<table><tr><td> 这是一个 td 元素 </td></tr></table>");
-- 往 body 中增加一个表格元素
var $div = $("<div> 这是一个 div 元素 </div>");
$("body").append($div) -- 往 body 中增加一个 div 元素(3)删除元素 — remove()
$("div").remove() -- 删除所有匹配的 div 元素(4)替换元素 — replaceWith()
$("div").replaceWith("<p> 我是来替换 div 的 p 元素!!</p>")html 元素属性 或者 css 属性操作
1.prop()函数 -- 获取元素的某一个属性值, 或者为元素设置属性值
attr()函数 -- 能够获取元素的属性值, 或者为元素设置属性值
prop()和 attr()的区别:
prop 函数是在 jquery1.6 版本之后才呈现, 用于获取或设置元素的属性 (固有属性) 值,
attr 函数是在 jquery1.6 版本之前就有的函数, 用于获取或设置元素的属性 (自定义属性) 值
2.css()函数 -- 能够获取或设置元素的 css 款式动画函数
show() -- 设置元素为显示状态, 等价于 css("display", "block|inline");
hide() -- 设置元素为暗藏状态, 等价于 css("display", "none");
toggle() -- 切换元素的显示状态, 如果元素自身是显示的, 则会变成暗藏状态, 如果元素自身是暗藏的, 则会变成显示状态
slideToggle() -- 切换元素的显示状态, 如果元素自身是显示的, 则会变成暗藏状态, 如果元素自身是暗藏的, 则会变成显示状态
parent()/parents()/find()
parent() -- 获取以后元素的父元素, 相似于 js 中的 parentNode 属性
parents() -- 获取以后元素的所有的先人元素
find() -- 获取以后元素外部指定的后辈元素
$("div").find("span") -- 获取所有 div 元素外部的 span 元素
$("div span") -- 获取所有 div 元素外部的 span 元素扩大
为元素绑定点击事件
形式 1(js 版)：
<script>
function fn(){alert("input 按钮被点击了...");
}
</script>
<body>
<input onclick="fn()" type="button" value="点我~!" />
</body>形式 2(js 版)：
<script>
window.onload = function(){
// 获取 id 为 btn 的元素
var btn = document.getElementById("btn");
btn.onclick = function(){alert("input 按钮被点击了...");
}
}
</script>
<body>
<input id="btn" type="button" value="点我~!" />
</body>形式 3(jQuery 版)
<script>
$(function(){
// 当点击 btn 按钮时, 触发点击事件执行其中的函数
$("#btn").click(function(){alert("input 按钮被点击了...");
});
});
</script>
<body>~~~~
<input id="btn" type="button" value="点我~!" />
</body>js 对象和 jQuery 对象的相互转换
通过 JS 的形式获取元素，返回的是 JS 对象，JS 对象只能调用 JS 的属性或函数
通过 jQuery 选择器获取元素，返回的是 jQuery 对象（构造像一个汇合），jQuery 对象只能调用 jQuery 的属性或函数。
如果现有 JS 对象，但咱们须要调用 jQuery 的属性或函数，能够将 JS 对象转成 jQuery 对象；
如果现有 jQuery 对象，但咱们须要调用 JS 的属性或函数，能够将 jQuery 对象转成 JS 对象；
JSON 解析：
传输数据：txt，xml（和 html 有点像 标签 name=key，标签内容 =value）
json 外面有属性，有值，没有标签 [{},{}] json 传输效率高
[{“p”:”3999.00″,”op”:”3999.00″,”cbf”:”0″,”id”:”J_100007851351″,”m”:”4000.00″},{“p”:”6499.00″,”op”:”7299.00″,”cbf”:”0″,”id”:”J_100011773072″,”m”:”7499.00″}]
data
[
{“p”:”3999.00″,”op”:”3999.00″,”cbf”:”0″,”id”:”J_100007851351″,”m”:”4000.00″}, {“p”:”6499.00″,”op”:”7299.00″,”cbf”:”0″,”id”:”J_100011773072″,”m”:”7499.00″}
]