jQuery

JQUERY

JQUERY是JavaScript的库，他快速、简洁，能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果。有了JQUERY不用再在html里面插入一大堆的JavaScript代码。

引用（导包）：在页面head里添加js <script type = “ text/javascript” src = “ ./script/jquery.js”> </script>

 

jQuery 核心函数：

1.        jQuery(express,[context]):

接收一个包含CSS选择器的字符串，然后用这个字符串去匹配一组元素。

返回的是 jQuery ；

expression(String):       要查找的字符串。

Context(element,jQuery)：             (可选)作为待查询的 DOM元素集、文档和jQuery对象。

有两种表现形式：

A 、$(document).ready(callback); 写在函数里面，可以调用。

B 、$(function(){}); 在窗体加载的时候就自动调用了。

eg——$(“p”).css(“background-color”, “red”);

                  找到P标签里面的内容，把他的样式改成背景色红色

2.        jQuery(html):

根据提供的原始的HTML标记字符串，动态创建由 jQuery对象包装的DOM元素。

在创建单个元素的时候要使用闭合标签。

返回值：jQuery；

html(String):        用于动态创建DOM元素的HTML标记字符串。

eg——$(“<div><h6>哈哈<h6/></div>”).appendTo(“body”);

           在调用这个函数的时候会自动增加html代码会出现“哈哈”。

3.        jQuery(elements):

将一个或多个DOM元素转化成jQuery对象。

可以接收XML文档和Window对象作为有效参数。

返回值：jQuery；

elements(Element ,Array<Element>):       用于封装jQuery对象的DOM元素

eg——$(document.body).css( "background", "black" );

           改变当强对象的背景色。

4.        jQuery(callback):

$(document).ready()的简写。

允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样，只不过用这个函数时，需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。

可以在一个页面里面使用任意多个$(document).ready事件。

返回值：jQUey；

Callback(Function):当DOM加载完成后要执行的函数。

属性：

1.      attr(name):

取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。

返回值：Object；

name(String):属性名称。

eg—— $(“div”).attr(“title”);

               根据div的名字找到他们title属性

2.      attr(key,value):

为所有的元素设置一个属性值。

返回值：jQuery；

key(String): 属性名称；

value(Object)：    属性值。

eg—— $("img").attr("src","test.jpg");

               给img元素设定值图片test.jpg

3.      attr(properties):

将一个“名/值”形式的对象设置为所有匹配元素的属性。

这是一种在所有匹配元素中批量设置很多属性的最佳方式。

返回值：jQuery；

properties(map):           作为属性的名/值对象。

eg——$(“img”).attr({src:“test.jpg”,alt: “test说明”});

           用于修改批量的图片src和alt。

4.      attr(key,fn):

为所有匹配的元素设置一个计算的属性值。

如果没有提供一个值，而是一个函数的话，就将这个函数计算出来结果的值作为属性值。

返回值：jQuery；

key(String):          属性名称；

fn(function):         返回值的函数，范围只能是当前元素，参数只能是当前元素的索引值。

eg—— $("img").attr("title", function() { return this.src });

               将src的属性设置为title的属性。

               “title”是你将要修改成什么。

               在function里面是你将要修改的东西。

5.      removeAttr(name):

从每一个匹配的元素删除一个属性。

返回值：jQuery；

name(String):要删除的属性名。

eg——$("img").removeAttr("src");

            从img里面把src属性删除

类：

1.      addClass(class):

给每个匹配的元素添加指定的类名。

返回值：jQuery；

Class(String):      一个或多个要添加到元素中的css类名，用空格分开。

eg——$(this).addClass(“over”);

      添加over类

2.      removeClass(class):

从匹配的元素中删除或指定类。

返回值：jQuery；

Class(String)：    一个或多个要删除的css类名，用空格分开。

eg——$(this).removeClass(“over”);

            删除over类

3.      toggleClass(class):

如果存在或不存在就删除或添加一个类。

返回值：jQuery；

Class(String):       css类名.

选择器：

选择器分为

基本选择器：

#id：jQuery("#myId").val("0")           // 将id="myId"的元素的值设置为"0";
element：jQuery("div")                    // 选择所有div元素;
.class：jQuery('.myClass')               // 选择所有class="myClass"的元素;
*：jQuery("*")                            // 选择页面所有元素;
element1,element1：jQuery("div,span,p.myClass")  // 选择所有p且class="myClass"、div和span元素;

层次；简单；内容；可见性等选择器。

$("form input")                    // 找到表单中所有的 input 元素

$("form > input")                 // 匹配表单中所有的子级input元素。

$("label + input")                 // 匹配所有跟在 label 后面的 input 元素

$('input:not(:text)')               // 选择所有input且不是type="text"的元素
$ ('img:first')                        // 选择第一个img元素
$ ('img:last')                         // 选择最后一个img元素
$ ('div:has(p)')                      // 选择包含p标签的div元素
$ ('div[id]')                          // 选择所有有id属性的div元素
$ ('div[name=myDiv]')          // 选择所有name="myDiv"属性的div元素
$ ('div[name!=myDiv]')        // 选择name="myDiv"以外的所有div元素
$ ('div[name^=my]')             // 选择所有name="my*"开头的所有div元素(例如<div name="myBook">)
$ ('div[name$=my]')             // 选择所有name="*my"结尾的所有div元素(例如<div name="bookmy">)
$ ('div[name*=my]')             // 选择所有name="*my*"的div元素(例如<div name="ismybook">)
$ ('div[name=my][value=me]')     // 选择所有name="my"且value="me"的div元素
$ ('input:checked')                       // 选择所有被checked的元素
$ ('select option:selected')             // 选择所有selected的元素

$("tr:hidden")                             // 查找所有不可见的 tr 元素

$("tr:visible")                             // 查找所有可见的 tr 元素

 

文档处理：

append(content)：

向每个匹配的元素内部追加内容。

eg——$("p").append("<b>Hello</b>");             //向所有段落中追加一些HTML标记。

appendTo(content):

把所有匹配的元素追加到另一个、指定的元素元素集合中。

eg——$("p").appendTo("#foo");                //把所有段落追加到ID值为foo的元素中。

prepend(content):

向每个匹配的元素内部前置内容。

eg——$("p").prepend("<b>Hello</b>");           //向所有段落中前置一些HTML标记代码。

prependTo(content):

把所有匹配的元素前置到另一个、指定的元素元素集合中。

eg——$("p").prependTo("#foo");               //把所有段落追加到ID值为foo的元素中。

 

CSS

css(name):

访问第一个匹配元素的样式属性。

eg——$("p").css("color");                  //取得第一个段落的color样式属性的值。

css(properties):

把一个“名/值对”对象设置为所有匹配元素的样式属性。

eg——$("p").css({ color: "#ff0011", background: "blue" });            //将所有段落的字体颜色设为红色并且背景为蓝色。如果属性名包含 "-"的话，必须使用引号: $("p").css({ "margin-left": "10px", "background-color": "blue" });

css(name,value)：

在所有匹配的元素中，设置一个样式属性的值。

eg——$("p").css("color","red");                             //将所有段落字体设为红色

Ajax

jQuery.ajax(options):

通过 HTTP 请求加载远程数据。

返回值：XMLHttpRequest；

Options(可选)：Ajax请求设置，所有选项都是可选的。