jQuery中的事件与DOM操作

╰半夏微凉° 2022-04-18 05:20 240阅读 0赞

## jQuery中的事件 ##

## 基础事件 ##

**鼠标事件：**  
click( )：单击鼠标时  
mouseover( )：鼠标指针移过时  
mouseout( )：鼠标指针移出时  
mouseenter( )：鼠标指针进入时  
mouseleave( )：鼠标指针离开时

**键盘事件：**  
keydown( )：按下键盘时  
keyup( )：释放按键时  
keypress( )：产生可打印的字符时

**window事件**  
**表单事件**  
**浏览器事件：**

$(selector).resize( )：调整窗口大小时，完成页面特效

**绑定事件与移除事件：**

unbind([type],[fn])

## 复合事件 ##

**鼠标光标悬停**  
hover(enter,leave)：  
hover()方法相当于mouseover与mouseout事件的组合  
**鼠标连续点击**  
toggle(fn1,fn2,…,fnN)  
toggleClass(className)  
toggle( )和toggleClass( )总结  
toggle( fn1,fn2…)实现单击事件的切换，无须额外绑定click事件  
toggle( )实现事件触发对象在显示和隐藏状态之间切换  
toggleClass( )实现事件触发对象在加载某个样式和移除某个  
样式之间切换

## jQuery中的DOM操作 ##

## 样式操作 ##

追加样式：$(selector).addClass(class);
    	或   $(selector).addClass(class1 class2 … classN);
    移除样式：$(selector).removeClass("class") ;
    	或   $(selector).removeClass("class1 class2 … classN ") ;
    设置样式：css(name,value) ;
    	或 css({name:value, name:value,name:value…}) ;
    获取样式：css(name)
    切换样式：$(selector).toggleClass(class) ;
    判断样式：$(selector). hasClass(class);

## 内容及Value值操作 ##

HTML代码操作
          $("div.left").html()：元素中的html代码
     	  $("div.left").html("<div class='content'>…</div>")：设置 
    标签内容操作
          $("div.left").text()：获取元素中的文本内容
          $("div.left").text("<div class='content'>…</div>")：设置
    属性值操作
         $(this).val()：获取元素的value属性值
        $(this).val(value)：设置

## 节点操作 ##

查找节点
    创建节点: var $newNode2=$("<li title='last'>北京申办冬奥</li>");
    插入节点 
    元素内部插入子节点
          $(A).append(B)表示将B追加到A中
          $(A).appendTo(B)表示把A追加到B中
          $(A). prepend (B)表示将B前置插入到A中
          $(A). prependTo (B)表示将A前置插入到B
    元素外部插入同辈节点
        $(A).after (B)表示将B插入到A之后
       $(A).after (B)表示将B插入到A之后
        $(A). before (B)表示将B插入至A之前
        $(A). insertBefore (B)表示将A插入到B之前
    删除节点
       remove()：删除整个节点
       empty()：清空节点内容
       detach()：删除整个节点，保留元素的绑定事件、附加
    替换节点
        $(".gameList li:eq(2)").replaceWith($newNode1);
        $($newNode1).replaceAll(".gameList li:eq(2)");
        两者的关系类似于append()和appendTo()
    复制节点
        $(selector).clone([includeEvents]) ;
        参数ture或flase, true复制事件处理，flase时反之

## 节点属性操作 ##

获取元素属性:$(selector).attr([name]) ;
    设置元素属性:
        $(selector).attr({[name1:value1]…[nameN:valueN]}) ;
    删除元素属性
        $(selector).removeAttr(name) ;

## 节点遍历 ##

遍历子元素
             $(selector).children([expr])
             var $section =$("section").children(); 
             获取<section>的子元素，但不包含子元素的子元素
    遍历同辈元素
          用于获取紧邻匹配元素之后的元素
             $("li:eq(1)").next().addClass("orange");
          用于获取紧邻匹配元素之前的元素
             $("li:eq(1)").prev().addClass("orange");
          用于获取位于匹配元素前面和后面的所有同辈元素
             $("li:eq(1)").siblings().addClass("orange");
    遍历前辈元素
          parent()：获取元素的父级元素
          parents()：元素元素的祖先元素
             $("li:eq(1)").parent().addClass("orange");
             $("li:eq(1)").parents().addClass("orange");
    其他遍历方法
        each( ) ：规定为每个匹配元素规定运行的函数
        $(selector).each(function(index,element)) ;
        $("img").click(function(){
           $("li").each(function(){
               var str=$(this).text()+"<br>";
               $("section").append(str);
           })
       });
    end( )：结束当前链条中的最近的筛选操作，
    并将匹配元素集还原为之前的状态

## CSS-DOM操作 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTUzOTM4_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTUzOTM4_size_16_color_FFFFFF_t_70]: /images/20220418/e9e77152545b457bac5c12b129d748e7.png