jQuery操作DOM元素-阿里云开发者社区

开发者社区> 雪飞鸿> 正文

jQuery操作DOM元素

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

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

常用选择器

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

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

input       说明
:input         选取页面上的所有input元素,返回类型是DOM元素数组
:type         $(":text")等价于$('input[type=text]'),选取页面中所有type="text"的input元素。input常用type值有text,radio,checkbox,text,submit,password等。
选择器的综合使用
//操作多种标签
$('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的表单内所有禁用的元素
View Code

常用方法

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

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

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

 

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

 

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

 

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

结语

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

版权声明

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

如有问题, 请发送邮件和作者联系。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
LeetCode 380: 常数时间插入、删除和获取随机元素 Insert Delete GetRandom O(1)
题目: 设计一个支持在平均 时间复杂度 O(1) 下,执行以下操作的数据结构。 insert(val):当元素 val 不存在时,向集合中插入该项。 remove(val):元素 val 存在时,从集合中移除该项。
693 0
《jQuery Cookbook中文版》——1.13 克隆DOM元素
jQuery提供clone()方法复制DOM元素。它的用法很简单,只要用jQuery函数选择DOM元素,然后在选择的元素集上调用clone()方法就可以了。结果是返回用于链接的DOM结构的一个副本,而不是原来选中的DOM元素。
938 0
C# 遍历List 并删除某个元素
1、我们选择用for循环, for(int i=0;i {      if(list[i])     {         list.
1160 0
《jQuery Cookbook中文版》——1.14 获取、设置和删除DOM元素属性
除了attr()方法之外,jQuery为使用HTML元素class属性提供了一组很特殊的方法。因为class属性可能包含多个值(例如,class="class1 class2 class3"),所以可以使用这些独特的属性方法管理这些类值。
1049 0
从零开始学 Web 之 jQuery(二)获取和操作元素的属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1646 0
《jQuery Cookbook中文版》——1.11 删除DOM元素
在使用remove()从DOM中删除选择的元素时,它们并没有从jQuery包装器集中删除。这意味着,从理论上说,可以继续操作它们,甚至可以在必要的时候将它们重新添加到DOM中。
1245 0
jquery 遍历dom元素
$('#navBarID').children()  //选定元素的所有孩子节点 $('#navBarID').children().eq(i) //选定元素的第i个孩子节点,从0计数
858 0
《jQuery Cookbook中文版》——1.10 创建、操作和插入DOM元素
在本秘诀中,向jQuery函数传递原始HTML字符串,这一参数被方法用来在运行中创建DOM元素。 还可以简单地向jQuery函数传递一个由DOM方法createElement()创建的DOM对象:
1134 0
+关注
雪飞鸿
没有语言偏见的程序员,使用过的语言C#/JAVA/Go/Python/JS。
51
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载