jQuery HTML操作

这一节主要是jQuery对html文件的一些操作，当初学html的时候就涉及过这一部分的知识，当然是用jsp来实现的，个人感觉这种对html文件的操作实在是意义不大，这类操作是对文档直接操作，尤其是那种添加或者删除某一段文档的效果，既然要修改，当初设计网页的时候直接改好了再放上去不就好了么，实在是有些鸡肋。

jQuery一个很强大的功能就是对DOM的操作，最常用的有三个：
①text()
设置或者返回所选元素的文本内容，如果只需要返回所选元素的文本内容，不需要填写任何参数，使用这个方法，返回的一定是文本内容，即显示在网页上的内容，需要和第二种操作区别一下。需要设置时要将设置的内容作为参数传递给方法，设置后效果上表现为网页上的文字发生了改变。
②html()
设置或者返回所选元素的内容，与第一种方法的不同在于这种方法返回值是包括html标记的，是所选元素内部的所有html文档，是带着标签的，二者的对比可以看下面这张图，同样的html文件，获取的元素是字符串所在的图层div，而字符串被片段p标签包裹，最后使用两种方法得到的返回值也是不同的。需要设置时也是一样，由于html方法是设置文档，所以可以这样去想，你想要添加的内容就是你要写在html文档上的内容，要用什么标签都是要考虑好的。

③val()
设置或返回表单字段的值，这个以前用html的时候就用过很多次了，用来获得表单某个元素的值，如果要设置成自己需要的值就将要设置的值作为参数传给该方法。至于val方法的设置大三就用过好几次了，要想将表单中某个字段设置为什么值，直接将其作为参数即可。

除了上面的三个之外，还可以使用attr()来获得属性，这里的属性并不是写在css文件里面的属性，而是写在标签里面的属性，比如下面这这种：

<div id="d5" width="10px"><p>1234</p></div>

通过attr()可以得到width，但是如果将width作为css属性写在style里面，用这种方法是获得不到的。同时也可以用这个方法来设置，设置时需要两个参数（“要设置的属性名”，“要设置的属性值”），如果要一次性设置很多值，属性名和属性值之间用冒号连接，每一对设置之间用逗号隔开。

上面的三个jQuery方法：text()、html()以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。这里比较模糊的是第一个参数，这个参数在使用id获取对象时是没用的，因为id是独一无二的，所以所有的这个参数值都会变成0，而当采用标签或者类去获得对象时，返回值是一个对象数组，这时这个下标就有用了，所以这里的回调函数实际上就是可以获取两个值：你选中的元素内部的旧值以及这个元素在整个html文件中是第几个相同元素。

$("#btn1").click(function(){$("#test1").text(function(i,origText){return "Old text: " + origText + " New text: Hello world!(index: " + i + ")";});
});$("#btn2").click(function(){$("#test2").html(function(i,origText){return "Old html: " + origText + " New html: Hello <b>world!</b>(index: " + i + ")";});
});

除了修改属性，jQuery里还提供了添加删除内容的方法，添加主要有四个方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
这四个方法的效果都差不多，就不展开说了。简单来说，append和prepend是在选中元素内部的最前面或者最后面插入内容，插入的内容根据获取标签的对象做相应的选择，而after和before是在选中元素外的前面或者后面插入内容，所以当选择的对象时body的时候，就只能使用append和prepend，因为如果选择after和before，插入的位置在body之外，所以也就没法显示在网页上。
此外，这四个方法都是可以添加多个内容的，即方法的参数是无限制的，想要多添加就直接多跟几个参数。

有添加元素就有删除元素，删除可以采用remove()或者empty()，前者会删除被选元素及其子元素，而后者只会清空其子元素，而自身是不会被删除的。在使用remove方法时，也可以通过一个参数来对被删元素进行过滤，比如下面这条语句，就可以删除class=“italic”的<p>元素。

$("p").remove(".italic");

另外，jQuery还可以很容易地对CSS元素进行操作。对CSS的操作分两种，一种是类的划分，即一开始某个元素是没有属于哪一个类的，通过jQuery提供的方法，将其划分到某个类中，这种方式需要提前写好类的属性，利用addClass()或者removeClass()两种方法，将某个元素划分或者剔除某个类，类名即为参数，对于这样成对的操作，还可以用toggleClass()方法来在两种方法之间调整。

另一种是调整css属性值，这种操作上一节使用过，利用css()方法，如果只需要返回值，就将要返回的属性名作为参数传给方法，而如果要设置css属性，需要两个参数css(“css属性名”，“css属性值”)，同样地这种方法也可以同时修改多个参数值，这种情况下要变一下格式：css({“css属性名”：“css属性值”，“css属性名”：“css属性值”})。

最后，jQuery还提供了处理元素和浏览器窗口尺寸的方法，主要有下面几种：
①width()和height()
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
②innerWidth()和innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
③outerWidth()和outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。

利用这些方法，可以很容易地获得显示窗口的大小，只需要在获取对象时获取document对象即可。

jQuery HTML操作相关推荐

4、jquery表格操作
1.<html> 2.<head> 3.<title>jquery表格操作</title> 4.<script language="ja ...
jQuery 元素操作——遍历元素
jQuery 元素操作主要是遍历.创建.添加.删除元素操作 <!DOCTYPE html> <html lang="en"><head>< ...
Java程序员从笨鸟到菜鸟之（八十八）跟我学jquery（四）JQuery框架操作元素的属性与样式
在前面几篇博客中,我们初步了解了一下jQuery的好处,基本语法,还有一些基本函数,这是学习jquery的基础,在这篇博客中,我们一起来学习一下JQuery框架操作元素的属性与样式,在web开发中,修 ...
JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 <strong>//1.获取和设置样式</strong> $("#tow").attr("class&q ...
bootstrap中表格、修饰图片、浮动、背景框、提示框及关闭提示框、元素淡入淡出及jQuery中操作类名
表格: bootstrap中用类定义了几个风格的表格,使用时给table标签加上类名即可,具体如下: 类名描述 .table 基础表格:标题加粗,只有水平的淡灰色边框线条,没有垂直方向的线条 .ta ...
jQuery——入门（三）JQuery DOM操作（核心处理和文档处理）
jQuery--入门(三)JQuery DOM操作(核心处理和文档处理) 一.核心处理(JQuery对象访问) 1.页面加载检测函数:$(document).ready(function(){}); ...
jQuery（一）—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果
原以为 jQuery 不需要学习,但是接触了一些 VUE 框架,发现用到了好多 jQuery 的知识,于是返回来重新学习.本系列笔记大概分为三篇,陆续更新. 参考:W3school -- jQuery ...
html元素自己属性代码,jQuery如何操作HTML的元素和属性？（代码详解例）
本篇文章给大家带来的内容是介绍jQuery如何操作HTML的元素和属性?(代码详解例),让大家了解jQuery操作元素和属性的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 1 ...
118.Python修炼之路【123-前端-JQuery样式操作】2018.08.01
jquery样式操作 jquery用法思想二同一个函数完成取值和赋值操作行间样式 // 获取div的样式 $("div").css("width"); $ ...
jQuery元素操作-遍历元素
1.jQuery元素操作 1.1.遍历元素-语法1 主要遍历dom对象 <!DOCTYPE html> <html lang="en"> <head& ...

jQuery HTML操作

jQuery HTML操作相关推荐

最新文章

热门文章