jQuery学习笔记二（jQuery语法）

最新推荐文章于 2024-04-19 15:28:40 发布
最新推荐文章于 2024-04-19 15:28:40 发布
阅读量390 收藏
点赞数
分类专栏： HTML5 文章标签： jQuery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mygrilzhuyulin/article/details/50727729
版权

通过jQuery可以选取（查询，query）HTML中的元素，并对这些元素执行操作（actions）。

jQuery的语法

jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。

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

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

示例

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有的段落

$(".test").hide() - 隐藏所有class=“test”的所有元素

$("#test").hide() - 隐藏所有id=“test”的元素

提示：jQuery使用的语法是XPath与CSS选择器语法的组合。

jQuery元素选择器

jQuery使用CSS选择器来选取HTML元素，常用的选择器实例如下：

语法 描述
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery属性选择器

jQuery使用XPath表达式来选择带有给定属性的元素。

$("[href]")选取所有带有href属性的元素。

$("[href='#']")选取所有带有href值等于“#”的元素。

$("[href!='#']")选取所有带有href值不等于“#”的元素。

$("[href$='.jpg']")选取所有href值以“.jpg”结尾的元素。

jQuery CSS选择器

jQuery CSS选择器可用于改变HTML元素的CSS属性。

下面的例子把所有p元素的背景颜色更改为红色：

$("p").css("background-color","red");

文档就绪函数

所有的jQuery函数都位于一个document ready函数中，如下所示，这是为了防止文档在完全加载（就绪）之前运行jQuery代码。如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

  • 试图隐藏一个不存在的元素
  • 获得未完全加载的图像的大小

$(document).ready(function(){

--- jQuery functions go here ----

});
jQuery事件函数

jQuery事件处理方法是jQuery中的核心函数。

事件处理程序指的是当HTML中发生某些事件时所调用的方法。

下面是jQuery中事件方法的一些例子：

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

通常会把jQuery代码放到<head>部分的事件处理方法中，但是如果网站包含很多页面，并且希望jQuery函数容易维护，我们常常把jQuery函数放到一个独立的.js文件中。使用时通过src属性将其引入，如下实例：

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
结论

由于jQuery是为处理HTML事件而特别设计的，那么我们如果遵循以下一些原则，会使我们的代码更容易维护：

  • 把所有jQuery代码置于事件处理函数中
  • 把所有事件处理函数置于文档就绪事件处理器中
  • 把jQuery代码置于单独的.js文件中
  • 如果存在名称冲突，则重命名jQuery库


yexiaomai77
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery常用语法总结笔记
10-15 1万+
jQuery 1.入口函数 1          $(document).ready(function(){}); 2          $(function(){}); jQuery入口函数与js入口函数的区别： jQuery的入口函数是在 html所有标签都加载之后，就会去执行。 Js的window.onload事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行
Jquery学习笔记分享
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
jQuery笔记总结
weixin_30493401的博客
12-18 623
来源于：http://blog.poetries.top/2016/10/20/review-jQuery/ http://www.jianshu.com/p/f8e3936b34c9 首先，来了解一下jQuery学习的整体思路 第一节 jQuery初步认知 jQuery概述 JQuery概念 javascript概念 基于Js语言的API和语法组织逻辑，...
jQuery的一些简单语法总结
Jerry_Dui的专栏
10-23 526
本文是笔者在学习了基础的jQuery雨大之后留下的笔记，目的是方便需要时快速查询，同时，对于初学者来说，这也是一个不错的基础教程噢~ jQuery 有两个版本的可供下载： a. Production version - 用于实际的网站中，已被精简和压缩。 b. Development version - 用于测试和开发（未压缩，是可读的代码）   jQuery 语法实例 $
jquery学习笔记--语法
zyp的博客
09-14 151
jquery语法： $(selector).action() $表明是jquery语法 selector标明要执行操作的html元素 action()对元素要执行的操作 选择器 jquery选择器可以指明对单个或一组html元素进行操作 jquery选择器基于元素的id，类，类型，属性，属性值等进行查找或选择 常见选择器 $("*") 选取所有元素 $(this) 选取当前...
jQuery学习笔记
深思纵似丁香结，一展芭蕉寸凡心。
01-20 1038
jQuery学习笔记 JQuery入门-笔记部分 jQuery概述 jQuery是js库 库：相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的是用js代码写的函数 jquery是为了简化js的操作 jquery的安装 <script src="js/jquery-3.4.1.js" type="text/javascript"></script> 需要（在前面）引入jquery的核心js文件，不然会报错（$未定义）! jquery核心 $ 符号在j
JQuery学习笔记
热爱编程、热爱生活、热爱探索
08-21 470
万字详解带你快速了解并上手JQuery，同时文中还参杂一些使用JQuery的经验，帮助你提前避坑
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1263
本文主要介绍有关jQuery的相关知识点
jQuery 学习笔记
qq_33365152的博客
10-02 73
jQuery 学习笔记
jQuery学习笔记之jQuery常用方法
最新发布
2401_84091544的博客
04-19 370
在原生的 DOM 操作中，事件函数内部有一个 this 关键字指向的就是触发事件的事件源，在 jQuery 中将 this 关键字传递给 $() 方法，得到就是指向自己的 jQuery 对象，就可以使用 JQ 的方法。• 两个参数：表示设置 css 样式属性，第二个参数可以是字符串格式的属性值，如果带单位的数字的属性值，可以写成带单位的字符串格式、不带单位的字符串、纯数字、带 += 等赋值运算的字符串。• 一个参数：表示调用 css 属性的值，得到的是某个元素的计算后样式，值为字符串格式。
JQuery 学习笔记
qq_57218855的博客
05-30 98
JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。jQueryPrototypeYUlDojoExt JS移动端的zepto。
Jquery 学习笔记（二）
01-19
选择器 从最开始看到Jquery这样的选择器就让我想起了CSS的选择器，简直是同出一辙啊，CSS的选择器语法个人觉得相当的经典，那么Jquery借鉴CSS也就没有多少疑问了。 还是复习一下Jquery的选择器吧 其中h1为选择器，...
jQuery学习笔记 获取jQuery对象
01-21
使用jQuery选择器选择页面元素，目的是为了生成jQuery对象，语法相当简单：$(selector)。但值得注意的是，这是生成jQuery对象，不是DOM对象，因此$(selector)[removed]以获取元素内部HTML代码是错误的，正确写法是$...
jQuery学习笔记01
01-08
1、jQuery介绍 1.1什么是jQuery ?  jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。 1.2 jQuery核心思想  它的核心思想是write... jQuery是免费、开源的，jQuery的语法设计
Node.js Mac版安装教程
mygrilzhuyulin的专栏
04-27 680
step1: 第一步，从nodejs.org （http://ionicframework.com/docs/overview/#download）中下载Node.js for Mac 安装包，下                载 之后点击安装，它将在你的机器上安装 Node.js 和 npm (node package manager)，安装成功后你就可以使用 node 和
jQuery学习笔记四（jQuery - AJAX）
mygrilzhuyulin的专栏
02-26 506
什么是AJAX? AJAX是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。 AJAX = 异步的JavaScript和XML（Asynchronous JavaScript and XML）。 简单的说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。 关于jQuery与AJAX jQuery提供多个与AJAX有关的方法。
jQuery学习笔记三（jQuery效果）
mygrilzhuyulin的专栏
02-24 362
jQuery中常用的特效有：隐藏、切换、滑动、淡入淡出等等。 隐藏与显示 通过使用jQuery中hide()和show()方法来隐藏和显示HTML元素。 $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的speed参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast”或
jQuery学习笔记一（jQuery的简介及安装）
mygrilzhuyulin的专栏
02-23 328
jQuery是一个“写的更少，但做的很多”的轻量级JavaScript库，它极大的简化了JavaScript编程，学习起来也很容易。下面是笔者最近的学习所得，分享给大家，希望对大家有所帮助。jQuery该库包含了以下一些特性： HTML元素的选取HTML元素的操作CSS操作HTML事件函数JavaScript特效和动画HTML DOM遍历和修改AJAXUtilities 下载jQu
JavaScript基础与jQuery学习笔记
"小晨星分享的jQuery学习笔记" 这篇文档是小晨星在学习jQuery过程中整理的重要知识点，旨在帮助他人更好地理解并掌握jQuery。jQuery是一个高效、易用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值