JQuery笔记

来源：互联网发布：沈阳市2016年经济数据编辑：程序博客网时间：2024/06/05 23:44

一.what

JS框架

框架: 半成品.一半已经完成了,一半没有完成.

JS框架:相当于一些现成的函数和对象的集合,直接拿来使用就可以了

常见的JS库还有Prototype、Ext JS、Dojo、MooTools、YUI等

二、HOW

1.引入jquery-2.1.4.js

2.从下面的语句开始

//ready方法的作用是当页面中的DOM加载完后执行参数中的函数

$(document).ready(function(){

alert("Hello World!");

});

三．DOM对象和jQuery对象的转化

1.dom对象--->jQuery对象

$(DOM对象):是把DOM对象转化成JQuery对象

演示代码

//1.dom对象---->jQuery对象

var div1 =document.getElementById("div1");

var $div1 = $(div1);

alert($div1.html());// $div1.width()

jQuery对象实质就是map、关联数组

Dom对象是存到jQuery对象的第一个元素中

使用console.dir打印jQuery对象演示

使用数组模拟jQuery对象

2.把jQuery对象转化为DOM对象

//2.把jQquery对象--->dom对象

var $div = $("#div1");

//第一种方式

//var div = $div[0];//div是DOM对象

//第二种方式

var div = $div.get(0);

alert(div.innerHTML);

变量定义的规范:jQuery对象前面要加$,dom对象不用加$

使用数组模拟jQuery对象

var div1 = document.getElementById("div1");

var arr = [div1,2,3];

Array.prototype.aaa= "111";

Array.prototype.get= function(i){

return this[i];

}

var haha= arr.get(0);

alert(haha)

四.$(document).ready()和window.onload区别

(1)window.onload只能绑定一个事件处理函数，如果绑定多个

只执行最后一个，而$(document).ready()可以绑定多个函数

(2)

window.onload必须等待网页中所有的内容加载完毕后(包括图片)才能执行

$(document).ready() 网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完

使用性能测试,测试一下两种方法的加载时间

第一种:

console.time("test");

window.onload= function(){

console.timeEnd("test");

alert('test');

}

console.time("test");

$(document).ready(function(){

console.timeEnd("test");

alert('test');

});

(3)简写

window.onload 无

$(document).ready(function(){

});

可以简写成

$().ready(function(){

});

$(function(){

});

五.绑定事件处理函数

//绑定事件处理函数

$("#btn1").click(function(){

alert('你好');

});

jquery对象.click(事件处理函数)

六.修改样式

<a id="hello">clickme</a>

DOM方式

document.getElementById("hello").style.color= "red";//得值得时候无法得到内嵌样式的值

jQuery方式

$("#hello").css("color","#ff0000");//同一个方法名字既表示读操作，又表示写操作

$("#hello").css("color","#ff0000");//写操作

$("#hello").css("color");//读操作

七、jQuery 选择器

1、jQuery元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取 id="demo" 的第一个 <p> 元素。

2、jQuery属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于"#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于"#" 的元素。

$("[href$='.jpg']") 选取所有 href值以 ".jpg" 结尾的元素。

3、jQuery CSS选择器

jQuery CSS 选择器可用于改变 HTML 元素的CSS 属性。

实例：

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

$("p").css("background-color","yellow");

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button type="button">Clickme</button>

</body>

</html>

更多的实例

语法

描述

$(this)

当前 HTML 元素

$("p")

所有 <p> 元素

$("p.intro")

所有 class="intro" 的 <p> 元素

$(".intro")

所有 class="intro" 的元素

$("#intro")

id="intro" 的第一个元素

$("ul li:first")

每个 <ul> 的第一个 <li> 元素

$("[href$='.jpg']")

所有带有以 ".jpg" 结尾的 href 属性的属性

$("div#intro .head")

id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery 选择器

选择器

实例

选取

$("*")

所有元素

#id

$("#lastname")

id=lastname 的第一个元素

.class

$(".intro")

所有 class="intro" 的元素

element

$("p")

所有 <p> 元素

.class.class

$(".intro.demo")

所有 class=intro 且 class=demo 的元素

:first

$("p:first")

第一个 <p> 元素

:last

$("p:last")

最后一个 <p> 元素

:even

$("tr:even")

所有偶数 <tr> 元素

:odd

$("tr:odd")

所有奇数 <tr> 元素

:eq(index)

$("ul li:eq(3)")

列表中的第四个元素（index 从 0 开始）

:gt(no)

$("ul li:gt(3)")

列出 index 大于 3 的元素

:lt(no)

$("ul li:lt(3)")

列出 index 小于 3 的元素

:not(selector)

$("input:not(:empty)")

所有不为空的 input 元素

:header

$(":header")

所有标题元素 <h1><h2>...

:animated

所有动画元素

:contains(text)

$(":contains('W3School')")

包含文本的所有元素

:empty

$(":empty")

无子（元素）节点的所有元素

:hidden

$("p:hidden")

所有隐藏的 <p> 元素

:visible

$("table:visible")

所有可见的表格

s1,s2,s3

$("th,td,.intro")

所有带有匹配选择的元素

[attribute]

$("[href]")

所有带有 href 属性的元素

[attribute=value]

$("[href='#']")

所有 href 属性的值等于 "#" 的元素

[attribute!=value]

$("[href!='#']")

所有 href 属性的值不等于 "#" 的元素

[attribute$=value]

$("[href$='.jpg']")

所有 href 属性的值包含 ".jpg" 的元素

:input

$(":input")

所有 <input> 元素

:text

$(":text")

所有 type="text" 的 <input> 元素

:password

$(":password")

所有 type="password" 的 <input> 元素

:radio

$(":radio")

所有 type="radio" 的 <input> 元素

:checkbox

$(":checkbox")

所有 type="checkbox" 的 <input> 元素

:submit

$(":submit")

所有 type="submit" 的 <input> 元素

:reset

$(":reset")

所有 type="reset" 的 <input> 元素

:button

$(":button")

所有 type="button" 的 <input> 元素

:image

$(":image")

所有 type="image" 的 <input> 元素

:file

$(":file")

所有 type="file" 的 <input> 元素

:enabled

$(":enabled")

所有激活的 input 元素

:disabled

$(":disabled")

所有禁用的 input 元素

:selected

$(":selected")

所有被选取的 input 元素

:checked

$(":checked")

所有被选中的 input 元素

八、jQuery 事件

下面是 jQuery 中事件函数的一些例子：

Event 函数

绑定函数至

$(document).ready(function)

文档的就绪事件

（当 HTML 文档就绪可用）

$(selector).click(function)

被选元素的点击事件

$(selector).dblclick(function)

被选元素的双击事件

$(selector).focus(function)

被选元素的获得焦点事件

$(selector).mouseover(function)

被选元素的鼠标悬停事件

jQuery 事件方法

事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

jQuery 事件处理方法

事件处理方法把事件处理器绑定至匹配元素。

方法

触发

$(selector).bind(event)

向匹配元素添加一个或更多事件处理器

$(selector).delegate(selector, event)

向匹配元素添加一个事件处理器，现在或将来

$(selector).die()

移除所有通过 live() 函数添加的事件处理器

$(selector).live(event)

向匹配元素添加一个事件处理器，现在或将来

$(selector).one(event)

向匹配元素添加一个事件处理器。该处理器只能触发一次。

$(selector).unbind(event)

从匹配元素移除一个被添加的事件处理器

$(selector).undelegate(event)

从匹配元素移除一个被添加的事件处理器，现在或将来

$(selector).trigger(event)

所有匹配元素的指定事件

$(selector).triggerHandler(event)

第一个被匹配元素的指定事件

HTMLDOM常见操作

-创建节点、查找节点、插入节点、移动节点、删除节点、复制节点、替换节点、包裹节点

多了克隆、移动、包裹

一.创建节点

var $div5 = $("<div id='div5'>我是div5</div>");

二.插入节点

1.插入同级元素(兄弟元素)

after() 在每个匹配的元素之后插入内容 HTML代码:

jQuery代码:

$("p").after("<b>你好</b>");

结果:

insertAfter 与after()相反 HTML代码:

jQuery代码:

$("<b>你好</b>").insertAfter("p");

结果:

before() 在每个匹配的元素之前插入内容 HTML代码:

jQuery代码:

$("p").before("<b>你好</b>");

结果:

insertBefore() 与before()相反 HTML代码:

jQuery代码:

$("<b>你好</b>").insertBefore(“p");

结果:

<b>你好</b><p>我想说:</p

2.插入子级元素

append() 向每个匹配的元素内部追加内容 HTML代码:

jQuery代码:

$("p").append("<b>你好</b>");

结果:

appendTo() 与append相反 HTML代码:

jQuery代码:

$("<b>你好</b>").appendTo("p");

结果:

prepend() 向每个匹配的元素内部前置内容 HTML代码:

jQuery代码:

$("p").prepend("<b>你好</b>");

结果:

prependTo() 与prepend相反 HTML代码:

jQuery代码:

$("<b>你好</b>").prependTo("p");

结果:

三.移除节点

1.remove()删除

jquery对象.remove();//返回被移除的节点的jQuery对象

$("#div1").remove();

2 empty() 清空

$("ul li:eq(3)").empty();//清空元素中的内容

把remove()方法改成empty()演示

三.节点的替换(修改)

1.replaceWith()方法

例: 把div4替换成一个文本框

$("#div4").replaceWith("<inputtype='text' name='pname' value='产品名称'><br/>");

body中的代码

<p>我是一个段落</p>

2.replaceAll()方法 (和replaceWith()相反)

$("<input type='text' name='pname'value='产品名称'><br/>").replaceAll($("#div4"));

1.原生js实现

生成dom对象、设置属性、绑定事件

window.onload= function(){

var btn1 = document.getElementById("btn1");

btn1.onclick = function(){

vardiv1 = document.getElementById("div1");

//创建一个文件域

varfile = document.createElement("input");

varbutton = document.createElement("input");

varbr = document.createElement("br");

file.type= "file";

button.type= "button";

button.value= "remove";

button.onclick= function(){

div1.removeChild(file);

div1.removeChild(button);

div1.removeChild(br);

}

div1.appendChild(file);

div1.appendChild(button);

div1.appendChild(br);

}

</script>

2.jQuery实现

生成jquery对象、设置属性、绑定事件

$(function(){

$("#btn1").click(function(){

varfile = $("<input type='file'/>");

varbutton = $("<input type='button' value='remove'/>");

varbr = $("<br/>");

button.click(function(){

file.remove();

button.remove();

br.remove();

});

$("#div1").append(file);

$("#div1").append(button);

$("#div1").append(br);

});

</script>

四.节点移动

$("ulli:eq(2)").insertAfter("ul li:eq(0)");

移动前移动后

演示代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN">

<html>

<head>

<title>演示表格的作用一: 使用表格来显示表格数据</title>

<scriptsrc="../../js/jquery/jquery-1.7.2.js"type="text/javascript" charset="utf-8"></script>

* {

margin:0px;

}

a {

border:1px solid #e4393c;

display:block;

width:150px;

background:#e4393c;

height:26px;

line-height:26px;

color:#fff;

font-size:15px;

font-family:'微软雅黑';

text-align:center;

text-decoration:none;

white-space:pre;

}

ul {

list-style-type:none;

padding:0px;/*新浏览器 firefox safari 都是使用内边距控制缩进的新ie也是*/

margin:0px;/*老ie是使用外边距缩进的所以光设置padding:0px 老id 不会去掉索引为了兼容老ie*/

}

li a:hover {

background-color:#F7F7F7;

color:#e4393c;

border-right:#F7F7F7;

}

</style>

<scriptsrc="../../js/jquery/jquery-1.7.2.js" type="text/javascript"charset="utf-8"></script>

<scripttype="text/javascript">

$(function(){

$("ulli:eq(2)").insertAfter("ul li:eq(0)");

});

</script>

</head>

<body>

<ul>

</ul>

</body>

</html>

五.克隆节点

jQuery对象.clone();//返回克隆出来的对象，相当于对象.clone(false);

jQuery对象.clone(true);//克隆出来的对象含有事件

例:单击任何一个li，复制出这个li,附着在ul后面

演示代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN">

<html>

<head>

<title>演示克隆节点</title>

<scriptsrc="../../../js/jquery/jquery-1.7.2.js"type="text/javascript" charset="utf-8"></script>

* {

margin:0px;

}

li {

width:152px;

}

a {

border:1px solid #e4393c;

display:block;

width:150px;

background:#e4393c;

height:26px;

line-height:26px;

color:#fff;

font-size:15px;

font-family:'微软雅黑';

text-align:center;

text-decoration:none;

white-space:pre;

}

ul {

list-style-type:none;

padding:0px;/*新浏览器 firefox safari 都是使用内边距控制缩进的新ie也是*/

margin:0px;/*老ie是使用外边距缩进的所以光设置padding:0px 老id 不会去掉索引为了兼容老ie*/

}

li a:hover {

background-color:#F7F7F7;

color:#e4393c;

border-right:#F7F7F7;

}

</style>

<scripttype="text/javascript">

$(function(){

//需求: 单击任何一个li,复制出这个li,附着在ul后面

//给所有li绑定单击事件

$("ul>li").click(function(){

var $obj = $(this).clone(true);

$("ul").append($obj);

});

</script>

</head>

<body>

<ul>

</ul>

</body>

</html>

六.节点的包裹

1.wrap()方法

<strong>你最喜欢的水果是?</strong><br/>

<strong>你最喜欢的水果是?</strong>

$("strong").wrap("<b></b>")

包裹后的结果

<b>

<strong>你最喜欢的水果是?</strong>

</b>

<br>

<b>

<strong>你最喜欢的水果是?</strong>

</b>

2.wrapAll()方法

$("strong").wrapAll("<b></b>")

<b>

<strong>你最喜欢的水果是?</strong>

</b>

<br>

2.wrapInner()方法包裹里面的文本

例：

$("strong").wrapInner("<b></b>")

包裹后的结果

<b>你最喜欢的水果是?</b>

</strong>

<br>

<b>你最喜欢的水果是?</b>

</strong>

七.遍历子元素和兄弟元素

代码见 jQuery API手册筛选查找

1.遍历子元素

children() 获得所有孩子节点,不包括孙子节点

var v1 = $("body").children();//查找body的孩子结点,不包括孙子节点,返回集合元素

演示代码:

<scripttype="text/javascript">

$(function(){

//遍历body的子元素

//先得到body

var $body = $("body");

var childArr = $body.children();

console.info(childArr.length);//3

});

</script>

<body>

<div>

<p>我是div中的p标签</p>

</div>

<p>我是p标签</p>

</body>

jQuery对象.find() 在jQuery对象下找某个元素

var $div1 = $("#div1");

console.info($div1.find("p"));//在id为div1的元素下找p节点

2.遍历兄弟元素

访问下面的一个元素对象.next();

访问上面的一个元素对象.prev();

访问所有的兄弟元素对象.siblings();

3.遍历父元素

原生JS方式: dom对象.parentNode

jQuery方式

对象$("p").parent();//得到p元素的父亲节点

$("p").parents();//得到p元素的所有父亲节点

代码参见:jQuery手册中的筛选--查找--parent和parents

Parent演示代码:

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<scriptsrc="../../../js/jquery-3.1.0.js"type="text/javascript"charset="utf-8"></script>

<scripttype="text/javascript">

$(function() {

var$parents =$("p").parent();

console.dir($parents);

});

</script>

</head>

<body>

<div>

<p>Hello</p>

</div>

</body>

</html>

一.属性操作

1.attr()获取与设置属性

jQuery对象.attr("name");//获取name属性 ok

jQuery对象.attr("name","zzy");//设置name属性为zzy ok

jQuery对象.attr("type");//获取属性 ok

jQuery对象.attr("type","password");//设置属性报错 jQuery不允许改type属性

但原生js可以修改dom对象的type属性

2.attr()方法也可以接受JSON数据格式用来修改多个属性

$("#test").attr({"name":"zzy","value":"333"});

3.removeAttr() 移除属性

removeAttr(“属性名”);// 移除属性

学生练习:注册页面,点击”接受协议”按钮才可以使用

演示代码:

<!DOCTYPE html>

<html>

<head>

<scriptsrc="../../../js/jquery/jquery-1.7.2.js"type="text/javascript" charset="utf-8"></script>

<scripttype="text/javascript">

$(function(){

var $agree = $("#agree");

var $btn1 = $("#btn1");

$agree.click(function(){

if($agree.prop("checked")==true){//复选框被选用了

//按钮可用

$btn1.removeAttr("disabled");

}else{

//按钮不可用

$btn1.attr("disabled","disabled");

}

});

</script>

</head>

<body>

同意该协议<input id="agree" type="checkbox"name="agree"/>

</body>

</html>

二.样式操作

1.修改单一样式

css(“属性名”,”属性值”)

<a id="hello">clickme</a>

DOM方式

document.getElementById("hello").style.color= "red";

jQuery方式

$("#hello").css("color","#ff0000");

同一个方法名字既表示读操作，又表示写操作

$("#hello").css("color","#ff0000");//写操作

$("#hello").css("color");//读操作

css()方法也可以接受JSON对象来同时修改多个属性

演示代码:

$("#div1").css({

"backgroundColor":"yellowgreen",

"color":"red"

});

2.修改整套样式

演示代码参见锋利的jQuery 源代码第三章例子--3-9样式操作 3-9-1.html

(1)通过attr()方法

DOM方式

document.getElementById("hello").className=”样式名”;

jQuery方式

$("p").attr("class","high");

(2)addClass()添加样式

给class属性增加一个样式,如果以前有样式比如

class="hello"

调用$("p").addClass("high");后

样式修改为class="hellohigh"

注意:相同样式以定义在css文件后面的为准

(3)removeClass()移除样式

removeClass("样式名");//移除一个样式

removeClass();//移除所有样式

(4)toggleClass()样式切换

$("p").toggleClass("another");//有就删除,没有就添加

(5)hasClass()或is()判断是否含有样式

1.$("p").hasClass("another")

2.$("p").is(".another")

补充: 对象.is(":checked") 判断复选框是否被选择中

对象.is(":animated")判断当前元素是否正处在动画当中

三.html()、text()、val()区别

html() 相当于 innerHTML 内部的HTML代码

text() 相当于 innerText 内部的文本不包括HTML代码

val() 相当于 value 值得到dom对象的value值

演示代码:

<scripttype="text/javascript">

$(function(){

var str =$("#username").val();

alert(str);

});

</script>

<body>

<divid="div1">

<p>

我是div111

</p>

</div>

<inputid="username" type="text" value="111" />

</body>

动画

(一)内置动画

1.show()和hide()

div.show("slow");//0.6秒

div.show("normal");//0.4秒

div.show("fast");//0.2秒

div.show(毫秒);

如果不加参数直接调用show()是立即显示没有动画效果

增加宽度(从左到右增大)、增加高度(从上到下增大),同时增加内容的不透明度

2.fadeIn()和fadeOut()淡入淡出效果

对象.fadeIn();//淡入增加不透明度

对象.fadeOut();//淡出减少不透明度直到元素完全消失(display:none)

与show()方法不同,fadeIn()和fadeOut()方法只改变元素的不透明度.

3.slideUp()、slideDown()收缩、展开效果(用于层)

slideUp()、slideDown() 只会改变元素的高度

动画积累问题解决

当用户快速在某个元素上执行animate()动画时,就会出现动画积累.解决方法是判断元素是否处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,如果元素正处于动画状态不添加动画.

$(function() {

//需求: 点击标题后显示标题下面的div

$("#panel").toggle(function(){

if(!$("#panel").find("div.content").is(":animated")){//不处在动画状态中

$("#panel").find("div.content").slideDown("slow");

}

},function(){

if(!$("#panel").find("div.content").is(":animated")){

$("#panel").find("div.content").slideUp("slow");

}

});

(二)自定义动画animate()

1. 自定义简单动画

animate({left:"500px"},3000,function(){alert(3);});

参数1：让div向右移动500px

参数2：移动所需的时间(可以省略)

参数3: 移动完成调用回调函数(可以省略)

完整演示代码如下:

<!DOCTYPE html>

<html>

<head>

#panel{

width:100px;

height:100px;

background-color:yellowgreen;

position:relative;

cursor:pointer;

}

</style>

<scripttype="text/javascript">

$(function(){

$("#panel").click(function(){

$(this).animate({left:"500px"},3000,function(){

$(this).fadeOut(2000);

});

</script>

</head>

<body>

保存成功

</div>

</body>

</html>

2. 多重动画

(1)同时执行多个动画

<!DOCTYPE html>

<html>

<head>

margin: 0px;

padding: 0px;

}

#img1{

position:relative;

}

</style>

<scriptsrc="../../../js/jquery-3.1.0.js" type="text/javascript"charset="utf-8"></script>

<scripttype="text/javascript">

$(function(){

$("#img1").click(function(){

$(this).animate({left:"500px",height:"200px"},3000);

});

</script>

</head>

<body>

</body>

</html>

(2)按顺序执行多个动画

上例中是移动和调整宽度同时进行,如果想按顺序执行动画,例如先向右滑动,然后再放大它的高度,只需把代码拆开

$(function() {

$("#img1").click(function(){

$(this).animate({left:"500px"},3000);

$(this).animate({width:"200px"},3000);

});

因为animate都是对同一个jQuery对象操作的,也可以改为链式操作

$(function() {

$("#img1").click(function(){

$(this).animate({left:"500px"},3000).

animate({width:"200px"},3000);

});

像这样动画效果的执行具有先后顺序,称为”动画队列”.

3.综合动画

<!DOCTYPE html>

<html>

<head>

margin: 0px;

padding: 0px;

}

#panel{

width:100px;

height:100px;

background-color: burlywood;

position:relative;

}

</style>

<scriptsrc="../../../js/jquery/jquery-1.7.2.js"type="text/javascript" charset="utf-8"></script>

<scripttype="text/javascript">

$(function(){

$("#panel").css("opacity","0.5");//设置不透明度

$("#panel").click(function(){

$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)

.animate({top:"200px",width:"200px"},3000)

.fadeOut("slow");

});

</script>

</head>

<body>

</div>

</body>

</html>

4.动画回调函数

如果想在最后一步切换元素的CSS样式,而不是隐藏元素.

需要把最后fadeOut(“slow”)改为.css("border","5px solid blue");

但是这样并不能得到预期效果,预期效果是在动画的最后一步改变元素的样式,而实际效果是刚开始执行的时候,css()方法就执行了.出现这个问题的原因是css()方法并不会加入到动画队列中,而是立即执行.可以使用回调函数(callback)对非动画方法实现排队.只要把css()方法写在最后一个动画的回调函数里即可.代码如下:

$(function() {

$("#panel").css("opacity","0.5");//设置不透明度

$("#panel").click(function(){

$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)

.animate({top:"200px",width:"200px"},3000,function(){

$("#panel").css("border","5pxsolid blue");

});

5.停止动画

$("#btn1").click(function(){

$("#panel").stop();//只能停止一个动画

});

6.延迟动画

$(function() {

$("#panel").css("opacity","0.5");//设置不透明度

$("#panel").click(function(){

$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)

.delay(3000)

.animate({top:"200px",width:"200px"},3000,function(){

$("#panel").css("border","5pxsolid blue");

});

//停止动画

$("#btn1").click(function(){

$("#panel").stop();

});

(三)其他动画方法

toggle()、slideToggle()、fadeTo()和fadeToToggle();

fadeTo() 把元素的不透明度调整到指定的值

$(function() {

//需求: 点击标题后显示标题下面的div

$("#panelh5.head").click(function(){

$(this).next().fadeTo(600,0.2);//600毫秒不透明度调整到0.2

});

})

在css中调整不透明度

.content {

padding: 10px;

text-indent: 2em;

border-top: 1px solid #0050D0;

background-color: rgba(255,0,0,0.5);//alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

}

jQuery AJAX 函数

AJAX 和 jQuery

jQuery 提供了供 AJAX 开发的丰富函数（方法）库。

通过 jQuery AJAX，使用 HTTP Get 和 HTTP Post，您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。

AJAX 和 jQuery

jQuery 提供了供 AJAX 开发的丰富函数（方法）库。

AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

通过 jQuery AJAX，使用 HTTP Get 和 HTTP Post，您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。

而且您可以直接把远程数据载入网页的被选 HTML 元素中！

------------------------------------------------------------------------------------

实例：

<html>

<head>

<scripttype="text/javascript"src="/jquery/jquery.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

$("#b01").click(function(){

$('#myDiv').load('/jquery/test1.txt');

});

</script>

</head>

<body>

</body>

</html>

页面显示为

点击“改变内容”，页面变为

----------------------------------------------------------------------------------------------------------------

jQuery- AJAX load() 方法

● load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

<html>

<head>

<scripttype="text/javascript"src="/jquery/jquery.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

$("#b01").click(function(){

htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});

$("#myDiv").html(htmlobj.responseText);

});

</script>

</head>

<body>

</body>

</html>

页面显示为

点击“改变内容”，页面变为

---------------------------------------------------------------------------------------------------------------

jQuery AJAX 请求

请求

描述

$(selector).load(url,data,callback)

把远程数据加载到被选的元素中

$.ajax(options)

把远程数据加载到 XMLHttpRequest 对象中

$.get(url,data,callback,type)

使用 HTTP GET 来加载远程数据

$.post(url,data,callback,type)

使用 HTTP POST 来加载远程数据

$.getJSON(url,data,callback)

使用 HTTP GET 来加载远程 JSON 数据

$.getScript(url,callback)

加载并执行远程的 JavaScript 文件

注：

(url) 被加载的数据的 URL（地址）

(data) 发送到服务器的数据的键/值对象

(callback) 当数据被加载时，所执行的函数

(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)

(options) 完整 AJAX 请求的所有键/值对选项

阅读全文

0 0