计算机知识

当前位置:澳门新葡萄京 > 计算机知识 > JQuery实际上就是一个javascript文件

JQuery实际上就是一个javascript文件

来源:http://www.hhmtch.com 作者:澳门新葡萄京 时间:2019-05-27 04:03

JQuery_1_选择器

什么是JQuery

JQuery实际上正是叁个javascript文件,它是一群由javascript写好的工具程序,二个被包裹好的js工具库。它在js基础之上做了众多的优化,让网页脚本的编写进度更为的省事快捷。

JQuery有过多的本子,但各版本之间的差距都不是太大,基础语法的通用。

 

怎样行使JQuery

一、首先,大家无法不下载或复制JQuery的库文件,约等于文件名”jquery-版本号[.min].js”的脚本文件,(当中包括min的是从未换行、制表符和空格的削减版本)。

贰、在网页中引用JQuery文件:

<script type="text/javascript" src= "js/jquery-1.7.1.min.js" > </script>

 

 

选择器

选择器的含义,便是规定代码执行的对象,就是规定代码试行的对象对象。

选拔器的主干格式

$符号代表接纳器,它的效率类似于javascript如下指令:

document.getElementByID

document.getElementsByClassName

document.getElementsByTagName

 

语法:

$(表达式)

表明式能够是三个字符串,也足以是二个变量或html代码。

留神:JQuery语句普通都是以$开始的。

$(document)

获取当前网页的文书档案对象。

$(document.body)代表网页的<body>部分

$(document.body).css({"background-color":"green"});

 

 

HTML标签采用器

纵使在选择器的表明式中一向动用html标签字,示例:

<p>天气凉了</p>

<div id="box1">魂牵梦萦</div>

<div id="box2">朝秦暮楚

<p>注意添衣</p>

</div>



//$("p").css({"font-size":"88px"});

$("div p").css({"font-size":"88px"});

 

选拔器的find()方法

乐趣是在选用器选定的集合之中,再一次张开二次筛选,在选取器选定的结果里,再度按规则举办搜寻。

$(document).find("div p").css({"font-size":"88px"});

//在网页正文中寻找第一个div里的p标签。

 

 

ID选择器

$("#box1").css({"font-size":"88px"});

 

在接纳器的表明式中用#以及后来的ID名称来获取这些ID所针对的因素对象。

Class样式类选择器

$(".style1").css(

{

"font-size":"38px",

"background-color":"yellow"

}

);

针对所有class属性为.style1的元素。

css之中包含的实际上是一个JSON对象。

$(“*”)
选择所有元素

$("*").css({

"font-size":"38px",

"background-color":"orange"

});

 

小练习

将三个span中的div通过jquery的css方法,设置其样式为高200像素宽300像素背景为兰色字体为40px。

 

并称选择:

$("#box1,.style1").css({

"font-size":"38px",

"background-color":"orange"

});

 

在表明式中,用逗号来分隔四个选取器。

老爹和儿子层级关系采纳

依据成分之间的涵盖关系来进展抉择,父与子成分用空格或>来划分。

$("#box2>p").css({

"font-size":"38px",

"background-color":"orange"

});

 

左近选用器

接纳下一个成分

当jquery相称选用器的时候,会首先找到 左侧的因素,然后从该因素初叶向后查找 右侧的要素,直到找到第3个符合的成分停止。

$(“#box1 div”) //查找box1后面的第一个div

$(".style1 p") //注意:包含层级必须是同一级别的才可以

 

慎选之后有所相配的成分

$(".style1~p")

 

率先找到~右边的因素,然后从该因素开首向后查找~左侧的因素,找到全部符合条件的因素结束。

选择符合条件的第二个/最终3个因素

$("p:first")

$("p:last")

 

在甄选结果中排除

$("p:not(.style1)").css({"background-color":"orange"});

//在<p>中排除样式类名为style1的元素。

 

选取查询结果中的排列顺序为偶数/奇数的成分

$("p:even").css({"background-color":"orange"});

//选择偶数次序的元素

$("p:odd").css({"background-color":"#aaa"});

//选择奇数次序的元素

 

慎选钦定次序的要素

$("p:eq(0)").css({"background-color":"orange"});

//选择页面上的第一个<p>段落(第一个元素的序号为0)

 

选料大于/小于内定序号的因素

$("p:lt(3)").css({"background-color":"orange"});

//结果集的第3个元素之前的所有元素

$("p:gt(3)").css({"background-color":"orange"});

//结果集的第3个元素之后的所有元素

 

选用包蕴钦赐文本的元素

$("p:contains('Hello')").css({"background-color":"orange"});

//在结果集中查找包含了指定内容的元素。

 

慎选不含有其余子成分或内容的竹签

$("p:empty").css({"background-color":"orange","height":"30px"});

//在选择器的查找结果中筛选内部为空的元素

 

带有钦赐的子成分的父成分

$("div:has('.style1')")

 

在具备div中找找,包罗使用了.style一的子成分的div。

挑选钦赐成分的父元素

$(".style1:parent").css({

"background-color":"orange",

"height":"30px"

});

 

选择具备的隐藏成分

$("p:hidden").css({

"background-color":"red",

"display":"block"

});

 

 

小练习:

塑造三个展现学生姓名的报表,然后设置奇数行的背景象为淡森林绿,偶数行的背景象为憕色,假设单元格中从不内容,背景象为海水绿。

 

JQurey成分的性质

Html()方法

取得或安装三个容器类成分内部含有的剧情,也正是其起首标签与闭合标签中间的原委。

示例:

alert( $("#box1").html()); //获取内容

$("#box1").html("今天<p>星期五</p>"); //修改box1中的内容

 

Text()方法

与Html相似,获取成分的从头到尾的经过,不过会对剧情中的html标签进行自然的管理。

$("#box1").text("今天<p>星期五</p>"); //写入内容时,html元素会被转义,从而不会被浏览作为html标签来解析。

$("#box1").text(); //获取内容时清除掉其中的html

 

小练习:

一、 在网页中参预贰个五行之上的报表。用JQuery向表格的第3行写入文字“云深不知处,身在此山中”。

二、 手动在第陆行写入“明天复前几天,前些天何其多。”。然后用JQuery查找包涵“前日”的行,将其文件内容改为“雷令风行”。

三、 给表格第3行参加id为tr1, 用jquery匹配tr壹的下一行,并在写1行写入文本:“山中自有黄金屋”

 

 

通过JQuery操作hmtl成分及其性格

Ready事件

$(document).ready();

一般来说JQuery的选拔器都亟需在其钦点的HTML成分加载成功今后再来施行,因此大家一般都以在页面全体加载实现之后再业实践JQuery代码,不然很可能成分还尚未被浏览器塑造入DOM模型,我们就去超前接纳要素,会招致程序错误。

 

ready()事件的意趣正是指页面全布加载实现触发,DOM模型创设产生之后。

它一定于是body的onload()事件。

语法:

$(document).ready( function(e){

//需要在页面加载之后运行的代码;

} );

 

示例:

<body onload=" $('#box1').text('今天<p>星期五</p>');">

相当于:

<script type="text/javascript">

$(document).ready(function(e) {

    $("#box1").text("今天<p>星期五</p>");

});

</script>

 

注意:

Ready()事件能够涵盖绝大繁多的javascript和jquery代码,然则要注意功能域的主题素材,在ready()中内部定义的变量和函数,是力不从心在外表访问到的。

 

JQuery操作html元素

length属性和.size()方法

代表选取器所匹配到的成分的个数。

比如:

$("div").length;

$("div:lt(3)").size(); //第三个元素之前的元素个数

$("div:lt(3)").length;

 

Get( )方法

它好像于$(“div:eq(n)”),功能是在增选器相配到的因素集结中取得钦赐次序的要素。

然则它同不日常间有另1个效益,正是将JQuery对象调换为javascript对象。也等于不再接济html()或css()那类JQuery方法,而是能够支撑innerHTML或style那类javascript的连串函数。

示例:

$("div").get(3).innerHTML //得到第四个元素的内容

 

 

each( )方法

它的法力是遍历选取器获得的聚聚焦的各种成分。

each方法的参数

示例:

//each所执行的函数包含两个参数,index代表当前元素在集合中的次序,element代表当前元素对象

    $("div").each(function(index, element) {

        alert(index  "----"  element.innerHTML);

});

 

 

attr( ) 成分属性群集

得到、设置或增加html成分的性格或品质的集结。

示例:

alert($("#box1").attr("title")) //显示提示内容

$("#img1").attr("src","22.jpg"); //修改图片路径



$("#img1").attr(

{

"width":"700",

"height":"550",

"src":"22.jpg"

}

); //同时修改图片的宽、高和路径

 

remove()删除元素

裁撤选择器钦定的要素

示例:

alert(1);

$("div:eq(3)").remove();

 

为因素加多css样式类

addClass()将已存在的css样式类加多到钦点的html成分上。

示例:

alert(1);

$("div:eq(3)").addClass("boxStyle");

 

 

除去html成分的样式类

removeClass()清除钦定成分故洗有些样式类。

示例:

alert(1);

$("div:eq(0)").removeClass("boxStyle");

 

 

取得或安装表单成分的值

val()用于获取或设置表单成分的value属性的值。

示例:

alert($("input:eq(1)").val());

$("input:eq(0)").val("明天是星期六");

 

小练习:

一、 在页面上增添四个div,并且定义2个数组,那一个数组包涵多少个要素“登真武阁”,“白日依山尽”,“莱茵河入海流”,“欲穷千里目”,“请上二楼”。用JQuery的each(),遍历页面上的四个div,将那几个5条诗句分别进入七个div中。

2、 定义三个css样式类,2个为背景淡蓝灰,多少个为背景淡中蓝,奇数行使用纯白样式类,偶数行使用浅水晶绿样式类。

3、 用css()方法,定义字体:为华文行楷,字号30px。

四、 在页面上定义七个div,里边输入一-九的数字,用css()和addClass()方法将那八个div以玖宫格情势排列,在页面上增加2个文本框和开关,当小编在文本框中输入1-9的数字并按按键之后,其相应的数字的div就熄灭不见。

 

DOM文书档案管理

向html成分的里边的结尾增加内容

append()方法,向钦赐的容器类成分的里边的终极面增加内容。

示例:

alert(1);

    $("div:first").append("快乐");

alert(1);

    $("div:eq(3)").append("<b style='color:red'>快乐</b>");

 

将html成分移动到另二个因素的中间的末梢

appendTo()方法,示例:

alert(1);

$("#img1").appendTo("div:eq(1)");

//将图片移动到div内部的最后的位置

 

 

向html成分内部的始发地方加多内容

prepend()将字符或html代码增添到钦赐成分内部的最前沿,比如:

$("div:eq(2)").prepend("<input type='text' value='1月1日'  />");

$("div:first").prepend("<img src='img/22.jpg' width='100' />");

 

将html成分移动到当中的最初叶的岗位

prependTo()方法,示例:

alert(1);

$("#img2").prependTo("div:eq(3)");

//将图片移动到第四个div的内部最开始的位置。

 

累加内容到钦点的成分之后

after()方法:比如:

$("#img1").after("<select><option>中国</option><option>韩国</option></select>");

 

将成分移动到钦点的成分之后

有二种办法能够高达那么些功能

$("#img1").after($("div:first"));

$("div:eq(1)").insertAfter($("#img2"));

 

那二种方法都得以让div现身在图纸的背后,不过要小心他们的写法和顺序。

活动时那多个点子的参数应该是选取器选中的成分对象。

累加内容到钦定成分从前

before()方法,向元素在此以前拉长文本和html代码

示例:

$("div:first").before("<input type='button' value='按钮'  />");

 

移步元素到另3个元素的前面

也可能有三种方法:

alert(1);

$("div:first").before($("#img1"));

//将图片移动到div的前面去

alert(1);

$("div:eq(1)").insertBefore($("#img1"));

//将div移动到图片前面去

 

 

为内定的html成分加多3个器皿标签将其包装起来

wrap(),在要素的外层增添二个容器成分。

$("span:first").wrap("<b></b>");

$("span:first").wrap("<font color="red"></font>");

 

wrapAll()对具备相配的要素外侧增加父级元素

$("div").wrapAll("<font color="red"></font>");

 

破除钦命html成分的父级标签

unwrap()方法

$("span:first").unwrap()

 

用新因素或内容替换内定的html成分

replaceWith()

$("div:first").replaceWith("<p>明天星期天呀</p>");

 

轮换全数相配的成分

$("div").replaceWith("<p>明天星期天呀</p>");

 

免去1个要素的剧情

empty()清空三个因素发轫与结束标签之间的享有内容

$("font:first").empty();

 

免除接纳器获得的要素会集中的钦命成分

detach()一回搜索并剔除

$("div").detach(".box2");

 

 

复制二个html元素

clone()方法

$("#img2").clone().appendTo("div:eq(3)");

//将图片复制到div中

$("#img1").clone().prependTo("div:first");

 

小练习:

一、 在不写html的气象,用JQuery创设三个网页的资源信息列表,供给至少陆行,每壹行的p段落都有贰个id属性:p一、p二。。。p陆(须求利用循环来兑现)。
$(“body”).append(“<p id=p” i ”></p>”);

贰、 向p一到p六之间的列表中增加音讯的题目。

三、 向p一到p陆之间的列表的最前面增加序号。

④、 向p一到p6之间的列表的末尾面加多日期。

伍、 全数p标签外侧用div包裹起来。

6、 定义三个css样式类,宽度700px,居中,字体微软雅黑稻草黄,然后将以此样式类增添到div之上。

七、 将最后一条情报活动到最上方。

捌、 将第三条情报复制壹份到最下方。

 

JQuery中的样式和事件

用Jquery调控元素的css样式

css方法

用于获取和安装页面上的因素的样式属性。

赢得css样式的值:

alert($("div:first").css("height"));

 

css方法中唯有一个扩散值时是取得css的值。(width、height、top、left等等值是富含”px”的字符串)。

修改成分的单个css值:

$("div:first").css("width","500px");

 

css方法中有七个传入参数时:第一个是css属性名,第一个是css属性值。

修改成分的多少个样式属性:

    $("div:first").css(

{

"height":"600px",

"width":"500px",

"background-color":"blue"

}

);

 

猎取或修改二个要素的职责:Offset方法

赢得成分的地方

offset获得成分地点的时候,它回到的是三个目的,这么些指标涵盖top和left七个数值属性(单位是像素)示例:

var p = $("div:first").offset();

alert("这个元素的位置是高:" p.top "横向距离:" p.left);

 

 

让要素变为浮动层并转移地点

<p style=" width:50px; height:50px; position:absolute; top:150px; left:250px;"></p>



var p = $("p:first").offset({top:400,left:300});

//让一个元素变成浮动层,并且按照指定的top和left位置来移动这个元素。(top和left相对于网页的左上角)

 

 

获得成分相对于父成分的争辨地点

position()方法重返叁个岗位对象,那一个目的涵盖了top和left三个属性。

$(document).ready(function(e) {

//var p = $("div>div").offset();

var p = $("div>div").position();

alert("元素相对于其父元素的位置的纵向是:" p.top "横向:" p.left);

});

 

滚动条相对于页面顶端的地方

scrollTop方法:获取和安装滚动条绝对于页面最上部的相距。

示例:

alert($(document).scrollTop()); //获取滚动条目前的位置

$(document).scrollTop(100); //修改滚动条的位置

 

 

height()方法获得或改动三个要素的莫斯中国科学技术大学学

示例:

$("div>div").height(100); //修改没元素的高度

alert($("div>div").height()); //获取元素的高度

 

width()方法得到或退换二个要素的幅度

示例:

$("div>div").width(200);  //修改没元素的宽度

alert($("div>div").width()); //获取元素的宽度

 

要素内部的中度和宽度

innerWidth和innerHeight

赢得成分内部的可观和增长幅度,内部宽高是指加上padding的冲天,而不包含border和margin的。

<div style="background:#F00; width:50px; height:50px; top:70px; left:30px; border:30px solid green; margin:10px; padding:13px;"></div>



alert($("div>div").innerWidth());

 

小练习:

壹、 在页面上定义一个宽50高50的革命div,让它自动向右上方移动。

贰、 接上题,移动到横向500纵向500的时候,再前进移动。

 

三、用css方法设置多少个宽600px高50px的标题栏,用offset方法设置其转移地点在页面的最上端,须求当您拖动浮动条的时候,这几个标题栏始终在彰显区域的最上边。(提醒:能够setInterval方法)。

 

JQuery中的事件绑定

页面载入事件

Ready(function(e){   }),当网页内容全体加载到浏览器中,并且成功dom模型创设之后触发的事件。它与<body>的onload事件功能一样。

事件绑定函数

Bind函数:把钦命的轩然大波,绑定到采纳器内定的因素上。

    $("#littleButton").bind(

"click",

function(){

alert("我是一个按钮");

}

 );

 

绑定仅实践一回的轩然大波

One函数:为接纳器钦赐的html成分绑定2个仅会施行三次的事件,之后这么些事件就不会再被触发了。

示例:

$("#littleButton").one("click",function(){

alert("今天星期四");

});

 

机关触发钦定成分的钦定事件

trigger()方法:自动触发推行内定成分上的内定事件,而不须求用户手动操作。

$("#littleButton").trigger("click");

 

收回钦赐元素上的钦定的轩然大波

unbind():取消费物价指数定html成分的钦命事件的绑定,令其不再生效。(只好裁撤通过jquery上的bind绑定的风浪,html成分上本人的轩然大波无效,比如:onClick)

示例:

$("#littleButton").bind("click",function(){

alert(111);

});

$("#littleButton").unbind("click");

 

 

事件委派:给还不存在的元素绑定事件

live()方法

示例:

$(".btn1").live("click",function(){

alert("这是在按钮出现之间绑定的事件");

});

alert(1);

$("body").append("<input type='button' value='被追加的按钮' class='btn1' /> ");

 

 

排除live方法委派的轩然大波

die()方法言传身教:

$(".btn1").live("click",function(){

alert("这是在按钮出现之间绑定的事件");

});

$("body").append("<input type='button' value='被追加的按钮' class='btn1' /> ");

$(".btn1").die("click");

 

 

为三个html成分的四个事变切换两个动作

toggle():可感觉钦赐的html成分的钦定事件绑定三个会挨个切换的函数。比方:

$("#littleButton").toggle(

function(){  alert("你好呀,吃了么?") },

function(){  alert("还没吃?") },

function(){  alert("那赶快回家去吃吧!") },

function(){  alert("你妈喊你回家吃饭") }

);

 

 

常用事件

单击Click()

绑定单击事件

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

alert("哎呀");

});

 

自动触发单击事件,而不须求用户手动点击

$("#littleButton").click();

 

双击dblclick()

绑定双击事件

$("#littleButton").dblclick(function(){

alert("哎呀");

});

 

活动触发双击事件,而无需用户手动点击

$("#littleButton").dblclick();

 

在文本框中选汉语字

select()方法,绑定选中文字时所要施行的函数。

示例:

$("#ttBox").select(function(e){

alert("哎呀,我被选中了。");

});

自动触发在文本框中选中文字的事件,并且自动选中文字:

$("#ttBox").select();

 

猎取关节

focus()

鼠标悬停

hover()

失掉宗旨

blur()

鼠标按下

mousedown()是指鼠标按下还并没有抬起时接触,并且其函数可以接过到1个轩然大波参数,那几个参数中涵盖当前鼠标的横坐标与纵坐标,示例:

$("#littleButton").mousedown(function(e){

alert("当前按下的位置是x:" e.clientX "---Y:" e.clientY);

});

 

此地得到的是点击地方相对于全部页面包车型客车左上角的职位。

鼠标移出时

mouseout()

它的用法和语法与mousedown同样。

鼠标移动时

mousemove()

它的用法和语法与mousedown同样。

松手抬起鼠标键时

mouseup()

它的用法和语法与mousedown同样。

表单提交事件

submit() 绑定表单提交时要进行的动作。

键盘事件

keydown 按下一个键时

keyup 松开抬起八个键时

keyPress 按下并松手2个键时

示例:

$(document).keydown(function(e){

alert("您刚刚按下的是:" e.keyCode);

});

JQuery与javascript中分裂的事件

scroll()当滚动条滑动时所接触的事件

严格的说应该是浏览器窗口中展现的网页的职务产生转移时。

$(document).scroll(function(){

alert($(document).scrollTop());

});

 

mouseenter()当鼠标进入到成分所占的区域限定内时

与mouseover(),在较轻便的情况下大家是看不出那三种事件的区分的,不过当在推行一些动画效果依旧此外较复杂的事态下,就能够发觉。mouseenter()事件只会被施行一回,mouseover()事件会在你的鼠标停留在要素之上的进度中一直重复实行。

mouseleave()当鼠标离开三个因素的显得范围时

它与mouseout()类似,然则它需求与mouseenter()搭配在1块儿行使的,也正是进入成分范围时用mouseenter(),离开元素时用mouseleave

小练习:

一、 用bind()向页面上的一个按键增添鼠标移入事件,移入开关范围时,开关文字形成“接待光临”,移出开关文字产生“后会有期”。

二、 用toggle()绑定七个函数给贰个按键,就是当你首先次单击这一个开关时,它提示“你怎么要点小编”,首回提醒“说了你还点”,第二次提示“你再点一下一发千钧”,第6遍提示“好吧,你赢了。”

三、 实现1个做取舍题的法力,在页面上有1个P段落和多少个单选开关,当您选用多个单选开关中的大四三个时,会唤醒用户是不是应对精确。个中的事件绑定必必要用JQuery完毕。

四、 设置2个宽600px高50px的标题栏,背景观为铁黑,用offset方法设置其生成地点,须求当拖动页面滚动条时,这一个标题栏始终放在当前显示区域的顶部(提醒:要求选用scroll()事件)

伍、 定义叁个尺寸都以50px的丁酉革命div,须求在显示器任性地点点击鼠标时,这些div马上移动到如今鼠标点击的职位。

 

 

 

JQuery_动作与作用

着力作用

潜伏3个因素

Hide()方法:

语法:

选择器.hide(速度,fn);

示例:

$("#box1").hide(); //直接隐藏没有任何动画

$("#box1").hide(2000); //在2秒之内逐渐向左上角缩小隐藏

//隐藏过程的动画结束之后,执行这个包含alert的函数

$("#box1").hide(2000, function(){

alert("我隐藏起来了,你看不到");

});

 

说明:

进程代表隐藏进度的时刻,单位微秒。

Fn代表隐藏动画截至之后自动施行的函数。

 

来得已经被隐形的要素

Show()方法

语法:

选择器.show(速度,fn);

说明:

随便被css的display:none属性隐藏的成分,依旧被地方的hide()方法隐藏的对象,都能够选用show()来令其显形。

 

示例:

$("#box1").show();

$("#box1").show(3000);

$("#box1").show(3000,function(){alert("我又回来了")});

 

 

展现只怕隐藏一个因素

Toggle

语法:

Toggle(速度,fn)

说明:

若果这些因素是可见的就进行东躲四川操作,假若不可知就试行展现操作。

示例:

function hide_show(){

$("#box1").toggle(300,function(){

alert("我来了,又走了");

});

}

<input type="button" onclick="hide_show()"  value="hide_show" />

<div style="width:400px; display:none;" id="box1">

    <img src="img/aa.jpg" width="400" />

</div>

 

滑动作效果果

滑动隐藏3个成分

slideUp()方法:

示例:

$("#box1").slideUp(2000,function(){

alert("图像收起来了");

});

 

滑动显示1个要素

slideDown()方法:

示例:

$("#box1").slideDown (2000,function(){

alert("图像拉下来了");

});

 

滑动隐藏或出示1个因素

sildeToggle()方法:

要素可知就滑动隐藏,反之则滑动显示。

function hide_show(){

$("#box1").slideToggle(100,function(){

alert("隐藏则显示,显示则隐藏。");

});

}

<input type="button" onclick="hide_show()"  value="hide_show" />

 

淡入淡出效果

以脱离效果隐藏叁个因素

fadeOut()方法

示例:

$("#box1").fadeOut(3000,function(){

alert("我走了");

});

 

以淡入效果呈现贰个因素

fadeIn()方法

示例:

$("#box1").fadeIn(3000,function(){

alert("我又来了");

});

 

退换成分的折射率

fadeTo方法()

在钦点的年华内以卡通的款型修改3个要素的反射率。

语法:

选择器.fadeTo(速度,透明度,fn);

其中:

反射率是1个一到0中间的小数,代表透明的百分比。

fn是卡通达成后进行的代码。

示例:

$("#box1").fadeTo(2000,0.5);

$("#box1").fadeTo(2000,0.5,function(){

alert("变淡了");

});

 

淡入展现或剥离隐藏

fadeToggle()方法

 

卡通效果

自定义动画

Animate可以透过多种css属性的稳步变化来兑现动画效果。

语法:

选择器.animate({

“css属性名1” : ”属性值1”,

“css属性名2” : ”属性值2”,

},动画时间长度);

作用:

让钦命的html成分由近期的css属性起始稳步向内定的css属性别变化化,其变动进程会变成三个点名时长的动画。

示例1:

$("#box2").animate({

"width":"500px",

"height":"300px",

"font-size":"100px",

opacity:0.5 //代表透明度

},2000);

 

示例2:

$("#box2").animate({

"width":"toggle",

"height":"toggle",

opacity:"toggle"

},2000);

 

支持的习性:

Height/width:值可感到toggle,也在当下属性值与0值以前切换。

Left/right/top/bottom:前提是因素必须是生成的。

opacity 值可感到toggle,折射率是0到1之间的2个小数。

结束正在运行的动画片

选择器.stop();

假使选用器内定的因素正在实施动画,则立即结束动画的施行。

Delay延迟动画或其余艺术的实行。

$("#box2").delay(5000).slideUp(2000);

 

延期五秒再实行动画

关门页面上装有动画

$.fx.off=true;

小练习:

 

 
   

壹、根据上图制作多少个滑动菜单,要求点击题目栏张开其江湖的子菜单项,其余菜单栏收起,供给必须有滑动动画效果。按图举办css切图。

 

二、用Animate制作二个你“点不到自己”的开关,相当于鼠标指向其上时,就能够随机移动到别的市方。

提示:获取浏览器呈现区域的上涨的幅度和可观。

document.documentElement.clientWidth;

document.documentElement.clientHeight;

 

 

叁、制作三个百度弹出登六框,供给点击登陆直接在页面以浮入动画弹出三个生成的登入框,而且无论是滚动条在哪些地点,那几个登入框始终在显示器主题,点击X 关闭。

 
   

 

4、如下图所示,产品图片能够活动向左滑动,当鼠标点击左右键时,能够向左右活动一条图的岗位。用户不操作时,每伍秒向左移动一个图形的职位,

 

 
   

5、下拉菜单效果,当鼠标移动到菜单上时,就滑动显示出下拉菜单,并且当鼠标移动到菜单项上时,文字变绿并向后滑动拾px;

 
   

 

陆、点击标签栏,突显不一致的内容

 
   
 
   

7、当鼠标移动到图片上时,滑动交错动画展现出三个从上到下和从上到上的晶莹div,并且滑动交错呈现出从左到右的标题和从右到左的文字简单介绍。

 

 
   

 

 
   

 

 
   

 

评分标准:

1道题十几分,第九和四题是附加题。

 

 

 

JQuery中的ajax

什么是ajax

何谓异步加载,就是指在不刷新网页的场所下,去读取另二个网页的内容,然后以字符串的情势获得另3个网页的富有代码。

 

Load方法

获得另一个网页的代码,并将得到的代码插入到钦定的地点。

示例:

$("#box").load("bb.html");

 

语法:

选择器.load(url,[data,][callback]);

说明:

一、 选用器用来钦定的1个html容器,那几个容器来存放从另1个网页中拿走的html代码。也等于将另多少个网页的具备代码放在方今这一个选取器钦点的要素的起始标签和得了标签中间。

2、 url参数,正是要呼吁的可怜网站。

3、 data参数,是一个json,是指需求发送给另2个网页的参数,比如:{“userName”:”小白”,”password”:”12345陆”}

四、 callback,是指产生读取之后会被推行的三个函数,这一个函数有多个参数,分别是:

a) responseText 得到的另1个网页的源代码的字符串

b) textStatus 读取另1个网页是不是中标,success代表读取成功,error读取战败。

示例:

$(“box”).load(

“11.html”,

{“userID”:”008”,”userType”:”admin”},

function(responseText, textStatus)

{ //第一个参数是另一个网页的所有代码,第二个参数是读取是否成功,这个两个参数的名字是可以改变的。

alert(responseText   ”-------”    textStatus);

}

);

 

 

$get方法

使用Get形式来展开异步请求,常常来讲用于向劳动器端传递,然后再拿走再次来到的网页的代码。

示例:

    $.get(

"Untitled-1.html",

{"un":"小白","pwd":"123"},

function(r,s){

alert(s);

alert(r); //得到的是一个文档对象

}

);

 

语法:

$.get(url,[data],[callback]);

 

参数表明:参见load方法。

 

$post方法

示例:

    $.post(

"Untitled-1.html",

{"un":"小白","pwd":"123"},

function(r,s){

alert(s);

alert(r);  //得到的是一个文档对象

}

);

 

语法:

$.post(url,[data],[callback]);

 

参数表达:参见load方法。

 

$.getJSON方法

异步读取另3个页面中的json数据,并将其分析成javascript对象。

示例:

json1.js

{ "studentName":"小强", "studentAge":18 }

html文件

$.getJSON("json1.js",function(std,s){

// std是一个js对象

alert(1);

alert("我叫" std.studentName "今年" std.studentAge "岁");

});

 

$.getScript方法

同意大家跨域(读取此外叁个网址的)读取并实行四个javascript脚本程序。

示例:

if(confirm("是否执行js文件"))

$.getScript("json1.js");

或

$.getScript("json1.js",

function(){

alert("远程脚本已经执行完毕")  

}

);

 

练习:

一、 创立四个网页index.html,text.html和text二.html,在index.html页面中蕴藏两个div,分别将此外多少个网页内容增添到那几个div中。内容自定

二、 定义2个json文件,这段json之中包括三个数组,数组之中包括5条产品消息(产品名:pName,产品型号:pModel,产品价格pPrice),读取那一个制品新闻,并将5条产品消息呈现在贰个报表中。

3、 模拟优酷商量,定义一个表面包车型大巴json文件,这段json之中包括10条议论音信(用户名:uName,商酌时间uTime,研究内容uText),当网页的滚动条滑动到800px的时候,向一个div中读取那些评价的音讯,并将伍条产品新闻展现在3个表格中。(提醒:避名scroll事件由于反复触及而招致重复读取评论内容。)

 

本文由澳门新葡萄京发布于计算机知识,转载请注明出处:JQuery实际上就是一个javascript文件

关键词: