爱站程序员基地jQuery知识点总结（三）
jQuery内容选择器
jQuery的内容选择器总共有四个，分别为empty，parent，contains(text)，has(selector)。
-
empty选择器
匹配所有不包含子元素或者文本的空元素 -
parent选择器
匹配含有子元素或者文本的元素 -
contains(text)选择器
匹配包含给定文本的元素 -
has(selector)选择器
匹配含有选择器所匹配的元素的元素
<script>//empty 内容为空//parent 有内容和标签//contains(text) 包含xx内容//has(selector) 包含xx标签$(function(){//emptyvar $div=$(\"div:empty\");console.log(\"empty\");console.log($div);//parentvar $div2=$(\"div:parent\");console.log(\"parent\");console.log($div2);//contains(text)var $div3=$(\"div:contains(\'我是div\')\");console.log(\"contains(text)\");console.log($div3);//has(selector)var $div4=$(\"div:has(span)\");console.log(\"has(selector)\");console.log($div4);})</script><style>div{width: 100px;height: 100px;margin: 5px;background-color: red;}</style><body><div>我是div</div><div></div><div>你好我是div</div><div>你好</div><div><span></span></div><div><p></p></div></body></html>
js中的属性和属性节点（回顾）
-
什么是属性:对象上的变量就是属性
-
操作属性
function Creat(){this.age=\"17\";}var c=new Creat();console.log(c.age);c[name]=\"张三\";console.log(c[name]);
- 什么是属性节点：在HTML标签中添加的属性就是属性节点（只有DOM元素有属性节点）
- 操作属性节点
<script>window.onload=function(){//4.操作属性节点var oTxt=document.getElementsByTagName(\"input\")[0];//这里将name为text1的文本框变成了，name为btn1的按钮oTxt.setAttribute(\"type\",\"button\"); //setAttribute(\"属性节点\",\"要设置的值\")oTxt.setAttribute(\"name\",\"btn1\");//获取DOM元素的属性节点console.log(oTxt.getAttribute(\"name\"));}</script><body><input type=\"text\" name=\"text1\" value=\"我是text\">
操作属性节点attr( )
attr( )用来获取（一个参数），设置属性节点（两个参数）
-
获取属性节点
对象.attr(“属性节点”)
注意！！！获取属性节点只能获取匹配的第一个属性节点！
- 设置属性节点
对象.attr(“属性节点”,“值”)
- 新增属性节点
对象.attr(“属性节点”,“值”)
如果设置的属性节点不存在，系统会新增一个属性节点
- 删除属性节点
对象.removeAttr(“属性节点”)
删除多个用空格隔开
操作属性prop( )
属性
prop操作属性和attr相似，都有增加，删除，获取等操作。
prop也可以操作属性节点，prop和attr操作属性节点的区别
- prop返回true或者false
- attr返回字符串或者undefined
操作类class
- 添加类addClass( )
添加多个类用逗号隔开
- 删除类removeClass( )
- 切换类toggleClass( )
有则添加，没有则删除
<script>$(function(){var oBtn1=document.getElementsByTagName(\"input\")[0];var oBtn2=document.getElementsByTagName(\"input\")[1];var oBtn3=document.getElementsByTagName(\"input\")[2];oBtn1.onclick=function(){//添加类，添加多个类用逗号隔开$(\"div\").addClass(\"class1 class2\");};oBtn2.onclick=function(){//删除类$(\"div\").removeClass(\"class1 class2\");};oBtn3.onclick=function(){//切换类，有则添加，没有则删除$(\"div\").toggleClass(\"class2\");};})</script><body><input type=\"button\" value=\"添加类\"><input type=\"button\" value=\"删除类\"><input type=\"button\" value=\"切换类\"><div></div></body>
