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