JQuery
JQuery简介
jQuery由美国人John Resig在2006年初创建，是继prototype之后又一个优秀的javaScript框架。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
JQuery特点
jQuery 理念: 写得少, 做得多. 优势如下:
–轻量级
–强大的选择器
–出色的 DOM 操作的封装
–可靠的事件处理机制
–完善的 Ajax
–出色的浏览器兼容性
JQuery的使用方式
jq.gif
什么是DOM对象
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
DOM对象，即是我们用传统的方法(javascript)获得的对象。
例：var dom=documnet.getElementById("id");
什么是JQuery对象
JQuery对象就是通过JQuery包装DOM对象后产生的对象。
JQuery对象可以使用JQuery中的所有方法，但不能使用DOM对象的方法。
例：var $jq=JQuery对象；
JQuery的选择器
1.基本选择器
根据id匹配对应的标签 得到的是单个标签的集合 - $("#id")
根据class匹配对应的标签 得到的是标签的集合 - $(".class")
根据element匹配对应的标签 得到的是标签的集合 - $("element")
根据 * 匹配对应的标签 得到的是所有标签的集合 - $("*")
根据每个选择器匹配对应的标签 得到的是对应选择器标签的集合 - $("#id",".class","element")
2.层次选择器(子标签，相邻标签，兄弟标签)
根据给定标签查询对应的所有指定的后代标签 得到的是指定后代标签的集合 - $(body,div)
根据给定标签查询对应的所有指定子标签 得到的是指定子标签的集合- $(body>div)
根据给定标签查询该标签的下一个标签 得到的是指定子标签的集合- $("#one"+div)
根据给定标签查询该标签的所有兄弟标签 得到的是兄弟子标签的集合- $("#one"~div)
3.过滤选择器
1.基本过滤选择器
g1.gif
2.内容过滤选择器
n1.gif
3.可见性过滤选择器
：hidden 选取所有不可见的标签
- display：none,type=hidden ,visible:hidden
：visible: 选取所有可见的标签
4.属性过滤选择器
属性过滤器.png
5.子元素过滤选择器
子过滤器.png
6.表单过滤选择器
18.png
59.png
JQuery对象与DOM对象之间的转换
JQuery操作节点的方法
创建节点 var nwpP =$("<p></p>");
append(content)向每个匹配的元素内部追加内容。
向所有段落中追加一些HTML标记。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").append("<b>Hello</b>");
appendTo(content)把所有匹配的元素追加到另一个指定的元素元素集合中
把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p>
<div></div><div></div>
jQuery 代码:
$("p").appendTo("div");
attr(name);返回文档中第一个图像的src属性值。
HTML 代码:
<img src="test.jpg"/>
jQuery 代码:
$("img").attr("src");
prepend(content)向每个匹配的元素内部前置内容
向所有段落中前置一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").prepend("<b>Hello</b>");
prependTo(content)把所有匹配的元素前置到另一个、指定的元素元素集合中
把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p><div id="foo"></div>
jQuery 代码:
$("p").prependTo("#foo");
after(content)在每个匹配的元素之后插入内容。
在所有段落之后插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").after("<b>Hello</b>");
insertAfter(content)把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
把所有段落插入到一个元素之后。与 $("#foo").after("p")相同
HTML 代码:
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery 代码:
$("p").insertAfter("#foo");
before(content)在每个匹配的元素之前插入内容
在所有段落之前插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").before("<b>Hello</b>");
insertBefore(content)把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。
HTML 代码:
<div id="foo">Hello</div><p>I would like to say: </p>
jQuery 代码:
$("p").insertBefore("#foo");
r1.png
从DOM中把所有段落删除
HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove();
把所有段落的子元素（包括文本节点）删除
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
coyp.png
克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。
HTML 代码:
<b>Hello</b><p>, how are you?</p>
jQuery 代码:
$("b").clone().prependTo("p");
创建一个按钮，他可以复制自己，并且他的副本也有同样功能。
HTML 代码:
<button>Clone Me!</button>
jQuery 代码:
$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
replace.png
把所有的段落标记替换成加粗的标记。
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").replaceWith("<b>Paragraph. </b>");结果:
把所有的段落标记替换成加粗标记
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("<b>Paragraph. </b>").replaceAll("p");
attr(properties)为所有图像设置src和alt属性
HTML 代码:
<img/>
jQuery 代码:
$("img").attr({ src: "test.jpg", alt: "Test Image" });
attr(key, value)为所有图像设置src属性。
HTML 代码:
<img/>
<img/>
jQuery 代码:
$("img").attr("src","test.jpg");
removeAttr(name)将文档中图像的src属性删除
HTML 代码:
<img src="test.jpg"/>
jQuery 代码:
$("img").removeAttr("src");
css(name)访问第一个匹配元素的样式属性。
取得第一个段落的color样式属性的值。
jQuery 代码:
$("p").css("color");
css(properties)将所有段落的字体颜色设为红色并且背景为蓝色
jQuery 代码:
$("p").css({ color: "#ff0011", background: "blue" });
css(name, value)将所有段落字体设为红色
jQuery 代码:
$("p").css("color","red");
1.png
2.png
3.png
4.png
HTML方法代码
html()-取得第一个匹配元素的html内容
html(val)-设置每一个匹配元素的html内容
text()-取得所有匹配元素的内容
text(val)-设置所有匹配元素的文本内容
val()-获得第一个匹配元素的当前值。
获得单个select的值和多选select的值。
HTML 代码:
<p></p>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
jQuery 代码:
$("p").append(
"<b>Single:</b> " + $("#single").val() +
" <b>Multiple:</b> " + $("#multiple").val().join(", ")
);
结果:
[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]
描述:获取文本框中的值
HTML 代码:
<input type="text" value="some text"/>
jQuery 代码:
$("input").val();结果:
some text
val(val)-设置每一个匹配元素的值。
设定文本框的值
HTML 代码:
<input type="text"/>
jQuery 代码:
$("input").val("hello world!");
JQuery事件
load(fn)-在每一个匹配元素的load事件中绑定一个处理函数
如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。
ready(fn)-当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
请确保在 元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行
在DOM加载完成时运行的代码，可以这样写：
jQuery 代码:
$(document).ready(function(){
// 在这里写你的代码...
});描述:
使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用
$ 作为别名，而不管全局的 $ 为何。
jQuery 代码:
jQuery(function($) {
// 你可以在这里继续使用$作为别名...
});
bind(type, [data], fn)-为每个匹配元素的特定事件绑定事件处理函数
jQuery还提供了一些绑定这些标准事件类型的简单方式，比如.click()用于简化.bind('click')。一共有以下这些：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。
hover(over, out)-一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法
overFunction鼠标移到元素上要触发的函数
outFunction鼠标移出元素要触发的函数
鼠标悬停的表格加上特定的类
jQuery 代码:
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
toggle(fn, fn2, [fn3, fn4, ...])-每次点击后依次调用函数。
fnFunction第一数次点击时要执行的函数。
fn2Function第二数次点击时要执行的函数。
fn3, fn4, ... (可选)Function更多次点击时要执行的函数。
对表格的切换一个类
HTML 代码:
<ul>
<li>Go to the store</li>
<li>Pick up dinner</li>
<li>Debug crash</li>
<li>Take a jog</li>
</ul>
jQuery 代码:
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
对列表的切换样式
HTML 代码:
<ul>
<li>Go to the store</li>
<li>Pick up dinner</li>
<li>Debug crash</li>
<li>Take a jog</li>
</ul>
jQuery 代码:
$("li").toggle(
function () {
$(this).css({"list-style-type":"disc", "color":"blue"});
},
function () {
$(this).css({"list-style-type":"disc", "color":"red"});
},
function () {
$(this).css({"list-style-type":", "color":"});
}
);
事件冒泡
事件冒泡.png
<div id="d1" onclick="alert('div')">
<p onclick="alert('p')">
<input type="button" value="按钮1" onclick="f1(event);"/>
</p>
</div>
<script>
window.onload=function(){
//document.getElementById("d1").className="li";
document.getElementsByTagName("div")[1].className="we";
//document.getElementsByTagName("div")[0].className="li";
}
function f1(e) {
alert("button");
//取消事件冒泡
//{"stopPropagation":function(){}}
//若属性存在，在调用方法
if(e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
//如何获取事件源
function f2(e) {
var obj = e.srcElement || e.target;
console.log(obj);
}
</script>
事件对象.png
移除事件.png
JQuery动画效果
d0.png
d1.png
d2.png
