一、使用jQuery的三个步骤

  1. 引入jQuery文件
  2. 写入口函数
  3. 功能实现

例子：

<!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 都用于在页面加载完成后执行特定的代码，但是他们仍存在区别：

  1. jQuery 入口函数 $(document).ready()：
  • $(document).ready() 是 jQuery 提供的方法，用于在 DOM 树加载完成后就绪时执行指定的函数。
  • 可以在页面中多次使用 $(document).ready()，每次添加的函数都会按照添加顺序执行。
  • 只等待 DOM 结构加载完成，不必等待其他资源（如图片）加载完成。
  • 示例：*$(document).ready(function(){ /* code here / });
  1. 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>
  • jQuery选择器的作用是用来获取到页面元素。
  • jQuery选择器的语法格式为：$(selector)。 $(“div”) $(“#p1”) $(“.dd”)
  • jQuery选择器完全继承了CSS选择器的风格，基本兼容了从CSS1到CSS3的绝大部分的选择器。
  • jQuery除了兼容CSS选择器外，还添加了很多更加复杂的选择器可以非常便捷和快速地找到特定的页面元素，功能很强大。
# jquery # 前端 # javascript
Logo
科技创新，汇聚千年文化底蕴，共筑璀璨首都未来之梦！

欢迎加入北京社区

更多推荐

cover

实施都工作都有哪些？

avatar 北京城市开发者社区
cover

ChatGPT 简介

avatar 北京城市开发者社区
cover

开发者社区技术沙龙-北京站 | 架构革新，加速大模型未来

avatar 北京城市开发者社区