jQuery 使用笔记（一）

最新推荐文章于 2025-02-25 09:51:17 发布

原创最新推荐文章于 2025-02-25 09:51:17 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jquery 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了jQuery的基本使用方法，包括语法格式、选择器使用、事件绑定与解除等关键内容，并通过实例展示了如何操作DOM元素。

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

总结下jquery的使用方法，算是一知识巩固吧！

jQuery主要包含以下几个方面的内容： HTML元素设计 HTML元素操作 CSS操作 HTML事件函数 Javascript特效和动画 HTML DOM 遍历和修改 AJAX Utilities

在使用jQuery之前一定要记得先引入jquery外部文件；；

一、jQuery语法

$(选择器).操作（）;

例如：$('button').css(''color","red");

$('button').hide();

二、jQuery选择器：类选择器、ID选择器、元素选择器

css部分：

<p>hello world!!</p>
<button>click me</button>

js部分

注意：js部分一定要在文档加载完成之后进行；

$(document).ready(function(){
     $("button").click(function(){
       $('p').text("p被修改过了啊");
   })
})

三、jQuery事件

jQuery事件主要分为：常用事件方法、绑定事件、解除绑定事件、事件的目标、事件的冒泡、自定义事件；

1、常用事件方法::click 、 dbclick 、mouseenter 、 mouseleave

2、绑定事件::bind

css部分

<button>click me</button>

$('button').bind('click',function(){
       alert('绑定1成功！')
})

3、解除绑定事件::unbind

$(document).ready(function(){

$('button').bind('click',bindone)
$('button').bind('click',bindtwo)

function bindone(){

console.log('绑定1成功！')

function bindtwo(){

console.log('绑定2成功！')

}})

打开浏览器点击之后，会打印2条信息
添加解除绑定
$('button').unbind('click',bindtwo);再次点击后发现，只弹出一条信息；第二个绑定函数已经被解除成功！

因为bind和click事件基层上都是通过调用on方法来实现的，所以 bind和click也可用on方法来代替；