目录
val()方法
val()方法：获取匹配元素集中第一个元素的当前值，或设置每个匹配元素的值。
val()方法用于设置和获取表单元素的值，例如input、textarea的值
//设置值
$("#name").val(“张三”);
//获取值
$("#name").val();
下面看示例
示例3-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>val()方法</title>
</head>
<body>
<input type="text" value="我是input"/>
</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
console.log($("input").val());
$("input").val("改变input元素的值");
})
</script>
</html>
运行效果如图所示:
html方法与text方法
html():获取匹配元素集中第一个元素的HTML内容，或设置每个匹配元素的HTML内容。
text():获取匹配元素集中的每个元素的组合文本内容，包括它们的后代，或者设置匹配元素的文本内容。
html方法相当于innerHTML text方法相当于innerText
//设置内容
$(“div”).html(“<span>这是一段内容</span>”);
//获取内容
$(“div”).html()
//设置内容
$(“div”).text(“<span>这是一段内容</span>”);
//获取内容
$(“div”).text()
区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。
下面看示例
示例3-2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html方法和text方法</title>
</head>
<body>
<div><p>我是P1</p></div>
<div><p>我是P2</p></div>
<p id="p3">我是P3</p>
<p id="p4">我是P4</p>
</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
console.log($("div").eq(0).html());
console.log($("div").eq(1).text());
$("#p3").html("<h1>我是标题1</h1>");
$("#p4").text("<h1>我是标题2</h1>");
})
</script>
</html>
运行效果如图所示：
width方法与height方法
设置或者获取高度
//带参数表示设置高度
$("img").height(200);
//不带参数获取高度
$("img").height();示例3-3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>width和height方法</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
padding: 10px;
border: 10px solid #000;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
//获取div的宽度和高度
console.log($("div").css("width"));
console.log($("div").css("height"));
});
</script>
</html>
运行结果如图所示：
获取网页的可视区宽高
//获取可视区宽度$(window).width();//获取可视区高度$(window).height();
resize():将事件处理程序绑定到“调整大小”JavaScript事件，或在元素上触发该事件。
示例3-4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>width和height方法</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
padding: 10px;
border: 10px solid #000;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
// 需要获取页面可视区的宽度和高度
$(window).resize(function () {
console.log($(window).width());
console.log($(window).height());
});
});
</script>
</html>
运行效果如图所示：
当然还有一些其他的方法，类似width()和height()方法的。这些方法可以将padding、border等计算进去
例如：
console.log($("div").width());//width
console.log($("div").innerWidth());//padding+width
console.log($("div").outerWidth());//padding+width+border
console.log($("div").outerWidth(true));//padding+width+border+margin
scrollTop()与scrollLeft()
设置或者获取垂直滚动条的位置
//获取页面被卷曲的高度$(window).scrollTop();
//获取页面被卷曲的宽度$(window).scrollLeft();
下面看示例
示例3-5：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollTop与scrollLeft</title>
<style>
body {
height: 4000px;
width: 4000px;
}
</style>
</head>
<body>
<div></div>
</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
$(window).scroll(function () {
console.log($(window).scrollTop());
console.log($(window).scrollLeft());
});
});
</script>
</html>
运行效果如图所示：
可以看到，当我们改变页面被卷曲的高度或宽度时，$(window).scrollTop() 或者$(window).scrollLeft() 能够获取到相应的值
on注册事件
jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。
on注册简单事件
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});
on注册委托事件
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});
on注册事件的语法：
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);
下面看示例
示例3-6：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>on注册事件的两种方式</title>
</head>
<body>
<button>新增</button>
<div>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
</div>
</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
$("button").on("click",function () {
$("<p>新增的P元素</p>").appendTo("div");
});
//on不传选择器的参数
//on注册简单事件
$("p").on("click",function () {
alert("点击P标签");
});
//on传选择器参数
//on注册委托事件
$("div").on("click","p",function () {
alert("哈哈");
});
});
</script>
</html>
运行效果如图所示：
事件解绑和触发事件
unbind方式（不用）
$(selector).unbind(); //解绑所有的事件$(selector).unbind("click"); //解绑指定的事件
undelegate方式（不用）
$( selector ).undelegate(); //解绑所有的delegate事件$( selector).undelegate( “click” ); //解绑所有的click事件
off方式（推荐）
// 解绑匹配元素的所有事件$(selector).off();// 解绑匹配元素的所有click事件$(selector).off("click");
//触发 click事件$(selector).click();$(selector).trigger("click");//推荐
下面看示例
示例3-7：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件解绑</title>
</head>
<body>
<button>触发</button>
<div>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
</div>
</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
$("p").on("click", function () {
alert("点击P标签");
});
//移除事件
// $("p").off("click");
//toggle：切换 trigger：触发
$("button").on("click", function () {
// $("p").click();
$("p").trigger("click");
});
});
</script>
</html>运行效果如图所示：
jQuery事件对象
jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。
//screenX和screenY 对应屏幕最左上角的值//clientX和clientY 距离页面左上角的位置（忽视滚动条）//pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）//event.keyCode 按下的键盘代码//event.data 存储绑定事件时传递的附加数据//event.stopPropagation() 阻止事件冒泡行为//event.preventDefault() 阻止浏览器默认行为//return false:既能阻止事件冒泡，又能阻止浏览器默认行为。
下面看示例
示例3-8：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery事件对象</title>
</head>
<body>
<div>
我是DIV
</div>
</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
//on(types, selector, data, callback)
//使用on方法的时候，可以给data参数传一个值，可以在事件里面通过e.data获取到。
$("div").on("click", 100,function (e) {
console.log("这是data的值" + e.data);
});
});
</script>
</html>
运行效果如图所示：
92
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
