jQuery知识点整合

时间 2019-11-13

标签 jquery 知识整合栏目 JQuery 繁體版

原文原文链接

1、jQuery介绍

jQuery是一个函数库，一个js文件，页面用script标签引入js文件就可使用javascript

一、官方网站：http://jquery.com/html

二、版本下载：http://code.jquery.com/java

2、jQuery加载

将获取元素的语句写到页面的头部，会由于元素尚未加载而出现错误，jquery提供了ready方法解决这个问题，它的速度比原生的window.onload更快。jquery

3、jQuery选择器

一、jQuery用法思想

选择某个网页元素，而后对它进行某种操做ide

二、jQuery选择器

jQuery选择器能够快速的选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。函数

a、选择整个文档对象： $(document) 动画

b、选择全部的li元素： $("li")网站

c、选择id为myId的网页元素：$("#myId")this

d、选择class为myClass的元素：$(".myClass")

e、选择name属性等于first的input元素： $("input[name=first]")

f、选择id为uli元素下的全部li下的span元素： $("#uli li span")

三、对选择器进行修饰过滤（相似CSS伪类）

a、选择id为uli元素下的第一个li ：$("#uli li:first")

b、选择id为uli元素下的li的奇数行：$("#uli li:odd")（从0开始）

c、选择id为uli元素下的第三个li：$("#uli li:eq(2)")（从0开始）

d、选择id为uli元素下的前三个以后的li：$("#uli li:gt(2)")

e、选择表单中的input元素：$("#myForm :input")

f、选择可见的div元素：$("div:visible")

四、对选择器进行函数过滤

a、选择包含p元素的div元素：$("div").has("p")

b、选择class不等于myClass的div元素：$("div").not(".myClass")

c、选择class等于myClass的div元素：$("div").filter(".myClass")

d、选择第一个div元素：$("div").first()

e、选第六个div元素：$("div").eq(5)

五、选择器转移

a、选择id为div2元素下前面的第一个p元素：$("#div2").prev("p")

b、选择id为div元素下后面的第一个p元素：$("#div").next("p")

c、选择离id为div元素下最近的那个form父元素：$("#div").closest("form")

d、选择id为div元素下的父元素：$("#div").parent()

e、选择id为div元素下的全部子元素：$("#div").children()

f、选择id为div元素下的（除本身以外的）同级元素：$("#div").siblings()

g、选择div内的class等于myClass的元素：$("#div").find(".myClass")

4、jQuery样式操做

同一个函数完成取值和赋值

一、操做行间样式

a、获取div的样式

b、设置div的样式

特别注意：选择器获取多个元素，获取信息获取的是第一个，好比：$("div").css("width")，获取的是第一个div的width

二、操做样式类名addClass 、removeClass、toggleClass

a、追加样式float_left

b、移除样式float_left

c、重复切换样式active

5、jQuery属性操做

一、获取或设置html内容：html（）

a、获取html（）里的内容

b、设置html（）里的内容

二、获取或设置text内容：text（）

a、获取text（）里的内容（不会带标签）

b、设置text（）里的内容，下面的span是文本而不是标签

三、获取或设置某个属性的值：attr();

a、获取某个属性的值

b、设置某个属性的值

四、获取或设置checkbox的状态值：prop();

a、获取checkbox的状态值

b、设置checkbox的状态值

6、绑定click事件

实例：选项卡的制做

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>选项卡</title>
 6     <style>
 7         .tab{
 8             width:500px;
 9         }
10         .tab button{
11             width:100px;
12             height:50px;
13             margin-left:10px;
14             border: none;
15             outline: none;
16             cursor: pointer;
17         }
18         .tab .active{
19             background:gold;
20         }
21         .con div{
22             width:500px;
23             height:300px;
24             background:gold;
25             margin-left:10px;
26             display: none;
27         }
28         .con .act{
29             display: block;
30         }
31     </style>
32     <script src="../js/jquery-1.12.4.min.js"></script>
33     <script>
34         $(function(){
35             $(".tab button").click(function(){
36                 $(this).addClass("active").siblings().removeClass("active");
37                 //获取索引值点击的$(this).index()
38                 var i = $(this).index();
39                 //$("#con div")[i]把原来的jquery对象转换成了js对象，因此原有的jquery对应的方法没法使用，只能将其转换为jquery才能使用
40                 $($("#con div")[i]).addClass("act").siblings().removeClass("act");
41 //                $("#con div").eq(i).addClass("act").siblings().removeClass("act");
42             })
43 
44         })
45     </script>
46 </head>
47 <body>
48     <div class="tab">
49         <button class="active">tab01</button>
50         <button>tab02</button>
51         <button>tab03</button>
52     </div>
53     <div class="con" id="con">
54         <div class="act">内容一</div>
55         <div>内容二</div>
56         <div>内容三</div>
57     </div>
58 </body>
59 </html>

View Code

7、jQuery特殊效果

一、fadeIn（）淡入

二、fadeOut（）淡出

三、fadeToggle（）切换淡入淡出

四、hide（）隐藏元素

五、show（）显示元素

六、toggle（）依次展现或隐藏某个元素

七、slideDown（）向下展现

八、slideUp（）向上卷起

九、slideToggle（）依次展开或卷起某个元素

8、jQuery链式调用

jquery对象的方法在执行完以后返回这个jquery对象，全部的jQuery对象的方法能够连起来写：

$("#div1").chlidren("ul").slideDown("fast").parent().siblings().chlidren("ul").slideUp("fase")

$("#div1").//id位div1的元素

.chlidren("ul") //该元素下的ul子元素

.slideDown("fast") //高度从零到实际高度来显示ul元素

.parent() //跳转到ul的父元素，也就是id为div1的元素

.siblings() //跳转div1元素同级的全部兄弟元素

.chlidren("ul") //查找这些兄弟元素中的ul子元素

.slideUp("fase") //从实际高度变换为零来隐藏ul元素

9、jQuery尺寸相关及滚动事件

一、获取和设置元素的尺寸

a、width（）和height（）获取元素width和height

b、innerWidth（）和innerHeight（）包括padding的width和height

c、outerWidth（）和outerHeight（）包括padding和border的width和height

d、outerWidth（true）和outHeight（true）包括padding和border以及margin的width和height

二、获取元素相对页面的绝对位置

offset（）获取元素的绝对位置，返回的是个对象

三、获取可视区高度

$(window).height()

四、获取页面的高度

$(document).height()

五、获取页面滚动距离

$(document).scrollTop();常使用这个制做回到页面顶部效果

$(document).scrollLeft();

六、页面滚动事件

$(window).scroll(function(){

　　............

})

10、jQuery动画 animate({par1:值,par2:值,par3:值},speed,动画曲线,function(){})

经过animate方法能够设置元素某属性值上的动画，能够设置一个或多个属性值，动画执行完成后会执行一个函数。

//参数说明：
 一、属性设置{par1:1,par2:2}
 二、speed 时间(ms)
 三、动画曲线 swing(默认值) 开始和结束慢速 中间快速，linear匀速
 四、回调函数  指动画完成以后作什么操做。