知识总结

两个实例

JavaScript事件

事件是可以被 javascript 侦测到的行为(类似监听器)

网页中的每个元素都可以产生某些可以触发 javascript 函数的事件。

事件通常要与函数配合使用，当事件发生时函数才会执行

onclick 鼠标点击某个对象

jQuery

轻量级框架

jQuery js压缩

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

jQuery的模块可以分为3部分：入口模块、底层支持模块和功能模块。

jQuery和js的区别

jQuery虽然本质上也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对

象。

通过js方式获取的是js对象，通过jQuery方式获取的是jQuery对象。两者的关系与区别总结如下：

1. jQuery对象与js对象相互转换

js --> jq

$(js对象) 或 jQuery(js对象)

jq --> js

jq对象[索引] 或 jq对象.get(索引)

注意：jq对象本质上是js数组

2. 页面加载事件

js window.onload=function(){}

jq $(function(){})

​ $(document).ready(function(){})

区别

js：只能定义一次，如果定义了多次，后加载的会覆盖先加载的

jq：可以定义多次

3. 事件绑定

js

js对象.onclick=function(){}

//var myDiv = document.getElementById('myDiv');

// 操作innerHTML修改

$('myDiv').innerHTML = '添加的动态内容...';

jq

jq对象.click(function(){}) 回调函数

4.css样式设置：通过对象直接修改

js

js对象.style.样式名=样式值

jq

jq对象.css('样式名','样式值')

jq对象.addClass()

样式名：驼峰式，css横杠 都支持

jQuery选择器

jQuery与CSS的选择器的作用是完全一样的，筛选具有相似特征的标签(元素)

jQuery的DOM操作

1 .内容操作

\1. html(): 获取/设置元素的标签体超文本内容

相当于：js中innerHTML

\2. text(): 获取/设置元素的标签体纯文本内容

相当于：js中innerText

\3. val()： 获取/设置元素的value属性值

相当于：js中value

2 .属性操作

\1. attr(): 获取/设置元素的属性

\2. removeAttr():删除属性

\3. prop():获取/设置元素的属性

\4. removeProp():删除属性

特点：在jq1.6版本推出，解决attr 设计缺陷，专门来处理布尔类型的属性

例如：checked、selected等等

3. css样式操作

\1. addClass():添加class属性值

\2. removeClass():删除class属性值

\3. toggleClass():切换class属性

addClass():判断class属性中是否有有此值，如果没有表示添加

removeClass()判断class属性中是否有有此值，如果有表示删除

4 .文档CRUD操作

dom操作

\1. $("") 创建a元素对象

\2. append():父元素将子元素追加到末尾

对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾

\3. prepend():父元素将子元素追加到开头

对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头

\4. before():添加元素到元素前边

对象1.before(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系

\5. after():添加元素到元素后边

对象1.after(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系

\6. remove():移除元素

对象.remove()：将对象删除掉

\7. empty():清空元素的所有后代元素。

对象.empty()：将对象的后代元素全部清空，但是保留当前对象以及其属性节点

心得体会

由于JavaScript知识点掌握的不是很好，在编写代码时，很容易混淆JavaScript和jQuery的用法，

而且如果要实现一个功能，不知道如何用代码去实现，很难把生活中的惯性思维转换成编程思维。