专栏首页me的随笔jQuery操作DOM元素

jQuery操作DOM元素

作为一个后端程序员,也是要和前端页面打交道的。最常见的场景莫过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的表单内所有禁用的元素

常用方法

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版本的不同而产生不同的效果。

版权声明

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • asp.net core 3.1/swagger

    安装nuget包:Swashbuckle.AspNetCore.SwaggerUI和Swashbuckle.AspNetCore.Annotations,配置s...

    雪飞鸿
  • Vue使用小结

    只有当Vue实例被创建时data中存在的属性才是响应式的,当这些数据改变时,视图会进行重渲染;视图接收用户输入时,data中相应的属性值也会发生改变。

    雪飞鸿
  • Cookie中的几个概念

    Domain表示Cookie所在的域(如:www.baidu.com),对于Cookie的访问是不能跨域的(如:我们无法在www.baidu.com下访问www...

    雪飞鸿
  • python3脚本打开摄像头

    brew install opencv3 用来指明安装python3版本的opencv。

    星辉
  • 一个因为删除系统 Python 引发的惨案...

    由于实验需要使用 Python3.6 以上版本,于是决定卸载 Python3.5。

    Rocky0429
  • 多python环境下使用pip安装包

    笔记本上安装了2.7和3.5两个版本的python,在使用3.5版本的pip安装keras时出现了failed to create process错误。解决方法...

    py3study
  • 一边吃瓜看球,一边完成AI应用实践——手写体识别入门

    用户1737318
  • jquery操作select(取值,设置选中)

    程序员同行者
  • MAC OSX安装Python环境 + Visual Studio Code

    LinXunFeng
  • 机器学习实例篇

    数据来源:https://www.kaggle.com/c/facebook-v-predicting-check-ins

    不断折腾

扫码关注云+社区

领取腾讯云代金券