jQuery 基础
jQuery 基础(一)-样式篇
第1章 初识jQuery
1-1 课程介绍
jQuery 轻量级的JavaScript库
核心依然是JavaScript
不仅兼容了CSS3,还兼容各种浏览器
优势:容易上手,强大的选择器,解决浏览器的兼容,完善的事件机制,出色的Ajax封装,丰富的UI
工具:链式操作,回调函数,迭代器,延迟对象,队列
1-2 环境搭建
jQuery是一个JavaScript脚本库,不需要特别的安装,只需要我们在页面<head>标签内中,通过script标签引入jQuery库即可
1-3 jQuery HelloWorld体验
$(document).ready的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码。因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正地被加载完毕后才能正确地使用
1-4 jQuery对象与DOM对象
通过标准的JavaScript操作DOM与jQuery操作DOM的对比,我们不难发现:
通过jQuery方法包装后的对象,是一个类数组对象
它与DOM对象完全不同,唯一相似的是它们都能操作DOM
通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个DOM节点有哪些方法,也不需要关心不同浏览器的兼容性问题,我们通过jQuery提供的API进行开发,代码也会更加精短。
1-5 jQuery对象转化成DOM对象
1、利用数组下标的方式读取到jQuery中的DOM对象
2、通过jQuery自带的get()方法
1-6 DOM对象转化成jQuery对象
通过$(dom)方法将普通的dom对象加工成jQuery对象
第2章 jQuery选择器
2-1 jQuery选择器之id选择器
id选择器:$(“#id”)
id选择器也是基本的选择器
2-2 jQuery选择器之类选择器
$(".class")
2-3 jQuery选择器之元素选择器
$(“element”)
2-4 jQuery选择器之全选择器(*选择器)
2-5 jQuery选择器之层级选择器
2-7 jQuery选择器之基本筛选选择器
注意事项:eq();It();gt();even;odd用来筛选他们前面的匹配表达式的集合元素,根据之前的匹配的元素再进一步筛选,注意 jQuery合集都是从0开始索引
gt是一个段落筛选。从指定索引的下一个开始,gt(1)实际从2开始
2-8 jQuery选择器之内容筛选选择器
注意事项:
:contains与:has有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素
如果:contains匹配的文本包含在元素的子元素中,同样认为是符合条件的。
:parent与:empty是相反的,两者所涉及的子元素,包含文本节点
2-19 jQuery选择器之可见性筛选选择器
元素的可见性依赖于适用的样式
css display的值是none
type="hidden"的表单元素
宽度和高度都显示设置为0
一个祖先元素是隐藏的,该元素是不会在页面上显示
css visibility的值是hidden
css opacity的值是0
注意:如果元素中占据文档中一定的空间,元素被认为是可见的
元素的visibility;hidden或opacity:0被认为是可见的,因为他们仍然占用空间布局
2-11 jQuery选择器之子元素筛选选择器
2-12 jQuery选择器之表单元素选择器
2-13 jQuer选择器之表单对象属性筛选选择器
2-15 jQuery选择器之特殊选择器this
this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法
$(this),代表的上下文对象是一个jQuery的上下文对象,可以调用jQuery的方法和属性值
第3章 jQuery的属性与样式
3-1 jQuery的属性与样式之.attr()与.removeAttr()
attr()有4个表达式
attr(传入属性名):获取属性的值
attr(属性名,属性值):设置属性的值
attr(属性名,函数值):设置属性的函数值
attr(attributes):给指定元素设置多个属性值,即:{属性名:一“属性值一”,属性名而:“属性值二”,...}
removeArttr()删除方法
3-2 jQuery的属性与样式之html()及text()
3-3 jQuery的属性与样式之.val()
主要是用于处理表单元素的值,比如input,select,textarea
3-4 jQuery的属性与样式之增加样式.addClass
.addClass(className):为每个匹配元素所要增加的一个或多个样式名
.addClass(function(index,currenClass)):这个函数返回一个或更多用空格隔开的要增加的样式名
3-5 jQuery的属性与样式之删除样式.removeClass()
3-6 jQuery的属性与样式之切换样式.toggleClass()
toggleClass是一个互斥的逻辑,也就是通过判断对应的元素上是否存在指定的class名,如果有就删除,如果没有就增加
toggleClass会保留原有的class名新增,通过空格隔开
3-7 jQuery的属性与样式之样式操作.css()
3-8 jQuery的属性与样式之.css()与.addClass()设置样式的区别
.addClass与.css方法各有利弊,一般是静态的结构,都确定了布局的规则,可以用addClass的方法,增加统一的类规则、如果是动态的HTML结构,在不确定规则,或者经常变化的情况下,一般多考虑.css()方式
3-9 jQuery的属性与样式之元素的数据存储
jQuery基础(二)----DOM篇
第1章 课程介绍
1-1 jQuery基础(二)----DOM篇课程介绍
第2章 DOM节点的创建
2-1 DOM创建节点及节点属性
2-2 jQuery节点创建与属性的处理
创建元素节点 $("<div></div>")
创建文本节点$("<div>我是文本节点</div>")
创建属性节点$("<div id='test class='aaron'>我是文本节点节点</div>")
第3章 DOM节点的插入
3-1 DOM内部插入append()与appendTo()
区别:append()前面是被插入的对象,后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容,而后面是被插入的对象
3-2 DOM外部插入after()与before()
3-3 DOM内部插入prepend()与prependTo()
3-4 DOM外部插入insertAfter()与insertBefore()
第4章 DOM节点的删除
4-1 DOM节点删除之empty()的基本用法
4-2 DOM节点删除之remove()的参用法和无参用法
remove会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据
remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合,可以选择性的删除指定的节点
4-3 DOM节点删除之empty和remove区别
4-4 DOM节点删除之保留数据的删除操作detach()
这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。$(div).detach()这一句会移除对象,仅仅是显示效果没有了。但是内存中还是存在的
。当你append之后,又重新回到了文档流中。就又显示出来了。
当然这里要特别注意,detach方法是jQuery特有的,所以它只能处理通过jQuery的方法绑定的事件或者数据。
4-5 DOM节点删除之detach()和remove()区别
第5章 DOM节点的复制与替换
5-1 DOM拷贝clone()
5-2 DOM替换replaceWith()和replaceAll()
5-3 DOM包裹wrap()方法
5-4 DOM包裹unwrap()方法
5-5 DOM包裹wrapAll()方法
5-6 DOM包裹wrapInner()方法
.wrapInner(wrappingElement):给集合中匹配的元素的内部,增加包裹的HTML结构
第6章 jQuery遍历
6-1 jQuery遍历之children()方法
6-2 jQuery遍历之find()方法
find只在hou'后代中遍历,不包括自己
6-3 jQuery遍历之parent()方法
6-4 jQuery遍历之parents()方法
6-5 jQuery遍历之closest()方法