JQuery基础用法
1.概述
jquery是一个优秀的javascript的轻量级框架，兼容css3和各大浏览器，提供了dom、events、animate、ajax等简易的操作。并且 jquery的插件非常丰富，大多数功能都有相应的插件解决方案。
Jquery就是1个js文件，只不过它对JS进行了简化。
特性：jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
1.使用jQuery要先引入包
<script src="../js/jquery-3.3.1.min.js"></script> //该标签如果用来引包，里面不允许写任何js语句！
<script>
alert("hello world.");
</script>
2.入口函数
$()或jQuery() 称之为jq选择器环境，在里面加上引号填写相关选择器即可，就可以获取匹配的元素。
1. 两者功能都一致，都可以让获取元素的行为发生在渲染元素之后；
2. JS入口只允许存在一个，书写多个的话，后面的会覆盖前面的；
3. JQ入口允许存在多个，且并行存在，都会生效；
4. JS入口需要等待页面上所有资源加载完毕；
5. JQ入口只需要等待页面上标签渲染完毕即可，JQ入口速度更快。
2.1 书写方式
js：window.onload=function(...){}
jq：$(document).ready(function(){...});
$(function(){...});
例
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// JS 页面加载完成 test2覆盖test1
window.onload = function () {
alert("test1");
}
window.onload = function () {
alert("test2");
}
// $ 符号就是 jquery 的简写方式.
// 复杂书写
$(document).ready(function () {
alert("test3");
});
// 简化书写
$(function () {
alert("test4");
});
</script>
3.事件
3.1 书写方式
js：js对象.onclick = function(){...}
jq：jquery对象.click(function(){...})
注意：jq中的事件类型统一不要加on
① js事件
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// 注意 : JS 的代码都是写在 = 后面. jquery 的代码基本上都是写在 () 里面.
// jquery 入口函数 :
$(function () {
// JS 代码 :
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("按钮被点击了...");
}
});
</script>
<body>
<input type="button" value="按钮" id = "btn"/>
</body>
② jQuery事件
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// 注意 : JS 的代码都是写在 = 后面. jquery 的代码基本上都是写在 () 里面.
// jquery 入口函数 :
jQuery(function () {
// jquery 代码 :
$("#btn").click(function () {
alert("按钮被点击了...");
});
});
</script>
<body>
<input type="button" value="按钮" id = "btn"/>
</body>
4.整体操作
4.1 书写方式
1、在jq里面，通过$()返回的数组，允许开发者整体操纵
2、选择数组中的其中一个元素： js对象[下标] --- jq对象.eq(下标)
① js事件绑定
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// jquery 入口函数 :
$(function () {
// JS 代码为两个按钮绑定事件 (JS代码不可以进行整体绑定)
// JS 中 document.getElementsByTagName 该方法返回的是一个数组, 只能取出对应的元素才可以绑定.
var inputs = document.getElementsByTagName("input");
inputs[0].onclick = function () {
alert("按钮1111被点击了...");
}
inputs[1].onclick = function () {
alert("按钮2222被点击了...");
}
});
</script>
<body>
<input type="button" value="按钮1111" />
<input type="button" value="按钮2222" />
</body>
② jQuery事件绑定
4.2 JQuery整体标签绑定
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// jquery 入口函数 :
$(function () {
// jquery 整体绑定
$("input").click(function () {
alert("按钮被点击了...");
});
});
</script>
<body>
<input type="button" value="按钮1111" />
<input type="button" value="按钮2222" />
</body>
4.3 JQuery单个标签事件绑定
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// jquery 入口函数 :
$(function () {
// jquery 单个标签绑定
$("input").eq(0).click(function () {
alert("按钮1111被点击了...");
});
$("input").eq(1).click(function () {
alert("按钮2222被点击了...");
});
});
</script>
<body>
<input type="button" value="按钮1111" />
<input type="button" value="按钮2222" />
</body>
5.对象互转
5.1 书写方式
js对象转换成jq对象：$(js对象)
jq对象转换成js对象：jq对象[索引] 或 jq对象.get(索引)
① js转jQuery对象
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// jquery 入口函数 :
$(function () {
// JS 对象转 jquery 对象
var btn = document.getElementById("btn");
// JS 对象调用 jquery 的方法. (不可以)
/*btn.click(function () {
alert("按钮被点击了...");
});*/
//将 JS 对象转成 jquery 对象. 给点钱就行了.
$(btn).click(function () {
alert("按钮被点击了...");
});
});
</script>
<body>
<input type="button" value="按钮" id="btn" />
</body>
② jQuery转js对象
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// jquery 入口函数 :
$(function () {
// jquery 对象 转 JS 对象
// jquery 对象 调用 JS 的方法. (不可以)
/*$("#btn").onclick = function () {
alert("按钮被点击了...");
}*/
//jq对象[索引] 或 jq对象.get(索引)
// 方式一 : jquery对象[下标]
$("#btn")[0].onclick = function () {
alert("按钮被点击了...");
}
// 方式二 : jquery对象.get(下标)
$("#btn").get(0).onclick = function () {
alert("按钮被点击了...");
}
});
</script>
<body>
<input type="button" value="按钮" id="btn" />
</body>
6.控制css样式
6.1 书写方式
//单属性访问
jq对象.css('width');
//单属性修改
jq对象.css('width','100px');
//多属性修改 可一次修改多个css属性
jq对象.css({'width':'100px','height':'100px'});
① js改变css样式
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// JS 控制样式 style
var box = document.getElementById("box");
box.style.width = "100px";
box.style.height = "100px";
box.style.backgroundColor = "pink";
});
</script>
<body>
<div id="box"></div>
</body>
② jQuery改变css样式
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// jquery 控制样式 css 修改多个css属性
$("#box").css({
width: "100px",
height: "100px",
backgroundColor: "skyblue"
});
// 单个属性
$("#box").css("backgroundColor", "red");
});
</script>
<body>
<div id="box"></div>
</body>
7. 控制标签属性
7.1 书写方式
//单属性访问 可以获取自定义标签的属性值
jq对象.attr('class');
//单属性修改
jq对象.attr('class ','myClass');
//多属性修改 可一次修改多个attr属性
jq对象.attr({'class':'myClass','id':'myId'});
//删除属性
jq对象.removeAttr('class ');
① js代码
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 修改 box 标签的class 与 title 属性数值
var box = document.getElementById("box");
box.className = "bbb";
box.title = "这里什么都没有";
});
</script>
<body>
<div id="box" class="test" title="aaa"></div>
</body>
② jQuery代码
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 修改 box 标签的class 与 title 属性数值
$("#box").attr("class", "aaa");
$("#box").attr("title", "这里什么都没有");
});
</script>
<body>
<div id="box" class="test" title="bbb"></div>
</body>
7.2 删除属性
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 点击按钮, 删除 checkbox 标签的 id 属性
$("#btn").click(function () {
$("#ck").removeAttr("id");
});
});
</script>
<body>
<input type="checkbox" id="ck">
<input type="button" value="Click" id="btn">
</body>
7.3 补充
获取属性我们也可以使用prop()，他跟attr()是互补的，一般来说，我们都是使用attr()来获取标签属性，但是有的时候也会有获取不到的情况，这个时候可以使用prop()的形式来获取，比如表单元素的checked属性。不可以获取自定义标签的属性值
jq对象.prop();
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 点击click按钮, 查看 checkbox 选项框的 checked 属性数值
$("#btn").click(function () {
// attr 可以获取属性, 但是 `选项框` 的 checked 属性还是获取不到.（不可以）
var result = $("#ck").attr("checked");
alert("result = " + result);
// prop 属性的缩写.
result = $("#ck").prop("checked");
alert("result = " + result);
});
});
</script>
<body>
<input type="checkbox" id="ck">
<input type="button" value="Click" id="btn">
</body>
8.val()函数
针对表单元素的value属性的值，在jq里面单独封装了一个方法，本身使用attr()也是不能正确获取的。
8.1 书写方式
jq对象.val()； //val()函数有参时，修改value值；无参时，返回value
① js代码
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 点击 btn 按钮, 获取 text 文本框中的 value 值.
// JS 方式 :
var btn = document.getElementById("btn");
var text = document.getElementById("text");
btn.onclick = function () {
var value = text.value;
alert("value = " + value);
}
});
</script>
<body>
<input type="text" id="text" value="请输入内容..." />
<input type="button" value="Click" id="btn" />
</body>
② jQuery代码
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 点击 btn 按钮, 获取 text 文本框中的 value 值.
// jquery 获取属性
$("#btn").click(function () {
// 方式一 : attr (不可以)
var value = $("#text").attr("value");
alert(value);
// 方式二 : prop 保险,安全
value = $("#text").prop("value");
alert(value);
// 方式三 : val();
value = $("#text").val();
alert(value);
});
});
</script>
<body>
<input type="text" id="text" value="石原里美" />
<input type="button" value="Click" id="btn" />
</body>
9.案例一：是否接受协议
9.1 描述
按钮的本身是disabled禁用的状态
当复选框被勾选上的时候，按钮变成启用的状态，其次样式产生了变化
按钮样式的变化都已经通过特定的class名字书写好样式了，只要对按钮的class名字进行修改即可
9.2 效果图
9.3 代码
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*input 标签中包含 submit 的类名*/
input.submit {
background: #69b946;
display: inline-block;
height: 52px;
width: 306px;
text-align: center;
cursor: pointer;
font: 22px/52px "微软雅黑";
color: #fff;
border-radius: 3px;
border-style: solid;
border-width: 1px;
border-color: transparent;
}
input.disabled {
background: #f4f9fd;
color: #888;
cursor: default;
border-color: #d0dae3;
cursor: default;
outline: none;
}
</style>
</head>
<body>
<form action="https://www.baidu.com">
<input id="kuang" type="checkbox" />
<label for="kuang">同意"服务条款"和"用户须知"、"隐私权相关政策"</label>
<br />
<br />
<input type="submit" disabled="disabled" class="submit disabled" id="btn" />
</form>
</body>
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
// 1. 获取 `选项框`, 并绑定单击事件
$("#kuang").click(function () {
// 2. 获取 `选项框` 的状态
// var checked = $("#kuang").attr("checked"); (不可以)
var checked = $("#kuang").prop("checked");
// 3. 判断
if (checked == true) {
// 修改 btn 提交按钮的 `属性值`
$("#btn").attr({
"disabled" : false,
class: "submit"
});
} else {
$("#btn").attr({
"disabled" : true,
class: "submit disabled"
});
}
});
})
</script>
</html>
10、案例二：线上搜索框
10.1 描述
1. 当文本输入框获取焦点的时候，里面默认的文字清空，当失去焦点的时候，里面的文字又会回来。
2. 当里面有用户输入的内容的时候，获取焦点不能清空文字。失去焦点也不可以还原文字。
10.2 代码
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.box {
height: 40px;
width: 258px;
margin: 100px auto 0;
}
.box input {
float: left;
width: 210px;
padding-left: 6px;
height: 40px;
background: url(../../img/1.jpg);
color: #ccc;
}
.box button {
float: right;
width: 42px;
height: 40px;
background: url(../../img/2.jpg);
}
</style>
</head>
<body>
<div class="box">
<input type="text" value="请输入文字..." />
<button></button>
</div>
</body>
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
// 为 input 标签绑定 focus 聚焦事件
$("input").focus(function () {
// 1. 获取 input 标签的 value 值
var value = $("input").val();
// 2. 判断
if (value == "请输入文字...") {
// 3. 清空文字, 并同时设置样式
$("input").val("").css("color", "black");
}
});
// 为 input 标签绑定 blur 聚焦事件
$("input").blur(function () {
if ($("input").val() == "") {
$("input").val("请输入文字...").css("color", "gray");
}
});
})
</script>
</html>
方式二
<script>
$(function () {
// 为 input 标签绑定 focus 聚焦和离焦事件
$("input").focus(function () {
// 1. 获取 input 标签的 value 值
var value = $("input").val();
// 2. 判断
if (value == "请输入文字...") {
// 3. 清空文字, 并同时设置样式
$("input").val("").css("color", "black");
}
}).blur(function () {
if ($("input").val() == "") {
$("input").val("请输入文字...").css("color", "gray");
}
});
})
</script>
11. 控制标签内容
11.1 书写方式
jq对象.html(); //括号里面写参数，代表修改，不写代表获取。
jq对象.text(); //11111
① js代码
<body>
<div id="box"></div>
</body>
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
// 1. 获取 box 容器
document.getElementById("box").innerHTML = "<h1>你好, JS.</h1>";
})
</script>
</html>
② JQuery代码
<body>
<div id="box"></div>
</body>
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
// 1. 获取 box 容器
$("#box").html("<h1>你好, JQuery!</h1>");
})
</script>
11.2 清空标签内容
<body>
<a href="https://www.baidu.com" ACE="ace"/>
</body>
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
//移除掉 a 标签
$("a").remove();
//移除掉 a 标签里的 内容
$("a").empty();
$("a").html("");
})
</script>
11.3 添加标签内容
append函数
<body>
<a href="https://www.baidu.com" ACE="ace"/>
<div>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>
</body>
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
//a标签后面添加
$("a").append("<p>World</p>")
//a标签前面添加
$("a").prepend("<p>World2</p>")
//<p>World3</p> 添加到 a 标签里
$("<p>World3</p>").appendTo("a")
})
</script>
11.4 获取标签
<body>
<a href="https://www.baidu.com" ACE="ace"/>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</a>
</body>
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
//获取a标签的 父级标签
$("a").parent();
//获取a标签的 所有祖先标签
$("a").parents();
//获取a标签的 下一级所有子标签
$("a").children()
//获取a标签下所有子孙标签
$("a").find("*")
//获取a标签下所有p标签
$("a").find("p")
//获取p标签下所有兄弟标签
$("p").siblings()
//获取p标签的下一个标签
$("p").next()
//获取p标签之后所有的标签
$("p").nextAll()
//获取p标签的前一个标签
$("p").prev()
//获取p标签前面所有的标签
$("p").prevAll()
})
</script>
12. 控制class
12.1 描述
Jq对象.addClass() 添加类
Jq对象.removeClass() 删除类
Jq对象.hasClass() 判断是否有类
Jq对象.toggleClass() 切换类
获取元素的尺寸
<body>
<a href="https://www.baidu.com" ACE="ace"/>
</body>
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
// 宽 100
alert($("a").width());
// 高 100
alert($("a").height());
// 内高 Height+Padding 300
alert($("a").innerHeight());
// 外高 Height+Padding+Border 312
alert($("a").outerHeight());
})
</script>
<style>
a {
display: inline-block;
width: 100px;
height: 100px;
padding: 100px;
border: 6px solid #000;
}
</style>
选择器
<body>
<a href="https://www.baidu.com" ACE="ace"/>
<p>Hello</p>
<p class="ppp">Hello</p>
<p>Hello</p>
</a>
</body>
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
//改变p标签中的 class为ppp的标签颜色
$("p").filter(".ppp").css("color","red");
//改变所有p标签中的颜色 除了class为ppp的p标签
$("p").not(".ppp").css("color","red");
})
</script>
ajax 简写方式
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
//异步改为同步
$.ajaxSetup({
async:false
})
//(获取后端数据)get请求(后端地址,参数,请求成功调用的函数)
$.get("http://localhost:10737/jobs",{},function(res){
console.log(res);//打印后端的数据
})
})
</script>
ajax 书写方式
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
$.ajax({
async:false,//异步false
data:{},//参数
url:"http://localhost:10737/jobs",//地址
type:"GET",//请求方式
success:function(res){//请求成功调用的函数
for (let i = 0; i < res.length; i++) {
const element = res[i];
$(`<p><span>岗位：${element.jobName}</span>
<span>月薪${element.jobPay}</span></p>`).appendTo(".MyDiv");
}
}
})
console.log("Hello");
})
</script>
<body>
<div class="MyDiv"></div>
<body>
3809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
