《Web前端开发基础》 课件 第12章 jQuery网页元素基本操作.pptxVIP

Web前端开发基础第十二章 jQuery网页元素基本操作学习内容网页元素样式操作网页元素内容操作网页元素属性操作网页元素及浏览器窗口大小操作网页元素及鼠标位置操作综合案例jQuery能够对网页中的元素进行一些常见的操作，比如设置元素样式、读取或设置元素的值、获取元素的大小和位置等。本章主要学习jQuery中操作网页元素样式、内容、属性、大小及位置的常用方法，并利用这些方法完成综合案例。思维导图12.1 网页元素样式操作jQuery中主要使用css()方法来设置或者获取网页元素的CSS样式值。·css(属性[,值])：设置或返回被选元素的一个或多个样式属性。 若要返回元素指定的CSS属性的值，可以使用css(属性名称)，比如通过css(background-color)来获得背景颜色。若要设置元素指定的CSS属性，则可以使用css(属性名称,属性值)来进行设置，比如通过css(background-color, red)来设置背景颜色为红色，通过css(width,200px)来设置宽度为200px，对于数值型的属性值，写的时候单位也可以省略，jQuery会自动添加单位px，也可以写成css(width,200)。12.1 网页元素样式操作若要同时设置多个css属性的话，则需要将参数写成JSON的形式，比如通过css({width:200,height:100})来同时设置宽和高。另外也可以使用+=、-=前缀符号，表示在当前属性值的基础上进行增减，如css( width,+=100)表示宽度在原来的基础上增加100px。12.1 网页元素样式操作案例1.在页面中放置一个div，通过操作样式来改变div的大小。页面中div的初始样式如下：div{width: 400px; height: 200px; border:1px solid;}12.1 网页元素样式操作当点击获取div的大小按钮时，通过css(width)和 css(height)方法来获得宽度和高度。代码：$(div).css(width)+,高+$(div).css(height)12.1 网页元素样式操作当点击改变div的宽度为600px按钮时，通过 css(width,600px)方法来设置div的宽度为600px，也可以写成 css(width,600)或css(width,+=200)。代码：$(div).css(width,600px)当点击改变div的宽度为500px高度为300px按钮时，通过 css({width:500px,height:300px})方法来设置宽和高。代码：$(div).css({width:500px,height:300px})12.1 网页元素样式操作除了通过css()方法来直接设置元素样式属性外，jQuery中还可以通过操作样式类别来修改css样式，主要的方法有：addClass(类别名称)：增加类别样式。removeClass(类别名称)：删除类别样式。toggleClass(类别名称)：交替使用类别样式，有这个样式类别就删除，没有就增加。12.1 网页元素样式操作案例2.在页面中添加一个div，通过操作样式类别来设置div的字体颜色、边框和背景。页面中div的初始样式如下：div{width: 200px; height: 200px; border:1px solid;}12.1 网页元素样式操作当点击增加类别样式按钮时，执行addClass(add)，为div增加add样式，在add样式中定义了字体颜色、背景颜色及边框。add样式定义如下：.add{color: blue;background-color: yellow; border:2px dashed;}代码：$(div).addClass(add)12.1 网页元素样式操作当点击删除类别样式按钮时，执行removeClass(add)删除add样式，当点击交替使用类别样式按钮时，执行toggleClass(add)在增加和删除样式之间进行切换操作。在增加样式类别时，如果在不同的样式类别中设置了同一个样式属性，则后者覆盖前者，比如上面例子中在add样式中定义的border属性会覆盖div标签中定义的border属性。如果要同时删除标签元素的所有样式类别，可以直接使用不带参数的removeClass()方法。12.2 网页元素内容操作jQuery中提供了三个个方法text()和html()来操作html网页元素中的内容。text([值])：设置或返回所选元素的文本内容。html([值])：设置或返回所选元素的内容（包括html标记）。val([值])：设置或返回表单元素的值。html()方法和text()方法的区别：html()方法会解析字符串中的标签，将这些