js常用属性

最新推荐文章于 2024-06-17 09:01:02 发布

夜_游_神

最新推荐文章于 2024-06-17 09:01:02 发布

阅读量422

点赞数

分类专栏： js 小程序文章标签： js 遍历过滤属性插入

本文链接：https://blog.csdn.net/jibenjun/article/details/79393789

版权

小程序同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

首先是几个比较容易常见的属性

 
         $( 
         "p" 
         ).dblclick( 
         function 
         () { 
        
         $( 
         this 
         ).css( 
         "color" 
         ,  
         "green" 
         ); 
        
         }) 
        
         //当鼠标指针穿过元素 
        
         $( 
         "p" 
         ).mouseenter( 
         function 
         () { 
        
         $( 
         this 
         ).text( 
         "鼠标指针穿过元素" 
         ); 
        
         }) 
        
         //鼠标指针离开元素 
        
         $( 
         "p" 
         ).mouseleave( 
         function 
         () { 
        
         $( 
         this 
         ).text( 
         "鼠标指针离开元素" 
         );<br>}) 
        
         //鼠标指针移动到元素上，并按下鼠标按键 
        
         $( 
         "p" 
         ).mousedown( 
         function 
         () { 
        
         $( 
         this 
         ).text( 
         "鼠标指针移动到元素上方，并按下鼠标按键" 
         ); 
        
         }) 
        
         //在元素上松开鼠标按钮时 
        
         $( 
         "p" 
         ).mouseup( 
         function 
         () { 
        
         $( 
         this 
         ).text( 
         "在元素上松开鼠标按钮时" 
         ); 
        
         }) 
        
         //元素获得焦点 
        
         $( 
         ":text" 
         ).focus( 
         function 
         () { 
        
         $( 
         this 
         ).val( 
         "元素获得焦点" 
         ); 
        
         }) 
        
         //元素失去焦点 
        
         $( 
         ":text" 
         ).blur( 
         function 
         () { 
        
         $( 
         this 
         ).val( 
         "元素失去焦点" 
         ); 
        
         })

　　插入方法：

 
         var  
         i = $( 
         "#ul1 li" 
         ).length; 
        
         //append末尾插入 
        
         $( 
         "#btn1" 
         ).click( 
         function 
         () { 
        
         i++; 
        
         $( 
         "#ul1" 
         ).append( 
         "<li>add"  
         + i +  
         "</li>" 
         ) 
        
         }) 
        
         //prepend头部插入 
        
         var  
         j = 1; 
        
         $( 
         "#btn2" 
         ).click( 
         function 
         () { 
        
         j--; 
        
         $( 
         "#ul1" 
         ).prepend( 
         "<li>add"  
         + j +  
         "</li>" 
         ) 
        
         })<br>before() 
         //元素之前<br>after()//元素之后

　　移除方法

 
         $( 
         "#btn4" 
         ).click( 
         function 
         () { 
        
         $( 
         "#ul1 li:first" 
         ).remove() 
        
         })

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素清空

父级属性

 
         parent() 被选元素的直接父元素 
        
         parents() 被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>) 
        
         parentsUntil()介于两个给定元素之间的所有祖先元素

后代属性

 
         children() 方法返回被选元素的所有直接子元素 只一级　　 
        
         find() 方法返回被选元素的指定后代元素，一路向下直到最后一个后代<br> $( 
         "div" 
         ).find( 
         "span" 
         ); 
         //<div> 后代的所有 <span> 元素<br> $("div").find("*");// <div> 的所有后代<br>

同胞属性

 
    
         siblings()  
         //被选元素的所有同胞元素 
        
 
              
         $( 
         "h2" 
         ).siblings().css({ 
         "color" 
         : 
         "red" 
         , 
         "border" 
         : 
         "2px solid red" 
         }); 
        
 
              
         $( 
         "h2" 
         ).siblings( 
         "p" 
         ).css({ 
         "color" 
         : 
         "red" 
         , 
         "border" 
         : 
         "2px solid red" 
         }); 
        
 
         next() 
         //被选元素的下一个同胞元素 
        
 
              
         $( 
         "h2" 
         ).next().css({ 
         "color" 
         : 
         "red" 
         , 
         "border" 
         : 
         "2px solid red" 
         }); 
        
 
         nextAll() 
         //被选元素的所有跟随的同胞元素 
        
 
              
         $( 
         "h2" 
         ).nextAll(); 
        
 
         nextUntil() 
         //介于两个给定参数之间的所有跟随的同胞元素 
        
 
               
         $( 
         "h2" 
         ).nextUntil( 
         "h6" 
         ); 
        
 
         prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。 
        
 
  

遍历过滤

 
         first() 方法返回被选元素的首个元素 
        
         $( 
         "div p" 
         ).first(); 
        
         last() 方法返回被选元素的最后一个元素。 
        
         $( 
         "div p" 
         ).last(); 
        
         eq() 方法返回被选元素中带有指定索引号的元素。从0开始 
        
         $( 
         "p" 
         ).eq(1); 
        
         filter() 方法规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。 
        
         $( 
         "p" 
         ).filter( 
         ".intro" 
         ); 
        
         not() 方法返回不匹配标准的所有元素。not() 方法与 filter() 相反。 
        
         $( 
         "p" 
         ).not( 
         ".intro" 
         );