jQuery选择器
通过传递对应规则的内容(ID、标签名、样式类名...),获取到页面中指定的元素/元素集合。
jQuery选择器获取到的结果是一个jQuery对象,可以使用jQuery中提供的那些属性和方法,但是不能直接的使用浏览器内置的属性和方法。
var $oDiv = jQuery("#div1");//==> $oDiv = $("#div1") -> $===jQuery
// console.log($oDiv.innerWidth());
// console.log($oDiv.attr(""));
// console.log($oDiv.clientWidth);//->undefined $oDiv没有这个属性
// console.log($oDiv.getAttribute(""));//->$oDiv.getAttribute is not a function
JS获取到的结果是属于元素对象/元素集合/节点集合...它们可以使用浏览器为其提供的那些天生自带的属性和方法。
var oDiv = document.getElementById("div1");
// console.log(oDiv.clientWidth);
// console.log(oDiv.getAttribute("zhufeng"));
// console.log(oDiv.innerWidth());//->oDiv.innerWidth is not a function 原生的JS对象是不能直接的使用jQuery中提供的属性和方法的
// console.log(oDiv.attr(""));
关于原生JS对象和jQuery对象之间的转换
//->原生转变为jQuery: $(原生JS对象)
//console.log($(oDiv).attr(""));
//->jQuery转变为原生：直接通过索引获取对应的元素对象即可
//console.log($oDiv[0].getAttribute(""));
//$oDiv.get(0); <==> $oDiv[0] 都是通过索引来获取指定位置的元素对象(JS原生对象)
更多的jQuery选择器
//$("#div1")
//$("div")
//$(".w100")
//$("*")
//$("#div1,div,.w100") 把每一个选择器获取到的jQuery对象最后融合在一起,一起获取到
//$("#div1 li") 在子子孙孙级中进行查找
//$("#div1>li") 在子集中进行查找
//$("#div3+") 获取它的下一个弟弟
//$("#div3+ul") 获取它的下一个弟弟并且标签名是ul的
//$("#div3~") 获取它的所有弟弟元素
//$("#div3~ul") 在所有的弟弟元素中查找标签名为ul的
//$("#div1>div:not(.w100)") #div1下所有子集DIV中样式类名不包含w100的
//$("#div1>div:eq(0)") 通过索引获取集合中的某一个,但是获取的结果依然是一个jQuery对象(而之前讲到的get方法,虽然也是通过索引来获取,但是获取到的结果是一个JS原生对象)
//$("#div1>div:gt(1)") 大于索引1的(不包含索引1这一项)
//$("#div1>div:lt(1)") 小于索引1的(不包含索引1这一项)
//$("#div1 li:contains('aa')") 获取的所有LI中内容包含珠峰的
//$("#div1 div:has(ul)") 在所有DIV中包含UL的
//$("#div1>*:nth-child(1)") 获取集合中的第一个 $("#div1>*:eq(1)") 获取集合中的第二个(索引为1)
