web--JavaScript(四)jQuery

(一)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();

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>jQuery</title>
6
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
7
<!--    引用jquery-->
8
</head>
9
<body>
10
<p id="id1">第1个文本p</p>
11
<p id="id2">第2个文本p</p>
12
<p id="id3">第3个文本p</p>
13
<p id="demo"></p>
14
<script>
15
    //var p1= document.getElementById("id1");
16
    //document.getElementById("demo").innerHTML = "新文本:"+p1.innerHTML;
17
    $(document).ready(function () {
18
        var myElement=$("#id1");
19
        // 通过id来查找元素
20
        var myElement2=$("p");
21
        //通过字段p,或者通过类名.class1
22
        //var myelement3=$("p.classp")
23
        //通过css选择器方式查找,类名都定义为classp。
24
        $("#demo").text("新文本:" + myElement[2].innerHTML);
25
        // 显示输出
26
    });
27
</script>
28
</body>
29
</html>