文章目录

一、对元素内容和值进行操作
- 1、对元素内容操作
- - （1）对文本内容操作
  - （2）对HTML内容操作
  - 例子：text(val)和html(val)进行对比
- 3、对元素值操作
- - 例子：判断用户两次输入的密码是否一致
二、对DOM节点进行操作
- 1、创建节点
- 2、插入节点
- - （1）内部插入
  - （2）外部插入
- 3、删除节点
- 4、复制节点
- 5、替换节点
- 例子：模仿一个简易的QQ农场
三、对元素属性进行操作
四、对元素的CSS样式进行操作
- 1、通过修改CSS类实现
- 2、通过修改CSS属性实现

在开始之前，需要掌握以下知识点

JavaScript基础知识
JavaScript DOM 知识
jQuery选择器

一、对元素内容和值进行操作

元素的值：是元素的一种属性，大部分元素的值都对应value属性
元素内容：指定义元素的起始标记和结束标记中间的内容，他又分为：
- 文本内容：不包含元素的子元素，只包含元素的文本内容
- HTML内容：不仅包含元素的文本内容，而且还包含元素的子元素

1、对元素内容操作

因为元素内容分为两类，所以也可以分作两种操作：

（1）对文本内容操作

对于文本内容：jQuery提供了两种方法

text()：用于获取全部匹配元素的内容，所有匹配元素包含的文本组合起来的文本内容
text(val)：用于设置全部匹配元素的文本内容

例如在一个HTML中，要获取并输出div元素的文本内容，可以这样：

alert($("div").text());

重新设置div元素的内容：

$("div").text("我和你吻别");

（2）对HTML内容操作

同样，jQuery提供了两种方法对HTML内容进行操作

html()：用于获取匹配元素的HTML内容
html(val)：用于设置全部匹配元素的HTML内容

例如，有这样一段HTML代码：

<div><span id="demo">张学友</span>
</div>

使用html()获取元素：

alert($("div").html());

效果如下：

可见他输出的整个元素里面的HTML内容。

使用html(val)设置值：

$("div").html("往事消散成云烟，消散在彼此眼前");

最后页面输出这句话

例子：text(val)和html(val)进行对比

使用同样的语句，进行设置，首先看一下效果：

步骤1：写HTML代码，两个div元素的id分别设置为div1和div2，HTML代码不再给出

步骤2：引入jQuery库，然后运用两个方法进行设置：

    $(document).ready(function () {$("#div1").text("<span style='color: red'>重新设置的文本内容</span>");$("#div2").html("<span style='color: red'>重新设置的文本内容</span>");});

完成！可以显而易见的看出对比。

3、对元素值操作

jQuery提供了三种方法对元素值进行操作：（PC端看表效果更好）

方法	说明	示例
`val()`	获取匹配元素的当前值，可能是字符串也可能是数组。例如：当`select`元素有两个选中值是，返回结果就是一个数组	`$("#username").val();` //获取id为`username`元素的值
`val(val)`	设置所有匹配元素的值	`$("input:text").val("新值")` //为全部文本框设置值
`val(arrVal)`	用于为`checkbox`、`select`、`radio`等元素设置值，参数为字符串数组	`$("select").val(['1','2'])` //为下拉列表框设置多选值

例子：判断用户两次输入的密码是否一致

先来看一下效果：

步骤1：写一个表单，里面包含上述这些内容，HTML代码不再给出

步骤2：引入jQuery库，然后编写jQuery代码，拿来直接判断就好了：

    $(document).ready(function () {$("input[type='button']").click(function () {if($("#Pwd1").val()!=$("#Pwd2").val())alert("两次密码输入不一致");elsealert("两次密码一致");});});

二、对DOM节点进行操作

DOM节点是什么？请点我前往链接！

1、创建节点

包含两个步骤，第一步创建新元素，第二步将新元素插入到文档中（父元素中）

有三种方法插入一个节点：

//方法1
var $p = $("<p></p>");
$p.html("<span style='color:red'>方法一添加内容</span>");
$("body").append($p);
//方法2
var $p = $("<p><span style='color: red'>方法二添加</span></span></p>");
$("body").append($p);
//方法3
$("body").append("<p><span style='color: red'>方法三添加</span></p>");

2、插入节点

应用上述append()方法将定义的节点插入到了<body>下，插入节点还分为内部和外部插入

（1）内部插入

内部插入的方法

方法	说明	示例
`append(content)`	为所有匹配的元素内部追加内容	`$("#B").append("<p>A</p>")` //向id为B的元素中追加一个段落
`appendTo(content)`	将所有匹配元素添加到另一个元素的元素集合中	`$("#B").appendTo("#A")` //将id为B的元素追加到id为A的元素后面
`prepend(content)`	为所有匹配的元素的内部前置内容	`$("#B").prepend("<p>A</p>")` //向id为B的元素内容前添加一个段落
`prependTo(content)`	为所有匹配元素前置到另一个元素集合中	`$("#B").prependTo("#A")` //将id为B的元素添加到id为A的元素前面

（2）外部插入

外部插入的方法

方法	说明	示例
`after(content)`	在每个匹配的元素之后插入内容	`$("#B").after("<p>A</p>")` //向id为B的元素的后面添加一个段落
`insertAfter(content)`	将所有匹配的元素插入到另一个指定元素集合的后面	`$("<p>A</p>").insertAfter("#B")` //将要添加到的段落插入到id为B的元素之后
`before(content)`	在每个匹配的元素之前插入内容	`$("#B").before("<p>A</p>")` //向id为B的元素前面添加一个段落
`insertBefore(content)`	将所有匹配的元素插入到另一个指定元素的元素集合的前面	`$("<p>A</p>").insertBefore("#B")` //将要添加到的段落插入到id为B的元素之前

3、删除节点

删除节点提供了两种方法：

empty()：用于删除匹配元素集合中的所有子节点，并不删除该元素，把儿子都杀了
remove([expr]) ：从DOM中删除所有匹配元素

有一段这样的HTML代码：

div1:
<div id="div1" style="border: 1px solid #0000FF; height: 26px"><span>往事消散成云烟，消散在彼此眼前</span>
</div>
div2:
<div id="div2" style="border: 1px solid #0000FF; height: 26px"><span>往事消散成云烟，消散在彼此眼前</span>
</div>

我们用这两种方法看一下区别，写入jQuery代码：

$(document).ready(function () {$("#div1").empty();$("#div2").remove();
});

看一下效果：

可以发现，div1中仅仅留了个爸爸，div2是全家都没了。

4、复制节点

复制节点用clone()方法，它有两种形式：

不带参数形式，用于克隆匹配的DOM元素并且选中这些克隆的副本
带有一个布尔型的参数，当参数为真，表示克隆匹配的元素及其所有的事件处理并且选中这些克隆的副本；当参数为假，表示不复制元素的事件处理

比如，在页面添加一个按钮，并为该按钮绑定单击事件，在单击这个按钮之后复制该按钮，但不复制它的事件处理：

$(function () {$("input").bind("click",function () {   //为按钮绑定单击事件$(this).clone().insertAfter(this);  //复制自己但不复制事件处理});
});

5、替换节点

有两种替换节点的方法：

replaceAll(selector)：使用匹配元素替换掉所有selector匹配到的元素
replaceWith(content)：将所有匹配的元素替换成指定HTML或DOM元素

比如，使用replaceWith()方法替换页面中的id为div1的元素，以及使用replaceAll()替换id为div2的元素：

$(document).ready(function () {//替换id为div1的元素$("#div1").replaceWith("<div>replaceWith()替换方法</div>");//替换id为div2的div元素$("<div>repalceAll()方法的替换结果</div>").replaceWith("#div2");
});

例子：模仿一个简易的QQ农场

篇幅有限，请点击这里，访问这篇博客

三、对元素属性进行操作

下表展示了一些元素属性方法：

方法	说明	示例
`attr(name)`	获取匹配的第一个元素的属性值（无值返回`undefined`）	`$("img").attr('src')` //获取页面中第一个img元素的src属性值
`attr(key,value)`	为所有匹配的元素设置一个属性值（`key`是设置的值）	`$("img").attr("title","hello world")` //为图片添加标题属性，属性值为后者
`attr(key,fn)`	为所有匹配的元素设置一个函数返回值得属性（`fn`表示函数）	`$("#fn").attr("value",function(){return this.name;})` //将元素的名称作为其value属性值
`attr(properties)`	为所有匹配元素以集合的（{名：值，名：值}）形式同时设置多个属性	`$("img").attr({src:"test.png",title:"图片"})` //为图片同时添加两个属性，分别是src和title
`removeAttr(name)`	为所有匹配元素删除一个属性	`$("img").removeAttr("title")` //移除所有图片的title属性

四、对元素的CSS样式进行操作

1、通过修改CSS类实现

如果想改变一个元素的整体效果，可以通过修改该元素所使用的CSS类来实现，jQuery提供了几种用于修改CSS类的方法，如下表所示：

方法	说明	示例
`addClass(class)`	为所有匹配的元素添加指定的CSS类名	`$("div").addClass("blue line")`//为全部的div元素添加blue和line两个CSS类
`removeClass(class)`	从所有匹配的元素中删除全部或指定的CSS类	`$("div").removeClass("line")` //删除全部div元素中名称为line的CSS类
`toggleClass(class)`	如果存在就删除，不存咋就添加一个CSS类	`$("div").toggleClass("yellow")`
`toggleClass(class,switch)`	如果switch参数true则添加对应CSS类，否则删除，通常switch是一个布尔型的变量	`$(toggleClass("show",true))`

2、通过修改CSS属性实现

jQuery也提供了响应的方法修改元素的style属性

方法	说明	示例
`css(name)`	返回第一个匹配元素的样式属性	`$("div").css("color")` //获取第一个匹配的div元素的color属性值
`css(name,value)`	为所有匹配元素的指定样式设置值	`$("img").css("border","1px solid red")` //为全部img元素设置边框样式
`css(properties)`	以{属性：值，属性：值，……}的形式为所有匹配元素设置样式属性	`$("tr").css{"backgound-color":"red","font-size":"14px"}`

jQuery 控制页面相关推荐

jquery控制页面只刷新一次
第一种只刷新一次 window.onload(){if(location.href.indexOf('#reloaded')==-1){location.href=location.href+&quo ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十二) —— jQuery Mobile 页面事件与 deferred
在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery ...
使用 jQuery Mobile 与 HTML5 开发 Web App (九) —— jQuery Mobile 页面与对话框
在<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 基础>中,Kayo 曾经简略介绍过 jQuery Mobile 的页面组件,当 ...
jQuery框架学习第七天：jQuery动画–jQuery让页面动起来!
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jquery控制元素的隐藏和显示的几种方法。
使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#id").hide ...
jquery控制元素的隐藏和显示的几种方法
使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 方法一显示: $("#id").show()表示为display:block, 隐藏: $("#id&q ...
html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
JavaScript location.reload() 方法 Location 对象的 reload() 方法用于重新加载当前文档(页面),语法如下: location.reload( false| ...
expires与etag控制页面缓存的优先级
expires指令控制HTTP应答中的"Expires"和"Cache-Control"Header头部信息,启动控制页面缓存的作用 time:可以使用正数或负 ...
jq修改iframe html代码,jQuery控制iFrame(实例代码)
用jquery在IFRAME里取得父窗口的某个元素的值只好用DOM方法与jquery方法结合的方式实现了 1.在父窗口中操作选中IFRAME中的所有单选钮 $(window.frames[&quo ...

jQuery 控制页面