没有合适的资源?快使用搜索试试~ 我知道了~
首页jquery完全笔记 带目录 高清 经典前端js笔记 前端必看
jquery完全笔记 带目录 高清 经典前端js笔记 前端必看
需积分: 34 21 下载量 84 浏览量
更新于2023-03-16
评论 2
收藏 1.63MB PDF 举报
jQuery笔记,个人总结的jQuery全部特性,可以作为参考手册,可以作为学习笔记,其中源码本人在springmvc全部测试通过
资源详情
资源评论
资源推荐
樵夫科技
jQuery 基础笔记
带你进入前端的世界!
qit
2017/8/7
目录
1. JQUERY 语法 ............................................................. 2
2. JQUERY 选择器 ........................................................... 2
3. JQUERY 事件 ............................................................. 3
4. JQUERY 隐藏和显示 ....................................................... 5
5. JQUERY 淡入淡出 ......................................................... 6
6. JQUERY 滑动效果 ......................................................... 8
7. JQURY 动画 .............................................................. 9
8. JQUERY 停止动画 ........................................................ 10
9. JQUERY CALLBACK ....................................................... 11
10. JQUERY CHAINING(链) ................................................. 12
11. JQUERY 捕获 .......................................................... 12
12. JQUERY 设置内容 ...................................................... 13
13. JQUERY 添加元素 ...................................................... 15
14. JQUERY 删除元素 ...................................................... 18
15. JQUERY 的 CSS 类 ...................................................... 18
16. JQUERY 的 CSS 方法 .................................................... 19
17. JQUERY 尺寸 .......................................................... 20
18. JQUERY 遍历 .......................................................... 22
19. JQUERY 祖先 .......................................................... 23
20. JQUERY 后代 .......................................................... 24
21. JQUERY 同胞 .......................................................... 25
22. JQUERY 过滤 .......................................................... 27
23. JQUERY AJAX ......................................................... 29
24. JQUERY LOAD 方法 ..................................................... 29
25. JQUERY GET()和 POST()方法 ............................................ 31
26. JQUERY NOCONFLICT()方法 ............................................. 32
27. JSON 教程 ............................................................ 33
28. JQUERY 选择器 ........................................................ 40
29. JQUERY 事件方法 ...................................................... 44
30. JQUERY 效果方法 ...................................................... 46
31. JQUERY HTML/CSS 方法 ................................................. 47
32. JQUERY 遍历方法 ...................................................... 49
33. JQUERY AJAX 方法 ..................................................... 50
34. JQUERY 杂项方法 ...................................................... 50
35. JQUERY 属性 .......................................................... 54
1. Jquery 语法
Jquery 通过$进行选择
基础语法: $(selector).action()
美元符号定义 jQuery
选择符(selector)"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
文档就绪事件
$(document).ready(function(){
});
或者:
$(function(){
})都表示文档 dom 加载完成后执行。
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后
才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数,操作可能失败。
下面是两个具体的例子:
试图隐藏一个不存在的元素
获得未完全加载的图像的大小
2. Jquery 选择器
元素选择器
$(“p”)选择所有 p 标签
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
});
});
Id 选择器
选择所有 id 为 test 的元素
$(“#test”)
$(document).ready(function(){
$(“button”).click(function(){
$(“#test”).hide();
});
});
Class 选择器
选择指定 style 为 class 类型
$(“.test”)
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
其他选择器:
$(“*”) 选取所有元素
$(this) 选取本元素,既当前元素
$(“p.intro”)选取所有 class 为 intro 的 p 元素
$(“p:first”)选取第一个 p 元素
$(“ul li:first”)选取第一个 ul 元素的的第一个 li 元素
$(“ul li:first-child”)选取每个 ul 元素的第一个 li 元素
$(“[href]”) 选取带有 href 属性的所有元素
$(“a[target=’_blank’]”)选取 target 属性为_blank 的 a 元素
$(“a[target!=’_blank’]”)选取 target 属性不为_blank 的 a 元素
$(“:button”)选取所有 type=“button”的 input 和 button
通过 $(":button") 可以选取所有 type="button" 的 <input> 元素 和 <button> 元素,
如果去掉冒号,$("button")只能获取 <button> 元素。
$(“tr:even”)选取基数行
$(“tr:odd”)选取偶数行
3. Jquery 事件
事件:
页面对不同访问者的响应叫做事件,事件处理程序指的是当 html 中发生某些事件
时所调用的方法。
常见的 dom 事件:
Jquery 事件语法:
在 jquery 中大多数 dom 事件都有一个等效的 jquery 方法。
页面中指定一个点击事件:
$(“p”).click(function(){
定义事件被触发后执行的代码
});
常用的 jquery 事件方法:
1、$(document).ready(function(){
});
2、click()
click() 方法是当按钮点击事件被触发时会调用一个函数。该函数在用户点击
HTML 元素时执行。在下面的实例中,当点击事件在某个 <p> 元素上触发时,
隐藏当前的 <p> 元素:
$("p").click(function(){
$(this).hide();
});
3、dblclick()
当双击元素时候,会发生 dbclick 事件,dbclick()方法中规定了当发生 dbclick 事件时
候运行的函数。
$(document).ready(function(){
$(“p”).dbclick(function(){
$(this).hide();
});
});
4、mouseenter() mouseleave()
当鼠标指针穿过元素时候会发生此事件, 当鼠标指针离开元素时,会发生
mouseleave 事件。
$(document).ready(function(){
$(“p”).mouseenter(function(){
Alert(“鼠标进入”);
});
$(“p”).mouseleave(function(){
Alert(“鼠标移出”);
});
});
5、mousedown() mouseup()
当鼠标在元素上按下和松开时候触发的事件
$(document).ready(function(){
$(“p”).mousedown(function(){
Alert(“鼠标按下”);
});
$(“p”).mouseup(function(){
Alert(“鼠标松开”);
});
});
6、hover()
用于模拟光标悬停事件,当鼠标移动到元素上时候,会触发指定的第一个函数
mouseenter,当鼠标移除这个元素时候会触发指定的第二个函数 mouseleave
$(document).ready(function(){
$(“p”).hover(
function(){
Alert(“鼠标进入”);
},
function(){
alert(“鼠标离开”);
});
});
7、focus() blur()
剩余54页未读,继续阅读
乔夫的樵夫
- 粉丝: 15
- 资源: 24
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- 2022年中国足球球迷营销价值报告.pdf
- 房地产培训 -营销总每天在干嘛.pptx
- 黄色简约实用介绍_汇报PPT模板.pptx
- 嵌入式系统原理及应用:第三章 ARM编程简介_3.pdf
- 多媒体应用系统.pptx
- 黄灰配色简约设计精美大气商务汇报PPT模板.pptx
- 用matlab绘制差分方程Z变换-反变换-zplane-residuez-tf2zp-zp2tf-tf2sos-sos2tf-幅相频谱等等.docx
- 网络营销策略-网络营销团队的建立.docx
- 电子商务示范企业申请报告.doc
- 淡雅灰低面风背景完整框架创业商业计划书PPT模板.pptx
- 计算模型与算法技术:10-Iterative Improvement.ppt
- 计算模型与算法技术:9-Greedy Technique.ppt
- 计算模型与算法技术:6-Transform-and-Conquer.ppt
- 云服务安全风险分析研究.pdf
- 软件工程笔记(完整版).doc
- 电子商务网项目实例规划书.doc
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0