1.什么是 jQuery ？
jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件]。
2.jQuery的使用
- 通过script标记导入本地jquery函数库文件到网页中。它是一个javascript文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../../Jquery-js/jquery-3.6.0.js"></script>
</head>
<body>
<div id="app"></div>
<script>
$(function(){
// jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件]
var domobj = document.getElementById('app') //dom对象
console.log(domobj);
console.log($('#app')) //jquery对象
})
</script>
</body>
</html>适用于我们将jquery函数库文件下载到本地计算机以后操作。
2.通过script标记利用网络地址导入jquery函数库到网页中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过script标记使用</title>
<!-- 导入jquery函数库【网络地址】 -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
alert("通过script标记引入独立的jquery文件");
});
</script>
</head>
<body>
</body>
</html>1.jQuery 语法
通过 jQuery，您可以选取HTML 元素【标记】，并对它们执行"操作"（actions）。
基础语法： $(selector).action()
- 美元符号定义 $ -表示jQuery，jQuery表示$。我们可以使用$代替jQuery。
- 选择符（selector）---"查询"和"查找"需要被控制的 HTML 元素。可以将被控制的 HTML 元素转换成jQuery对象。[ $(selector)--jQuery的构造器--创建jQuery对象]
- action()指对得到的jQuery对象调用的函数/属性
Javascript的页面初始化事件
- body中提供οnlοad=“函数”
- window.οnlοad=function(){}
实例:(通过jquery的css方法设置样式)
//$("#p1").css("font-size","50px");
//我们可以在jquery的函数中使用javascript语法。
//var pdom=document.getElementById("p1");
//alert(pdom); //[object HTMLParagraphElement]
//$(selector)jQuery的构造器[创建jQuery对象]
//var jqobj=$("#p1");
//alert(jqobj); //[object Object]
//不能使用javascript对象【dom对象】调用jQuery的函数和属性
//var pdom=document.getElementById("p1");
//pdom.css("font-size","50px");
//pdom.style.fontSize="50px";
//不能使用jquery对象调用javascript的函数和属性
let domobj = $("#p1").get()[0];
console.log(domobj)
domobj.style.fontSize="50px"Jquery对象与javascript对象的转换
- javascript对象 ----> Jquery对象-------【$(javascript对象)】
- Jquery对象 ------> javascript对象-----【Jquery对象.get()】
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试jquery的语法</title>
<!--导入jquery函数库 -->
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
//$(javascript对象)
//将javascript对象【dom对象】转换出成jQuery对象
//var pdom=document.getElementById("p1");
//var jqobj=$(pdom);
//alert(jqobj); //[object Object]
//jqobj.css("font-size","50px");
//jquery的构造有常用的两种
//$(selecter)---将被选中的html标记构造成Jquery对象
//$(javascript对象)---将javascript对象构造成Jquery对象
//jquery对象.get();
//将jquery对象转换成javascript对象【dom对象】
//var jqobj=$("#p1");
//var javascriptobj=jqobj.get();
//alert(javascriptobj); //[object HTMLParagraphElement]
//var javascriptobj=$("#p1").get();
//alert(javascriptobj); //[object HTMLParagraphElement]
});
</script>
</head>
<body>
<p id="p1">测试jquery的语法</p>
</body>
</html>jquery的构造有常用的两种
$(selecter)---将被选中的html标记构造成Jquery对象
$(javascript对象)---将javascript对象构造成Jquery对象
2.jQuery 选择器
| 语法 | 描述 |
|---|---|
| ${" * "} | 选取所有的元素 |
| ${this} | 选取当前元素 |
| ${" #i dname "} | id选择器 |
| ${" . className "} | class选择器 |
| ${"TagName"} | 元素选择器 |
| ${"[atrName]"} | 属性选择器 |
| ${"TagName className"} | 包含选择器 |
等等。。。（和css选择器差不多），类似于JavaScript 中【document.querySelectorAll()】
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
3.jQuery HTML
1.jQuery获取/设置文本元素的值
jQuery获取元素的值 text()、html() 以及 val()
text()---返回所选元素的文本内容 --- > innerText
html()--返回所选元素的内容（包括 HTML 标记） --->innerHTML
val()----返回表单字段的值 -----value
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../../Jquery-js/jquery-3.6.0.js"></script>
<title>Document</title>
</head>
<body>
<script>
$(()=>{
var strTag = "<h2>今天是个好日子</h2>";
let btns = $("button");
console.log(btns)
for (let i = 0; i < btns.length; i++) {
btns.get()[i].onclick = function(){
switch(i){
case 0:
$("#content").text(strTag);
break;
case 1 :
$("#content").html(strTag); break;
case 2 :
$("#content").html ($("#val").val()); break;
}
}
}
})
</script>
<div>
<button>text</button>
<button>html</button>
<br>
<button>单击按钮将输入框的内容显示在下面</button>
<input type="text" id="val">
<div id="content">输出结果</div>
</div>
</body>
</html>2.jQuery - 添加元素
append() - 在被选中元素中插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
3.jQuery - 删除元素
remove() - 删除被选元素（及其子元素）【有过滤功能】
empty() - 从被选元素中删除子元素(不删除当前父元素)
4.jquery的CSS 操作
1.为元素添加不存在的样式
css(样式属性名称，属性值) 设置被选元素的具有这个样式。
css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。
2.为元素添加已经存在的样式
addClass() - 向被选元素添加一个或多个样式类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
3.获取元素样式
css(样式属性名称) 返回被选元素的指定样式属性值。
5.jQuery 事件
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$("p").click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
$("p").click(function(){ // 动作触发后执行的代码!! });
常用的 jQuery 事件方法
- $(document).ready(function) 文档完全加载完后执行函数
- click(function) 方法是当按钮点击事件被触发时会调用一个函数
- dblclick(function)双击元素时，会发生 dblclick 事件。
- mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。
- mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。
- hover(function)方法用于模拟光标悬停事件。
- focus(function)当元素获得焦点时，发生 focus 事件。
- blur(function)当元素失去焦点时，发生 blur 事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../../Jquery-js/jquery-3.6.0.js"></script>
<title>Document</title>
<style>
#box{
width: 200px;
height: 200px;
border: 1px solid pink;
}
</style>
</head>
<body>
<button id="btn">jquery单击事件</button>
<div id="box"></div>
<script>
$(function(){
$("#btn").click(function(){
alert("btn打印")
})
$("#box").hover(function(){
$("#box").css("background","green")
})
$("#box").mouseleave(function(){
$("#box").css("background","white")
})
})
let ps = document.getElementsByTagName("p");
console.log(ps)
</script>
</body>
</html>6. 元素的隐藏和显示动画【就是元素的隐藏和显示】
hide([毫秒数],[success-function]) 隐藏元素
show([毫秒数],[success-function]) 显示元素
fadeIn([毫秒数],[success-function]) 显示元素。
fadeOut([毫秒数],[success-function]) 隐藏元素。
slideDown([毫秒数],[success-function]) 显示元素
slideUp([毫秒数],[success-function]) 隐藏元素
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../../Jquery-js/jquery-3.6.0.js"></script>
<style>
.box{
width: 200px;
height: 200px;
border:1px solid pink;
}
</style>
</head>
<body>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<div class="box"></div>
<script>
$(function(){
$("#hide").click(()=>{
$(".box").hide(1000);
})
$("#show").click(()=>{
$(".box").show(1000);
})
// $("#hide").click(()=>{
// $(".box").fadeOut(1000);
// })
// $("#show").click(()=>{
// $(".box").fadeIn(1000);
// })
// $("#hide").click(()=>{
// $(".box").slideUp(1000);
// })
// $("#show").click(()=>{
// $(".box").slideDown(1000);
// })
})
</script>
</body>
</html>jQuery 效果- 动画
jQuery animate() 方法用于停止动画或效果，在它们完成之前。
jQuery 停止动画
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
jQuery - 链(Chaining)
支持链式调用
$("btn").click(function(){}).hover(function(){})...fn()等等
7.HTML DOM 遍历和修改
jQuery each() 方法
语法
$(selector).each(function(index,element){ })
each函数中的function
参数1-index--被遍历出的每一个元素在数组中的位置[下标]
参数2-element--被遍历出的每一个元素具体元素【DOM对象】
each函数中的function中没有element时，可以被this代替
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../../Jquery-js/jquery-3.6.0.js"></script>
<title>Document</title>
</head>
<body>
<p>我是谁</p>
<p>我在那</p>
<p>我在干嘛</p>
</body>
<script>
// $(()=>{
// $("p").each(function(index) {
// console.log(this) // this为dom对象
// this.style.fontSize = "30px"
// })
// })
$(()=>{
$("p").each(function(index) {
$(this).css("font-size","30px")
})
})
</script>
</html>无奈源于不够强大
扫一扫
4684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
