jQuery 下载、简介、使用方式、语法格式、核心对象

最新推荐文章于 2024-06-02 19:25:45 发布

原创最新推荐文章于 2024-06-02 19:25:45 发布 · 304 阅读

0 ·

CC 4.0 BY-SA版权

05 jquery 专栏收录该内容

16 篇文章

订阅专栏

本文介绍jQuery的基本概念、使用方法及核心对象的应用。详细说明了如何在独立文件或通过CDN引入jQuery，展示了基本语法和示例代码，帮助初学者快速掌握jQuery。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery官网

https://api.jquery.com/

jquery学习网站

https://www.runoob.com/jquery/jquery-tutorial.html

jquery是什么？

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。

jquery使用

独立文件中使用 jQuery 函数

<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>

使用本地的jquery文件

导入库jquery-1.10.2.min.js

代码：

<script src="js/jquery-2.0.2.min.js" type="text/javascript" charset="utf-8"></script>

使用网络CDN

百度：

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

新浪：

<head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

jquery语法

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

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

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

列:当html加载完毕时使用jquery

		<script src="js/jquery-2.0.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		
			$(function(){
				//alert('加载完毕2')
			});
/*          //等价于
	        window.onload=function(){
				alert('加载完毕1');
			}
	*/		
		</script>

列：练习使用jquery

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-2.0.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				/*
				alert($);
				alert(jQuery)
				alert($===jQuery); //结果：true
				*/
				var div=document.getElementById('box');
				alert(div);  //dom元素
				alert(div.tagName)//标签名称 结果：div
				alert(div.nodeName) //节点名称
				
				var box=$(div);   //dom元素转换成jquery对象
				alert(box.html()) //结果：mydiv
			});
			
		</script>
		
	</head>
	<body>
		<div id="box">mydiv</div>
	</body>
</html>

jquery核心对象

each(callback)

以每一个匹配的元素作为上下文来执行一个函数。

意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

列：核心对象使用

		<script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script>
			$(function() {
				$('div').each(function(n) {
					//alert(n) //结果 0 1 2
				
					//document.write(this);//结果 [object HTMLDivElement] //this dom元素
					
					//this.style.background='blue';//结果 所有div变成红色
					$(this).css('background', "red");//结果 所有div变成红色
				    
                    //alert($('div').size()) //结果:4 

				    //$($('div').get(1)).css('background', "red"); //结果:第二个div变成红色
				});
			});
		</script>
	</head>
	<body>
		<div id="box">box1</div>
		<div>box2</div>
		<div>box3</div>
		<div>box4</div>
	</body>

列：存、取、删除数据

		<script>
			$(function() {
//data()在元素上存取数据
				$('#box').data('user',"aa");  //存
				//$('#box').removeData('user')//删除数据
				alert($('#box').data('user'));   //取
			});
		</script>
	</head>
	<body>
		<div id="box">box1</div>
		<div>box2</div>
		<div>box3</div>
		<div>box4</div>
	</body>

结果：