04-jQuery的属性操作

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

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

attr()

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

       //获取值：attr()设置一个属性值的时候 只是获取值var id = $('div').attr('id')console.log(id)var cla = $('div').attr('class')console.log(cla)//设置值//1.设置一个值 设置div的class为box$('div').attr('class','box')//2.设置多个值，参数为对象，键值对存储$('div').attr({name:'hahaha',class:'happy'})

View Code

removeAttr()

移除属性

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

View Code

prop()

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

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

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

语法：

返回属性的值：

$(selector).prop(property)

View Code

设置属性和值：

$(selector).prop(property,value)

View Code

设置多个属性和值：

$(selector).prop({property:value, property:value,...})

View Code

关于attr()和prop()的区别

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>男<input type="radio" id='test' name="sex"  checked/>女<input type="radio" id='test2' name="sex" /><button>提交</button><script type="text/javascript" src="jquery-3.3.1.js"></script><script type="text/javascript">$(function(){//获取第一个inputvar el = $('input').first();//undefined  因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefined
            console.log(el.attr('style'));// 输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象
            console.log(el.prop('style'));console.log(document.getElementById('test').style);$('button').click(function(){alert(el.prop("checked") ? "男":"女");})})</script></body>
</html>

View Code

什么时候使用attr()，什么时候使用prop()？

1.是有true,false两个属性使用prop();

2.其他则使用attr();

addClass（添加多个类名）

为每个匹配的元素添加指定的类名。

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

View Code

还可以为匹配的元素添加多个类名

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

View Code

removeClass

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

移除指定的类（一个或多个）

$('div').removeClass('box')；

View Code

移除全部的类

$('div').removeClass();

View Code

可以通过添加删除类名，来实现元素的显示隐藏

代码如下：

var tag  = false;$('span').click(function(){if(tag){$('span').removeClass('active')tag=false;}else{$('span').addClass('active')tag=true;}
})

View Code

案例：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">.active{color: red;}</style>
</head>
<body><ul><li class="item">张三</li><li class="item">李四</li><li class="item">王五</li></ul><script type="text/javascript" src="jquery-3.3.1.js"></script><script type="text/javascript">$(function(){$('ul li').click(function(){// this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
                 $(this).addClass('active').siblings('li').removeClass('active');})})</script></body>
</html>

View Code

toggleClass

如果存在（不存在）就删除（添加）一个类。

语法：toggleClass('box')

$('span').click(function(){//动态的切换class类名为active$(this).toggleClass('active')
})

View Code

html

获取值：

语法;

html() 是获取选中标签元素中所有的内容

$('#box').html();

View Code

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

$('#box').html('<a href="https://www.baidu.com">百度一下</a>');

View Code

text

获取值：

text() 获取匹配元素包含的文本内容

语法：

$('#box').text();

View Code

设置值：
设置该所有的文本内容

$('#box').text('<a href="https://www.baidu.com">百度一下</a>');

View Code

注意：值为标签的时候不会被渲染为标签元素只会被当做值渲染到浏览器中

val

获取值：

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

设置值：

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

View Code

05-使用jQuery操作input的value值

表单控件是我们的重中之重，因为一旦牵扯到数据交互，离不开form表单的使用，比如用户的注册登录功能等

那么通过上节知识点我们了解到，我们在使用jquery方法操作表单控件的方法：

$(selector).val()//设置值和获取值

View Code

看如下HTML结构：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><form action=""><input type="radio" name="sex"  value="112" />男<!-- 设置cheked属性表示选中当前选项 --><input type="radio" name="sex"  value="11" checked="" />女<input type="radio" name="sex"  value="11" />gay<input type="checkbox" value="a" checked=""/>吃饭<input type="checkbox" value="b" />睡觉<input type="checkbox" value="c" checked=""/>打豆豆<!-- 下拉列表 option标签内设置selected属性 表示选中当前 --><select name="timespan" id="timespan" class="Wdate"   >  <option value="1">8:00-8:30</option>  <option value="2" selected="">8:30-9:00</option>  <option value="3">9:00-9:30</option>  </select>  <input type="text" name="" id="" value="111" /></form></body>
</html>

View Code

页面展示效果：

操作表单控件代码如下：

<script type="text/javascript" src="jquery-3.3.1.js"></script><script type="text/javascript">$(function(){// 一、获取值//1.获取单选框被选中的value值
                console.log($('input[type=radio]:checked').val())//2.复选框被选中的value,获取的是第一个被选中的值
                console.log($('input[type=checkbox]:checked').val())//3.下拉列表被选中的值var obj = $("#timespan option:selected");// 获取被选中的值var  time  = obj.val();  console.log(time);// 获取文本var  time_text  = obj.text();  console.log("val:"+time+" text"+ time_text );//4.获取文本框的value值
                console.log($("input[type=text]").val())//获取文本框中的值// 二.设置值//1.设置单选按钮和多选按钮被选中项
                $('input[type=radio]').val(['112']);$('input[type=checkbox]').val(['a','b']);//2.设置下拉列表框的选中值，必须使用select/*因为option只能设置单个值，当给select标签设置multiple。那么我们设置多个值,就没有办法了，但是使用select设置单个值和多个值都可以*/$('select').val(['3','2'])//3.设置文本框的value值
                $('input[type=text]').val('试试就试试')})</script>

View Code

06-jQuery的文档操作***

之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作。通过js的DOM的操作，大家也能发现，大量的繁琐代码实现我们想要的效果。那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档。

看一个之前我们js操作DOM的例子：

var oUl = document.getElementsByTagName('ul')[0];
var oLi = document.createElement('li');
oLi.innerHTML = '赵云';
oUl.appendChild(oLi);

View Code

一.插入操作

知识点1：

语法：

父元素.append(子元素)

View Code

解释：追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素

代码如下：

var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$('ul').append('<li>1233</li>');
$('ul').append(oli);
$('ul').append($('#app'));

View Code

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

知识点2：

语法：

子元素.appendTo(父元素)

View Code

解释：追加到某元素子元素添加到父元素

$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')

View Code

PS:要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素

知识点3：

语法：

父元素.prepend(子元素)；

View Code

解释：前置添加，添加到父元素的第一个位置

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

View Code

知识点4：

语法：

父元素.prependTo(子元素)；

View Code

解释：后置添加，添加到父元素的最后一个位置

$('<a href="#">路飞学诚</a>').prependTo('ul')

View Code

知识点5：

语法：

父元素.after(子元素)；
子元素.inserAfter(父元素)；

View Code

解释：在匹配的元素之后插入内容

$('ul').after('<h4>我是一个h3标题</h4>')
$('<h5>我是一个h2标题</h5>').insertAfter('ul')

View Code

知识点6：

语法：

父元素.before(子元素)；
子元素.inserBefore(父元素)；

View Code

解释：在匹配的元素之前插入内容

$('ul').before('<h3>我是一个h3标题</h3>')
$('<h2>我是一个h2标题</h2>').insertBefore('ul')

View Code

二、克隆操作

语法：

$(选择器).clone();

View Code

解释：克隆匹配的DOM元素

$('button').click(function() {// 1.clone()：克隆匹配的DOM元素// 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)$(this).clone(true).insertAfter(this);
})

View Code

三、修改操作

知识点1：

语法：

$(selector).replaceWith(content);

View Code

将所有匹配的元素替换成指定的string、js对象、jquery对象。

//将所有的h5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>')
//将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));

View Code

知识点2：

语法：

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

View Code

解释：替换所有。将所有的h2标签替换成p标签。

$('<br/><hr/><button>按钮</button>').replaceAll('h4')

View Code

四、删除操作

知识点1：

语法：

$(selector).remove();

View Code

解释：删除节点后，事件也会删除（简言之，删除了整个标签）

$('ul').remove();

View Code

知识点2：

语法：

$(selector).detach();

View Code

解释：删除节点后，事件会保留

 var $btn = $('button').detach()//此时按钮能追加到ul中$('ul').append($btn)

View Code

知识点3：

语法：

$(selector).empty();

View Code

解释：清空选中元素中的所有后代节点

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

View Code

转载于:https://www.cnblogs.com/Black-rainbow/p/9122775.html

python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)...相关推荐

python 全栈开发，Day116(可迭代对象,type创建动态类,偏函数,面向对象的封装,获取外键数据,组合搜索,领域驱动设计(DDD))...
昨日内容回顾 1. 三个类 ChangeList,封装列表页面需要的所有数据.StarkConfig,生成URL和视图对应关系 + 默认配置 AdminSite,用于保存数据库类和处理该类的对象 ...
路飞学城python全栈开发_[Python] 老男孩路飞学城Python全栈开发重点班骑士计划最新100G...
简介老男孩&路飞学城Python全栈开发重点班课程,作为Python全栈教学系列的重头戏,投入了全新的课程研发和教学精力,也是Python骑士计划的核心教学,由ALEX老师开班镇守,一线技术 ...
python 全栈开发，Day86(上传文件,上传头像,CBV,python读写Excel,虚拟环境virtualenv)
python 全栈开发,Day86(上传文件,上传头像,CBV,python读写Excel,虚拟环境virtualenv) 一.上传文件上传一个图片使用input type="file& ...
python 全栈开发，Day136(爬虫系列之第3章-Selenium模块)
python 全栈开发,Day136(爬虫系列之第3章-Selenium模块) 一.Selenium 简介 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直 ...
python视频网站项目_价值2400元的python全栈开发系列Flask Python Web 网站编程视频
2 e/ b4 F1 c' H$ D! X 价值2400元的python全栈开发系列Flask Python Web 网站编程视频-优品课堂' z3 _1 Y7 ]6 j4 z # p# r# g* ...
python全栈开发工程师_【2018重磅巨献】老男孩Python高级全栈开发工程师第三期...
2018年老男孩python全栈第三期老男孩python全栈3期老男孩教育Python全栈开发为国内首家专注python全方面开发的教育机构老男孩Python全栈第三期课程详细目录,高清不加密! ...
python 全栈开发，Day103(微信消息推送,结算中心业务流程)
python 全栈开发,Day103(微信消息推送,结算中心业务流程) 昨日内容回顾第一部分:考试题(Python基础)第二部分:路飞相关 1. 是否遇到bug?难解决的技术点?印象深刻的事?- o ...
python web全栈开发_价值2400元的python全栈开发系列Flask Python Web 网站编程视频教程...
课程目录 01-计算机基础常识.mp4 02-Python语言概览.安装与运行.mp4 03-Python 变量.数据类型及存储.mp4 04-Python 常用数据类型概览.mp4 05-数值与字符 ...
python 全栈开发，Day125(HTML5+ 初识,HBuilder,夜神模拟器,Webview)
python 全栈开发,Day125(HTML5+ 初识,HBuilder,夜神模拟器,Webview) 昨日内容回顾 1.增删改查:增:db.collections.insert({a:1}) // ...

python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)...

04-jQuery的属性操作

05-使用jQuery操作input的value值

06-jQuery的文档操作***

python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)...相关推荐

最新文章

热门文章