你的位置:首页 > 软件开发 > Java > jQuery知识点整合

jQuery知识点整合

发布时间:2017-07-19 00:00:14
一、jQuery介绍jQuery是一个函数库,一个js文件,页面用script标签引入js文件就可以使用<script type="text/javascript" src="js/jquery-1.12.2.js"></ ...

一、jQuery介绍

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

<script type="text/javascript" src='/images/loading.gif' data-original="js/jquery-1.12.2.js"></script>

1、官方网站:http://jquery.com/

2、版本下载:http://code.jquery.com/

二、jQuery加载

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

jQuery知识点整合

三、jQuery选择器

1、jQuery用法思想

选择某个网页元素,然后对它进行某种操作

2、jQuery选择器

jQuery选择器可以快速的选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

a、选择整个文档对象: $(document) 

b、选择所有的li元素: $("li")

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

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

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

f、选择id为uli元素下的所有li下的span元素 : $("#uli li span")

jQuery知识点整合

 3、对选择器进行修饰过滤(类似CSS伪类)

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

jQuery知识点整合

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

jQuery知识点整合

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

jQuery知识点整合jQuery知识点整合

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

jQuery知识点整合

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

jQuery知识点整合

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

jQuery知识点整合

jQuery知识点整合

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

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

jQuery知识点整合

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

jQuery知识点整合

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

jQuery知识点整合

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

jQuery知识点整合

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

jQuery知识点整合

5、选择器转移

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

jQuery知识点整合

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

jQuery知识点整合

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

jQuery知识点整合

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

jQuery知识点整合

e、选择id为div元素下的所有子元素:$("#div").children()

jQuery知识点整合

f、选择id为div元素下的(除自己之外的)同级元素:$("#div").siblings()

jQuery知识点整合

jQuery知识点整合

jQuery知识点整合

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

jQuery知识点整合

 四、jQuery样式操作

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

1、操作行间样式

a、获取div的样式

jQuery知识点整合

b、设置div的样式

jQuery知识点整合jQuery知识点整合

jQuery知识点整合

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

 2、操作样式类名addClass 、removeClass、toggleClass

a、追加样式float_left

jQuery知识点整合

b、移除样式float_left

jQuery知识点整合jQuery知识点整合

c、重复切换样式active

 jQuery知识点整合

 五、jQuery属性操作

1、获取或设置html内容 :html()

a、获取html()里的内容

jQuery知识点整合

b、设置html()里的内容

jQuery知识点整合jQuery知识点整合

2、获取或设置text内容 :text()

a、获取text()里的内容(不会带标签)

jQuery知识点整合

b、设置text()里的内容,下面的span是文本而不是标签

jQuery知识点整合jQuery知识点整合

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

 a、获取某个属性的值

jQuery知识点整合

b、设置某个属性的值

jQuery知识点整合

4、获取或设置checkbox的状态值:prop();

a、获取checkbox的状态值

jQuery知识点整合

b、设置checkbox的状态值

jQuery知识点整合jQuery知识点整合 

六、绑定click事件

jQuery知识点整合

实例:选项卡的制作

jQuery知识点整合jQuery知识点整合
 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='/images/loading.gif' data-original="../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>

原标题:jQuery知识点整合

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录