JQuery简介
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Adobe Dreamweaver 2021
作者：李凯顺
1.什么是jQuery
jQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码
轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架
jQuery的核心思想："写的更少，但做的更多"
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。
jQuery** 库包含以下功能：**
HTML 元素快速选取(给予css选择器,方便快速查询DOM文档中的元素)
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
2.jQuery的语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法是：$(selector).action()
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
3.jQuery的优势
1,简化了js的写法，用$替代了document.getXxx()
2,可以像CSS选择器一样非常方便的获取元素
3,可以通过修改css样式控制页面的效果
var ele = document.getElementById("username"); //js
var ele = $("#username"); // jQuery
var ele = document.getElementsByTagName("p"); //js
var ele = $("p"); //jQuery
var ele = document.getElementsByName("username"); //js
var ele = $('input[name="username"]'); // jQuery
var ele = document.getElementsByClassName("info"); //js
var ele = $(".info"); // jQuery
$("div").css("background", "red");
$("div").css({
"background" : "blue",
"border" : "2px solid red",
"font-size" : "30px"});
4.jQuery的使用
jQuery其实就是一个JS文件,如需使用 jQuery,需要下载，然后使用 HTML 的script标签引用它,应该位于页面的head 部分。
<!-- 引入jQuery的函数库文件 -->
<script src="jquery.min.js"></script>
或者：
<script src="jquery.js"></script>
文档就绪事件
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。
<meta charset="utf-8">
<title>jq</title>
<!-- 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 嵌入js代码 -->
<script>
方式1:还没加载到h1元素,a是null,调用null的资源f12时会出问题
// var a = document.getElementById("p1");
// alert(a); //null
// alert(a.innerHTML);
方式2: 使用jQuery的文档就绪函数,整个DOM都加载完了才执行
//jQuery语法:$(选择器).action{ } ;
$(document).ready(function(){
var a = document.getElementById("p1");
alert(a.innerHTML);
});
方式3: 简写
$(function(){
var a = document.getElementById("p1");
alert(a.innerHTML);
});
</script>
</head>
<body>
5.什么时候该使用文档就绪事件函数？
如果在获取元素时，获取元素的代码执行的时机（时间）比元素本身加载的时间还要早，如果元素还没有加载到就获取，必然是获取不到的！
将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载过了，再获取任何元素都能获取到！
6.jQuery选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中选择器语法：$()
基本选择器
元素选择器:
$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素
id 选择器
$("#one") -- 选中id为one的元素
$("p#demo") -- 选取所有 id="demo" 的p元素
class 选择器
$(".mini") -- 选中所有class值为mini的元素
$(".test") -- 选中所有class值为test的元素
属性选择器
$("[href]") -- 选取所有带有 href 属性的元素
$("[href='#']") -- 选取所有带有 href 值等于 "#" 的元素
元素选择器练习
需求:点击按钮,隐藏段落内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<!-- 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 嵌入js代码 -->
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
