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>元素
$("p.intro")选取所有class="intro"的<p>元素
$("p#demo")选取所有id="demo"的<p>元素
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> 元素
$("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" 的元素