web前端--JavaScript（四）jQuery

最新推荐文章于 2022-05-17 21:59:58 发布

前端小窝

最新推荐文章于 2022-05-17 21:59:58 发布

阅读量199

点赞数 1

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/weixin_44105459/article/details/102689183

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

(一)jquery 查找html元素的方式

简单来说，jQuery是js的一个库，来完善js的功能。

查找html元素的方式：id、class、字段p、css四种
jQuery用来处理浏览器不兼容，简化 HTML DOM 操作、事件处理、动画和 Ajax。
在09年以后，多数jQuery的程序都可以用js直接写

（二）jquery与 html

1、设置文本内容，对文本操作：myElement.text(“第n个文本”);
设置html元素内容，对html的元素操作：myElement.html(

第n个文本

"");
2、获取内容
获取文本 var myelement=$("#id3"); var mytext=myelement.text(); $("#demo").text(mytext);
获取html var content=my.html(); $(“demo”).html(content);

（三）jquery与 css

1、隐藏元素
$("#id1").hide(); jquery方式
my.style.display=“none”; CSS方式
2、显示元素
my.show();
my.style.display="";
3、更改样式字体大小
my.css(“font-size”,“35px”);
my.style.fontSize=“35px”;

（四）jquery与 DOM

1、删除元素
$("#id").remove();
element.parentNode.removeChild(element);
2、获取父元素
var myParent = myElement.parent();
var myParent = myElement.parentNode();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!--    引用jquery库-->
</head>
<body>
<p id="id1">第1个文本p</p>
<p id="id2">第2个文本p</p>
<p id="id3">第3个文本p</p>
<p id="demo"></p>
<script>
    //var p1= document.getElementById("id1");
    //document.getElementById("demo").innerHTML = "新文本："+p1.innerHTML;
    $(document).ready(function () {
        var myElement=$("#id1");
        // 通过id来查找元素
        var myElement2=$("p");
        //通过字段p，或者通过类名.class1
        //var myelement3=$("p.classp")
        //通过css选择器方式查找，类名都定义为classp。
        $("#demo").text("新文本：" + myElement[2].innerHTML);
        // 显示输出
    });
</script>
</body>
</html>
```css
在这里插入代码片

前端小窝

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端--JavaScript（四）jQuery

(一)jquery 查找html元素的方式简单来说，jQuery是js的一个库，来完善js的功能。查找html元素的方式：id、class、字段p、css四种jQuery用来处理浏览器不兼容，简化 HTML DOM 操作、事件处理、动画和 Ajax。在09年以后，多数jQuery的程序都可以用js直接写（二）jquery与 html1、设置文本内容，对文本操作：myElement.te...
复制链接

扫一扫

专栏目录