jQuery
什么是jQuery
1. 简介
jQuery是一个快速、简洁的JavaScript框架。
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
2. jQuery库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
jQuery语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
实例: - $(this).hide() - 隐藏当前元素
- $(“p”).hide() - 隐藏所有
元素
- $(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
- $("#test").hide() - 隐藏所有 id=“test” 的元素
1. jQuery选择器
- 元素选择器
------ 基于元素名选取元素 - id选择器 #
- class选择器 .
草
离离原上草
一岁一枯荣
野火烧不尽
春风吹又生
2.jQuery事件
-常见的DOM事件
| 鼠标事件 | 键盘时间 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseover | keyup | focus | scroll |
| mouseout | blur | unload |
//常用的事件
段落1
段落2
xxxx
xxxx
xxxx
xxxx
xxxx
xxxx
xxxx
xxxx
xxxx
jQuery效果
- 隐藏显示
- slow：代表速度
- 5000：代表时间，秒（s）
- 淡入淡出
- jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。 - jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。 - jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。 - jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
代码实例
//淡出
$("#btn5").click(function(){
$("#img1").fadeIn("slow");
})
//淡入
$("#btn4").click(function(){
$("#img1").fadeOut(5000);
})
$("#btn6").click(function(){
$("#img1").fadeToggle("slow");
})
//透明度
$("#btn7").click(function(){
$("#img1").fadeTo("slow",0.5);//透明度
})
- 滑动
-
slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。 -
slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素
slideToggle() 方法 -
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
//滑出
$("#btn9").click(function(){
$("#img1").slideDown("slow");
})
//滑入
$("#btn10").click(function(){
$("#img1").slideUp(5000);
})
$("#btn11").click(function(){
$("#img1").slideToggle("slow");
})
-
链式编程
允许我们在相同的元素上运行多条 jQuery 命令
$("#btn12").click(function(){
$("#img1").slideUp(5000).slideDown(5000);
})
jQuery HTML操作
1.捕获
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容---->innerText
- html() - 设置或返回所选元素的内容（包括 HTML 标记）—innerHTML
- val() - 设置或返回表单字段的值—value属性
$("#btn1").click(function(){
// alert($("#mydiv").text());
// alert($("#mydiv").html());
})
//获取输入文本中的内容
$("#btn1").click(function(){
alert($("#username").val());
})
2.设置
使用上面的三个相同的方法来设置内容：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
//设置
$("#btn2").click(function(){
$("#p1").text("我怎么这么好看");
})
$("#btn3").click(function(){
$("#p1").html("我怎么这么好看")
$("#username").val("zhangsan");
})
//修改属性
$("#btn4").click(function(){
//$("#img1").attr("src","img/322119_300.jpg");
$("#img1").prop("src","img/322119_300.jpg");
})
案例一
全选全部选
全选
姓名
年龄
地址
xxx
23
sss
xxx
23
sss
xxx
23
sss
添加元素
用于添加新内容的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
//在一个区域内
$("#btn1").click(function() {
$("#mydiv").append("
")
})
$("#btn2").click(function() {
$("#mydiv").prepend("
")
})
//在一个区域外
$("#btn3").click(function() {
$("#mydiv").before("你好");
})
$("#btn4").click(function() {
$("#mydiv").after("世界");
})
删除元素
删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class=“italic” 的所有元素：
$("p").remove(".italic");
数组或集合元素遍历
$("p").each(function(i,n){
alert(i+"...."+n);//i为角标，后面的位内容
});
或
$.each(arr,function(i,n){
alert(i+"...."+n);
})
css类
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
节点关系
1.祖先
jQuery parent() 方法
2.后代
jQuery children() 方法
3. 同胞
jQuery siblings() 方法
jQuery AJAX
ajax()方法
- url：请求路径
- type：类型，GET或者POST
- data：发送到服务器的数据
- dataType：发送的数据类型
- contentType：(默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。
- success：请求成功后的回函数
$("#btn1").click(function() {
$.ajax({
url:"servlet1",
type:"GET",
data:"username=zhangsan&age=20",
dataType:"html",
contentType:"text/plain",
success:function(msg,status){
$("#mydiv").append(msg);
}
})
})
get方法
$("#btn2").click(function(){
$.get("servlet1","username=zhangsan&age=23",function(msgs){
$("#mydiv").append(msg);
})
})
post方法
$("#btn4").click(function() {
$.post("servlet1",{"username":"李四","age":18},function(msg){
$("#mydiv").append(msg);
});
});
load
$("#btn5").click(function() {
//get post
$("#mydiv").load("servlet1",{"username":"李四","age":18});
});