jQuery（学习笔记1.0）

最新推荐文章于 2023-11-11 20:28:26 发布

mez_Blog

最新推荐文章于 2023-11-11 20:28:26 发布

阅读量184

点赞数 1

分类专栏：前端 HTML5 JavaScript 文章标签： jquery 学习 javascript 开发语言前端

本文链接：https://blog.csdn.net/mez_Blog/article/details/129690918

版权

前端同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

HTML5

32 篇文章 0 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

jQuery是一个JavaScript库。

jQuery极大地简化了JavaScript编程

jQuery库可以通过一行简单的标记被添加到网页中。

jQuery库包含以下特性：
HTML元素选取

HTML元素操作

CSS操作

HTML事件函数

JavaScript特效和动画

HTML DOM遍历和修改

AJAX

utilities

可以通过下面的标记把jQuery添加到网页中：

<script type="text/javascript" src="jquery.js">
        
</script>

下载jQuery

网址：https://code.jquery.com/jquery-3.6.4.js

里面就是当前最新的jQuery版本

访问的时候有点恶心，不挂梯子需要刷好多遍才出来，挂了梯子秒出。吐槽一下

这个js文件保存到本地就可以了，以后使用的时候直接src里面导入的就是这个文件。

还有就是在线使用CDN文件，感觉还是比较麻烦，直接下载下来完事。还是把另外的方式贴出来吧

//Google
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

//Microsoft
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

说一下使用CDN方法的优势：许多用户在访问其他站点时，已经从谷歌或微软加载过jQuery。所有结果是，当他们访问站点时，会从缓存中加载jQuery，这样可以减少加载时间。同时，大多数CDN都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，可以提高加载速度。

通过jQuery，可以选取（查询，query）HTML元素，并对它们执行“操作”。

$(this).hide()	jQuery hide（）函数，隐藏当前的HTML元素
$("#test").hide()	隐藏id="test"的元素
$("p").hide()	隐藏所有<p>元素
$(".test").hide()	隐藏所有class="test"的元素

jQuery语法

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

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

美元符号定义jQuery

选择符（selector）“查询”和“查找”HTML元素

jQuery的action（）执行对元素的操作

jQuery使用的语法是Xpath与css选择器语法的组合。

文档就绪函数

所有jQuery函数位于一个document ready函数中：

$(document).ready(function(){
    //jQuery functions go here
});

这是为了防止文档在完全加载（就绪）之前运行jQuery代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。比如：

试图隐藏一个不存在的元素

获得未完全加载的图像大小

jQuery选择器

选择器允许对元素组或单个元素进行操作

在HTML术语中：

选择器允许对DOM元素组或单个DOM节点进行操作

jQuery元素选择器

jQuery使用css选择器来选取HTML元素

$("p")选取元素

$("p.intro")选取所有class="intro"的元素

$("p#demo")选取所有id="demo"的元素

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");

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

mez_Blog

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery（学习笔记1.0）

("div#intro .head") id="intro" 的元素中的所有 class="head" 的元素。$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性。还是把另外的方式贴出来吧。$("p.intro") 所有 class="intro" 的元素。$("p.intro")选取所有class="intro"的元素。$("p#demo")选取所有id="demo"的元素。
复制链接

扫一扫