jQuery官网:jQuery
jQuery基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操
文档就绪函数:防止文档在完全加载(就绪)之前运行 jQuery 代码,比如:试图隐藏一个不存在的元素
$(document).ready(function(){
// jQuery functions go here
});
$(function(){
// jQuery functions go here
})
jQuery 选择器
$("p") //选取 <p> 元素。
$(".intro") //选取所有 class="intro" 的元素。
$("#demo") //选取所有 id="demo" 的元素。
<div id="a">
<p></p>
<p>
<span>one</span>
<span>two</span>
<span>therr</span>
</p>
</div>
//:eq() 选择器选取带有指定 index 值的元素,默认从0开始
alert(("#a p:eq(1) span:eq(2)").html()) //therr
jQuery 事件
$("button").click(function() { // some code... } ) //点击事件
$("button").dblclick(function() { // some code... } ) //双击事件
$("button").dblclick(function() { // some code... } ) //双击事件
$("button").mousedown(function() { // some code... } ) //鼠标按下事件
$("button").mouseup(function() { // some code... } ) //鼠标松开事件
$("button").mousemove(function(e) { // some code... } ) //获得鼠标指针在页面中的位置
$("button").mouseover(function() { // some code... } ) //鼠标进入
$("button").mouseout(function() { // some code... } ) //鼠标移开
$("button").mouseenter(function() { // some code... } ) //鼠标进入
$("button").mouseleave(function() { // some code... } ) //鼠标移开
jQuery 隐藏和显示
可以有两个参数,第一个是显示与隐藏的时间,第二个是隐藏或显示完成后所执行的函数
$("button").click(function(){
$("p").hide(1000);
});
$("button").click(function(){
$("p").show(1000);
});
$("button").click(function(){
$("p").toggle(1000);
});
jQuery 淡入淡出
可以有两个参数,第一个是显示与隐藏的时间,第二个是隐藏或显示完成后所执行的函数
$("button").click(function(){
$("p").fadeIn(1000);
});
$("button").click(function(){
$("p").fadeOut(1000);
});
$("button").click(function(){
$("p").fadeToggle(1000);
});
jQuery 滑动
可以有两个参数,第一个是显示与隐藏的时间,第二个是隐藏或显示完成后所执行的函数
$("button").click(function(){
$("p").slideDown(1000);
});
$("button").click(function(){
$("p").slideUp(1000);
});
$("button").click(function(){
$("p").slideToggle(1000);
});
jQuery 动画
三个参数,第一个必需的 定义形成动画的 CSS 属性;第二个可选的 规定效果的时长;第三个也是可选的 动画完成后所执行的函数
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQuery 获取与设置内容和属性
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
- attr() 方法用于获取属性值
jQuery 获取并设置 CSS
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
jQuery中submit提交表单数据
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
// 在文档加载完成后执行以下代码
$(document).ready(function() {
// 给表单添加 submit 事件监听器
$("#myForm").submit(function(e) {
// 阻止表单默认的提交行为
e.preventDefault();
// 获取表单数据并打印到控制台
var formData = $(this).serializeArray();
console.log(formData);
// 发送 Ajax 请求并处理响应
$.ajax({
url: "/submit-form-data",
type: "POST",
data: formData,
success: function(response) {
alert("提交成功!");
},
error: function(jqXHR, textStatus, errorThrown) {
alert("提交失败:" + textStatus);
}
});
});
});
jquery中post请求与get请求:
$.ajax({
url: '/api/data',
type: 'POST',
data: { param1: 'value1', param2: 'value2' },
success: function(data) {
console.log('获取数据成功:', data);
},
error: function(error) {
console.log('获取数据失败:', error);
}
});
$.ajax({
url: '/api/data',
headers:{
Authorization:localStorage.token
},
type: 'GET',
data: { param1: 'value1', param2: 'value2' },
success: function(data) {
console.log('获取数据成功:', data);
},
error: function(error) {
console.log('获取数据失败:', error);
}
});
jquery进阶操作:
三个input type="radio"选择状态,如何快速获取用户选择的哪个
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
<input type="radio" name="gender" value="other">
var selectedValue = $('input[name="gender"]:checked').val();
接口给我一个状态,如何快速给三个input type="radio"其中的一个赋值状态
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
<input type="radio" name="gender" value="other">
var status = "male"; // 假设状态值为'male'
$('input[name="gender"][value="' + status + '"]').prop('checked', true);
.each()遍历数组,
当某一项数据超过指定范围,文字显示红色
<div id="6_d">
<input type="text" name="voc_1">
<input type="text" name="voc_2">
<input type="text" name="voc_3">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 假设 response.VOC 是一个数组,包含了输入框的数值
var response = {
VOC: [10, 20, 30]
};
$('#6_d input').each(function(index) {
// 设置相应索引位置的数组数据到对应的 input 元素的 value 属性中
$(this).val(response.VOC[index]);
// 检查数值是否超出范围,如果超出则将文字颜色设置为红色
if (response.VOC[index] > 25) {
$(this).css('color', 'red');
}
});
});
</script>
文档参考:jQuery 教程 (w3school.com.cn)