从零开始学_JavaScript_系列(四)——jquery(基础,选择器,触发条件,动画,回调函数)

jQuery语法

 

1)引用jquery文件及下载库:

http://jquery.com/download/

下载

Download the compressed, production jQuery 2.2.2

这个是用户版的,已经被精简和压缩。

然后使用

<script src="jquery.js"></script>

来启动这个库文件,记得将下载的文件重命名为jquery.js

也可以使用谷歌和微软的CDN,不过这里略。

 

2jQuery语法

$ (selector).action()

其中$是必须的,表示使用jQuery语法;

selector表示你要对哪个进行操作;

action()表示进行的操作;

例如:$(“div”).hide() 其表示对所有div标签包含的内容进行隐藏,如果是<”p”>则表示对p标签包含的东西进行隐藏。

其他:

$(this) 表示对当前HTML元素进行操作

$(“#abc”) 表示对idabc的元素进行操作

$(“.abc”) 表示对class=”abc”的进行操作

 

 

3$(document).ready

这个存在的意义在于,只有当文档加载完毕(不确定是指所有文档,还是指使用的文档的那一部分),才能运行jQuery代码

 

 

4)选择器

$(“p”) 选择元素为<p>

$(“p.abc”) 选择class=”abc”的<p>元素

$(“p#abc”) 选择id=”abc”的<p>元素

 

$(“[href]”) 选择所有带有href属性的元素

$(“[href=’#’]”) 选择所有带href值等于“#”的元素

$(“[href!=’#’]”) 选择所有带href值不等于“#”的元素

$(“[href$=’.jpg’]”) 选择所有带href,末尾以.jpg结尾的元素

more

语法

描述

$(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" 的元素

 

 

 

5)事件触发条件

ready是完成后触发,一般用于文档。$(document).ready(执行的命令)

click是点击后触发,一般用于按钮,也可以用于点击文档某区域。$(selector).click(执行的命令)

dclick是双击后触发。$(selector).dclick(执行的命令);

focus是元素获得焦点时触发的事件;

mouseover是鼠标悬停后触发的事件;

更多事件触发参考:

http://www.w3school.com.cn/jquery/jquery_ref_events.asp

 

 

6)名称冲突

例如jQuery和某个库名称冲突了(例如同样适用$符号作为开始),那么使用这个命令;

var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

 

 

7)解释

$(document).ready(function(){

  $(".ex .hide").click(function(){

    $(this).parents(".ex").hide("slow");

  });

});

第一行是,当文件准备好了,执行函数,函数内容是后面的:

第二行是,class=”ex”的元素中的class=”hide”元素,点击后触发函数,函数内容为第三行;

第三行是,当前元素(this)的所有祖先元素(parents,一直到根元素html为止)中class=”ex”的元素,被隐藏(hide),速度为缓慢(slow

疑问:

当有两个同样的东西时,为什么只隐藏自己当前这个,不隐藏另外一个?

推测是因为只遍历其祖先,不包含自己(且祖先中符合class=ex要求的)

 

 

8)隐藏和显示

隐藏是hide(),而显示对应的是show()

只要将隐藏的hide()改为显示的show()即可。

 

还可以规定速率:

速率有三种,slow(慢),fast(快),数字(毫秒)。

例如hide(“slow”);   show(“fast”);    hide(2000);

需要注意的是:无参数为瞬间完成,fast为快(但比瞬间慢),slow为慢,数字无需加引号。

 

另有toggle,用法同showhide,效果是,如果是隐藏,点击后显示,如果是显示,点击后隐藏。也可以加时间和速度参数。

问题:假如多次点击,他会执行完每一次的行为,而不是只执行最近一次

 

 

9)淡入和淡出

注意大写,对大小写是敏感的。

fadeIn(); //淡入(显示)

fadeOut(); //淡出(隐藏)

fadeToggle(); //类似toggle,如果隐藏则显示,如果显示则隐藏

fadeTo(速度, 透明度0~1, 返回函数); //可以调整不透明度,注意,不能大于1

 

如:

$("#img_1st").fadeTo(1000,0.3);

1000ms的速度,将id=”img_1st”的东西设置为透明度30%

 

注:

假如有多个淡入同时执行,则分别执行自己的,而不是逐个执行。除非有设置设置其执行顺序。

 

更多特效参考;

http://www.w3school.com.cn/jquery/jquery_ref_effects.asp

 

 

10)滑动

说明:非隐藏的情况下,滑动后就是隐藏了,隐藏的情况下,相反的滑动就是显示。

向上滑动:slideUp();

向下滑动:slideDown();

切换滑动(先向上,再点击则向下):slideToggle()

其他效果:

http://www.w3school.com.cn/jquery/jquery_ref_effects.asp

 

 

 

11)显示

display:none;

cssstyle设置,这种设置为初始不显示。

 

 

12)动画

$(selector).animate({params},speed,callback);

第一个是必须是,表示形成动画的CSS属性,简单的来说,例如初始字号大小为10px,然后这里填写50px,那么字体就会自动变为50px(这个变化的过程就是动画)

 

注意:

①这个可以操纵块,但是似乎是不能操作<p>标签。

②可以操纵CSS属性;

③移动位置的话,需要在style里这么设置:position:fixed

 

一些使用:

$(document).ready(function(){

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

    $("#a_3rd").animate(

    {left:'550px', //左边的位置变为550px

     width:'100px', //宽度变为100px

     top:'-=200px', //向上的位置减少200px

     fontSize:'50', //设置字体大小(注意没有-),并且S大写

     });

  });

});

并且由于top使用的是相对位置,因此每次点击top,都会移动位置

还可以设置为属性,例如:

width:’toggle’ //宽度形式的隐藏和显示切换

hide隐藏show显示。

不过貌似不能淡入淡出和改变透明度,是因为淡入淡出本身就是动画么?

 

队列:

$(document).ready(function(){

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

    $("#a_3rd").animate({left:'550px'}); //左边的位置变为550px

    $("#a_3rd").animate({width:'100px'});//宽度变为100px

     $("#a_3rd").animate({top:'-=200px'});//向上的位置减少200px

      $("#a_3rd").animate({fontSize:'50'});//设置字体大小(注意没有-),并且S大写

  });

});

这种写法就是让其按顺序执行先移动位置,然后宽度变化,然后往上移动,再字体变大

 

13)停止动画

语法:

$(selector).stop(stopAll,goToEnd);

 

假如有动画队列1234,正在执行1

默认无参数是1停止,下来执行234

第一个参数存在表示1234都停止;

第二个参数表示1停止,但是立刻出结果

 

参数用truefalse来表示。

false, false表示1停止,执行234

false, true表示直接完成1,然后执行234

true, false表示1停止,234取消;

true,true 表示1直接出结果,然后其他停止;

 

如代码:

<div style="position:fixed" id="a_3rd">

<p>用于测试动画的文字</p>

</div>

<div>

<p style="text-align:center">

        <button id="b_3rd" align="center">点击后左面的文字会移动</button>

<button id="b_4th" align="center">点击停止旁边按钮的动画</button>

</p>

</div>

 

以下是对其进行操作:

$(document).ready(function(){

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

    $("#a_3rd").animate({left:'550px'},2000); //左边的位置变为550px

    $("#a_3rd").animate({width:'100px'},2000);//宽度变为100px

     $("#a_3rd").animate({top:'-=200px'},2000);//向上的位置减少200px

      $("#a_3rd").animate({fontSize:'50'},2000);//设置字体大小(注意没有-),并且S大写

  });

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

   $("#a_3rd").stop(true); //停止其的一切动画队列

  });

});

 

 

 

14CallBack函数

称为回调函数,

其作用是,当前动画执行完100%后,执行该函数。

 

可以理解为,当某条件满足之后,执行该函数。

 

 

15AJAX方法(异步请求)

具体来说,是load()方法,语法是:

$(selector).load(URL,data,callback);

 

例如读取某个链接或者本地文件:

  $("#a_3rd").load("a.txt"); //这是标签为#a_3rd的读取文本文档a.txt

 

URL是希望加载的URL(链接);

data参数规定与请求一同发送的查询字符串键/值对集合(不懂,感觉是说这个是查询的时候顺便发个信息给对方);

callback是结束请求后执行的函数;

 

可以在URL里面加入选择器(例如#是选择id的,.是选择class的),来选择某一部分的内容(例如js文件的某个标签的)。

如:

load('/example/jquery/demo_test.txt #p1') //读取id=”p1”的标签内的

也可以把#p1改为h2,读取h2标签内的

 

load的返回值(注意大小写):

responseTxt 包含调用成功时的结果内容

statusTxt 包含返回状态,如果成功是success,如果失败是error

xhr 包含XMLHttpRequest对象(不懂)

 

 

16getpost——两种http请求方法

get——从指定的资源请求数据;

post——向指定的资源提交要被处理的数据;

 

GET方法:

查询字符串(名称/值 对)是在GET请求的URL中发送的;

GET请求可被缓存;

GET请求保留在浏览器历史记录中;

GET请求可被收藏为书签;

GET请求不应在处理敏感数据时使用;

⑤有长度限制;

⑥只应当用于取回数据;

 

POST方法:

①不会被缓存;

②不会被保存在浏览器记录中;

③不能被收藏为书签;

④对数据长度没有要求;

 

GET

POST

后退按钮/刷新

无害

数据会被重新提交(浏览器应该告知用户数据会被重新提交)。

书签

可收藏为书签

不可收藏为书签

缓存

能被缓存

不能缓存

编码类型

application/x-www-form-urlencoded

application/x-www-form-urlencoded multipart/form-data。为二进制数据使用多重编码。

历史

参数保留在浏览器历史中。

参数不会保存在浏览器历史中。

对数据长度的限制

是的。当发送数据时,GET 方法向 URL 添加数据;URL 的长度是受限制的(URL 的最大长度是 2048 个字符)。

无限制。

对数据类型的限制

只允许 ASCII 字符。

没有限制。也允许二进制数据。

安全性

POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分。

在发送密码或其他敏感信息时绝不要使用 GET

POST GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中。

可见性

数据在 URL 中对所有人都是可见的。

数据不会显示在 URL 中。

 

 

GET语法:

$.get(URL,callback);

 

 

URL是必须有的,表示链接;

callback请求成功 后执行的回调函数;

 

 

POST语法:

$.post(URL,data,callback);

 

data是连通请求发送的数据。

 

 

以下是收集的资料:

1GET用于信息获取,而且应该是安全的和幂等的。

“安全”大概意思是:

①不安全的信息(敏感的信息)不应该由GET获取;

GET主要用于获取信息,而非修改信息;

GET请求一般不应产生副作用;

 

“幂等”大概意思是:

①对同一个URL的多次请求的结果是相同的。

例如想要获得一个信息,多次请求,应该总能获得这个信息(而非突然变为另外一个信息);

 

GET请求的数据会附在URL之后(把数据放在HTTP协议头中),以“?”分割URL和传输数据,参数之间以“&”相连,如:

login.action?name=hyddd&password=idontknow&%E4%BD%A0%E5%A5%BD

如果数据是英文字母/数字,则原样发送;

如果是空格,则转换为+

如果是中文/其他字符,则把字符串用BASE64加密,得出%E4%BD%A0%E5%A5%BD,其中%XX中的XX为该符号以16进制表示的ASCII

 

 

 

2POST表示可能改变服务器上的资源请求

①例如对某论坛的帖子进行回帖,服务器上的该贴多了一个回帖。因此应该通过POST来实现;

 

POST把提交的数据放置在HTTP包的包体之中。

 

3)因此,POST的安全性(关于丢失敏感信息)比GET高,传输的数据更多一些,但是更复杂一点(因为data属性,要发一个表单)。

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值