JavaScript(JQuery)

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 410 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #开发语言

本文介绍JQuery库的使用方法，包括在线与本地引入方式、帮助文档的使用、常见选择器及事件的应用，如鼠标事件与节点文本操作等，并提供实例演示。

JQery

引入
帮助文档
公式：$(selector).action()

JQuery库,里面存在大量的JavaScript函数

引入

在线引入：< script src=“http://code.jquery.com/jquery-migrate-1.2.1.min.js”>< /script>
本地引入： Download the compressed, production jQuery

帮助文档

网络地址

公式：$(selector).action()

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	</head>
	
	<a href="" id="test">点我</a>
	<body>
<script type="text/javascript">
	$('#test').click(function(){
		alert('hello');	
	})
 
</script>
	</body>
</html>

常用选择器

			 css选择器:标签选择器  #id选择器   .类选择器

事件

鼠标事件

获取鼠标坐标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style type="text/css">
	#div1{
		width: 31.25rem;
		height: 31.25rem;
		border: 0.0625rem solid red;
		
	}
</style>
	</head>
	 
	mouse:<span id="mouse"></span>
<div id="div1">
	
</div>		

	<body>
<script type="text/javascript">
//当前元素加载完毕之后,响应事件 $(function(){})
$(function(){
		$('#div1').mousemove(function(e){
		
						$('#mouse').text('x:'+e.pageX+'y:'+e.pageY);
		
	})
	
});
</script>
	</body>
</html>

在这里插入图片描述
事件，上翻有帮助文档

节点文本操作

	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	</head>

	<body>
	<ul id="test">
	<li name="a">python</li>
	<li name='b'>c#</li>
	</ul>
	</body>
	<script type="text/javascript">		
		$('#test li[name=a]').text();//获得值
		$('#test li[name=a]').text('Java');//设置值		
		$('#test').html();//获得值
		$('#test').html('<strong>aaa</strong>');//获得值
	</script>

css操作

$('#test li[name=a]').css({'color':'red','fontSize':'20px'});
$('#test li[name=a]').css({'display':'none'});

提升：Layer弹窗组件，Element-ui