JQ中的属性操作及获取元素样式和修改样式

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标签的第一个标签，括号里填几就是获取第几个标签