- 属性操作
- 操作input中的value
- 文档操作***
- ...
- ...
- ...
- ...
- ...
一, 属性操作
jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作
- html属性操作：是对html文档中的属性进行读取，设置和移除操作。
比如:
- 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‘}) - removeAttr() 移除属性用法演示
//删除单个属性$(‘#box‘).removeAttr(‘name‘);$(‘#box‘).removeAttr(‘class‘);//删除多个属性$(‘#box‘).removeAttr(‘name class‘);
- attr() 设置属性值或者 返回被选元素的属性值
- DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。
比如:
- prop() 设置或返回被选元素的属性和值。用法演示
//返回属性的值：$(selector).prop(property)//设置属性和值：$(selector).prop(property,value)//设置多个属性和值：$(selector).prop({property:value, property:value,...}) - removeProp()用法演示
//删除单个属性$(‘#box‘).removeProp(‘name‘);$(‘#box‘).removeProp(‘class‘);//删除多个属性$(‘#box‘).removeProp(‘name class‘);
- prop() 设置或返回被选元素的属性和值。
- 类样式操作：是指对DOM属性className进行添加，移除操作。
比如:
- addClass() 为每个匹配的元素添加指定的类名; 还可以为匹配的元素添加多个类名用法演示
//为每个匹配的元素添加指定的类名。$(‘div‘).addClass("box");//追加一个类名到原有的类名//还可以为匹配的元素添加多个类名$(‘div‘).addClass("box box2");//追加多个类名 - removeClass() 从所有匹配的元素中删除全部或者指定的类。且 也可以通过添加删除类名, 来实现元素的显示隐藏(代码如下):用法演示
//移除指定的类（一个或多个）$(‘div‘).removeClass(‘box‘)；//移除全部的类$(‘div‘).removeClass();//通过添加删除类名，来实现元素的显示隐藏var tag ?= false; ???????$(‘span‘).click(function(){ ???????????if(tag){ ???????????????$(‘span‘).removeClass(‘active‘) ???????????????tag=false; ???????????}else{ ???????????????$(‘span‘).addClass(‘active‘) ???????????????tag=true; ???????????} ???})add+remove 小案例<!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> - toggleClass() 切换: 如果存在（不存在）就删除（添加）一个类。用法演示
$(‘span‘).click(function(){ ???//动态的切换class类名为active ???$(this).toggleClass(‘active‘)})
- addClass() 为每个匹配的元素添加指定的类名; 还可以为匹配的元素添加多个类名
- 值操作：是对DOM属性value进行读取和设置操作。
比如:
- html() 获取值:(获取选中标签元素中所有的内容)/ 设置值:(设置该元素的所有内容 会替换掉 标签中原来的内容)用法演示
//获取值：获取选中标签元素中所有的内容var html_name = $(‘#box‘).html();//设置值：设置该元素的所有内容 会替换掉 标签中原来的内容$(‘#box‘).html(‘<a href="https://www.baidu.com">百度一下</a>‘);
- text() 获取值：(获取匹配元素包含的文本内容)/ 设置值：(设置该所有的文本内容)用法演示
//获取值： html() 是获取选中标签元素中所有的内容$(‘#box‘).html();//设置值：设置该元素的所有内容 会替换掉 标签中原来的内容$(‘#box‘).html(‘<a href="https://www.baidu.com">百度一下</a>‘);注意：注意：注意：注意：注意：注意：注意：注意：注意： ????????????????????????值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
- val() 获取值：(用于表单控件中获取值，比如input textarea select等等)设置值：用法演示
//获取值：val()用于表单控件中获取值，比如input textarea select等等//设置值：$(‘input‘).val(‘设置了表单控件中的值‘)；
- html() 获取值:(获取选中标签元素中所有的内容)/ 设置值:(设置该元素的所有内容 会替换掉 标签中原来的内容)
关于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(){ ???????????//获取第一个input ???????????var 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>什么时候使用attr()，什么时候使用prop()？
1.是有true,false两个属性使用prop();
2.其他则使用attr();
二, 操作input中的value
此处用到的就是 val方法, 且涉及到的是 form表单单选,多选选项时, 往后端发送的一些可识别,且方便获取,处理的数据.
正常情况下, 单选表单中的 checked 属性的值为 "checked", 倘若,每回都给后端发 此值, 那么后端根本无法处理, 且, 此checked的属性的值不能进行随便的更改, 只能通过 val来更改.
详情请见代码:
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>
Jquery 操作form表单控件代码如下:
<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>三, 文档操作***(重点)
jQuery的文档操作 就是 js中对DOM操作 进行了封装后提供的方法:
1, 插入操作:
- append:
父元素.append(子元素) 追加某元素. 在父元素中 最后追加新的元素, 子元素可以为: stirng, element(js对象), jquery元素;
// 代码 如下var oli = document.createElement(‘li‘);oli.innerHTML = ‘哈哈哈‘;$(‘ul‘).append(‘<li>1233</li>‘);$(‘ul‘).append(oli);$(‘ul‘).append($(‘#app‘));
ps: 如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作
- appendTo:
子元素.appendTo(父元素) 把子元素追加到父元素的里面的最后, 子元素同样可以是: stirng, element(js对象), jquery元素;
$(‘<li>天王盖地虎</li>‘).appendTo($(‘ul‘)).addClass(‘active‘)
- prepend:
父元素.prepend(子元素) 前置添加， 添加到父元素的第一个位置
$(‘<a href="#">路飞学诚</a>‘).prependTo(‘ul‘)
- prependTo:
子元素.prependTo(父元素) 前置添加， 添加到父元素的第一个位置
$(‘<a href="#">路飞学诚</a>‘).prependTo(‘ul‘)
- after:
兄弟元素.after(要插入的兄弟元素) 在匹配的元素之后插入内容
$(‘ul‘).after(‘<h4>我是一个h3标题</h4>‘)
- inserAfter:
要插入的兄弟元素.inserAfter(兄弟元素) 在匹配的元素之后插入内容
$(‘<h5>我是一个h2标题</h5>‘).insertAfter(‘ul‘)
- before:
兄弟元素.before(要插入的兄弟元素) 在匹配的元素之前插入内容
$(‘ul‘).before(‘<h3>我是一个h3标题</h3>‘)
- inserBefore:
要插入的兄弟元素.inserBefore(兄弟元素) 在匹配的元素之前插入内容
$(‘<h2>我是一个h2标题</h2>‘).insertBefore(‘ul‘)
2, 克隆操作:(鸡肋)
语法：
$(选择器).clone();
解释：克隆匹配的DOM元素
$(‘button‘).click(function() { ?// 1.clone()：克隆匹配的DOM元素 // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力) ?$(this).clone(true).insertAfter(this);})3, 修改操作:
- replaceWich: 将所有匹配的元素替换成指定的string、js对象、jquery对象
//语法：$(selector).replaceWith(content);// 实例://将所有的h5标题替换为a标签$(‘h5‘).replaceWith(‘<a href="#">hello world</a>‘)//将所有h5标题标签替换成id为app的dom元素$(‘h5‘).replaceWith($(‘#app‘));
- replaceAll: 替换所有
// 语法：$(‘<p>哈哈哈</p>‘)replaceAll(‘h2‘);// 解释：替换所有。将所有的h2标签替换成p标签。$(‘<br/><hr/><button>按钮</button>‘).replaceAll(‘h4‘)
4, 删除操作:
- remove 删除节点后，事件也会删除（简言之，删除了整个标签）
//语法：
$(selector).remove();
$(‘ul‘).remove(); // 删除所有 ul 标签
- detach 删除节点后，事件会保留
// 语法：$(selector).detach(); // 实例 var $btn = $(‘button‘).detach() //此时按钮能追加到ul中 $(‘ul‘).append($btn)
- empty 清空选中元素中的所有后代节点
// 语法：$(selector).empty(); //清空掉ul中的子元素，保留ul$(‘ul‘).empty()
...
...
...
...
...
前端 之 jQuery: ?属性操作; ?操作input中的value; ?文档操作***(二)
原文地址：https://www.cnblogs.com/Fushengliangnian/p/9506877.html