每日一句：

当你成功了，怎么说都是对的，因为大家看见你台上的风光、头顶的光环。当你没成功的时候，怎么解释都是错的，因为人们相信眼见为实。
所以，请埋头苦干吧，别把时间浪费在解释上，没有委屈就没有成长，没有挫折就没有成功！

第五章、jquery

一、JQ的介绍

二、JQ的使用

1、JQ分3个系列，多个版本，一般用3系列 2、下载jq文件，进入官网jQuery ,点击download jquery,进入下载页面，点击product下载的是压缩版，点develop是开发版未压缩，具体步骤： ①点击product / develop进入新的页面 ②Ctrl+A 全选 ③Ctrl+C 复制 ④在自己电脑上建一个txt的文本，打开，Ctrl+V，然后Ctrl+S ⑤修改txt的文本名称和后缀为版本号.js

3、在html的文件中引入jq ①引入本地的jq文件优点：没有网也可以用缺点：占本地的空间 ②引入CDN地址优点：不需要下载文件，不占本地空间缺点：没有外网就用不了引入的位置：head内，body内都可以，但一定要放在自己写的js文件的上面

4、jq的入口/加载函数 ①写法 --见代码 ②和js加载函数的比较同：都是放在head内，且需要获取节点才要加入口/加载函数异：①jq：有2种写法，常用简写写，js加载函数只有一种写 ②jq：一个页面中有多个入口函数，都能执行； js:一个页面中有多个加载函数，只能执行1个 ③jq:只需要节点加载完成就能开始执行；js：需要节点和外部资源都加载完成才开始执行

5、jq节点和js节点比较及转换 ①jq节点是封装之后的，jq节点.jq方法， js节点.js方法 ②转换： js----jq $(js节点) jq----js jq节点[0] --》相当于转换成js了

三、jq强大的选择器系统

$('css选择器) --- 见文档

四、操作样式

1、行内样式 ①读取样式值： $('选择器').css('样式名') ②设置单个样式： $('选择器').css('样式名','样式值') ③设置多个样式； $('选择器').css({'样式名1':'样式值1','样式名2':'样式值2'......})

2、操作类名 ①添加类: $('选择器').addClass('类名') ②移除类: $('选择器').removeClass('类名') ③切换类: $('选择器').toggleClass('类名')

3、简化的函数 (只有尺寸和位置，见文档操作的样式是行内的) ①获取样式值： $('选择器').样式名() ②设置样式值： $('选择器').样式名('样式值')

五、操作属性

1、attr() 节点对象.attr("属性名") //获取属性值节点对象.attr("属性名","属性值") //设置1个属性节点对象.attr({"属性名1":"属性值1","属性名2":"属性值2"....}) //设置多个属性节点对象.removeAttr("属性名") //删除某个属性

2、prop() 节点.prop()的使用方法和节点.attr() 一样的，用不了attr()就用prop() 节点.removeProp()的使用方法和节点.removeAttr() 一样的

六、操作内容

节点对象.html() 节点对象.text() 节点对象.val() 同：不传参表示获取,传参表示设置，设置后都会覆盖之前的内容异：html传参可以传任何内容 text只能传文本内容 val只针对表单元素

七、操作节点(增，删，改/替换，查/遍历节点,克隆)

1.创建 + 增加创建: $('完整标签') 增加: ①父节点.append(子节点) //作为子节点添加到父节点末尾 ②子节点.appendTo(父节点) //作为子节点添加到父节点末尾 ③父节点.prepend(子节点) //作为子节点添加到父节点开头 ③子节点.prependTo(父节点) //作为子节点添加到父节点开头 ⑤兄节点.after(弟节点) //插入为兄弟节点 ⑥弟节点.before(兄节点) //插入为兄弟节点

2.删除 ①节点.empty() 清空节点里的内容,节点标签本身保留 ②节点.remove() 删除节点及其后代

3.替换 ①被替换的.replaceWith(用来替换的) ②用来替换的.replaceAll(被替换的)

4.查/遍历节点 ①jq选择器 --- 见三 ②根据层级结构DOM树来查找节点父节点.children() 找子节点,()还可以传选择器表示查找某个特定的子节点祖先节点.find('子/后代的选择器') 找后代节点

兄节点.next() 找紧跟着的弟节点 ()还可以传选择器表示查找符合这个选择器的弟节点兄节点.nextAll() 找所有的弟节点

弟节点.prev() 找紧挨着的兄节点 ()还可以传选择器表示查找符合这个选择器的兄节点弟节点.prevAll() 找所有的兄节点

节点.siblings() 找所有的兄弟节点 ()还可以传选择器表示查找符合这个选择器的兄弟节点

子节点.parent() 找父节点 ()还可以传选择器表示查找符合这个选择器的父节点后代节点.parents() 找所有的祖先节点除了html

5.克隆节点.clone() 克隆节点及其内容节点.clone(true) 克隆节点及其内容 + 事件处理函数

八、动效

1.显示、隐藏、切换(修改节点的宽、高、透明度) 显示:节点.show(毫秒数,处理函数) 参数都是选传隐藏:节点.hide(毫秒数,处理函数) 参数都是选传切换:节点.toggle(毫秒数,处理函数) 参数都是选传在显示和隐藏之间来回切换

2.淡入、淡出、切换(修改节点的透明度) 淡入:节点.fadeIn(毫秒数,处理函数) 参数都是选传淡出:节点.fadeOut(毫秒数,处理函数) 参数都是选传切换:节点.fadeToggle(毫秒数,处理函数) 参数都是选传在淡入和淡出之间来回切换

3.滑入、滑出、切换(修改节点的) 滑入:节点.slideUp(毫秒数,处理函数) 参数都是选传滑出:节点.slideDown(毫秒数,处理函数) 参数都是选传切换:节点.slideToggle(毫秒数,处理函数) 参数都是选传在滑入和滑出之间来回切换

4.自定义动画(只能修改值为数值型的) 使用动画: 节点.animate(对象,毫秒数,处理函数) 第一个参数必传其余参数选传停止动画: 节点.stop()

九、事件

1.简单绑定节点.事件名(处理函数) 优点:简单缺点:不能做事件委托，还不能移除注意点:事件名不加on 处理函数可以是匿名函数或有名函数的函数名

2.on() 绑事件 ①同一个节点上绑多个事件，执行不同的处理函数节点.on({ 事件名1:处理函数1, 事件名2:处理函数2, 事件名3:处理函数3, 事件名4:处理函数4, ...... })

②同一个节点上绑多个事件，执行同一个处理函数节点.on('事件名1 事件名2 事件名3.....',处理函数)

③事件委托父节点.on('事件名','子节点选择器',处理函数)

3.off() 只能移除用on绑定的事件节点.off() 移除节点上所有的事件的处理函数节点.off('事件名') 移除节点上()里的事件的处理函数节点.off('事件名','子节点选择器') 移除节点上事件委托

4.event的用法同js (5个属性2个方法)

5.事件切换节点.hover(处理函数1,处理函数2)

处理函数1是mouseover事件触发的,处理函数2是mouseout事件触发的

十、扩展的知识点

1.获取节点在兄弟节点集合中的索引节点.index()

2.获取确定索引的节点节点.eq(索引)

jquery主要内容就是这十个知识点，jquery比js用起来要简单一些，但是还是要结合实际情况使用，很多概念都需要理解再使用，加油!

前端入门jquery知识点相关推荐

零基础入门jQuery视频教程
零基础入门jQuery最新版开发.NET富客户端应用(选择器.DOM操作.事件和动画.Ajax应用.插件.Mobile) 课程分类:.NET+Jquery 适合人群:初级课时数量:35课时用到技术 ...
经验分享：Web前端入门要怎么开始学？
现在,几乎整个互联网行业都缺前端工程师,不仅是刚起步的创业公司,对上市公司乃至巨头这个问题也一样存在. 据统计,国外的前端开发人员和后端开发人员比例约1:1,但是在国内比例却在1:3以下,Web前端开 ...
结合个人经历总结的前端入门方法（这才是真的入门经典）
结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路.学习方法.资料.由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路. 互联网的快速发展和激烈竞争,用户 ...
前端入门——菜鸟之路
结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路.学习方法.资料.由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路. 互联网的快速发展和激烈竞争,用户 ...
写给栋栋的前端入门到熟悉教程
写给栋栋的前端入门到熟悉教程目前栋栋的情况了解HTML语法了解CSS作用 Javascript学了都忘了 jQuery也忘了 Ajax是啥都不知道写在开始大部分知识都是空缺的,因此想作为一名 ...
结合个人经历总结的前端入门方法
结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路.学习方法.资料.由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路. 互联网的快速发展和激烈竞争,用户 ...
2020年Web 前端怎样入门？最新Web前端入门的学习路线
2022年最新Web前端入门的自学路线 > 新手入门前端,需要学习的基础内容有很多,如下. 一.HTML.CSS基础.JavaScript语法基础.学完基础后,可以仿照电商网站(例如京东.小米) ...
好程序员web前端教程分享web前端入门基础知识
好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML.CSS和JavaScript.只懂其中一两个还不行,必须对这三门语言都要熟悉.下面我们一起来看一看吧! ...
前端入门前端自学路线 web开发前端如何学习
本文介绍前端入门之路,以及之后对前端应该怎么学,大概学哪些东西.作者在前端.后端入门的时候,花了大量时间到CSDN.知乎.百度上去找资料,但是有的说的不是太复杂, 就是一句话带过,那个时候很苦恼.现在 ...

前端入门jquery知识点