JQuery
jQuery 是一个 JavaScript 函数库。无需编写大量繁琐的原生JavaScript代码。JavaScript是楼梯,JQuery是电梯。
JQuery语法
基础语法: $(*selector*).*action*()
- 美元符号定义 jQuery
- 选择符(selector)"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
- $(this).hide() - 隐藏当前元素
- $("p").hide() - 隐藏所有
元素
- $("p.test").hide() - 隐藏所有 class="test" 的
元素
- $("#test").hide() - 隐藏 id="test" 的元素
jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。
jQuery 中所有选择器都以美元符号开头:$()。
属性 | 说明 |
---|---|
$(button) | 元素选择器 |
$("#id") | id选择器 |
$(".cls") | 类选择器 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery </title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" ></script>
</head>
<body>
<input type="button" id="app" value="单击">
<input type="button" class="cls" value="双击">
<div>我是一个盒子</div>
<div>我是第二个盒子</div>
<script>
//#app id选择器
//div 元素选择器
//.cls 类选择器
$("#app").click(function(){
$("div").hide(); // 当我单击以后 div会全部隐藏
})
$(".cls").dblclick(function (){
alert("双击提示")
})
</script>
</body>
</html>
JQuery事件
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click(单击) | keypress | submit | load(加载) |
dbclick(双击) | keydown | change | resize |
mouseenter(鼠标输入) | keyup | focus(获得焦点) | scroll |
hover | blur(失去焦点) | unload |
在jQuery中,事件是指在网页上发生的动作或交互,比如点击按钮、移动鼠标、键盘按键等。jQuery允许你轻松地捕捉和处理这些动作,以便在用户与网页交互时执行相应的操作。事件可以是用户触发的,也可以是页面自身状态变化触发的,例如当页面加载完成时也可以算作一个事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p>如果你点我 我就消失</p>
<p>点我我也就消失</p>
<p>点我一下</p>
<p>点我 点我</p>
<p>还有我呢</p>
<script>
$("p").click(function(){
$(this).hide();
});
</script>
</body>
</html>
JQyery操作DOM
操作文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="div">我是一个div</div>
<input type="button" id="btn1" value="获取div的文字">
<input type="button" id="btn2" value="设置div的文字">
<br> <br>
<input type="text" id="t" value="文本"> <br>
<input type="button" id="bt" value="获取text">
<script>
//获取div的文字
$("#btn1").click(function(){
var value = $("#div").html();
alert(value);
})
//设置div的文字
$("#btn2").click(function(){
var value = $("#div").html("测试");
alert(value);
})
//获取文本
$("#bt").click(function(){
var value = $("#t").val();
alert(value);
})
</script>
</body>
</html>
操作对象
属性 | 说明 |
---|---|
$("元素") | 创建指定元素 |
append(element) | 添加最后一个子元素 由添加者对象调用 |
appendto(element) | 添加最后一个子元素 由被添加者对象调用 |
prepend(element) | 添加第一个子元素 由添加者对象调用 |
prependto(element) | 添加第一个子元素 由被添加者对象调用 |
Before(element) | 添加到当前元素的前面 两者之间是兄弟关系 由添加者对象调用 |
After(element) | 添加到当前元素的后面 两者之间是兄弟关系 由添加者对象调用 |
remove() | 删除指定元素 |
empty() | 清空指定元素的所有子元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jquery操作对象</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="div">
</div>
<input type="button" id="btn1" value="添加一个span到div"> <br><br><br>
<input type="button" id="btn2" value="将加油添加到城市列表最下方">
<input type="button" id="btn3" value="将加油添加到城市列表最上方">
<input type="button" id="btn4" value="将雄起添加到上海下方">
<input type="button" id="btn5" value="将雄起添加到上海上方">
<ul id="city">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="gz">广州</li>
<li id="sz">深圳</li>
</ul>
<ul id="desc">
<li id="jy">加油</li>
<li id="xq">雄起</li>
</ul> <br> <br> <br>
<input type="button" id="btn6" value="将雄起删除">
<input type="button" id="btn7" value="将描述列表全部删除">
<script>
//添加span到div中
$("#btn1").click(function(){
var span = $("<span>span</span>")
$("#div").append(span);
})
//删除加油和雄起
$("#btn7").click(function(){
$("#desc").empty();
})
//加油添加到城市列表下方
$("#btn2").click(function(){
$("#city").append($("#jy"));
})
//加油添加到城市列表上方
$("#btn3").click(function(){
$("#city").prepend($("#jy"));
})
// 将雄起添加到上海下方
$("#btn4").click(function(){
$("#sh").after($("#xq"));
})
//将雄起添加到上海上方
$("#btn5").click(function(){
$("#sh").before($("#xq"));
})
//将雄起删除
$("#btn6").click(function(){
$("#xq").empty();
})
//将描述列表全部删除
$("#btn6").click(function(){
$("#desc").empty();
})
</script>
</body>
</html>
操作样式
属性 | 说明 |
---|---|
css(name) | 根据样式名称获取css样式 |
css(name,value) | 设置css样式 |
addClass(value) | 给指定的对象添加样式类名 |
removeClass(value) | 给指定的对象删除样式类名 |
toggleClass(value) | 如果没有样式类名,则添加。如果有,则删除 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div style="border: 1px solid red;" id="div">我是div</div>
<input type="button" id="btn1" value="获取div点样式">
<input type="button" id="btn2" value="设置div的背景色为蓝色">
<br><br><br>
<input type="button" id="btn3" value="给div设置cls1样式">
<input type="button" id="btn4" value="给div删除cls1样式">
<input type="button" id="btn5" value="给div设置或删除cls1样式">
<script>
//获取div的样式
$("#btn1").click(function(){
alert($("div").css("border")) // 1px solid rgb(255, 0, 0)
})
//设置div的背景色为蓝色
$("#btn2").click(function(){
$("div").css("background","blue ");
})
//给div设置cls1样式
$("#btn3").click(function(){
$("div").addClass("cls1"); //触发按钮后 div会多一个类选择器为class="cls1"
})
//给div删除cls1样式
$("#btn4").click(function(){
$("div").removeClass("cls1");
})
//给div设置或删除cls1样式
$("#btn5").click(function(){
$("div").toggleClass("cls1"); //如果有类选择器就删除 没有就添加
})
</script>
</body>
</html>
操作属性
属性 | 说明 |
---|---|
attr(name,[value]) | 获得/设置属性的值 |
prop(name,[value]) | 获得/设置属性的值(checked,selected) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id=username>
<br>
<input type="button" id="btn1" value="获取输入框的id属性">
<input type="button" id="btn2" value="给输入框设置value属性">
<br><br>
<input type="radio" id="gender1" name="gender"> 男
<input type="radio" id="gender2" name="gender"> 女
<br>
<input type="button" id="btn3" value="选中女">
<br> <br>
<select>
<option>---请选择---</option>
<option id="bk">本科</option>
<option id="zk">专科</option>
</select>
<br>
<input type="button" id="btn4" value="选中本科">
<script>
//获取输入框的id属性 username
$("#btn1").click(function(){
alert($("#username").attr("id")); //username
})
//给输入框设置value属性为hello
$("#btn2").click(function(){
$("#username").attr("value","hello")
})
//选中女
$("#btn3").click(function(){
$("#gender2").prop("checked",true);
})
//选中本科
$("#btn4").click(function(){
$("#bk").prop("selected",true);
})
</script>
</body>
</html>
DOM和JQuery区别
- DOM对象: 是原生JavaScript提供的,用于表示网页中的元素和节点的对象。你可以使用原生的JavaScript方法来获取和操作这些对象,但操作可能较为繁琐,需要处理兼容性和语法差异。原生JS获取来的就是DOM对象
- jQuery对象: 是由jQuery库提供的,它是一种特殊的封装,包含一个或多个DOM元素以及方便的方法来操作它们。jQuery对象的语法更简洁,通常跨浏览器兼容,同时支持链式操作,使代码更具可读性。jQuery方法获取的元素就是jQuery对象
简而言之,DOM对象是原生的,而jQuery对象是通过jQuery库创建的,它们提供了不同的方式来处理和操作网页中的元素。
2 comments
2025年10月新盘 做第一批吃螃蟹的人
新盘首开 新盘首开 征召客户!!!