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的表单内所有禁用的元素
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版本的不同而产生不同的效果。
版权声明
本文为作者原创,版权归作者雪飞鸿所有。 转载必须保留文章的完整性,且在页面明显位置处标明原文链接。
如有问题, 请发送邮件和作者联系。
转载于:https://www.cnblogs.com/Cwj-XFH/p/6114547.html
jQuery操作DOM元素相关推荐
- jQuery操作Dom元素、jQuery遍历、JavaScript遍历
目录 jQuery操作Dom元素 jQuery遍历几种方式 JavaScript遍历 jQuery操作Dom元素 jQuery的主要用法为"选择某个dom元素,再对其进行某种操作" ...
- jQuery操作DOM元素案例
直接打开注释即可观察效果,都已经测试通过!!! <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
- 第四章使用jQuery操作DOM元素
一.DOM的分类: 1.DOM core 2.HTML-DOM 3.CSS-DOM 二.css操作 语法: $("#div1").css("color",&qu ...
- 使用jQuery操作DOM元素
一.DOM分类: 1.DOM core 2.Html-DOM 3.CSS-DOM 二.css样式 $(this).css("font-size","25px") ...
- 原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
- jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
- jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
jQuery创建元素节点或文本节点或属性节点.jQuery插入节点.jQuery删除节点.jQuery复制节点.jQuery替换节点.jQuery包裹节点.jQuery属性操作.jQuery样式操作. ...
- 【面试必备】javascript操作DOM元素
前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...
- jq追加html属性,jQuery 操作 HTML 元素和属性的方法
jQuery拥有操作 HTML 元素和属性的强大方法. 1. 获取HTML 元素的内容和属性 (1) 获得内容: text().html() 以及 val()方法 My Test JQuery $( ...
- jQuery操作DOM对象
jQuery操作DOM对象 1.使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设 ...
最新文章
- Python——with语句、context manager类型和contextlib库
- 面试官:你对Kafka比较熟? 那说说kafka日志段如何读写的吧?
- 超炫的iphone应用UI/UX设计赏析
- ubuntu14安装python_ubuntu14.04 安装python3.7
- Vue 进阶系列(一)之响应式原理及实现
- Java中线程安全的单例模式
- mongodb、mysql、redis的性能对比
- Prototype使用$R()函数
- (5)机器学习_K折交叉验证(iris数据集实例)
- java面试英语自我介绍_程序员面试英文自我介绍
- Siamese 目标跟踪:Learning to Fuse Asymmetric Feature Maps in Siamese Trackers(CVPR2021)
- 解决nacos不停刷日志 ClientWorker get changedGroupKeys:[] 问题
- 决策树--CART算法
- 无视硬件检测直接运行Win10混合现实门户
- C# 颜色和名称对照表
- 前端 PC端兼容性问题总结
- Excel - 如何在 Excel 表格的一个单元格内换行?
- 2017计算机信息类ei,2017年EI收录的中国期刊目录更新了!
- 用STRAIGHT_JOIN优化mysql的执行速度
- uniapp中使用iconfont多色图标