jQuery原理整理笔记3

1，内容选择器
   （1），:empty找到既没有文本内容也没有子元素的指定元素
       var $div = $("div:empty");
       console.log($div);
   （2），:parent找到有文本内容或有子元素的指定元素
       var $div = $("div:parent");
       console.log($div);
   （3），:contains（text）找到包含指定文本内容的指定元素
       var $div = $("div:contains('我是div')");
       console.log($div);
   （4），:has（selector）找到包含指定子元素的元素
       var $div = $("div:has('span')");
       console.log($div);

   <body>
       <div></div>
       <div>我是div</div>
       <div>他们说我是div</div>
       <div><span></span></div>
       <div><p></p></div>
   </body>

2，属性和属性节点
   属性：对象身上保存的变量就是属性
   如何操作属性：对象.属性名称 = 值；对象.属性名称
               对象["属性名称"] = 值；对象["属性名称"]
   属性节点：在编写HTML代码时，在HTML标签中添加的属性就是属性节点
   如何操作属性节点：DOM元素.setAttribute（"属性名称"，“值”）;
           DOM元素.getAttribute（"属性名称"）;
   两者区别：任何对象都有属性，但只有DOM对象才有属性节点

3，attr和removeAttr，prop和removeProp
   （1），attr(name|pro|key,val|fn)
   传一个参数是获取属性节点的值，传两个参数是设置属性节点的值
   获取：无论找到多少个元素，只返回第一个元素1指定的属性节点的值
   设置：找到多少个就设置多少个，不存在便新增
   $("span").attr("class","box");
   $("span").attr("abc","123");
   （2），removeAttr(name)
   删除属性节点
   会删除所有找到指定的元素节点
   $("span").removeAttr("class");
   （3），prop
   特点和attr一致
   $(function(){
       $("span").eq(0).prop("demo","it666");
       $("span").eq(1).prop("demo","hello");
       console.log($("span").prop("demo"));
   });

   （4），removeProp
   特点和removeAttr一致
   $(function(){
       $("span").removeProp("demo");
   });

   注意：
       prop既能操作属性也能操作属性节点
       返回true/false的（checked，selected，disabled）使用prop()，其它用attr()

4，类操作
   addClass(class|fn)添加一个类，多个用空格隔开
   removeClass([class|fn])删除一个类，多个用空格隔开
   toggleClass(class|fn[,sw])切换类，有就删除没有就添加

5，文本值操作
   html（[val|fn]）和原生的JS的innerHTML一模一样
       设置
       $("div").html("<p>这是一个段落<span>这是一个span</span></p>");
       获取
       console.log($("div").html());
   text（[val|fn]）和原生的JS的innerText一模一样
       设置
       $("div").text("<p>这是一个段落<span>这是一个span</span></p>");
       获取
       console.log($("div").text());
   val（[val|fn|arr]）
       设置
       $("input").val("你想问什么");
       获取
       console.log($("input").val());

6，样式操作

   $(function(){
       //逐个设置
       $("div").css("width","100px");
       $("div").css("height","100px");
       $("div").css("background","red");
       //链式操作（大于3步建议分开）
       $("div").css("width","100px").css("height","100px").css("background","red");
       //批量设置
       ("div").css({
           width:"100px",
           height:"100px",
           background:"red"
       });
       //获取CSS样式
       console.log($("div").css("width"));;
   });

7，尺寸和位置
   width()宽度
   height()高度
   offset()元素距窗口的偏移位
   position()元素距离定位元素的偏移位（只能获取不能设置）
   scrollTop()获取滚动或者网页滚动的偏移位

jQuery原理整理笔记3

猜你喜欢