jQuery基础

一、概念

jQuery就是一个js类库，对常用的方法和对象进行封装，方便我们使用。

二、jQuery和html整合

1、jQuery是一个单独的js文件，通过script标签的src属性导入即可

2、获取一个jQuery对象

$("选择器")或者jQuery("选择器")

3、dom对象和jQuery对象之间的转换

dom对象-->jQuery对象

$(dom对象)

jQuery对象-->dom对象

方式一：jQuery对象[index]

方式二：jquery对象.get（index）

4、页面加载

js：window.onload=function(){} 在一个页面中只能使用一次

jQuery：可以使用多次

方式一：$(function(){...})

方式二：$(document).read(function(){...})

5、派发事件

$("选择器").click(function(){...})

等价于：dom对象.onclick=function(){...}

6、jQuery中效果

隐藏或展示

show(毫秒数) 

hide(毫秒数)

滑入或滑出

slideDown(毫秒数):向下滑入

slideUp(毫秒数):向上滑出

淡入或淡出

fadeIn(int):淡入

fadeOut(int):淡出

三、选择器

1、 基本选择器

$("#id值")  $(".class值")  $("标签名")  

$("*")：全选

$("#id值,.class值")：获取多个选择器 用逗号隔开

2、 层次选择器 

a b:a的所有b后代

a>b:a的所有b孩子(不包括孙子)

a+b:a的下一个兄弟(大兄弟)

a~b:a的所有弟弟们

3 、基本过滤选择器:★

:frist 第一个

:last 最后一个

:odd  索引奇数

:even 索引偶数

:eq(index) 指定索引

:gt(index) >索引大于哪一个值

:lt(index) <索引小于哪一个值

4 、内容过滤:

:has("选择器"):包含指定选择器的元素

:contains(text):是否包含指定文本

:empty 是否为空

5、可见过滤:

:hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none

:visible 

6 、属性过滤器:

[属性名]

[属性名="值"]

7、 表单过滤:

:input  所有的表单子标签  input select textarea button

input   仅仅获取input标签

四、属性和css操作

1 、对属性的操作

attr():设置或者获取元素的属性

方式1:获取attr("属性名称")

方式2:设置一个属性attr("属性名称","值");

方式3:设置多个属性  json

attr({

"属性1":"值1",

"属性2":"值2"

})

removeAttr("属性名称"):移除指定属性

2、 添加class属性的时候 

addClass("指定的样式值"); 相当于 attr("class","指定的样式值");

removeClass("指定的样式值");

3 、对css操作:操作元素的style属性

css():获取或者设置css样式

方式1:获取 css("属性名")

方式2:设置一个属性css("属性名","值")

方式3:设置多个

css({

"属性1":"值1",

"属性2":"值2"

});

五、jQuery中的DOM操作

1、插入节点

（1）内部插入节点

append()

appendTo()

prepend()

prependTo()

（2）外部插入节点

after()

insertAfter()

before()

insertBefore()

2、查找与创建节点

查找节点

查找属性节点，通过jQuery选择器完成，查找到所需要的元素后，可以调用jQuery对象的attr方法来获取或者设置它的各种属性

创建节点

使用$()函数创建节点：$("<p></p>")，返回的是一个jQuery对象

也可以在创建节点的同时加上属性

$("<font color="red"></font>")

3、删除节点

remove():从DOM中删除所有匹配元素，这个方法的返回值是一个指向已被删除的节点的引用

empty()：清空所有后代节点

4、设置和获取HTML、文本和值

html()设置和获取元素中的html内容

text()设置和获取某个元素中的文本内容

val()设置和获取某个元素的值，该方法专用于具有value属性的元素

css()设置和获取style属性中的属性名称和值

attr()设置和获取style属性之外的属性值

prep()设置和获取布尔属性的值

5、常用的遍历节点方法

children():取得匹配节点的所有子元素组成的集合

next():取得后面紧邻的兄弟元素的集合

prev():取得匹配元素的前面紧邻的同类元素的集合

siblings():取得匹配元素前后所有的同辈元素

六、jQuery事件处理

1、绑定事件处理

$("选择器").bind("click",function(){ alert("it eorks");});

2、多个事件绑定

$("选择器").bind("mouseenter mouseleave",f);

$("选择器").bind({"mouseenter:f1, mouseleave:f});

3、动画效果

$("选择器").fadeOut("fast").fadeIn("fast");

显示隐藏和显示

fadeIn()、fadeOut()、fadeTo()

show()、hide()、toggle()

slideDown()、slideUp()、slideToggle()

4、自定义动画

$("选择器").animate({marginTop:100}).animate({marginLeft:100});

第一个参数是必需的,它必需是一个对象,它是动画属性对象。该对象的属性指定要变化的CSS属性和它们的目标值;animate()方法会将

每个选中元素的这些CSS属性从初始值变化到指定的目标值.

第二个参数是可选的,它也是一个对象,它是动画选项对象。属性duration指明了动画持续时间,属性complete指定动画完成后自动执行的回调函数

注意,animate()动画只支持数值属性,对于颜色、字体等枚举属性是无法实现动画效果的

$(function(){$("img:eq(0)").css({"width":"100px",})$("img:eq(0)").animate({"width":"300px",},{"duration":1000,"complete":function(){$("img:eq(0)").attr("src","img/lye.jpg");$("img:eq(0)").animate({marginLeft:100}).animate({height:300}).animate({"border-radius":"300px"},{"duration":2000});}})})