2. 科技
    3. jQuery HTML

    jQuery HTML

    科技2022-09-05  115

    text（）

    （1） 捕获文本内容，等价于innert

    alert($("#p1").text())

    （2） 更改文本内容

    $("#p1").text("改了！！！")

    html（）

    （1） 获取元素的内容，包括设置的样式

    alert($("#p1").html());

    （2） 更改内容样式

    <script type="text/javascript"> alert($("#p1").html()); var content = "<div style='color:blue'>我是新的div</div>"; $("#p1").html(content); var content1 = "<tr>"; content1 += "<td>jQuery</td>"; content1 += "<td>张三</td>"; content1 += "<td>清华大学出版社</td>"; content1 += "</tr>"; $("#table1").html(content1); </script>

    val（）

    获取或设置value值

    <body> <input type="button" id="button1" value="摁下去" /> </body> <script type="text/javascript"> alert($("#button1").val());//获取 $("#button1").val("不要摁!");//设置 </script>

    属性attr

    获取或更改元素的属性值

    <body> <input type="button" id="button1" value="摁下去" name="111"/> </body> <script type="text/javascript"> $("#button1").attr("name","222"); </script>

    元素的添加

    （1）在元素的最后面添加

    $("#p1").append("张三") $("#p2").append("135xxxxxxxx")

    （2）在元素最前面添加（3） after（后）与before（前）

    $("#p1").prepend("您的") $("#p2").prepend("您的")

    after添加会在元素后面添加，不会成为其子元素

    $("#div1").after("您的住址")

    before相反

    元素的删除

    remove和empty 区别：remove是删除了内容与格式，即全部删除 empty仅仅清除内容，格式还在

    <script type="text/javascript"> $("#btn1").click(function(){ $("#div1").remove()//是删除了内容与格式，即全部删除 }); $("#btn2").click(function(){ $("#div2").empty()//仅仅清除内容，格式还在 }); </script>

    remove过滤删除 在p标签中删除所有class=px的元素（$（“p”）.remove（“#px”）；删除id=px的元素）

    $("#btn1").click(function(){ $("p").remove(".px"); });

    操作css类

    addclass（“classname”）

    $("#btn1").click(function(){ $("#p1").addClass("style1") }); $("#btn2").click(function(){ $("#p1").addClass("style2") });

    css（）方法

    第一个参数是要改的属性，第二个参数是设置的属性

    $("#p1").css("font-size","3em");

    设置多个属性，不同属性用“，”隔开，属性名与属性值之间用“：”隔开，最外层用大括号

    $("#div").css({ "width":"100px", "height":"100px", "background-color":"green" });

    导航

    父元素

    parent（）找到的是父元素 parents（）找到的是祖先节点

    后代

    childred（）找到的是当前元素的直接后代，里面可以穿插name与class来找到具体拿一个后代 find（）

    同胞

    siblings（）找到当前元素的所有同胞元素 next（）找到的是当前元素的下一个弟弟元素 nextAll（）找到的是当前元素的所有弟弟元素。但是只能向下查找 nextUntil（）找到的是两个参数之间的弟弟元素 prev（）找到的是当前元素的上一个哥哥元素 prevUntil（）找到的是两个指定元素之间的同胞元素

    Ajax

    语法$.ajax（JSON） JSON常用的参数 url.服务器的地址，获取数据或者推送的地方 data，需要给服务器的数据，需要去添加，比如说登录的接口需要传递“用户名和密码”，获取货品信息，则不需要专递任何的参数。数据类型键值对，键值对的“键”和服务器保存完全一致，包括键名的大小写 type：数据提交的方式GET/POST timeout：请求等待的时间，时间为毫秒，一般10秒 success：请求成功，做饭后处理 error：请求失败 datatype：语气的服务器相应的数据类型

    Processed: 0.008, SQL: 10