jQ的事件和DOM操作

jQ的事件和DOM操作

jQ对于事件进行了大量的封装,click()

$("select").click(function(){
    
});

jQ对于DOM操作

获取某些节点:document.getElementById();  ->  $(选择器)
添加内容:xxx.innerHTML = xxx;   ->   $().html();

一、常用的事件进行网页特效设计

jQ中的事件分类:

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

1.1 常用的鼠标事件

方法 描述 执行时机
click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时
mouseover( ) 触发或将函数绑定到指定元素的mouseover事件 鼠标指针移过时
mouseout( ) 触发或将函数绑定到指定元素的mouseout事件 鼠标指针移出时
mouseenter( ) 触发或将函数绑定到指定元素的mouseenter事件 鼠标指针进入时
mouseleave( ) 触发或将函数绑定到指定元素的mouseleave事件 鼠标指针离开时
  • mouseover和mouseenter的区别?

穿过被选元素或其后代元素都会触发对应的mouseover事件。

只有在穿过被选元素时才会触发对应的mouseenter事件。


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style>
			div{
				width:200px;
				height: 200px;
				border: 1px solid;
				padding: 2em;
			}
			.color{
				background-color: red;
			}
			p{
				border: 1px solid;
			}
		style>
	head>
	<body>
		<div>
			<p>mouseover<h1>h1>p>
		div>
		<div>
			<p>mouseenter<h2>h2>p>
		div>
		<script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8">script>
		<script type="text/javascript">
			$(function (){
				var i = 0;
				var j = 0;
				$("div:first").click(function(){
					$("div:first").addClass("color");
				});
				$("div:first").mouseout(function(){
					$("div:first").removeClass("color");
				});
				$("div:first").mouseover(function(){
					$("div:first").addClass("color");
					$("h1").text(++i);
				});
				$("div:last").mouseenter(function(){
					$("div:last").css("background","green");
					$("h2").text(++j);
				});
				$("div:last").mouseleave(function(){
					$("div:last").css("background","white");
				});
			});
		script>
	body>
html>

1.2 常用的键盘事件

方法 描述 执行时机
keydown( ) 触发或将函数绑定到指定元素的keydown事件 按下键盘时
keyup( ) 触发或将函数绑定到指定元素的keyup事件 释放按键时
keypress( ) 触发或将函数绑定到指定元素的keypress事件 产生可打印的字符时
<body onkeydown="enterLogin(event)">
    <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.3 常用的复合事件

hover:它等价于mouseover和mouseout事件的组合(其实以前用的是mouseenter和mouseleave)

$("#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"); // 会自动判断是否有此样式
});

二、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.innerText

    语法格式 参数说明 功能描述
    html( ) 无参数 用于获取第一个匹配元素的HTML内容或文本内容
    html(content) content为元素的HTML内容 用于设置所有匹配元素的HTML内容或文本内容
    text( ) 无参数 用于获取所有匹配元素的文本内容
    text (content) content为元素的文本内容 用于设置所有匹配元素的文本内容
  • 属性val的操作

    value属性只有在表单元素中才有此属性。

    value属性的获取 ,当初在JS时 直接xxx.value

    xxx.val(); xxx.val("xx");

  • 创建节点

    // JS
    var imgEle = document.createElement("img");
    
    // JQ  利用工厂函数  直接可以将HTML字符串加工成对应的节点对象
    $("")
    
    
  • 插入节点

    语法 功能
    append(content) ( A ) . a p p e n d ( B ) 表 示 将 B 追 加 到 A 中 如 : (A).append(B)表示将B追加到A中 如: (A).append(B)BA(“ul”).append($newNode1);
    appendTo(content) ( A ) . a p p e n d T o ( B ) 表 示 把 A 追 加 到 B 中 如 : (A).appendTo(B)表示把A追加到B中 如: (A).appendTo(B)ABnewNode1.appendTo(“ul”);
    prepend(content) ( A ) . p r e p e n d ( B ) 表 示 将 B 前 置 插 入 到 A 中 如 : (A). prepend (B)表示将B前置插入到A中 如: (A).prepend(B)BA(“ul”). prepend ($newNode1);
    prependTo(content) ( A ) . p r e p e n d T o ( B ) 表 示 将 A 前 置 插 入 到 B 中 如 : (A). prependTo (B)表示将A前置插入到B中 如: (A).prependTo(B)ABnewNode1. prependTo (“ul”);
语法 功能
after(content) ( A ) . a f t e r ( B ) 表 示 将 B 插 入 到 A 之 后 如 : (A).after (B)表示将B插入到A之后 如: (A).after(B)BA(“ul”).after($newNode1);
insertAfter(content) ( A ) . i n s e r t A f t e r ( B ) 表 示 将 A 插 入 到 B 之 后 如 : (A). insertAfter (B)表示将A插入到B之后 如: (A).insertAfter(B)ABnewNode1.insertAfter(“ul”);
before(content) ( A ) . b e f o r e ( B ) 表 示 将 B 插 入 至 A 之 前 如 : (A). before (B)表示将B插入至A之前 如: (A).before(B)BA(“ul”).before($newNode1);
insertBefore(content) ( A ) . i n s e r t B e f o r e ( B ) 表 示 将 A 插 入 到 B 之 前 如 : (A). insertBefore (B)表示将A插入到B之前 如: (A).insertBefore(B)ABnewNode1.insertBefore(“ul”);
  • 删除和替换

    // 删除元素
    // $("#first").remove();
    // 清空内容
    $("li:first").empty();
    
    // 用自己去替换别人
    // $("").replaceAll($("#second"));
    // 用别人替换自己
    $("#second").replaceWith($(""));
    
    
  • 复制节点 clone(boolean) boolean:是否复制事件

  • 设置和获取属性值、删除属性

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

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

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

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

你可能感兴趣的:(jQuery)