没有合适的资源?快使用搜索试试~ 我知道了~
首页jquery完全笔记 带目录 高清 经典前端js笔记 前端必看
资源详情
资源评论
资源推荐

樵夫科技
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页未读,继续阅读
















安全验证
文档复制为VIP权益,开通VIP直接复制

评论0