jQuery 控制页面

最新推荐文章于 2024-05-02 14:29:32 发布

lesileqin

最新推荐文章于 2024-05-02 14:29:32 发布

阅读量4.8k

点赞数 8

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lesileqin/article/details/104067441

版权

JavaScript 专栏收录该内容

16 篇文章 7 订阅

订阅专栏

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

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

元素的值：是元素的一种属性，大部分元素的值都对应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("两次密码输入不一致");
            else
                alert("两次密码一致");
        });
    });

二、对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"}`

lesileqin

关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
jQuery 控制页面

文章目录一、对元素内容和值进行操作1、对元素内容操作2、对HTML内容操作3、对元素值操作二、对DOM节点进行操作1、创建节点2、插入节点（1）内部插入（2）外部插入3、删除节点4、复制节点5、替换节点三、对元素属性进行操作四、对元素的CSS样式进行操作1、通过修改CSS类实现2、通过修改CSS属性实现一、对元素内容和值进行操作1、对元素内容操作2、对HTML内容操作3、对元素值操作二...
复制链接

扫一扫