jQuery操作DOM元素

男娘i 2022-04-24 23:52 306阅读 0赞

作为一个后端程序员，也是要和前端页面打交道的。最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求。  
实现上述两个功能当然可以使用原生js来完成，但在实际开发过程中很少这样做，通常会使用一些别人封装好的js库来辅助我们的工作，jQuery就是这些辅助库中的一员。

### **常用选择器** ###

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>element</td> 
   <td>$('标签名')，$('a')选取页面上的所有a标签，返回类型是DOM元素数组</td> 
  </tr> 
  <tr> 
   <td>class</td> 
   <td>$('.类名')，$('.cls')选取页面上class属性为cls的标签，返回类型是DOM元素数组</td> 
  </tr> 
  <tr> 
   <td>id</td> 
   <td>$('#value')，选取页面上id=value的标签</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>$('[name]')，选取带有name属性的标签，返回类型是DOM元素数组</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>$('[name="tag"]')，选取name=tag的标签，返回类型是DOM元素数组</td> 
  </tr> 
  <tr> 
   <td>attribute</td> 
   <td>$('[name!="tag"]')，选取name不等于tag的标签，返回类型是DOM元素数组</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>$('[href=".jpg"]')，选取所有href属性值以 ".jpg" 结尾的标签，返回类型是DOM元素数组</td> 
  </tr> 
 </tbody> 
</table>

--------------------

<table> 
 <thead> 
  <tr> 
   <th>:</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:hidden</td> 
   <td>$("label:hidden")，所有隐藏的label元素，返回类型是DOM元素数组</td> 
  </tr> 
  <tr> 
   <td>:visible</td> 
   <td>$("lable:visible")，所有可见的label元素，返回类型是DOM元素数组</td> 
  </tr> 
  <tr> 
   <td>:first</td> 
   <td>$("p:first")，选择页面上的第一个p元素</td> 
  </tr> 
  <tr> 
   <td>:last</td> 
   <td>$("p:last")，选择页面上的最后一个p元素</td> 
  </tr> 
  <tr> 
   <td>:even</td> 
   <td>$("tr:even")，选取页面上索引为偶数的tr元素，返回类型是DOM元素数组</td> 
  </tr> 
  <tr> 
   <td>:odd</td> 
   <td>$("tr:odd")，选取页面上索引为奇数的tr元素，返回类型是DOM元素数组</td> 
  </tr> 
  <tr> 
   <td>:not()</td> 
   <td>$("input:not(:empty)")，所有不为空的 input 元素</td> 
  </tr> 
 </tbody> 
</table>

--------------------

<table> 
 <thead> 
  <tr> 
   <th>input &nbsp; &nbsp; &nbsp;</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:input</td> 
   <td>&nbsp; &nbsp; &nbsp; &nbsp; 选取页面上的所有input元素，返回类型是DOM元素数组</td> 
  </tr> 
  <tr> 
   <td>:type</td> 
   <td>&nbsp; &nbsp; &nbsp; &nbsp; $(":text")等价于$('input[type=text]')，选取页面中所有type="text"的input元素。input常用type值有<strong>text,radio,checkbox,text,submit,password</strong>等。</td> 
  </tr> 
 </tbody> 
</table>

###### **选择器的综合使用** ######

![img_1c53668bcee393edac0d7b3b3daff1ae.gif][] ![img_405b18b4b6584ae338e0f6ecaf736533.gif][]

//操作多种标签
    $('p,div,input').attr('name','multi');
    
    // 一个标签使用多个样式类
    <div class='main-title ng-binding ng-scope'></div>
    $('.main-title.ng-binding.ng-scope');
    
    //选取被选中的radiobutton
    $(':radio[name=""]:checked');
    或
    $(':radio:checked');//选取页面上所有被选中的radiobutton
    
    //选取class属性值是style的p标签
    $('p.style');
    
    //选取div所有子元素中的p标签
    $('div p');
    或
    $('div>p').;
    
    //获取值是的td标签
    $('td:contains("")')
    
    //选择id='table'的标签中的第一个tr标签
    $('#table tr:first');
    
    //选取id='table'标签中的索引为奇数且没有使用类名为'last'的所有tr标签
    //且为选择的元素添加even类
    $('#table tr:odd:not(.last)').addClass('even');
    
    //对id='table'标签中的索引大于0小于3的所有tr标签使用类名为'three'的样式
    $('#table tr:gt(0):lt(3)').addClass('three');
    
    //表单
    $("#form1 :enabled");//选取id为form1的表单内所有启用的元素
    $("#form1:enabled");//选取id为form1的已启用的表单，注意这里#form1和:enabled之间没有空格，有空格表示选取子元素
    $("#form1 :disabled");//选取id为form1的表单内所有禁用的元素

#### **常用方法** ####

jQuery的方法只有jQuery对象才可以调用，DOM对象不能调用。

DOM对象和jQuery对象的相互转换

//DOM转jQuery
    var win=$(window);//将window转换为jQuery对象
    //jQuery对象win转DOM对象
    win.get[0];
    //或
    win[0];

<table> 
 <thead> 
  <tr> 
   <th>样式属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>attr()</td> 
   <td>$('#key').attr('id'),获取id属性值;$('#key').attr('name','tag'),设置name属性值为tag,$('#key').attr('id',''),将id属性值设为默认值</td> 
  </tr> 
  <tr> 
   <td>removeAttr</td> 
   <td>删除属性，删除的属性不再占用内存资源，在源代码中看不到</td> 
  </tr> 
  <tr> 
   <td>css()</td> 
   <td>$('#key').css('color','red')，设置id=key的标签文本颜色为红色</td> 
  </tr> 
  <tr> 
   <td>addClass('className')</td> 
   <td>给元素添加样式</td> 
  </tr> 
  <tr> 
   <td>removeClass('className')</td> 
   <td>移除样式</td> 
  </tr> 
  <tr> 
   <td>toggleClass('className')</td> 
   <td>启用或关闭样式</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>内容操作</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text()</td> 
   <td>针对非input使用，text()获取元素中的文本，text('str')设置元素文本为str</td> 
  </tr> 
  <tr> 
   <td>html()</td> 
   <td>和text类似，不同之处是html()可以使用html样式，<code>$('p').html('&lt;b&gt;p&lt;/b&gt;')</code>,p标签上显示粗体字母p</td> 
  </tr> 
  <tr> 
   <td>val()</td> 
   <td>针对input使用，val()获取元素中的value属性值，value('str')设置元素value属性值为str</td> 
  </tr> 
  <tr> 
   <td>load()</td> 
   <td>发送AJAX请求，重新获取标签要呈现的内容$('#lessonList').empty().load('/Lesson/UnionSearch/conditions?' + conditions);</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>元素操作</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>hide()</td> 
   <td>隐藏元素</td> 
  </tr> 
  <tr> 
   <td>show()</td> 
   <td>显示元素</td> 
  </tr> 
  <tr> 
   <td> <code>$('&lt;p id="pTag"&gt;&lt;/p&gt;'</code>)</td> 
   <td>创建p元素</td> 
  </tr> 
  <tr> 
   <td>append()</td> 
   <td>向元素末尾添加子元素</td> 
  </tr> 
  <tr> 
   <td>appendTo()</td> 
   <td>将元素添加到指定的元素末尾</td> 
  </tr> 
  <tr> 
   <td>children('selector')</td> 
   <td>获取标签的所有子元素（不包括子元素的子元素），selector表示选择器,可省略</td> 
  </tr> 
  <tr> 
   <td>find('selector')</td> 
   <td>根据selector获取元素的所有子元素（包括子元素的子元素），selector不可省略</td> 
  </tr> 
  <tr> 
   <td>each()</td> 
   <td>遍历元素数组,例：$('p').each(function(){$(this).text('p');});</td> 
  </tr> 
 </tbody> 
</table>

#### **结语** ####

以上这些是我在开发过程常用到的一些选择器和方法，在此做个总结以备后续查询使用。  
最后说一点，同一个jQuery方法，可能会因为jQuery版本的不同而产生不同的效果。

本文为作者原创，版权归作者[雪飞鸿][Link 1]所有。 转载必须保留文章的完整性，且在页面明显位置处标明[原文链接][Link 2]。

如有问题， 请[发送邮件][Link 3]和作者联系。

[img_1c53668bcee393edac0d7b3b3daff1ae.gif]: https://yqfile.alicdn.com/img_1c53668bcee393edac0d7b3b3daff1ae.gif
[img_405b18b4b6584ae338e0f6ecaf736533.gif]: /images/20220210/9fb7409798da419a9c08eaf1235f98b0.png
[Link 1]: http://www.cnblogs.com/Cwj-XFH/
[Link 2]: http://www.cnblogs.com/Cwj-XFH/p/6114547.html
[Link 3]: mailto:chiwenjun@outlook.com