JQery操作DOM

╰半夏微凉° 2022-07-16 05:28 200阅读 0赞

读写节点（）没有参数就是取值，有参数就是赋值

## 读写节点的HTML内容 ##

obj.html() / obj.html(“123”)  
**读写节点的文本内容**  
obj.text / obj.text(“123”)  
**读写节点的额value属性值**  
obj.val() / obj.val(“abc”)  
**读写节点的属性值**  
obj.attr(“属性值”) / obj.attr(“属性名”,”属性值”)

读取

![这里写图片描述][20161007201222224]

改变：html

![这里写图片描述][20161007201257427]

改变：text

![这里写图片描述][20161007201332203]

在文本框中写123456，然后JQuery 取p3下的input的value  
值，然后也可以用val去改变他的值

![这里写图片描述][20161007201405851]

![这里写图片描述][20161007201416360]

用attr读取属性，也可以去改属性

![这里写图片描述][20161007201504477]

## 增删节点： ##

## 创建DOM节点 ##

$(“节点内容”)

如：

$(“<span>你好<span/>”)

但是创建出来的节点是游离的和js一样~  
要给她插入到什么地方才行

## 插入DOM节点： ##

parent.append(obj) 作为最后一个子节点添加进来  
parent.prepend(obj) 作为第一个子节点添加进来  
brother.after(obj) 作为下一个兄弟节点添加进来  
brother.before(obj) 作为上一个兄弟节点添加进来

就像之前做的那个li的那个~~~

ul，li

是ul.函数，在ul加子节点。  
li.函数，在li加兄弟，这个li要先获取

**增加节点的话要先创建一个节点~**  
然后把创建的节点加到那个ul下，先获取这个ul

var li = $(“<li>天津</li>”)

然后获取ul,增加节点作为第一个

$(“ul”).prepend(li)

要控制在哪个2子节点前后就要先获取那个要作为标志的子节点

## 删除DOM节点： ##

obj.remove() 删除节点  
obj.remove(selector) 只删除满足selector的节点  
obj.empty() 清空节点

如：

$(“#p1”).remove() 就删除了

$(“li:last”).remove()  删除li最后一个li

## 样式操作： ##

.addClass(“ ”) 追加样式  
.removeClass(“ ”) 移除指定样式  
.removeClass( ) 移除多有样式  
.toggleClass(“ ”) 切换样式  
.hasClass(“ ”) 判断是否有某个样式  
.css(“ ”) 读取css的值  
.css(“ ” ,” ”) 设置多个样式

## 追加样式 ##

写了个big css

![这里写图片描述][20161007201541455]

因为返回的还是那个\#p1对象，所以可以直接再在后面点函数

## 移除：~~ ##

![这里写图片描述][20161007201618572]

toggleClass(“ ”)  
会判断有没有样式，有就移除这个样式，没有就加上这个样式  
![这里写图片描述][20161007201651034]  
![这里写图片描述][20161007201710768]

$(“#p1”).css(“color”,”blue”);

这个就可以用css去增加样式。只写属性就会返回属性值

## 遍历节点： ##

children() / children(selector) 直接获取子节点  
next() / next(selector) 获取下一个兄弟节点  
prev() / prev(selector) 上一个兄弟节点  
siblings() / siblings(selector) 所以兄弟  
find(selector) 查找满足选择器的所有后代  
parent() 父节点

**也可以通过选择器实现**

$(“ ul li”) ==  $(“ul”).children()

$(“ul”).find(“.ipt”)

就选出来ul下所有有ipt样式的~

**找父节点**

$(“ul”).parent()

**js不能直接找亲兄弟，但是JQ可以**

## 实例：JQuery实现购物车~ ##

**代码：**

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>购物车</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript"> //加入购物车 function jrgwc(btn){ //1.找到按钮同行的商品名和单价 //找到按钮的父亲td，然后找他父亲的兄弟 //其大哥、二哥是我们要找的目标 //用siblings找到所有兄弟 var $tds=$(btn).parent().siblings(); //返回的tds是DOM对象，要用方法要转换为JQ对象！！！ //是JQ对象以$开头！！！不是的加不加，容易区分 var name = $($tds[0]).text(); //不转换的话可以用innerText() //获取 eq(i)是获取第i个元素，返回了JQuery对象 //var name = $tds.eq(0).text() var price = $($tds[1]).text(); //检测购物车中是否已经有了 var $trs=$("#goods tr"); for(var i=0;i<$trs.length;i++){ //获取g购物车中的商品名 var $name=$trs.eq(i).children().eq(0).text(); if(name==$name){ var $td=$trs.eq(i).children().eq(2); var $input = $td.children().eq(1); $input.val(parseInt($input.val())+1); //金额 var mny = $trs.eq(i).children().eq(3); mny.text(price*$input.val()); return; } } //创建一行，插入到tbody下 //直接把创建的HTML写在$()中 //js要先创建一个tr然后加td，js不能直接创建节点在加内容 var $tr = $('<tr>'+ '<td>'+name+'</td>'+ '<td>'+price+'</td>'+ '<td><input type="button" value="-" onclick="decrease(this);" />'+ '<input type="text" size="3" readonly value="1" />'+ '<input type="button" value="+" onclick="increase(this);"/></td>'+ '<td>'+price+'</td>'+ '<td><input type="button" value="删除" onclick="sc(this);" /></td>'+'</tr>' ) //购物车中增加个一行tr $("#goods").append($tr); total(); } //删除 function sc(btn){ $(btn).parent().parent().remove(); total(); } //增加 function increase(btn){ var $text = $(btn).prev(); var amount = parseInt($text.val()); $text.val(++amount); //改变金额，获取数量，单价，算金额 var $danjia = $(btn).parent().prev(); var price = parseFloat($danjia.text()); //计算金额 var mny = price*amount; var $jiner = $(btn).parent().next().text(mny); total(); } //减法 function decrease(btn){ var $text = $(btn).next(); var amount = parseInt($text.val()); if (amount>=1){ $text.val(--amount); //改变金额，获取数量，单价，算金额 var $danjia = $(btn).parent().prev(); var price = parseFloat($danjia.text()); //计算金额 var mny = price*amount; var $jiner = $(btn).parent().next().text(mny); total(); } else{amount=1} total(); } //合计： function total(){ var $trs=$("#goods tr"); var sum=0; for(var i=0;i<$trs.length;i++){ //获取每一行的金额 //[3]，.eq(3)这个返回的是JQ对象 var $td=$trs.eq(i).children().eq(3); var mny = parseFloat($td.text()); sum+=mny; } //将合计值设置给对应的列 $("#total").text(sum); } </script>
    <style type="text/css"> table, tr, td { border: 1px solid; border-collapse: collapse; margin: 60px auto; } body { font-family: "Courier New", Courier, monospace; font-size: 16px; } td { padding: 10px; } p { font-size: 36px; text-align: center; } thead { background-color: #CCC; } tr:hover { background-color: #CCC; } </style>
    </head>
    
    <body>
    <p>商品</p>
    <table id="sp">
      <thead>
        <tr >
          <th>商品</th>
          <th>单价</th>
          <th>颜色</th>
          <th>库存</th>
          <th>好评率</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td height="99">罗技鼠标</td>
          <td>80</td>
          <td>黑色</td>
          <td>893</td>
          <td>98%</td>
          <td><button onclick="jrgwc(this);" >加入购物车</button></td>
           
        </tr>
        <tr>
          <td>键盘</td>
          <td>150</td>
          <td>黑色</td>
          <td>9028</td>
          <td>96%</td>
          <td><button onclick="jrgwc(this);">加入购物车</button></td>
        </tr>
        <tr>
          <td>手机壳</td>
          <td>60</td>
          <td>透明</td>
          <td>672</td>
          <td>99%</td>
          <td><button onclick="jrgwc(this);">加入购物车</button></td>
        </tr>
        <tr>
          <td>U盘</td>
          <td>70</td>
          <td>红色</td>
          <td>482</td>
          <td>100%</td>
          <td><button onclick="jrgwc(this);">加入购物车</button></td>
        </tr>
        <tr>
          <td>蓝牙耳机</td>
          <td>100</td>
          <td>蓝色</td>
          <td>8937</td>
          <td>95%</td>
          <td><button onclick="jrgwc(this);">加入购物车</button></td>
        </tr>
      </tbody>
    </table>
    <p>购物车</p>
    <table id="gwc">
      <thead>
        <tr>
          <td >商品</td>
          <td>单价(元)</td>
          <td>数量</td>
          <td>全额</td>
          <td>删除</td>
        </tr>
      </thead>
      <tbody id="goods">
    
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">总计</td>
          <td id="total"></td>
          <td></td>
        </tr>
      </tfoot>
    </table>
    </body>
    </html>

[20161007201222224]: /images/20220716/4992d6c7b87f413f8c1701116df0a6a5.png
[20161007201257427]: /images/20220716/f635053601b04eb9ae4458256a497f41.png
[20161007201332203]: /images/20220716/32eda13c410a4e4ba0fbae3fe8ebccd3.png
[20161007201405851]: /images/20220716/af05e95bf18c4f3291915a02ac918c3e.png
[20161007201416360]: /images/20220716/bee85b99d7e1414cadcfb10d6662348a.png
[20161007201504477]: /images/20220716/88a0f2896af6490bac20ba231f801d92.png
[20161007201541455]: /images/20220716/3d5ec3390b2346929645df303e393087.png
[20161007201618572]: /images/20220716/5bd89dd287b5427986aecd80ff6f058d.png
[20161007201651034]: /images/20220716/cbad685f2228485ca464c31c58129e55.png
[20161007201710768]: /images/20220716/1cfb21628c344fa4933550b51f36ab30.png