jquery清除子元素的方法-jquery清除div内容

本人提议:学习培训jQuery以前，先把握基础的JavaScrpit英语的语法，尤其是涵数，基本上全是在jQuery中采用的。

jQuery介绍

jQuery 是一个轻量 JavaScript 库jQuery 库坐落于一个 JavaScript 文档中，在其中涵盖了全部的 jQuery 涵数，必须根据 标识引进 jQuery 库才可以开展应用

jQuery库的三个详细介绍来源于。

当地引进一共有两种版本号的 jQuery 可供免费下载 http://jQuery.com：一份是精减过的，另一份是未缩小的（供调节或阅读文章）从 Google 载入 CDN jQuery 关键文档（ 版本号可拆换 ）src = http://gapis.geekzu.org/ajax/ajax/libs/jquery/1.4.0/jquery.min.js从 Microsoft 载入 CDN jQuery 关键文档（ 版本号可拆换 ）src = http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js

JQuery英语的语法

基本上英语的语法:$(选择符)。实际操作()。

美元符号（$）界定 jQuery选择符（selector）“ 查看 ” 和 “ 搜索 ” HTML 原素jQuery 的 action() 实行对原素的实际操作

文本文档提前准备作用

文本文档准备就绪涵数，用以在页面加载取得成功后实行的特定编码假如在文本文档沒有彻底载入以前就运作涵数，实际操作很有可能不成功一般该涵数用以更换 window.onload 事情，文本文档准备就绪涵数的实行高效率高些$(document).ready(function(){ code block});

它能够简称为:

$(function(){ code block});

jQuery应用$标记做为JQuery的简称。

JQuery标志符

应用 jQuery 全称jQuery(document).ready(function(){jQuery("button").click(function(){ code block});});应用 jQuery 缩写$(function(){ $("button").click(function(){ code block });});自定 jQuery 别称var jq = $.noConflict();jq(function(){ jq("button").click(function(){ code block });});

留意:因为javascrpit的一些架构也应用$做为巧记(如同jQuery一样)，noConflict()方式是为了更好地处理javascrpit的架构中间的标记矛盾而界定的方式，它将释放出来$ identifier的决策权，那样别的脚本制作还可以应用这些标记。

JQuery选择符

jQuery元素选择符和属性选择器容许您根据标识名，特性名或內容来挑选HTML原素。

JQuery元素选择符。

JQuery应用CSS选择符来挑选HTML原素。

$(this) 当今 HTML 原素$(“p”) 选择

elements $(“p . intro”)用class =“intro”挑选全部原素$(“p # demo”)用id =“demo”挑选全部原素$(“$”(“div # intro。head)在id = "intro" jQuery属性选择器的原素中挑选class = "head "的全部原素。

JQuery应用XPath关系式来挑选具备给出特性的原素。

$(“[href]”) 选择全部含有href 特性的原素$(“[href=’#’]”) 选择全部含有 href 值相当于”#” 的原素$(“[href!=’#’]”) 选择全部含有 href 值并不等于 “#” 的原素$(“[href$=’.jpg’]”) 选择全部 href 值以 “.jpg” 末尾的原素

JQuery CSS选择符

jQuery CSS选择符能够用于更改HTML原素的CSS特性。

把全部 p 原素的背景色更改成鲜红色：$("p").css("background-color","red")

JQuery事情

jQuery 事故处理方式是 jQuery 中的关键涵数事情程序处理指的是当 HTML 中出现一些事情时需启用的方式。专业术语由事情“开启”（或“激起”）常常会被应用事例：按键的点击事件被开启的时候会启用一个涵数$("button").click(function() {..some code... } )

普遍事情作用

$(document).ready(function) 将涵数关联到文本文档的准备就绪事情（当文本文档进行载入时）$(selector).click(function) 开启或将涵数关联到被选原素的点击事件$(selector).change(function) 开启，或将涵数关联到特定原素的 change 事情$(selector).dblclick(function) 开启或将涵数关联到被选原素的双击鼠标事情$(selector).focus(function) 开启或将涵数关联到被选原素的得到聚焦点事情$(selector).mouseover(function) 开启或将涵数关联到被选原素的鼠标悬停事情

JQuery效用

实际效果一般关联到事情，比如，根据点击按键造成掩藏实际效果。

实际效果的常用函数。

1.掩藏，表明和转换。

- 掩藏 `$(selector).hide(speed,callback)` ： `$("p").hide();`- 表明`$(selector).show(speed,callback)` ： `$("p").show(1000);`- 转换掩藏/表明`$(selector).toggle(speed,callback)` ： `$("p").toggle();`

速率和调整是可选择主要参数。

速率主要参数特定表明/掩藏的速率，可选择数值“慢”，“快”或ms值。

回调函数主要参数是表明/掩藏进行后要实行的涵数的名字。

2.淡出淡入。

- 淡入淡出 `$(selector).fadeIn(speed,callback)` ： `$("#div1").fadeIn("slow");`- 退出 `$(selector).fadeOut(speed,callback)` ： `$("#div3").fadeOut(3000);`- 转换淡入淡出/退出 `$(selector).fadeToggle(speed,callback)` ： ` $("#div1").fadeToggle();`- 渐变色为特殊清晰度 `$(selector).fadeTo(speed,opacity,callback)` ：`$("#div2").fadeTo("slow",0.4);`

速率和调整是可选择主要参数，不透明度是必不可少的。

速率主要参数特定淡入淡出/退出的速率，可选择数值“慢”，“快”或ms值。

回调函数主要参数是表明/掩藏进行后要实行的涵数的名字。

不透明度主要参数将渐变色实际效果设定为给出的不透明度(值处于0和1中间)。

滚动。

- 往下滚动 `$(selector).slideDown(speed,callback)` ： `$("#panel").slideDown();`- 往上滚动 `$(selector).slideUp(speed,callback)` : `$("#panel").slideUp();`- 转换往上滚动/往下滚动 `slideToggle()` : `$("#panel").slideToggle();`

速率和调整是可选择主要参数。

速率主要参数特定左右滚动的速率，可选择数值“慢”，“快”或ms值。

回调函数主要参数是进行左右滚动后要实行的涵数的名字。

4.动漫

- 自定动漫 `$(selector).animate({params},speed,callback)`

Params是必不可少主要参数，速率和调整是可选择主要参数。

主要参数界定产生动漫的CSS特性。

主要参数特定实际效果的延迟时间，可选择数值“慢”，“快”或ms值。

回调函数主要参数是动漫进行后要实行的涵数的名字。

留意:默认设置状况下，全部HTML原素都是一个静态数据部位，不可以挪动。假如必须实际操作部位，还记得先把原素的CSS部位特性设定为相对性，固定不动或肯定！

- 终止动漫 ·`$(selector).stop(stopAll,gotoEnd);`

StopAll和goToEnd是可选择主要参数。

stopAll主要参数特定是不是应当消除动漫序列。初始值为false，即只终止主题活动动漫，容许一切排长队的动漫向后实行。

goToEnd主要参数特定是不是马上进行当今动漫。初始值为false。

默认设置状况下，stop()消除选中原素上特定的当今动漫。

事例

应用平方根

$("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' });

应用相对值。

$("button").click(function(){ $("div").animate({ left:'250px', height:' =150px', width:' =150px' });});

应用序列作用(逐一开展动漫启用)。

$("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow");});

5.方式联接。

容许我们在同一个原素上一个接一个地运作好几个jQuery指令，那样电脑浏览器就无须数次找寻同一个原素。要连接一个姿势，只需将该姿势额外到上一个姿势。

实例:将css()，slideUp()和slideDown()连接在一起。“p1”原素最先发红，随后往上滚动，随后往下滚动。

$(“# P1”)。css(“色调”，“鲜红色”)。slideUp(2000)。下降(2000年)；

JQuery实际操作HTML原素和特性。

对內容的实际操作。

1.获得內容。

- `$(selector).text();` 设定或回到选定原素的文字內容- `$(selector).html();` 设定或回到选定原素的內容（包含 HTML 标识）- `$(selector).val();` 设定或回到表一个字段的值

2.设定內容。

- `$(selector).text(string);` 设定选定原素的文字內容- `$(selector).val(string);` 设定选定原素的內容（包含 HTML 标识）- `$(selector).html(string);` 设定表一个字段的值

3.调用函数。

I:选中原素目录中当今原素的字符。

初始文字:初始(旧)值。

Res:回到要与涵数的新值一起应用的字符串数组。

- `$(selector).text(function(i,origText){return res;});` 设定或回到选定原素的文字內容- `$(selector).val(function(i,origText){return res;});` 设定或回到选定原素的內容（包含 HTML 标识）- `$(selector).html(function(i,origText){return res;});` 设定或回到表一个字段的值

对特性开展实际操作。

1.获得特性。

- `$(selector).attr("attribute");` 获得特定原素的选定特性

2.设定特性。

- `$(selector).attr("attribute","value");` 设定选定特性的值- `$(selector).attr({"attribute1":"value1", "attribute2":"value2"});` 与此同时设定好几个特性的值

3.3.attr()的调用函数。

I:选中原素目录中当今原素的字符。

初始使用价值:初始(旧)使用价值。

Res:回到要与涵数的新值一起应用的字符串数组。

- `$(selector).attr("attribute",function(i,origValue){return res});`

对原素/內容的实际操作。

与前边对內容的实际操作不一样，上边三种方式会遮盖初始值，而这儿的办法是改动初始值。

1.提升

能够有好几个主要参数。假如好几个主要参数包括html內容，就等同于加上了好几个html原素。

- `$(selector).append("text");` 在被选原素的末尾插进內容- `$(selector).prepend("text");` 在被选原素的开始插进內容- `$(selector).prepend("text");` 在被选原素以后插进內容- `$(selector).before("text");` 在被选原素以前插进內容

2.删掉。

- `$(selector).remove();` 删掉被选原素（以及子原素）- `$(selector).empty();` 从被选原素中删掉子原素- `$(selector).remove(selector);` 删掉特定选择符的原素

控制CSS原素。

前三种方式对于的是早已撰写好的款式。

- `$(selector).addClass("className1 className2");` 向被选原素加上一个或好几个类- `$(selector).removeClass("className1 className2");` 从被选原素删掉一个或好几个类- `$(selector).toggleClass("className");` 对被选原素开展加上/删掉类的转换实际操作- `$(selector).css();`回到款式特性- `$(selector).css("attribute","value");`设定单独款式特性- `$(selector).css({"propertyname":"value","propertyname":"value",...});`设定好几个款式特性

在层面上实际操作。

留意，正中间四个沒有主要参数，没法设定。

- `$(selector).width("text");` 设定或回到原素的总宽（不包括内边距，外框或外边距）- `$(selector).height("text");` 设定或回到原素的相对高度（不包括内边距，外框或外边距）- `$(selector).innerWidth();`回到原素的总宽（包含内边距）- `$(selector).innerHeight(");`回到原素的相对高度（包含内边距）- `$(selector).outerWidth();`回到原素的总宽（包含内边距和外框）- `$(selector).outerHeight();` 回到原素的相对高度（包含内边距和外框）- `$(selector).outerWidth(true);`回到原素的总宽（包含内边距，外框和外边距）- `$(selector).outerHeight(true);` 回到原素的相对高度（包含内边距，外框和外边距）

JQuery解析xmlDOM。

先祖

往上解析xmlDOM树。

- `$(selector).parent();` 回到被选原素的立即父原素，该方式只能往上一级对 DOM 树开展解析xml- `$(selector).parents();` 回到被选原素的全部先祖原素，它一路往上直至文本文档的根原素 ()- `$(selector).parents(selector);` 回到通过过虑的全部先祖原素，它一路往上直至文本文档的根原素 ()- `$(selector).parentsUntil() ;`回到处于2个给出原素中间的全部先祖原素

先祖

往下解析xmlDOM树，寻找原素的子孙后代。

- `$(selector).children();` 回到被选原素的那些立即子原素，该方式只能往下一级对 DOM 树开展解析xml- `$(selector).children(selector);` 回到被选原素的通过过虑的子原素，该方式只能往下一级对 DOM 树开展解析xml- `$(selector).find("selector");` 回到被选原素的子孙后代原素，一路往下直至最后一个子孙后代(此方式务必有主要参数，如果是所有则为 "*" )

弟兄

解析xmlDOM树中原素的弟兄原素。

- `$(selector).siblings(selector);` 回到被选原素的全部同胞们原素（selector可选择）- `$(selector).next();` 回到被选原素的下一个同胞们原素- `$(selector).nextAll();` 回到被选原素的全部追随的同胞们原素- `$(selector).nextUntil(selecotr);` 回到处于2个给出主要参数中间的全部追随的同胞们原素- prev(), prevAll() 及其 prevUntil() 方式的工作方式与上边的方式相近，只不过是方位反过来罢了：他们回到的是前边的同胞们原素（在 DOM 树中顺着同胞们原素向后解析xml，而不是往前）

过滤装置

容许您依据特殊原素在一组原素中的地方来确定该原素。

- `$(selector).first();` 回到被选原素的第一个原素- `$(selector).last();` 回到被选原素的最后一个原素- `$(selector).eq();` 回到被选原素中含有特定索引号的原素（索引号从 0 逐渐）- `$(selector).filter(selector);` 不配对这一规范的原素会被从结合中删掉，配对的原素会被回到- `$(selector).not(selector);` not() 方式与 filter() 反过来，回到不配对规范的全部原素

jQuery Ajax

AJAX =多线程JavaScript和XML(多线程JavaScript和XML)。

简单点来说，在没有重新加载全部网站的情形下，AJAX根据后台管理载入数据信息并将其表明在页面上。

载入方式

- `$(selector).load(URL,data,callback);`方式从服务器载入数据信息，并把回到的数据信息放进被选原素中

的必不可少网站地址主要参数特定要载入的网站地址。

的可选择数据信息主要参数特定随要求推送的查看字符串数组键/值对的结合。

的可选择回调函数主要参数是load()方式进行后要实行的涵数的名字。

调用函数

$(选择符)。load(URL，数据信息，涵数(responseTxt，statusTxt，xhr){ })；

response txt–包括通话好时的結果內容。

statusxt–包括通话的情况。

xhr–包括XMLHttpRequest目标。

response txt–包括通话好时的結果內容。

statusxt–包括通话的情况。

xhr–包括XMLHttpRequest目标。

获得/公布方式

需要的网站地址主要参数特定您要要求的网站地址。

的可选择回调函数主要参数是要求取得成功后要实行的涵数的名字。

- `$.get(URL,callback);`根据 HTTP GET 要求从服务器上要求数据信息

get–从特定的資源要求数据信息。

GET大部分用以从服务器获得(查找)数据信息。留意:GET方式也许会回到缓存文件的数据信息。

- `$.post(URL,data,callback);`根据 HTTP POST 要求从服务器上要求数据信息

数据信息是要递交给网络服务器的数据信息。如果有好几个数据信息，应用json文件格式。

公布–即将解决的数据信息发送给特定的資源。

开机自检也可用以从服务器读取数据。可是，POST方式不缓存文件，一般用以随要求一起传送数据。

回叫作用

数据信息:储存要求网页页面的內容。

情况:储存要求的情况(取得成功/不成功)。

function(data,status){ alert("Data: " data "\nStatus: " status); });

留意:ajax无法打开本地文件，因而必须处理跨域请求的难题。