jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作

  • html属性操作:是对html文档中的属性进行读取,设置和移除操作。比如attr()、removeAttr()
  • DOM属性操作:对DOM元素的属性进行读取,设置和移除操作。比如prop()、removeProp()
  • 类样式操作:是指对DOM属性className进行添加,移除操作。比如addClass()、removeClass()、toggleClass()
  • 值操作:是对DOM属性value进行读取和设置操作。比如html()、text()、val()

attr()

设置属性值或者 返回被选元素的属性值

获取:
$('div').attr('id')
设置
$('div').attr('class','box')
设置多个值,键值对存储
$('div').attr({name:'hahaha',class:'happy'})

removeAttr()

移除属性

//删除单个属性
$('#box').removeAttr('name');
$('#box').removeAttr('class'); //删除多个属性
$('#box').removeAttr('name class');

prop()

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时,则返回第一个匹配元素的值。

当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。

返回属性的值
$(selector).prop(property) 设置属性和值
$(selector).prop(property,value) 设置多个属性和值
$(selector).prop({property:value, property:value,...})

attr和prop的运用场景

在使用单双选框的时候
//使用attr获取checked的值
console.log($('input').eq(0).attr('checked'));
-----》返回 checked
//使用prop获取checked的值
console.log($('input').eq(0).prop('checked'));
-----》返回true 可以根据不同结果去运用

addClass(添加多个类名)

removeClass从所有匹配的元素中删除全部或者指定的类。

$('div').addClass("box");//追加一个类名到原有的类名

$('div').addClass("box box2");//追加多个类名

$('div').removeClass('box');移除指定的类(一个或多个)

$('div').removeClass();   移除全部的类

toggleClass如果存在(不存在)就删除(添加)一个类。

$(this).toggleClass('active')

html()

设置值:设置该元素的所有内容 会替换掉 标签中原来的内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*.box{*/
/*color: red;*/
/*}*/
</style>
</head>
<body>
<div class="box">
1111
</div>
<div class=".box1">123</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//设置值
var name = '张韶涵';
// 模板字符串 tab键上面的反引号 插入变量使用${变量名}
$('.box').html(`<p style="color: red;">${name}</p>`);
//使用加号比较麻烦
// $('.box').html('<p style="color: red;">'+name+'</p>');
//获取值
console.log($('.box').html());
})
</script> </body>
</html>

text

text() 获取匹配元素包含的文本内容,一般配合trim使用

console.log($('.box').text().trim());  //去除左右空格

val

val()用于表单控件中获取值,比如input textarea select等等

$('input').val('设置了表单控件中的值');

jquery的文档操作

1插入

父元素.append(子元素)

$('ul').append('<li class="item1">苏东坡</li>');

如果追加的是jquery对象那么这些元素将从原位置上消失。简言之,就是一个移动操作

<body>
<ul></ul>
<ol>
<li class="li1">张碧晨</li>
<li></li>
</ol>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
//将.li1元素移动到ul里面
$('ul').append($('.li1'));
})
</script>
</body>

子元素.appendTo(父元素)

父元素.prepend(子元素);前置添加, 添加到父元素的第一个位置

$('ul').prepend('<li>我是第一个</li>')

子元素.prependTo(父元素);前置添加, 添加到父元素的第一个位置

$('<li>我是第一个</li>').prependTo(‘ul’)

父元素.before(子元素);

子元素.inserBefore(父元素);在匹配的元素之前插入内容 
 

2修改

replaceWith():替换

replaceAll()  :替换所有

$('<p>哈哈哈</p>').replaceAll('h2');

3删除

remove() 删除节点后,事件也会删除(简言之,删除了整个标签)

detach()  删除节点后,事件会保留

$('ul').remove();

$('button').detach();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>操作</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('button').click(function () {
var btn = $('button').eq(0).detach(); //删除节点后,事件会保留
$('body').append(btn); //将删除的标签添加到body中
//克隆匹配的DOM元素
$(this).clone(true).insertAfter(this); //true表示克隆自己,副本具有与真身一样的事件处理能力
})
})
</script>
</body>
</html>

empty() 清空选中元素中的所有后代节点

//清空掉ul中的子元素,保留ul
$('ul').empty();
 
 
 

jQuery对象的属性操作的更多相关文章

  1. 了解JavaScript 对象的属性操作

    提起操作, 很多人都会想到我们学习过程中最经常做的操作, 就是对数据库进行增, 删, 改, 查, 既然提到这个, 那么对于对象的属性操作也不例外, 基本上可以说也是这几个操作. JS中对象的属性标签 ...

  2. jQuery attr removeAttr 属性操作

    jQuery attr removeAttr 属性操作 <%@ page language="java" import="java.util.*" pag ...

  3. jquery 学习(二) - 属性操作

    html代码 <div class="n1" zdy="z1">AAA <p>1111111</p> <input t ...

  4. jquery对标签属性操作

    jquery中添加属性和删除属性: $("#2args").attr("disabled",'disabled'); $("#2args") ...

  5. [原创]java WEB学习笔记15:域对象的属性操作(pageContext,request,session,application) 及 请求的重定向和转发

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  6. jQuery原生框架-----------------属性操作

    // 添加一个处理兼容获取样式的静态方法jQuery.getStyle = function( dom, styleName ) { // dom不是dom,styleName不是字符串,直接打走 i ...

  7. JavaScript对象之属性操作

    在js对象中,我们可以对对象属性进行操作. 上图的要点为:for-in会把原型链上的可枚举属性也列出来. 上图的要点为:可以使用逻辑运算符&&进行层层查找对象是否为undefined, ...

  8. javaWEB总结(13):域对象的属性操作

    前言 本文主要讲解javaweb的四个域对象以及他们的作用范围,后面会有小demo来具体测试. 四个域对象 (1)pageContext:属性的作用范围仅限于当前JSP页面: (2)request:属 ...

  9. jQuery基本的属性操作

    attr和prop,prop常用来操作标签的固有属性,比方说checkbox的checked属性.select的selected属性,而attr常用来操作我们自己给标签添加的属性. $('div'). ...

随机推荐

  1. apply 伴生对象 单例对象

    apply(): 当类或者对象有一个主要用途时,apply方法提供了很好语法机制 scala> class Foo {} defined class Foo scala> object F ...

  2. CentOS 6.5下利用Rsyslog+LogAnalyzer+MySQL部署日志服务器

    一.简介 LogAnalyzer 是一款syslog日志和其他网络事件数据的Web前端.它提供了对日志的简单浏览.搜索.基本分析和一些图表报告的功能.数据可以从数据库或一般的syslog文本文件中获取 ...

  3. for xml path(&#39;&#39;),root(&#39;&#39;)

    ,,'') SELECT top 10 ROW_NUMBER()OVER(ORDER BY OperationID) as 'Message/MessageId', OperationID as 'I ...

  4. FZU Problem 2136 取糖果

     Problem 2136 取糖果 Time Limit: 1000 mSec    Memory Limit : 32768 KB  Problem Description 有N个袋子放成一排,每个 ...

  5. 后台字符串转化成json

    function remotecontrol() { var progressbar = $("#progressbar"); $.ajax({ url: myurl, type: ...

  6. bootstrap IE8 兼容性处理

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  7. Linux之lsof命令

    lsof是一个列出当前系统中所有打开文件的工具 lsof  filename   显示打开指定文件的所有进程 lsof  -c  string  显示COMMAND中包含指定字符的进程的所有打开文件 ...

  8. The 19th Zhejiang University Programming Contest Sponsored by TuSimple (Mirror)

    http://acm.zju.edu.cn/onlinejudge/showContestProblems.do?contestId=391 A     Thanks, TuSimple! Time ...

  9. C/C++中宏定义#pragma once与 #ifndef的区别

    为了避免同一个文件被include多次,我们可以通过以下两种方式来进行宏定义: 1. #ifndef方式2. #pragma once方式 在能够支持这两种方式的编译器上,二者并没有太大的区别,但是两 ...

  10. Docker Kubernetes Volume 本地数据卷

    Docker Kubernetes Volume 本地数据卷 emptyDir 当Pod分配到Node时,首先创建一个空卷,并挂载到Pod中的容器. Pod中的容器可以读取和写入卷中的文件. 当Pod ...