入门jQuery
1.jQuery内容选择器
1.1 empty 作用：找到既没有文本内容也没有子元素的指定元素
var$div=$("div:empty"); console.log($div); <body><div></div></body>
1.2 parent 作用：找到有文本内容有一个子元素的指定元素
var$div=$("div:parent"); console.log($div); <div><p></p></div>
1.3 contains(text) 找到包含文本内容的div，不是内容相等的div
var$div=$("div:contains('我是div')"); console.log($div); <div>我是div</div><div>我是div123</div>
1.4 :has(selector) 找到包含指定子元素的div
var$div=$("div:has('span')"); console.log($div); <div><span></span></div>
2.属性和属性节点
属性：对象身上保存的变量就是属性
属性节点：在编写的HTML代码时，在HTML标签中添加的属性就是属性节点
区别：任何对象都有属性，但只有DOM对象才有属性节点
//对属性进行操作functionPerson() { }；varp=newPerson(); // p.name="A";p["name"]="B"; // console.log(p.name);console.log(p["name"]); <spanname="666"></span>
3.jQuery-attr方法
attr(name|pro|key,val|fn) 作用：获取或设置属性节点的值
如果传递一个参数，代表获取属性节点的值，找到多少个元素都只会返回第一个元素指定的值
如果传递两个参数，代表设置属性节点的值，找到多少设置多少，如果不存在就新增
console.log($("span").attr("class")); $("span").attr("class","box"); $("span").removeAttr("class"); //删除属性节点<spanclass="span1"name="666"></span><spanclass="span2"name="999"></span>
4.jQuery-prop方法
prop方法不仅能操作属性，还能操作属性节点
$(function (){ $("span").eq(0).prop("demo","666"); $("span").eq(1).prop("demo","ln"); console.log($("span").prop("demo")); console.log($("input").prop("checked")); // true / falseconsole.log($("input").attr("checked")); // checked / undefined}); <inputtype="checkbox"checked><spanclass="span1"name="666"></span><spanclass="span2"name="ln"></span>
5.jQuery类操作方法
给div添加样式，了解jQuery操作类的过程
<script>$(function (){ /* 1.addClass 2.removeClass 3.toggleClass */varbtn=document.getElementsByTagName('button') btn[0].onclick=function (){ $('div').addClass('class1'); } btn[1].onclick=function (){ $('div').removeClass('class1') } btn[2].onclick=function (){ $('div').toggleClass('class2') } }); </script><body><button>添加类</button><button>删除类</button><button>切换类</button><div></div></body>
