前端入门jquery知识点

每日一句：

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

第五章、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用起来要简单一些，但是还是要结合实际情况使用，很多概念都需要理解再使用，加油!