当前位置：首页 > news >正文

jQuery的基本使用

news 2025/6/6 12:11:12

一、使用jQuery的三个步骤

引入jQuery文件
写入口函数
功能实现

例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第一个简单的jQuery程序</title><!--在head标记中引入jQuery库文件-->
<script src="jquery-3.7.1.js" type="text/javascript"></script><script>   $(document).ready(function(){  		 //jQuery入口函数$("button").click(function(){	//jQuery选择器alert("开始学习jQuery！");})})   	
</script>
</head>
<body><button> 点击按钮开始学习JQuery！ </button>
</body>
</html>

二、jQuery入口函数的三种写法

$(document).ready(function(){   //程序段  
}) $().ready(function n(){   //程序段   
})    $(function() { //程序段
})

三、jQuery入口函数的作用与window.onload的区别

jQuery 中的入口函数 $(document).ready() 和原生 JavaScript 中的 window.onload 都用于在页面加载完成后执行特定的代码，但是他们仍存在区别：

jQuery 入口函数 $(document).ready()：

$(document).ready() 是 jQuery 提供的方法，用于在 DOM 树加载完成后就绪时执行指定的函数。
可以在页面中多次使用 $(document).ready()，每次添加的函数都会按照添加顺序执行。
只等待 DOM 结构加载完成，不必等待其他资源（如图片）加载完成。
示例：*$(document).ready(function(){ /* code here / });

window.onload 事件：

window.onload 是原生 JavaScript 提供的事件，在整个页面（包括所有资源）加载完成后触发。
只能设置一个 window.onload 函数，后设置的会覆盖前面的。
需要等待整个页面及相关资源加载完成后才会触发，可能会导致页面加载速度变慢。
示例：window.onload = function() { / code here / };

jQuery 的入口函数 $(document).ready() 更为灵活和轻量，适用于在 DOM 就绪后执行代码，而 window.onload 适用于需要等待所有资源加载完成后再执行的情况

四、通过调用事件方法给获取的元素绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bind Event with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){// 给id为myButton的按钮绑定点击事件$("#myButton").click(function(){alert("按钮被点击了！");});
});
</script>
</head>
<body><button id="myButton">点击我</button>
</body>
</html>

本示例通过 jQuery 的 $(document).ready() 函数确保页面完全加载后再执行代码。然后使用 $(“#myButton”).click() 方法为 id 为 “myButton” 的按钮绑定了点击事件，当按钮被点击时会弹出一个警告框。这样就实现了通过调用事件方法给获取的元素绑定事件的功能。

五、如果不使用jQuery入口函数，仍要实现同样的效果，代码部分应该放到什么位置？

如果不使用 jQuery 入口函数 $(document).ready()，而是希望在页面加载完成后绑定事件，可以将代码放在 HTML 文档的末尾，紧跟在需要操作的元素之后。这样可以确保在元素加载完毕后再执行 JavaScript 代码。例如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bind Event without jQuery Ready</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><button id="myButton">点击我</button><!-- 将事件绑定的 JavaScript 代码放在这里 --><script>// 获取id为myButton的元素var myButton = document.getElementById('myButton');// 绑定点击事件myButton.addEventListener('click', function() {alert("按钮被点击了！");});</script>
</body>
</html>

六、$符号

$ 符号是 jQuery 的简写形式，$ 实际是一个函数，用的时候后面要跟小括号即 $ ( ) 等价于 jQuery ( )，其参数不同(参数为function、DOM对象、字符串)，功能不同。

七、隐式迭代

在 jQuery 中，隐式迭代是指对一组元素进行操作时，可以直接通过选择器选取这组元素，并对其应用相同的操作，而不需要显式地使用循环来遍历每个元素。这是因为 jQuery 的方法会自动对选中的元素进行迭代处理。

那么对于以下案例中，//** 标记 **中的部分就是典型的隐式迭代用法，它会选取所有的 < button > 元素，并为每个按钮绑定点击事件。这样，当任何一个按钮被点击时，都会触发相同的函数执行。

<!doctype html>
<html><head><meta charset="utf-8"><title>jQuery代码实现</title><script src="jquery-3.7.1.js" type="text/javascript"></script><script>$(document).ready(function () {   //jQuery入口函数$("p").click(function () {        //隐式迭代$(this).css("backgroundColor", "red");     //css方法设置css属性});//***********标记************$("button").click(function () {   //隐式迭代alert("欢迎学习jqUery! ");})//***********标记************})</script>
</head><body><p>段落1</p><p>段落2</p><p>段落3</p><button>按钮1</button><button>按钮2</button><button>按钮3</button>
</body></html>

那么我们将//** 标记 **中的部分替换为：

var btn = document.getElementsByTagName("button");   //获取所有按钮元素for (var i = 0; i < btn.length; i++)btn[i].onclick = function () {alert("欢迎学习jqUery!");}

会发生什么呢？显然将jQuery代码用以上原生JavaScript代码替换后依然可以正常显示，可以说明jQuery代码与原生JavaScript代码可以混合使用。

注意： jQuery本身就是在Javascript语言基础上进行包装的，其本质上是Javascript代码，二者经常相互混合使用。但他们之间又有一定的区别，为了避免写错，在使用时必须分清哪些是jQuery对象，哪些是DOM对象，因为两者之间不能互相调用对方的属性和方法。

八、jQuery选择器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="jquery-3.7.1.js"></script><script>$(document).ready(function () {//输入代码//利用jQuery选择器获取下标为偶数的1i元素，设置背景色为粉色$("li:even").css("backgroundColor","pink");//利用jQuery选择器获取下标为偶数的1i元素，设置背景色为黄色$("li:odd").css("backgroundColor","yellow");//利用jQuery选择器获取下标大于3但不是最后一个的li元素，设置背景色为红色$("li:gt(3):not(:last)").css("backgroundColor","red");//利用jQuery选择器获取内容包含6,包含3的li元素，设置背景色为蓝色$("li:contains('6'),li:contains('3')").css("backgroundColor","blue");//利用jQuery选择器可以获取页面中选中的复选框的个数console.log($("input:checked").length);})</script>
</head>
<body><ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li><li>我是第4个li</li><li>我是第5个li</li><li>我是第6个li</li><li>我是第7个li</li><li>我是第8个li</li><li>我是第9个li</li><li>我是第10个li</li></ul><input type="checkbox" checked><input type="checkbox"><input type="checkbox" checked><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox" checked><input type="checkbox">
</body></html>