day24
特性 attributes VS 属性 properties
attribute：
值为string
不区分大小写
会在html中呈现
property：
值为string，boolean，number，object
区分大小写
不影响html
1.如果attributes是本来在DOM对象中就存在的，attributes和
properties的值会同步；
2.如果attributes是本来在DOM对象中就存在的，但是类型为
Boolean，那么attributes和properties的不会同步；
3.如果attributes不是DOM对象内建的属性，attributes和
properties的值不会同步；
操作元素的特性
获取特性的值：attr(name)
设置特性的值：attr(name.value) attr({title:‘new title‘}) atrr(name,function(index,previousValue){})
删除特性:removeAttr(name) 加空格可以多个删除
操作元素的属性
获取属性的值：prop(name)
设置属性的值：prop(name,value)prop(properties)
删除属性:removeProp(name)加空格不能多个删除
在元素中存取数据
获取数据的值：data([name])
设置数据的值：data(name,value) data(object)
删除数据的值：removeData(name)
判断是否有数据：jQuery.hasData(element)
特性属性.html:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title></head><body> ???<img id="logo" src="log.jpg" alt="jQuery logo" class="img-jQuery" title="jQuery logo"> ???<img id="logo2" src="log.jpg" alt="jQuery logo2" class="img-jQuery2" title="jQuery logo2"> ???<input type="checkbox" id="check" tabindex="1" style="width: 50px; height: 50px;" title="check this!" description="just a checkbox" checked> ???<script src="jquery-3.3.1.js"></script> ???<script> ???????/*var logo = document.getElementById(‘logo‘) ???????console.log(logo); ???????console.log(logo.title); ???????console.log(logo.getAttribute("title"));*/ ???????// var check = document.getElementById(‘check‘); ???????/*console.log(check.checked); ???????console.log(check.getAttribute(‘checked‘)); ???????????????check.setAttribute(‘checked‘,false); ???????console.log(check.checked); ???????console.log(check.getAttribute(‘checked‘));*//* ???????console.log(check.description); ???????console.log(check.getAttribute(‘description‘)); ???????check.description = ‘just‘; ???????check.setAttribute(‘description‘,‘asdf‘); ???????console.log(check.description); ???????console.log(check.getAttribute(‘description‘));*/ ???</script></body></html>操作元素的属性.html:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title></head><body> ???<img id="logo" src="log.jpg" alt="jQuery logo" class="img-jQuery" title="jQuery logo"> ???<img id="logo2" src="log.jpg" alt="jQuery logo2" class="img-jQuery2" title="jQuery logo2"> ???<input type="checkbox" id="check" tabindex="1" style="width: 50px; height: 50px;" title="check this!" description="just a checkbox" checked = ‘checked‘> ???<script src="jquery-3.3.1.js"></script> ???<script> ???????$(function () { ???????????//获取属性 ???????????console.log($(‘#check‘).prop(‘checked‘)) ???????????//设置属性 ???????????console.log($(‘#check‘).prop(‘checked‘,true)) ???????????console.log($(‘#check‘).attr(‘checked‘)) ???????????//删除属性 ???????????console.log($(‘#check‘).removeProp(‘checked‘)) ???????????console.log($(‘#check‘).removeProp(‘title‘)) ???????????console.log($(‘#check‘).prop(‘title‘)) ???????????console.log($(‘#check‘).prop(‘checked‘)) ???????}) ???</script></body></html>操作元素的特性.html:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title></head><body> ???<img id="logo" src="log.jpg" alt="jQuery logo" class="img-jQuery" title="jQuery logo"> ???<img id="logo2" src="log.jpg" alt="jQuery logo2" class="img-jQuery2" title="jQuery logo2"> ???<input type="checkbox" id="check" tabindex="1" style="width: 50px; height: 50px;" title="check this!" description="just a checkbox" checked> ???<script src="jquery-3.3.1.js"></script> ???<script> ???????$(function () { ???????????console.log($("#check")); ???????????//获取特性 ???????????console.log($(‘#check‘).attr(‘title‘)) ???????????//设置特性 ???????????$(‘#check‘).attr(‘title‘,‘check that!‘) ???????????console.log($(‘#check‘).attr(‘title‘)) ???????????//删除特性 ???????????$("#check").removeAttr(‘title‘) ???????????console.log($(‘#check‘).attr(‘title‘)) ???????}) ???</script></body></html>在元素中存取数据.html:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title></head><body> ???<img id="logo" src="log.jpg" alt="jQuery logo" class="img-jQuery" title="jQuery logo" data-data1 = ‘123‘> ???<img id="logo2" src="log.jpg" alt="jQuery logo2" class="img-jQuery2" title="jQuery logo2"> ???<input type="checkbox" id="check" ?style="width: 50px; height: 50px;" title="check this!" data-data2 = ‘false‘ description="just a checkbox" checked = ‘checked‘ tabindex="1"> ???<p></p> ???<script src="jquery-3.3.1.js"></script> ???<script> ???????$(function () { ???????????var img = $(‘img‘) ???????????var check = $(‘#check‘) ???????????//获取数据 ???????????console.log(img.data()) ???????????//设置数据 ???????????check.data(‘dat‘,true) ???????????console.log(check.data()) ???????????//删除数据 ???????????check.removeData(‘dat‘) ???????????console.log(check.data()) ???????????//判断是否有数据 ???????????console.log($.hasData(check.get(0))) ???????????console.log($.hasData($(‘p‘).get())) ???????????}) ???</script></body></html>04jQuery操作03
原文地址：https://www.cnblogs.com/shink1117/p/8525720.html