1. jQuery 是什么?
2. 为什么要使用 jQuery?
3. jQuery 入口函数
1. jQuery与JavaScript加载模式对比
2. jQuery 其他写法
3. 解决$符号冲突问题
1. 释放 $ 使用权
2. 自定义访问符号
4. jQuery 核心函数
5. jQuery 对象
1. jQuery 对象的本质
6. jQuery 静态方法
1. 什么是静态方法
2. jQuery.holdReady()
3. each 方法
4. map 方法
5. trim 方法
6. isWindow 方法
7. isArray 方法
8. isFunction 方法
7. jQuery 选择器
1. 基础选择器
2. 层次选择器
3. 内容过滤选择器
1. :empty
2. :parent
3. :contains(text)
4. :has(selector)
8. jQuery 属性操作
1. 属性与属性节点
1.什么是属性?
2.如何操作属性?
3.什么是属性节点?
4.如何操作属性节点?
5.属性和属性节点有什么区别?
2. 属性节点方法
1. attr 方法
2. removeAttr 方法
3. prop 方法
4. removeProp 方法
5. attr方法和prop方法区别
9. jQuery Class 操作
1. jQuery Class 类操作
1. addClass
2. removeClass
3. toggleClass
2. jQuery 文本值操作
1. html
2. text
3. val
3. jQuery CSS 样式
1. css 方法
2. width 方法
3. height 方法
4. jQuery 元素位置
1. offset 方法
2. position 方法
5. jQuery scroll 方法
1. scrollTop 方法
2. scrollLeft 方法
10. jQuery 事件
1. 事件绑定
2. 事件解绑
3. 事件坐标
4. 事件冒泡
1. 什么是事件冒泡
2. 阻止事件冒泡
5. 默认行为
1. 什么是默认行为
2. 阻止默认行为
6. 自动触发事件
1. 什么是自动触发事件
2. 自动触发方式
7. 自定义事件
1. 什么是自定义事件
2. 自定义事件的条件
8. 事件命名空间
1. 什么是事件命名空间
2. 添加事件命名空间的条件
3. 事件命名空间注意点(面试题)
9. 事件委托
1. 什么是事件委托
2. 事件委托的好处
3. jQuery 中添加事件委托
10. 移入移出事件
1. mouseenter/mouseleave
2. mouseover/mouseout
3. hover
11. jQuery 动画效果
1. 显示,隐藏动画
1. show
2. hide
3. toggle
4. 注意点
2. 展开,收起动画
1. slideDown
2. slideUp
3. slideToggle
3. 淡入,淡出动画
1. fadeIn
2. fadeOut
3. fadeToggle
4. fadeTo
4. 自定义动画
1. animate
5. 动画队列
6. 动画相关方法
1. delay
2. stop
12. jQuery 文档处理
1. 添加节点
1. 内部插入
2. 外部插入
2. 删除节点
3. 替换节点
4. 复制节点
5. 包裹节点
6. 遍历节点
13. jQuery 面试题
1. 为什么要使用jQuery?jquery有哪些好处?
2. jQuery能做什么?
3. jQuery 库中的 $() 是什么?
4. $(document).ready() 是个什么函数?为什么要用它?
5. (document).ready()方法和window.onload有什么区别?
6. jQuery中.get()提交和.post()提交的区别
7. jQuery中有哪些方法可以遍历节点?
8. $(this) 和 this 关键字在 jQuery 中有何不同?
9. 使用 CDN 加载 jQuery 库的主要优势是什么 ?
10. 如何使用从服务器获取一个复杂数据(对象)?
11. 在使用选择器的时要注意的地方?
12. 有哪些查询节点的选择器?
13. jQuery是如何处理缓存的? ( 要处理缓存就是禁用缓存 )
14. 在jquery中你有没有编写过插件,插件有什么好处?你编写过那些插件?它应该注意那些?
由于答案部分太长了,就不一一给大家演示了,想要获取面试资料答案可以关注我,私信回复“资料”即可免费获取
jQuery是对JavaScript的封装,它是免费、开源的JavaScript函数库,jQuery 极大地简化了 JavaScript 编程
jQuery和JavaScript它们的作用一样,都是负责网页行为操作,增加网页和用户的交互效果的,只不过jQuery简化了JavaScript编程,jQuery实现交互效果更简单
jQuery的下载地址:
https://code.jquery.com
jQuery引入
jQuery的入口函数:
我们知道使用js获取标签元素,需要页面加载完成以后再获取,我们通过使用onload事件来获取标签元素
而jQuery提供了ready函数来解决这个问题,保证获取标签元素没有问题,它的速度比原生的 window.onload 更快
jquery选择器就是快速选择标签元素,获取标签的,选择规则和css选择器一样
jQuery选择器的种类:
判断标签是否选择成功:
可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功,否则选择失败
选择集过滤就是在选择标签的集合里面过滤自己需要的标签
①has(选择器名称)方法,表示选取包含指定选择器的标签
②eq(索引)方法,表示选取指定索引的标签
选择集转移就是以选择的标签为参照,然后获取转移后的标签
$('#box').prev(); 表示选择id是box元素的上一个的同级元素
$('#box').prevAll(); 表示选择id是box元素的上面所有的同级元素
$('#box').next(); 表示选择id是box元素的下一个的同级元素
$('#box').nextAll(); 表示选择id是box元素的下面所有的同级元素
$('#box').parent(); 表示选择id是box元素的父元素
$('#box').children(); 表示选择id是box元素的所有子元素
$('#box').siblings(); 表示选择id是box元素的其它同级元素
$('#box').find('.myClass'); 表示选择id是box元素的class等于myClass的元素
获取和设置元素的内容使用: html方法
给指定元素追加html内容使用: append方法
获取和修改标签样式:
使用css方法可以给标签设置样式属性
获取和设置标签属性:
通过prop方法来完成
获取和设置元素的value属性:
通过val方法来完成,更加简单和方便
常用事件:
click() 鼠标单击
blur() 元素失去焦点
focus() 元素获得焦点
mouseover() 鼠标进入(进入子元素也触发)
mouseout() 鼠标离开(离开子元素也触发)
ready() DOM加载完成
事件代理:
事件代理就是使用父元素来代理子元素的事件,好处是减少事件的绑定次数,提高性能
事件代理使用场景:
使用场景当多个相同的子元素绑定同一个事件,可以使用事件代理
事件代理方法:
事件代理是使用delegate方法来完成
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数等都可以认为是对象,此外,JavaScript 允许自定义对象,对象可以拥有属性和方法
创建自定义javascript对象有两种方式:
①通过顶级Object类型来实例化一个对象
②通过对象字面量创建一个对象
(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
采用完全独立于编程语言的文本格式来存储和表示数据,简洁和清晰的层次结构使
得 JSON 成为理想的数据交换语言
JSON的优点:
易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率
JSON的格式:
①对象格式
②数组格式
对象格式:
对象格式的JSON数据,使用一对大括号({}),大括号里面放入key:value形式的键值对,多个键值对使用逗号分隔
数组格式:
数组格式的JSON数据,使用一对中括号([]),中括号里面的数据使用逗号分隔
JSON本质上是字符串,如果在js中操作JSON数据,可以将JSON字符串转化为JavaScript对象
一次完整的请求后,浏览器会接受到html,css,js,图片等大量的数据
ajax的介绍
ajax 是 Asynchronous JavaScript and XML的简写,ajax一个前后台配合的技术,它可以让 javascript 发送异步的 http 请求,与后台通信进行数据的获取,ajax 最大的优点是实现局部刷新,ajax可以发送http请求,当获取到后台数据的时候更新页面显示数据实现局部刷新,在这里大家只需要记住,当前端页面想和后台服务器进行数据交互就可以使用ajax了
ajax的实现
jquery将它封装成了一个方法$.ajax()
我们可以直接用这个方法来执行ajax请求
ajax方法的参数说明:
url 请求地址
type 请求方式,默认是'GET',常用的还有'POST'
dataType 设置返回的数据格式,常用的是'json'格式
data 设置发送给服务器的数据,没有参数不需要设置
success 设置请求成功后的回调函数
error 设置请求失败后的回调函数
async 设置是否异步,默认值是'true',表示异步,一般不用写
ajax的简写方式:
$.ajax按照请求方式可以简写成
$.get或者$.post方式
$.get和$.post方法的参数说明:
$.get(url,data,success(data, status, xhr),dataType).error(func)$.post(url,data,success(data, status, xhr),dataType).error(func)
url 请求地址
data 设置发送给服务器的数据,没有参数不需要设置
success 设置请求成功后的回调函数
data 请求的结果数据
status 请求的状态信息, 比如: "success"
xhr 底层发送http请求XMLHttpRequest对象
dataType 设置返回的数据格式
"xml"
"html"
"text"
"json"
error 表示错误异常处理
func 错误异常回调函数
下,链接上层目录下的BOOTSTRAP ,没起作用,查了好多遍,目录是正确的,
<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css">
将BOOTSTARP 拷贝到当前目录下 就可以
<linkrel="stylesheet"type="text/css"href="bs/css/bootstrap.css">
<scriptsrc="bs/js/jquery.min.js"></script>
<scriptsrc="bs/js/bootstrap.min.js"></script>
可问题是为什么上层目录不起作用呢?
问题出现再WEBSTORM上,因为它自建了服务器,服务器根目录默认为项目目录
它的上层目录,出了服务器根目录范围,所以不起作用。
解决方式:将其上层目录设置为根目录,这样使用上层目录链接样式就可以了
*请认真填写需求信息,我们会在24小时内与您取得联系。