jquery的标签属性操作

使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值

.prop()适用于checked和radio(返回true或者false)的属性的获取以及对属性状态进行操作。

//获取标签属性
$('div').attr('title')
//设置标签属性
$('div').attr('id','box')

通过对象可以设置多个属性

$('input').attr({
'type':'text',
'title':'哈哈哈'
})

移除标签属性:removeAttr()

$('div').removeAttr('title');

jquery对DOM对象属性操作

  • prop获取的是DOM的对象属性,主要用于checked的属性获取,进行与后端数据库的存取
  • removeProp删除DOM的对象属性

jquery对类样式的操作

  • addClass添加类
  • removeClass删除类

操作类名的时候要使用对类样式的操作,而不是对标签属性的操作(attr())

jquery对值的操作

  • text() 获取匹配元素包含的文本内容,相当于js中的innerText
//获取文本内容
$('div').text() //设置文本内容
$('div').text('hahaha')
  • html()获取选中标签元素中所有的内容,相当于js中的innerHtml
//获取标签元素中所有内容
console.log($('div').html())
//设置标签元素中的内容
$('div').html(<h2>哈哈哈</h2>)
  • val()用于表单控件中获取值,比如input textarea select等等相当于js中的value

jquery文档操作

插入操作

  • 父.append(子) 插入到父级的最后一个元素
  • 子.appendTo(父) 插入到父级的最后一个元素,插入后可以对子元素进行其他操作
  • 父.prepend(子) 插入到父级的第一个元素
  • 子.prependTo(父) 插入到父级的第一个元素
  • 子元素可以是一段字符串、jsDOM对象,也可以是jquery对象,如果子元素是一个jquery对象,那么进行的是一个移动操作
    <script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
//append()方法与appendTo方法,插入到最后
$('.box').append('<h2>哈哈哈</h2>');
$('<span>这是一个span标签</span>').appendTo($('.box')).click(function () {
alert($(this).text());
});
//prepend()方法与prependTo()方法,插入到第一,用法与append和appendTo一样
$('.box').prepend('<p>这是第一个p标签,插入到第一个</p>');
$('<p>这是第二个p标签,插入到第一个</p>').prependTo($('.box'));
})
</script>
  • 父.after(子) 在匹配的元素之后插入内容 与 子.insertAfter(父)
  • 父.before(子) 在匹配的元素之前插入内容 与 子.insertBefor(父)

替换操作

  • replaceWith():将所有匹配的元素替换成指定的HTML或DOM元素。
//将所有的h5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>')
//将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));
  • replaceAll():用匹配的元素替换掉所有 selector匹配到的元素
$('<br/><hr/><button>按钮</button>').replaceAll('h4')

删除和清空操作

  • remove()删除节点后,事件也会删除
$('div').remove();
  • detach()删除节点后,事件会保留
var $btn = $('button').detach()
//此时按钮能追加到ul中,事件还是可以使用
$('ul').append($btn)
  • empty():清空元素中所有后代节点
//清空掉ul中的子元素,保留ul
$('ul').empty()

jQuery对标签、类样式、值、文档、DOM对象的操作的更多相关文章

  1. jQuery+turn.js翻书、文档和杂志3种特效演示

    很好用的一款插件jQuery+turn.js翻书.文档和杂志3种特效演示 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  2. jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档。

    jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...

  3. 通过<meta>标签指定IE的文档模式实现CSS3兼容

    今天发现之前做好的一个页面在IE中打开显示的效果不正常,本地和服务器上显示的是两种不同的样式. 经过确认文档内容和CSS都是一样的. 通过IE F12(开发人员工具)发现不正常的样式 浏览器文档模式自 ...

  4. IntelliJ idea鼠标移动到类上显示文档document(javadoc)内容

    IntelliJ idea鼠标移动到类上显示文档document(javadoc)内容 Step 1:设置鼠标移动到类上自动显示Javadoc文档 step2:为jdk下载javadoc Step3: ...

  5. Java,面试题,简历,Linux,大数据,常用开发工具类,API文档,电子书,各种思维导图资源,百度网盘资源,BBS论坛系统 ERP管理系统 OA办公自动化管理系统 车辆管理系统 各种后台管理系统

    Java,面试题,简历,Linux,大数据,常用开发工具类,API文档,电子书,各种思维导图资源,百度网盘资源BBS论坛系统 ERP管理系统 OA办公自动化管理系统 车辆管理系统 家庭理财系统 各种后 ...

  6. JavaEE实战——XML文档DOM、SAX、STAX解析方式详解

    原 JavaEE实战--XML文档DOM.SAX.STAX解析方式详解 2016年06月22日 23:10:35 李春春_ 阅读数:3445 标签: DOMSAXSTAXJAXPXML Pull 更多 ...

  7. Javascript学习8 - 脚本化文档(Document对象)

    原文:Javascript学习8 - 脚本化文档(Document对象) 每个Web浏览器窗口(或帧)显示一个HTML文档,表示这个窗口的Window对象有一个document属性,它引用了一个Doc ...

  8. MongoDB文档的增删改操作

    上一篇文章中介绍了MongoDB的一些基本知识,同时看到了怎么启动一个MongoDB服务,并且通过MongoDB自带的shell工具连接到了服务器. 这一次,就通过MongoDB shell介绍一下对 ...

  9. C# 中使用Word文档对图像进行操作

    C# 中使用Word文档对图像进行操作 Download Files: ImageOperationsInWord.zip 简介 在这篇文章中我们可以学到在C#程序中使用一个Word文档对图像的各种操 ...

随机推荐

  1. python爬虫---BeautifulSoup的用法

    BeautifulSoup是一个灵活的网页解析库,不需要编写正则表达式即可提取有效信息. 推荐使用lxml作为解析器,因为效率更高. 在Python2.7.3之前的版本和Python3中3.2.2之前 ...

  2. loj 10004 智力大冲浪

    智力大冲浪 题目描述: 小伟报名参加中央电视台的智力大冲浪节目.本次挑战赛吸引了众多参赛者,主持人为了表彰大家的勇气,先奖励每个参赛者m元.先不要太高兴!因为这些钱还不一定都是你的.接下来主持人宣布了 ...

  3. Let's Encrypt 免费通配符 SSL 证书申请教程——但是也需要email,域名所有权等,如果是黑产用的话会这样用吗?会不会暴露自己身份???

    Let's Encrypt 免费通配符 SSL 证书申请教程 from:https://blog.csdn.net/English0523/article/details/79608464 2018 ...

  4. vim : Depends: vim-common (= 2:7.4.052-1ubuntu3.1) but 2:7.4.273-2ubuntu4 is to be installed

    sudo apt-get purge vim-commonsudo apt-get updatesudo apt-get upgradesudo apt-get install vim

  5. Win10系列:VC++绘制几何图形4

    三角形绘制完成以后,接下来介绍如何给项目添加主入口函数.打开D2DBasicAnimation.h头文件,添加如下的代码定义一个DirectXAppSource类. //定义类DirectXAppSo ...

  6. django_rq无法监听两个队列问题

    django_rq是为django集成redis队列,这个用的少,一般会选择celery,没办法项目中用到了.用起来很简单,配置可以参考官方文档:https://pypi.org/project/dj ...

  7. url 传参数时出现中文乱码该怎么解决

    一般出现乱码都是在js裏面跳转到哪个类 然後得到这个参数的时候中文乱码,有一个非常实用的办法,在js你可以这样写:var url=........;url=encodeURI(url); url=en ...

  8. C++基础知识:STL简介

    1.标准模板库STL ― STL , 即 : Standard Template Library , 是 C++的一部分― STL是常用数据结构和算法的集合― STL的目标是标准化组件 , 提高开发效 ...

  9. bootstrap 下拉选中查询

    <div class="form-group"> <label class="col-lg-3 col-sm-2 control-label" ...

  10. let var区别

    function varTest() { var x = 1; if (true) { var x = 2; // 同样的变量! console.log(x); } console.log(x); } ...