提示：学习jQuery基础

文章目录

前言
一、如何引入jQuery？
二、使用步骤(设置样式)
- 方式1.
- 方式2.
- 方式3.
三、选择器
- 基本过滤选择器.
- 可见性选择器.
四、事件
- 绑定事件.
总结

前言

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

提示：以下是本篇文章正文内容，下面案例可供参考

一、如何引入jQuery？

把 jQuery 添加到您的网页

如需使用 jQuery，您需要下载 jQuery 库（会在下面为您讲解），然后把它包含在希望使用的网页中。

1、jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的

<head><script src="jquery.js"></script>
</head>

2、下载 jQuery

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

这两个版本都可以从 jQuery.com 下载。

提示：您可以把下载文件放到与页面相同的目录中，这样更方便使用。

3、替代方案

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。

百度和微软的服务器都存有 jQuery 。

如需从百度或微软引用 jQuery，请使用以下代码之一：

<head><script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
</head>

二、使用步骤(设置样式)

方式1.

代码如下（示例）：

window.onload = function() {} //不推荐

方式2.

代码如下（示例）：

$(document).ready(function() {}); //jQuery推荐的写法

方式3.

代码如下（示例）：

$(function() {$("#xxx").css({"color": 'red',"fontSize": '25px',"background": 'pink'});
});

三、选择器

基本过滤选择器.

代码如下（示例）：

<ul id="fruit">水果列表<li>苹果</li><li>葡萄</li><li>西瓜</li><li class='good'>梨子</li><li class='good'>哈密瓜</li><li>香蕉</li>
</ul><script src="jquery-3.6.0.js"></script><script> //设置 梨子 和 哈密瓜 的字体颜色为红色$("#fruit li.good").css('color', 'red');
</script>

可见性选择器.

代码如下（示例）：

<ul id="fruit">水果列表<li>苹果</li><li>葡萄</li><li style="display: inline;">西瓜</li><li style="display: inline;">梨子</li><li>哈密瓜</li><li style="display: none;">香蕉</li>
</ul><script src="jquery-3.6.0.js"></script><script>$("#fruit li:hidden").css('color', 'red');$("#fruit li:visible").css('color', 'pink');
</script>

四、事件

绑定事件.

代码如下（示例）：

<script>var node = document.getElementById("xxx");$(node).css("color","red");//把原生的节点对象，转换成了jQuery对象//传统方式node.onclick = function() {}//法一：事件名(函数)  即事件名作为 方法名来用$("#btn").click(function() {console.log("点击了我");});$("#btn").mouseover(function() {console.log("over");});$("#btn").mouseout(function() {console.log("out")});//法二：bind('事件名', 函数)绑定$("#btn").bind('click', function() {console.log("点击");});$("#btn").bind('mouseover', function() {console.log("鼠标上来...")});$("#btn").bind('mouseout', function() {console.log("鼠标出去...")});</script>

总结

以上就是jQuery的基础，本文仅仅简单介绍了jQuery的基本使用。

jQuery的基本使用方法相关推荐

jQuery CSS 操作 - css() 方法
实例设置 <p> 元素的颜色: $(".btn1").click(function(){$("p").css("color", ...
JQuery 的跨域方法可跨任意网站
JS的跨域问题,很多人在网上找其解决方法,教其用IFRAME去解决的文章很多,真有那么复杂吗?其实很简单的,如果你用JQUERY,一个GETJSON方法就搞定了,而且是一行代码搞定. 下面开始贴出方法 ...
javascript:jquery.history.js使用方法
javascript:jquery.history.js使用方法 step1:download jquery.history.js step2:create a test page as follow ...
关于使用jQuery时$(document).ready()方法失效问题
关于使用jQuery时$(document).ready()方法失效问题 <script type="text/javascript">//页面加载后自动执行,不需要按 ...
用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
[jQuery] 针对jQuery性能的优化方法有哪些？
[jQuery] 针对jQuery性能的优化方法有哪些? show slide animate 等频繁修改 dom 很耗性能,可采用 jquery.transit 插件等使用单个 id 或 class ...
[jQuery] jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this
[jQuery] jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this init()方法中返回的this指向init的实例对象,而init.prototype等于jQue ...
php 获取子孙,jquery如何查找后代元素？jquery获取后代元素方法
在上一篇我们讲到jquery获取父元素?相信你已经学会了,那么下面我们来讲一下jquery如何查找后代元素?jquery获取后代元素方法. 一: 查找后代元素三种方法 (1)children(): ( ...
jquery中的ajax方法参数——$.ajax()方法详解
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法, ...
jQuery: 操作select option方法集合
每一次操作select的时候,总是要谷歌一下资料,真是太不爽了, 在这里记录一下. 公共select代码 <select id="sel"><option val ...

jQuery的基本使用方法

文章目录

前言

一、如何引入jQuery？

二、使用步骤(设置样式)

方式1.

方式2.

方式3.

三、选择器

基本过滤选择器.

可见性选择器.

四、事件

绑定事件.

总结

jQuery的基本使用方法相关推荐

最新文章

热门文章