JQ属性操作
我们在JQ中,想要获取属性值怎么办呢,有两个方式,一个呢使用attr和prop,而这两个方式呢,是有区别的,我们来看一下
attr();常用语常规属性的使用,也可以用于自定义属性的值
prop();常用于可简写属性值的获取,无法获取自定义属性值
一般在开发的时候都用prop,禁用值在获取的时候是true和false
我们注意一点,这个禁用值是什么,为什么开发的时候都用 的是prop呢,我们来看一下:
禁用和输入字段的简单jQuery代码段,例如,用户无法更改表单上文本框的值。
<!-- disabled禁用 -->
<input type="text" class="inCls" disabled default="hha" />
那我们在开发的时候为什么一般都用prop呢:
Prop和attr的作用类似
相同点:两者都可以获取属性值和设置属性值
不同点:在处理checkbox上,建议使用prop,原因在于IE浏览器不兼容,因为是相似的所有个人建议使用prop
我们来看一下attr和prop的用法
console.log("attr获取属性值",$('input').attr("class"),$('input').attr("disabled"),$('input').attr("default"));
console.log("prop获取属性值",$('input').prop("class"),$('input').prop("disabled"),$('input').prop("default"));
元素获取及样式修改
我们来看一下元素的获取及修改是怎么做到的,我们用JQ的理念就是写得少,做得多,以及用哪些方式来写
我们先给一个用来测试的标签
<button class="btn">show jquetry1</button>
<button id="btnId" class="btn">show jquetry2</button>
<button class="btn">show jquetry3</button>
<hr>
<a href="http://www.baidu.com">百度</a>
<a href="www.sina.cn">新浪</a>
<hr>
<input type="text" />
<input type="text" />
<input type="submit" />
我们先来看一下以JS的方式获取元素的方式是怎么获取的
let btns=document.getElementsByTagName("button");
let btnsCls = document.getElementsByClassName("btn")
console.log(btnsCls);
这是以JS的方式来获取元素的标签和通过class选择器来获取的标签,底下的console.log(获取标签后的变量名)。
我们接下来来看一下用JQ获取标签的方式有哪些
// Jquery获取到的元素都是以组的形式存在 书写规范,如果用JQ获取元素标签,变量前面必须加($)$btns=$('button');
let $btns=$('button');
let $btnsCls=$('.btn');
let $btnId=$("#btnId");
let $btnAttr=$('a[href^="www"]');
let $input=$('input:not([type="submit"])');
let $nth=$('button:nth-of-type(1)');
console.log($nth);
我们在JQ中获取到的元素都是以组的形式存在,而JS中的获取标签,id选择器是以一个元素来获取的,和JS另外的标签选择器,类选择器,通过name属性获取到的都一样,这三个获取到的都是一组数据。我们在用JQ获取的时候,前面都要加上一个$符,这是书写规范,而这个里面也可以通过class id等属性来获取标签,里面还有一个a[href^=“www”],从href属性获取到的以www开头的标签,input:not([type="submit])标签,这个Not的意思就是获取除type=submit以外的input标签,button:nth-of-type(1)获取的是好几个button标签的第一个标签,括号里填几就是获取第几个标签