一、选择器

1、基本选择器

①id选择器：#       ②class选择器：.       ③标签名选择：标签名      

④并列选择：用，隔开          ⑤后代选择：用空格隔开

        
     
        
      
            
       aaaaa  <%--a标记--%>        
      
        
      
        
      
        
      
         
     
<%--   $   JQuery标志性符--%>基本选择器

　　

2、过滤选择器

（1）、基本过滤

①首个：:first        ②尾个：:last       ③任意个：:eq(索引号)        ④大于：:gt(索引号)

⑤小于：:lt(索引号)         ⑥排除：:not(选择器)         ⑦奇数：odd           ⑧偶数：even

（2）、属性过滤

①属性名过滤：[属性名]   

②属性值过滤：[属性名=属性值]或[属性名！=属性值]

（3）、内容过滤

①文字过滤：:contains(“字符串”)

②子元素过滤：:has(选择器)

    
     
        
      
       aaa
      
        
      
       bbb
      
        
      
       
      
        
      
       bbb
      
        
      
       aaa
      
        
      
       
      
    
     
过滤选择器

　　

二、事件

1、常规事件——把js事件前面的on去掉

比如：js：onclick——JQuery：click

2、复合事件

①houver(function(){},functiaon(){})——相当于把mouseover()mouseout()合二为一

②toggle(function(){},function(){},....)——点击事件循环执行，具体看下面的代码用法展示

    
     
         
      
       aaa
      
        
      
       bbb
      
        
      
       
      
        
      
       bbb
      
        
      
       aaa
      
        
      
       
      
       
     
常规和复合事件

　　

3、事件冒泡（冒泡事件）——冒泡部分转载自：

      冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。

     
          外层div元素    
      内层span元素    外层div元素
     
     

　　

冒泡Jquery

　　

当点击span时，会触发div与body 的点击事件。点击div时会触发body的点击事件。

如何防止这种冒泡事件发生呢？

阻止冒泡一

　　event.stopPropagation(); // 阻止事件冒泡

阻止冒泡二

　　

三、DOM操作

1、操作内容

①表单元素：取值：var s=$(“选择器”).val()      

                       赋值：$(“选择器”).val(“值”)

②非标单元素：取值：var s=$(“选择器”).text(“内容”)            var s=$(“选择器”).text(“内容”)      

                          赋值：$(“选择器”).text(“内容”)       $(“选择器”).html(“内容”)

    
     
          <%--操作内容   start--%>        
      aaaaa        
              
              <%--操作内容   end--%>    
     
操作内容

　　

2、操作属性

①获取属性：var s=$(“选择器”).attr(“属性名”)

②设置属性：$(“选择器”).attr(“属性名”,”属性值”)

③更改属性：$(“选择器”).attr(“属性名”,”属性值”)

④删除属性：$(“选择器”).removeAttr(“属性名”)

    
     
              <%--操作属性   start--%>        
              
              
              
              <%--操作属性   end--%>    
     
操作属性

　　

3、操作样式（一般用操作属性就可以）

①操作内联样式：获取样式：var s=$(“选择器”).css(“样式名”)

                            设置样式：$(“选择器”).css(“样式名”,”值”)、

$("#btn1").click(function () {        $("#txt1").css("border", " 5px  solid  red");});

②操作样式表的class：添加class：$(“选择器”).addClass(“class名”)

                                    移除class：$(“选择器”).removeClass(“class名”)

                                    添加移除交替class：$(“选择器”).toggleClass(“class名”)

 

4、操作相关元素

 ①查找：父辈、前辈：parent()     parents(“选择器”)

                   子代、后代：children(“选择器”)   find(“选择器”)

                   兄弟：哥哥：prev()    prevAll(“选择器”)

                            弟弟：next()    next All(“选择器”)

        
     
    
      
        
       
            
        
                
         
            
        
        
       
    
      
        
      
        
      
        
      
    
     
查找

　　

②操作：新建：$(“html字符串”)

                  添加：appen(jquery对象或字符串)——某个元素内部添加

                           after(…)——下部平级添加

                           before(…)——上部平级添加

                 移除：empty()——清空内部全部元素

                          remove()——清空元素

                 复制：clone()

        
     
    
      
        
       
            
        
                
         
            
        
        
       
    
      
        
      
        
      
        
      
    
     
css

　　

总代码            
         
     
        
      
            
       
                
                        
                    
       
            
       
                        <%--评论div   start--%>                
        
                    
         
          aaaaaaaa
         
                    
         
                                  aaaaaaa                        
         
                    
         
                                  1999-1-1                        
                              
         
                
        
                <%--评论div   end--%>