JQuery
一.JQuery基础语法
1.概念
JQuery是javaScript的一个库,Jquery基于javascript开发出来。目的就是为了简化javascript的开发。
宗旨:“Write Less,Do More”,提倡写更少的代码。
核心特性:
- 链式语法
- 高校灵活的CSS选择器使用和扩展
- 丰富的插件
官网:https://jquery.com/
三大版本:
目前jQuery有三个大版本。 1.X:兼容IE678,使用最为广泛,官网只做BUG维护,功能不再新增。因此一般项目来说,使用1.X版本就可以了,最终版本:1.12.4 (2016年5月20日)
2.X不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
3.X不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日)
————————————————
jd:1.6.4
sina:1.7.3
3.选择器和方法
3.1 使用jquery访问三个div元素
测试页面jquery第一个div的内容???第二个div第三个使用类样式的div
如何不使用innerHTML呢?
.first()
.last()
.eq(0)
3.2 基本选择器
1.id选择器 $("#id名")
2.类选择器 $(".类选择器名")来访问相应的使用类样式的元素
3.标签选择器 $(“div”)格式:
$("标签名"),可以访问对应的标签元素
4.*
5.并集选择器
6.交集选择器
3.3 层次选择器
7.后代选择器 $(“a b”)
8.子代(级)选择器 $(“parent>child”)
9.后继选择器 $(“prev+next”)
10.兄弟|同辈选择器 $(“prev~sliblings”)
3.3 基本方法
之前在js代码有很多属性,比较长,jQuery为了简化这些长的属性,就封装成了一些方法。
html()->innerHTML,会把下面的带有html标签的格式给原封不动的输出。
val()–>value
size()–>length
text()–>只出来当前元素下的文本,不会出来html标签的格式.
css():设置当前元素的样式,语法:元素对象.css(“属性名”,“值”)
addClass():增加元素的样式,addClass(“样式名”)
removeClass():移除元素的样式,removeClass(‘样式名’)
总结:
1.基本选择器,重点前3个;id 类样式 标签;其他了解即可。
2.层次选择器,重点子级选择器 后继选择器;
3.基本方法,html() size() css() addClass() removeClass()
4.案例
4.1 计算器案例|购物车统计
4.2 表单验证案例