重学JQuery

Write Less Do More

点击查看JQuery实例

JQuery的入口函数

//jQuery的入口函数：写法一
$(document).ready(function(){
  //开始写jQuery内容
});

//写法二
$(function(){
  //执行代码
 });


//JavaScript入口函数
window.οnlοad=function(){
	//执行代码
};

• 入口函数的作用：
  防止文档在完全加载之前对不存在的dom元素进行操作，防止报错

• jQuery入口函数和JavaScript的入口函数的区别：

  • jq的入口函数是所有dom都加载之后就执行
  • js的window.onload函数是等到所有的内容加载完成后才会执行，包括外部图片之类的加载完后才能后才执行

jQuery选择器：

$('选择器')

语法	描述
$(’*’)	选取所有元素
$(‘this’)	选取当前元素
$(‘p.intro’)	选取class为intro的p元素
$(‘p:first’)	选取第一个p元素
$(‘ul li：first’)	选取第一个ul下面的第一个li元素
$(‘ulli：first-child’)	选取ul元素的第一个li元素
。。。更多选择器点击：JQuery。。。

JQuery的事件

鼠标事件	键盘事件	表单事件	文档窗口事件
click	keypress	submit	load
dblclick	keydown	focus	resize
mouseenter	keyup	change	scroll
mouseleave	hover	blur	unload

jQuery的动画效果

1. 显示和隐藏

$(selector).hide(speed, callback);
$(selector).show(speed, callback)；
//切换显示隐藏
$(selector).toggle(speed, callback)；

2.淡入和淡出

$(selector).fadeIn(speed, callback);
$(selector).fadeOut(speed, callback)；
//淡入/淡出切换
$(selector).fadeToggle(speed, callback)；
//opacity为fadeTo的必须参数，允许设置为不透明
$(selector).fadeTo(speed,opacity, callback)；

3.向上滑动/向下滑动/滑动切换

$(selector).slideDown(speed, callback)；
$(selector).slideTop(speed, callback)；

4.jquery动画

$(selector).animate({params},speed,callback);
//params：设置动画的css属性参数
//speed：速度曲线
//callback：动画完成之后的回调函数

• 4.1 animate动画可同时修改多个属性，也可以一次进行多个操作（动画队列）；
• 4.2 可以使用预定义的值：show hide toggle
• 4.3 停止动画：在动画完成前阻止排入队列的动画的执行—$(slector).stop(stopAll, goToEnd);
  1. stopAll:是否默认清除动画队列，默认false；
  2. gotoEnd是否直接跳到动画执行结果，默认false

5.JQuery回调函数：

• Callback 函数在当前动画 100% 完成之后执行。

JQuery对html的操作

1.获取DOM元素的方法：

• .html() ————设置/获取元素的内容（包括html标签）

• .text() ————设置/获取元素的文本内容

• .val() ————设置/获取表单元素的值

• .attr(“属性名”) ————获取属性值

tips：方法中不传入参数的时候是获取属性值，传入参数的时候是设置

2.设置内容和属性

• .html(string) ————设置/获取元素的内容（string包括html标签）

• .text(string) ————设置/获取元素的文本内容

• .val(string) ————设置/获取表单元素的值

• .attr(“属性名”，“属性值”) ————设置属性值，可同时设置多个属性以对象形式传入。

3.回调函数
text()、html() 以及 val() 的回调函数：
有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值
然后以函数新值返回您希望使用的字符串。
attr 的回调函数：
有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值
然后以函数新值返回您希望使用的字符串。

4.jQuery添加元素

• –append（） 在被选元素的前面插入内容
• –prepend（） 在在被选元素的后面插入内容
• –before（） 在被选元素的开头插入内容
• –after（） 在在被选元素的结尾插入内容

tips：可以插入字符串，也可以插入若干节点。

5.删除元素

• –——remove（） 删除元素及子元素，包括元素自身
• –——empty（） 清空元素，元素的子元素，不包括元素自身
  remover方法，可以传入参数用来过滤被删除的元素

6.操作类

//添加一个或多个类，多个类时用空格分开
$(selector).addClass("")；
//删除指定类，可同时删除多个
$(selector).removeClass("")；

//切换某个类，即控制某个类的显示与隐藏
$(selector).toggleClass("")；

7.获取或设置css属性

//获取指定的css属性
$(selector).css("propertyname")；

//设置单个css属性
$(selector).css("propertyname"，"value")；

//设置多个css属性
$(selector).css({"propertyname":"value","propertyname":"value", ... })；

8.获取或设置元素和浏览器的尺寸

属性	描述
width()	元素宽度，不包括内边距和边框
height()	元素高度，不包括内边距和边框
innerWidth()	元素宽度，包括内边距
innerHeight()	元素高度，包括内边距
outerWidth()	元素宽度，包括内边距和边框
outerHeight()	元素高度度，包括内边距和边框
设置了 box-sizing 属性后，width() 获取的是 css 设置的 width 减去 padding 和 border 的值

jquery遍历

1.遍历父级元素

.parent（） //返回直接父元素
.parents（） //返回所有父级元素
.parentsUntil（） //返回介于两个元素之间的父级元素

2.遍历子级元素

//返回所有的直接子元素
$(selector).children()

//返回所有的或指定的后代元素
$(selector).find()

3.遍历同级元素

方法	描述
siblings()	返回所有（或指定）的兄弟元素
next()	返回下一个兄弟元素
nextAll()	返回后面跟随的所有兄弟元素
nextUntil()	返回后面跟随的介于两个元素之间的所有兄弟元素
prev()	返回前一个兄弟元素
prevAll()	返回前面所有的兄弟元素
prevUntil()	返回前面的介于两个元素之间的兄弟元素

4.jQuery的过滤

方法	描述
first()	返回被选元素的首个元素
last()	返回被选元素的最后一个元素
eq()	返回被选元素中带有指定索引号的元素，索引从0开始
filter()	过滤掉不符合标准的元素，返回一个列表（数组）
not()	与 filter() 相反，返回不符合标准的所有元素的集合

jquery与ajax

ajax能在不重载全部页面的情况下，实现局部刷新。

1. load() 方法
   $(selector).load(URL,data,callback);
   url：请求的路径
   data：请求携带的参数（可选）
   callback：请求完成后的操作,有三个参数，分别是

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

   • statusTXT - 包含调用的状态

   • xhr - 包含 XMLHttpRequest 对象

2.get方法—通过http请求从服务器获取数据
$.get(URL,callback);
url：请求数据的路径
callback：请求成功后执行的函数，函数的第一个参数是请求回来的内容，第二个参数是请求的状态

3.post方法—向服务器提交数据
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名，函数的第一个参数是请求回来的内容，第二个参数是请求的状态。