Jquert知识点

一、jQuery对象与dom对象转换

1、dom对象转换为jQuery对象 $（dom对象）

2、jquery对象转换为dom对象（jquery对象[索引号]、jquery对象.get[索引号]）

二、jQuery入口小函数

语法：$（document）.ready（function（）{}）

简写：$(function()})

1、$（document）.ready（）与window.οnlοad=function（）{}的区别

执行时机

window.onload：必须等待网页全部加载完毕（包括 图片等），然后再执行包裹代码

$(document).ready():只需要等待网页中的DOM结构 加载完毕，就能执行包裹的代码

执行次数

window.onload：只能执行一次，如果第二次，那么 第一次的执行会被覆盖

$(document).ready():可以执行多次，第N次都不会被上 一次覆盖

三、在页面中得到DOM对象

1、JavaScript中得到DOM对象document.getElementById(“menu”)

2、jQuery得到jquery对象 $(“#menu”)

四 、 jQuery选择器

基本选择器

1，#id

根据指定的id匹配元素

2，$(“#hel”)选择id=hel的元素

3，$(“.hel”)选择class=hel的元素

4，$(“div”)选择所有的div元素

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

6，$(“div,span,.hotclass”)选择所有div，span,和class为hotcalss的元素
 

层次选择器

1，$(“E1  E2”)

选择E1下所有E2

2，$(“div span”)选择div下所有span

3，$(“E1> E2”)

选择E1下的子E2,不包含E2下满足的元素,

4，$(“div > span”)选择div下的span元素，不包含span下的span元素

5，$(“E1+ E2”)

选择E1后紧相邻的E2

6，$(“.one + div”)选择class=one的下一个div元素

7，$(“E1~ E2”)

选择E1之后的所有E2,

8，$(“#one ~ div”)选择id为one后的所有div元素

补充说明：

$(“E1 + E2”)可以用$(E1).next(E2)代替              

$(“E1 ~ E2”)可以用$(E1).nextAll(E2)代替

过滤选择器

1，:first选择第1个元素        $(“div:first”)            选择第1个div元素

2，:last选择最后1个元素      $(“div:last”)          选择最后1个div元素

3，:contains(text)      选择含有text文本内容的元素     $(“div:contains(‘我’)”)选择内容里包含我的所有div

五，jQuery方法

 show()        显示隐藏的匹配元素，可带整数参数表示时间，单位是毫秒

hide()        隐藏显示的匹配元素，可带整数参数表示时间，单位是毫秒

css(name,value)        给匹配的元素设置css样式

text(string)        获取或设置匹配元素的文本内容,不包含html标签

filter(expr)        筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。

addClass(class)        为匹配的元素增加一个 类样式

removeClass(class)      为匹配的元素移除一个类样式  

html()        ​​​​​​​获取或设置匹配元素的内容，包含html标签

siblings()​​​​​​​        $(“.abc”).siblings()匹配得到class=abc的其它兄弟元素

1，操作样式

1）设置

设置单条样式 .css(“属性名”，”属性值”)

设置多条样式 .css({“属性名1”:”属性值1”,”属性名2”:”属性值2”,……})

2）获取样式

获取样式值 .css(“属性名”)

增加类      可增加/删除多个类

.addClass(“类名1 类名2 ……”)   多个类名之间用空格隔开

.removeClass(“”)

.toggleClass(“”)    

2、 操作元素中的内容：

1）设置：
.html(“str”)   设置元素的里面的内容 可用带html标签         js中的innerHTML
.text(“str”)    设置元素的里面的内容 可用不带html标签         js中的innerText
.val(“str”)     设置表单的值               

 六、动画

show(speed,[callback])  //显示

hide( speed,[callback] )  //隐藏

toggle(speed,[callback]) 

slideUp(speed,[callback] )//往上滑动

slideDown(speed,[callback] )   //往下滑动

slideToggle() fadeIn(speed,[callback] )

fadeOut(speed,[callback] )   // 从看得见到看不见 淡出 1-0  

fadeIn(speed,[callback])       // 从看不见到看得见 淡入 0-1  

fadeTo(speed,opacity,[callback])  //设置淡入淡出效果到一定的不透明度 fadeToggle()