1. Hay dos tipos de atributos:
Uno son las características (atributos inherentes), como id, class, src, value, href, alt, title, etc .; el otro
son atributos nuevos (atributos personalizados)
2.prop () solo puede obtener atributos inherentes, attr () puede obtener todos los atributos, incluidos los nuevos
<div id="test" class="myTest" myAttribute="ccy">div1</div>
<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
console.log( $('div').attr('id'),
$('div').attr('class'),//获取固有属性
$('div').attr('myAttribute') );//获取新增属性
console.log( $('div').prop('id'),
$('div').prop('class'),
$('div').prop('myAttribute') );
</script>
Efecto: la primera línea es el resultado obtenido usando attr (), la segunda línea es el resultado obtenido usando prop (), la última columna es el nuevo atributo, prop () devuelve indefinido
3.prop () corresponde a la propiedad en js, generalmente llamada con un punto '.'
attr () corresponde a getAttribute () y setAttribute () en js
console.log(test.getAttribute('id'), test.getAttribute('class'), test.getAttribute('myAttribute'));
console.log(test.id, test.className, test.myAttribute);
Cuando use la propiedad para obtener el nombre de la clase, debe usar'.className ', cuando use el atributo, solo necesita usar' clase 'para
tener el mismo efecto que el anterior
4. Cuando prop () y attr () toman dom, si hay varios doms coincidentes, solo se toma el primero
<div id="test">div</div>
<div id="test2">div2</div>
console.log ( $('div').attr('id') );//只输出test
console.log ( $('div').prop('id') );//只输出test
Los atributos de configuración prop () y attr () en dom pueden afectar a todas las etiquetas coincidentes
Cuando prop () y attr () establecen atributos en dom, si hay varios doms coincidentes, todos se establecerán en atributos; se puede establecer un atributo o varios atributos a la vez
5.1 Establecer un atributo:
<div>div1</div>
<div>div1</div>
<p>ppp</p>
<p>ppp</p>
<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
//设置属性可影响一组
$('div').attr('class', 'test');
$('p').prop('class', 'test');
</script>
Efecto: los atributos de la clase están todos configurados
5.2 Establecer múltiples atributos (los parámetros pueden ser objetos):
//设置多个属性
$('div').attr({
class: 'test',
myAttribute: 'ccy'});
$('p').prop({
class: 'test',
myAttribute: 'ccy'});
Efecto: establece varios atributos a la vez. Dado que prop solo manipula atributos inherentes, el atributo myAttribute no se establece
6. Obtener propiedades desarmadas
attr () obtiene propiedades no establecidas y devuelve undefined;
prop () obtiene propiedades inherentes no configuradas y devuelve nulo (prop () obtiene nuevas propiedades y devuelve undefined, independientemente de si está configurado o no)
<div>div1</div>
<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
console.log( $('div').attr('id'), $('div').attr('myAttribute'));//undefined undefined
console.log( $('div').prop('id'));//空值
</script>
7.attr () no puede obtener dinámicamente el estado de la etiqueta, prop () puede
Cuando la etiqueta de entrada no está configurada como marcada, independientemente de si la entrada está seleccionada o no, usar attr () para obtener el atributo marcado devolverá undefined; cuando la
etiqueta de entrada está configurada como marcada, independientemente de si la entrada está seleccionada, usando attr () para obtener el atributo comprobado es todo Devolver comprobado;
lo que indica que attr () solo reconoce si un determinado atributo está escrito en la etiqueta en la superficie y no puede obtener dinámicamente el atributo
<ul>喜欢吃的东西?
<li class="title">
<input type="checkbox"><!--没有设置checked属性-->
<span>以下都喜欢</span>
</li>
<li>
<input type="checkbox">
<span>苹果</span>
</li>
<li>
<input type="checkbox">
<span>香蕉</span>
</li>
<li>
<input type="checkbox">
<span>梨</span>
</li>
</ul>
<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
$('.title input').change(function(){
console.log($('.title input').attr('checked'));
})//change捕获状态改变事件
</script>
Efecto:
cuando se agrega el atributo .title a marcado (marcado está seleccionado de forma predeterminada)
<li class="title">
<input type="checkbox" checked>
<span>以下都喜欢</span>
</li>
Escrito <input type="checkbox" checked='123'>como el mismo efecto
Cuando hace clic en .title y agrega el atributo marcado a la etiqueta, el accesorio puede reaccionar ante él:
<ul>喜欢吃的东西?
<li class="title">
<input type="checkbox"><!--没有设置checked属性-->
<span>以下都喜欢</span>
</li>
<li>
<input type="checkbox">
<span>苹果</span>
</li>
<li>
<input type="checkbox">
<span>香蕉</span>
</li>
<li>
<input type="checkbox">
<span>梨</span>
</li>
</ul>
<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
$('.title input').change(function(){
console.log($('.title input').prop('checked'));
})
</script>
Efecto: cuando el estado no seleccionado se convierte en el estado seleccionado, devuelve verdadero; cuando cambia del estado seleccionado al estado no seleccionado, devuelve falso
Si la etiqueta se establece en el estado seleccionado predeterminado, puede funcionar y la función es la misma: por lo
tanto, podemos juzgar si la primera opción está seleccionada de acuerdo con el valor booleano devuelto por prop (): si está seleccionado, todos las opciones deben estar seleccionadas; si no está marcada, desmarque todas las opciones
$('.title input').change(function(){
// console.log($('.title input').prop('checked'));
if ( $('.title input').prop('checked') ){
$('ul input').prop('checked', true);//.title下的input被选中时，所有input都被选中
}else {
$('ul input').prop('checked', false);//.title下的input取消选中时，所有input都没被选中
}
})
efecto:
8. Eliminar atributos removeAttr (), removeProp ()
8.1 removeAttr ():
Agregue una clase a ul
y elimine este atributo:
$('ul').removeAttr('class');
Efecto:
agregue un nuevo atributo:
$('ul').attr('aaa','aaa');
Luego elimine:
$('ul').removeAttr('aaa');
8.2 removeProp () solo puede eliminar las nuevas propiedades establecidas por prop ()
prop () establece la nueva propiedad, aunque no se muestra en la etiqueta, no hay correspondencia, pero la configuración aún está establecida, puede tomar este valor de propiedad
$('ul').prop('aaa', 'aaa');
Efecto: No se muestra.
Cuando tomo este atributo:
console.log( $('ul').prop('aaa') );//输出为aaa
Visible, la configuración es correcta, pero no se muestra
Cuando uso removeProp () para eliminar el nuevo accesorio:
$('ul').removeProp('aaa');
console.log( $('ul').prop('aaa') );//返回undefined
Cuando agrego una propiedad inherente y la elimino:
$('ul').prop('id', 'aaa');
console.log( $('ul').prop('id') );
$('ul').removeProp('id');
console.log( $('ul').prop('id') );
Efecto: No se elimina
, por lo tanto, si la propiedad inherente no es necesaria, se recomienda establecerla como falsa o vacía en lugar de eliminarla.