jQuery学习笔记

已于 2022-10-10 23:28:46 修改
阅读量191 收藏
点赞数
文章标签： jquery 学习 javascript
于 2022-10-10 20:40:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52467050/article/details/127251978
版权

jQuery

语法

jQuery语法

​ jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

​ 基础语法： $(*selector*).*action*()

​ 选择符（selector）“查询"和"查找” HTML 元素

​ jQuery 的 action() 执行对元素的操作

​ 实例:

​ $(this).hide() - 隐藏当前元素

​ $(“p”).hide() - 隐藏所有

元素

​ $(“p.test”).hide() - 隐藏所有 class=“test” 的

元素

​ $(“#test”).hide() - 隐藏 id=“test” 的元素

文档就绪

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

​ 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

  • 试图隐藏一个不存在的元素
  • 获得未完全加载的图像的大小

​ 简洁写法（与以上写法效果相同）

$(function(){
 
   // 开始写 jQuery 代码...
 
});

选择器

​ jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery选择

​ jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

​ jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

​ jQuery 元素选择器基于元素名选取元素。

​ 在页面中选取所有

元素:

$("p")

​ 用户点击按钮后 所有

元素都隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

#id 选择器

​ jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

​ 页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

​ 通过 id 选取元素语法如下：

$("#test")

​ 当用户点击按钮后，右id="test"属性的元素将被隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

</html>

.class选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(".text");

用户点击按钮后所有带有 class=“test” 属性的元素都隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>

独立文件中使用jQuery函数

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

当我们在教程中演示 jQuery 时，会将函数直接添加到 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

其他

  1. 选取所有元素

    $("*")

  2. 选取当前HTMl元素

    $(this)

  3. 选取class为intro的

    元素‘

    $("p.intro")

  4. 选取第一个

    元素

    $("p:first")

  5. 选取第一个

    • 元素的第一个
    • 元素

    $("ul li:first")

  6. 选取每个

    • 元素的第一个
    • 元素

    $("ul li:first-child")

  7. 选取带有 href 属性的元素

    $("[href]")

  8. 选取所有 target 属性值等于 “_blank” 的 元素

    $("a[target='_blank']")

  9. 选取所有 target 属性值不等于 “_blank” 的 元素

    $("a[target!='_blank']")

  10. 选取所有 type=“button” 的 元素 和 元素

    $(":button")

  11. 选取偶数位置的 元素

    $("tr:even")

  12. 选取奇数位置的 元素

    $("tr:odd")

事件

事件是页面对不同访问者的响应，事件处理程序指的是当HTML中发生某些事件时所调用的方法。

在事件中经常使用属于"触发" 例如：“当您按下按键时触发keypress事件”

常见DOM事件

鼠标事件键盘事件表单时间文档/窗口事件
clickkeypresssubmitload
dbiclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload
hover

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$("p").click();

下一步是定义了点击后触发事件。您可以通过一个事件函数实现：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

常用的 jQuery 事件方法

$(document).ready()

​ $(document).ready() 方法允许我们在文档完全加载完后执行函数

click()

​ click() 方法是当按钮点击事件被触发时会调用一个函数。

​ 该函数在用户点击 HTML 元素时执行。

​ 在下面的实例中，当点击事件在某个

元素上触发时，隐藏当前的

元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>如果你点我，我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>

</body>
</html>
dblclick()

​ 当双击元素时，会发生 dblclick 事件。

​ dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>双击鼠标左键的，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>

</body>
</html>
mouseenter()

​ 当鼠标指针穿过元素时，会发生 mouseenter 事件。

​ mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
  });
});
</script>
</head>
<body>

<p id="p1">鼠标指针进入此处，会看到弹窗。</p>

</body>
</html>
mouseleave()

​ 当鼠标指针离开元素时，会发生 mouseleave 事件。

​ mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
  });
});
</script>
</head>
<body>

<p id="p1">这是一个段落。</p>

</body>
</html>
mousedown()

​ 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

​ mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
  });
});
</script>
</head>
<body>

<p id="p1">这是一个段落</p>

</body>
</html>
mouseup()

​ 当在元素上松开鼠标按钮时，会发生 mouseup 事件。

​ mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
  });
});
</script>
</head>
<body>

<p id="p1">这是一个段落。</p>

</body>
</html>
hover()

​ hover()方法用于模拟光标悬停事件。

​ 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("#p1").hover(
		function(){
			alert("你进入了 p1!");
		},
		function(){
			alert("拜拜! 现在你离开了 p1!");
		}
    )
});
</script>
</head>
<body>

<p id="p1">这是一个段落。</p>

</body>
</html>
focus()

​ 当元素获得焦点时，发生 focus 事件。

​ 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

​ focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>
</html>
blur()

​ 当元素失去焦点时，发生 blur 事件。

​ blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>
</html>

隐藏/显示

jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法，并使用回调函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>

<script>
$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});
</script>
</head>
<body>
	
<div>隐藏及设置回调函数</div>
<button class="hidebtn">隐藏</button>
	
</body>
</html>

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

淡入淡出

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeIn() 方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>

<body>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeOut() 方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>

<body>
<p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
<button>点击淡出 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(3000);
	});
});
</script>
</head>
<body>

<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeTo() 方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});
</script>
</head>

<body>
<p>演示 fadeTo() 使用不同参数</p>
<button>点我让颜色变淡</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

滑动

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideDown() 方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>
</head>
<body>
 
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>

</body>
</html>
jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideUp() 方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
}
</style>
</head>
<body>
 
<div id="flip">点我拉起面板</div>
<div id="panel">Hello world!</div>

</body>
</html>
jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideToggle() 方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>
</head>
<body>
 
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>

</body>
</html>

动画

停止动画

Callback

链

jQuery HTML

jQuery遍历

jQuery Ajax

实例

全选和反选

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>jQuery全选和反选</title>
  <!-- 集成jQuery -->
  <script src="https://code.jquery.com/jquery-1.8.3.js" integrity="sha256-dW19+sSjW7V1Q/Z3KD1saC6NcE5TUIhLJzJbrdKzxKc=" crossorigin="anonymous"></script>
	<script type="text/javascript">
		$(function(){
			//绑定全选操作
			$("#checkAll").click(function(){
				//获取全选按钮的状态
				var flag = $("#checkAll").prop("checked");
				//所有子checkbox与全选checkbox进行绑定
				$("input[name='box']").prop("checked",flag);
			})

			//绑定反选操作
			$("input[value='反选']").click(function(){
				//所有子checkbox进行反选
				var boxes = $("input[name='box']");
				boxes.each(function(){
					$(this).prop("checked",!$(this).prop("checked"));
				
				})
			})

			//为所有的子checkbox绑定点击事件,如果所有的子checkbox被选中，则全选也应该被选中
			$("input[name='box']").click(function(){
				//获取选中的checkbox
				var checkedboxes = $("input[name='box']:checked");
				$("#checkAll").prop("checked",checkedboxes.length == $("input[name='box']").length);
				
			})
			
		})
	</script>
 </head>
 <body>
	
	<input type="checkbox" id="checkAll"/>全选<br>
	<input type="checkbox" name="box" value="0"/>1<br>
	<input type="checkbox" name="box" value="1"/>2<br>
	<input type="checkbox" name="box" value="2"/>3<br>
	<input type="checkbox" name="box" value="3"/>4<br>
	<input type="checkbox" name="box" value="4"/>5<br>
	<input type="checkbox" name="box" value="5"/>6<br>
	<input type="checkbox" name="box" value="6"/>7<br>
	<input type="checkbox" name="box" value="7"/>8<br>
	<input type="checkbox" name="box" value="8"/>9<br>
	<input type="button" value="反选"/>
 </body>
</html>

jQuery操作样式

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>jQuery操作样式</title>
  <!-- 集成jQuery -->
  <script src="https://code.jquery.com/jquery-1.8.3.js" integrity="sha256-dW19+sSjW7V1Q/Z3KD1saC6NcE5TUIhLJzJbrdKzxKc=" crossorigin="anonymous"></script>
  	<style type="text/css">
		.bgtr{
			background-color:#66ccff
		}
	</style>
  	<script >
		$(function(){
			//为数据行绑定mouseover事件
			$("tr[id]").mouseover(function(){
				//操作数据行的class样式
				$(this).addClass("bgtr");
			
			})
			

			//为数据行绑定mouseleave事件
			$("tr[id]").mouseleave(function(){
				//操作数据行的class样式
				$(this).removeClass("bgtr");
			
			})

			var count=0;
			$("p").click(function(){
				//触发样式开关
				$(this).toggleClass("bgtr");
			})
		})
	</script>
 </head>
 <body>
 		<h3><p>这里是p标签</p></h3>
		<table border=2 width="100%" height="100%">
			<tr><th>id</th><th>书名</th><th>价格</th></tr>
			<tr id="0001"><td>1</td><td>语录</td><<td>100</td></tr>
			<tr id="0002"><td>2</td><td>Linux入门</td><td>65</td></tr>
			<tr id="0003"><td>3</td><td>数据结构</td><td>50</td></tr>
		</table>
 </body>
</html>

将js实现的计时器封装成基于jQuery的插件

1.time.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<!-- 引入jQuery -->
	<script src="https://code.jquery.com/jquery-1.8.3.js" integrity="sha256-dW19+sSjW7V1Q/Z3KD1saC6NcE5TUIhLJzJbrdKzxKc=" crossorigin="anonymous"></script>
	<!-- 引入自定义基于jQuery的js插件 -->
	<script type="text/javascript" src="js/jquery-time.js"></script>
	
	<script type="text/javascript">
		$(function(){
			$("#time").timeRun();
			
		})
	</script>
</head>
<body>
	<div id="time"></div>
</body>
</html>
2.jquery-time.js
(function($){
	
	//给jQuery扩展方法和属性
	$.extend({
		weeks:["星期天","星期一","星期二","星期三","星期四","星期五","星期六"],
		calcTime:function(time){
			//三目运算符
			return time < 10 ? "0"+time:time;
		}
		
		
	})
	
	
	//给jQuery实例扩展方法和属性
	$.prototype.extend({
		timeRun:function(){
			
			//通过new 内置函数Date() 来获取当前时间
			var date = new Date();	
			//获取年
			var year = date.getFullYear();
			//获取月份
			var month = date.getMonth()+1;
			//获取日
			var day = date.getDate();
			//获取时分秒
			var hour = date.getHours();
			var minutes = date.getMinutes();
			var seconds = date.getSeconds();
			//获取星期
			var week = date.getDay(); 
						
			//将时间拼接成字符串
			var timeStr =   year + "年" + month + "月" + day + "日&nbsp;&nbsp;"+ $.weeks[week] +"&nbsp;&nbsp;" + $.calcTime(hour) + ":" + $.calcTime(minutes)  + ":" + $.calcTime(seconds)
			//将拼接好的时间字符串放在div元素中 此处需要使用dom操作
			$("#time").html(timeStr);
			
			window.setTimeout(function(){
				
				$("#time").timeRun();
			},1000);
		}
		
	})
})(jQuery)
放低你樽盐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery学习笔记分享
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1283
本文主要介绍有关jQuery的相关知识点
jQuery的学习笔记
qi_bai_jin的博客
11-06 1086
jQuery是一个快速，小型且功能丰富的JavaScript库。它使HTML文档遍历和操作，事件处理，动画和Ajax之类的事情变得更加简单，并且易于使用的API可以在多种浏览器上运行。凭借多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
jQuery 详细笔记
Y2ANG
04-09 1388
1 jQuery 概述 1.1 JavaScript 库 库，是用于开发软件的子程序集合。库和可执行文件的区别是，库不是独立程序，他们是向其他程序提供服务的代码库链接。 JavaScript 库：即 library，是一个封装好的特定的集合（方法和函数）。就是把各种常用的代码片段，组织起来放在一个 js 文件里，组成一个包，这个包就是 JavaScript 库。 简单理解：就是一个 JS文件，里面对我们原生 js 代码进行了封装，存放到里面。这样我们就可以快速高效的使用这些封装好的功能了。 比如 jQuer
【前端】jQuery 学习笔记（重要）
myaijarvis notebook
04-16 391
选中select KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲region").find(`…{变量}]`).prop(“selected”,true);
jquery 学习笔记一
10-29
jquery是javascript的类库，提供了大量的javascript的类库和API，方便javascript开发。
jquery学习笔记
05-16
《jQuery学习笔记详解》 jQuery，作为一款广泛应用于Web开发的JavaScript库，以其简洁的API、强大的功能和广泛的社区支持，极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。这篇学习笔记将深入探讨...
jQuery 学习笔记 黑马
HGKIVD的博客
10-31 232
jQuery学习笔记
Jquery学习笔记Jquery学习笔记
10-29
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
韩顺平jquery学习笔记及练习
01-18
韩顺平上课实录练习题及学习笔记，免费分享
【学习笔记】JQuery学习笔记
heshan1992的博客
08-28 499
一、选择器 在CSS规则中两个选择器中添加空格和不添加空格是有区别的：加空格表示的是后代选择器（可以不是直接子元素），而不加空格则表示的是在一个元素上同时满足两个条件，即不加空格表示的是“且”的关系。.example .pp{ color: orange; } .example.pp2 { color: green; }第一个表示的是具有.example类元素中具有.pp类的子元素：<p
【jQuery】jQuery 全套入门笔记
最新发布
weixin_64210950的博客
11-07 593
jQuery 是一个快速、简洁的JS库，封装了JS常用功能代码，优化 DOM 操作、事件处理、动画设计和 Ajax 交互。学习 jQuery 的本质是学习调用这些函数（方法）
jquery获取对象
weixin_30843605的博客
09-23 272
1、JQuery的核心的一些方法$("Element").length; ‘元素的个数，是个属性 $("Element").size(); ’也是元素的个数，不过带括号是个方法 $("Element").get(); ‘某个元素在页面中的集合，以数组的形式存储 $("Element").get(index); ’功能和上面的相同，index表示第几个元素，数组的下标 $("E...
jquery库是什么意思
jycg789的博客
12-16 545
jquery库是指一种封装好的JavaScript函数库，一个轻量级的"写的少，做的多"的JavaScript库，jquery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作。 本教程操作环境：windows7系统、jquery3.2.1版本，该方法适用于所有品牌电脑。 相关免费学习推荐：javascript（视频）、jQuery教程（视频） jquery库是指一种封装好的JavaScript函数库，一个轻量级的"写的少，做的多"的JavaScript
JQuery入门学习笔记
若闲小阁
06-08 467
个人博客原文链接 JQuery是一个JavaScript的框架，是对JavaScript的一种封装。 ### 一. 基础知识点 1. 使用jquery前需导入jquery.min.js 2. 文档加载 为了防止在完全加载之前就运行了JQuery代码,有以下两种方式 $(function(){ }); 或 $(document).ready(function(){ }); ...
Jquery学习笔记分享：优势应用及选择器详解
在这里，我们将分享一些 Jquery 学习笔记，希望能够帮助广大开发者更好地掌握和运用 JQuery。 在第一章中，我们首先了解了 JQuery 的概述。JQuery 的基本作用主要是简化 JavaScript 编程，提高开发效率，减少代码量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值