jQuery入门-细节讲解2

发布网友发布时间：2024-09-17 06:31

我来回答

共1个回答

热心网友时间：2024-10-04 10:41

[val()方法](#val()%E6%96%B9%E6%B3%95)

html方法与text方法

width方法与height方法

[scrollTop()与scrollLeft()](#scrollTop()%E4%B8%8EscrollLeft())

on注册事件

事件解绑和触发事件

jQuery事件对象

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方法相当于innerHTMLtext方法相当于innerText

//设置内容

$(“div”).html(“这是一段内容”);

//获取内容

$(“div”).html()

//设置内容

$(“div”).text(“这是一段内容”);

//获取内容

$(“div”).text()

区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。

下面看示例

示例3-2

设置或者获取高度

//带参数表示设置高度$("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+marginscrollTop()与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：

unbind方式（不用）

undelegate方式（不用）

off方式（推荐）

<!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>3<!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>4

下面看示例

示例3-7：

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。