jQuery事件和DOM

最新推荐文章于 2025-03-04 11:29:10 发布

原创最新推荐文章于 2025-03-04 11:29:10 发布 · 297 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery事件和DOM操作

本文深入解析jQuery中各类事件的应用，包括鼠标、键盘、窗口及复合事件，并详解DOM操作，如CSS样式修改、节点创建与管理，及属性设置与获取。适合前端开发者进阶学习。

1.常用的事件进行网页特效设计

jQ中的事件分类：

基础事件
- 鼠标事件
- 键盘事件
- window事件
- 表单事件
复合事件
- 鼠标光标悬停
- 鼠标连续点击

1.1 常用鼠标事件

在这里插入图片描述

mouseover和mouseenter的区别？

穿过被选元素或其后代元素都会触发对应的mouseover事件。
只有在穿过被选元素时才会除法对应的mouseenter事件。

1.2 常用的键盘事件

在这里插入图片描述

<form action="" method="post">
	账号：<input type="text" name="username" /><br/>
  	密码：<input type="password" name="pwd" /><br/>
  <input type="submit" value="提交"/>
</form>

<script type="text/javascript">
  function enterLogin(event){
      // 获取按下的键的键值
      var keyCode = event.keyCode;
      // alert(keyCode);
      if(keyCode == 13){
          // 提交表单
          document.forms[0].submit();
      }
  }
</script>
</body>

1.3 浏览器事件：

resize() 改变浏览器窗口事件
scroll() 浏览器滚动事件

<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var x = 0;			
    /*$(window).resize(function(){
				 $(".test").html(++x);
			});*/
    $(window).scroll(function(){
        $(".test").html(++x);
    });
    // $(window).scrollLeft();
    // $(window).scrollTop();
</script>

1.4绑定和解绑事件

1.事件函数
2.bind绑定事件函数 unbind可以解绑事件

$().bind("事件名",函数);
$().bind({
    "事件名":函数,
    "事件名":函数
});

3.on绑定事件，off可以解绑事件

1.5常用的复合事件

hover：等价于mouseover和mouseout事件组合

$("#test").hover(function(){
    $(this).css("background","lawngreen");
},function(){
    $(this).css("background","white");
});

toggle:在1.8版本才能使用连续点击事件

$("input").toggle(function(){
    $("body").css("background","yellow");
},function(){
    $("body").css("background","blueviolet");
},function(){
    $("body").css("background","pink");
});

toggle:不带参数
toggleClass：

// 点击按钮 如果div存在 则隐藏  否则显示
/*$("input").click(function(){
		$("#test").toggle(); // 会自动判断
  });*/

$("input").click(function(){
    $("#test").toggleClass("addBd"); // 会自动判断是否有此样式
});

2. 掌握jQuery的常用DOM操作

2.1 CSS-DOM

css();
- css(CSS属性名,CSS属性值); 设置单个效果
- css({ 属性名1:值,属性名2:值 }); 设置多个效果
- css(); 获取某个属性的值
addClass();
- addClass(类属性名);
- addClass(类属性名1 类属性名2); 例如：addClass("test test1 test2")
removeClass();
- removeClass(类属性名);
- removeClass(类属性名1,类属性名2);
toggleClass(); 见上方
hasClass(); 判断是否包含某个类样式

2.2 操作DOM节点(DOM-Core)

HTML代码操作 html() 等价于xxx.innerHTML
标签内容操作 text() 等价于xxx.innerTest
属性val的操作
value属性只有在表单元素中才有此属性
value属性的获取，当初在JS时直接XXX.value
xxx.val(); xxx.val("xx");
创建节点

// JS
var imgEle = document.createElement("img");

// JQ  利用工厂函数  直接可以将HTML字符串加工成对应的节点对象
$("<img src='xxx'/>")

插入节点
删除和替换

// 删除元素
// $("#first").remove();
// 清空内容
$("li:first").empty();

// 用自己去替换别人
// $("<img src='images/f03.jpg' id='second'>").replaceAll($("#second"));
// 用别人替换自己
$("#second").replaceWith($("<img src='images/f03.jpg' id='second'>"));

复制节点clone(boolean) boolean:是否复制事件
设置和获取属性值，删除属性

attr(属性名);  获取对应的属性值
attr(属性名,属性值);  给对应的属性设置值
attr({属性名:属性值,...})  可以同时设置多个
removeAttr(属性名); 删除属性

遍历子节点

childern([选择器]);  可以获取所有的直接子节点  也可以在其中添加选择器获取指定的子节点
find([选择器]); 可以通过它获取后代中的指定节点

遍历兄弟节点

next()
prev()
siblings([选择器]) 获取所有的兄弟节点

遍历父节点

parent(); 直接父节点
parents([选择器]); 获取祖先节点