🍓JQuery框架
简单说：就是对JS的封装，简化，提高了开发效率
目录
1. ⭐JQuery选择器
2. ⭐JQuery操作属性
3. ⭐JQuery操作元素的样式
4. ⭐JQuery操作元素内容
5. ⭐JQuery事件
6. ⭐JQuery的Ajax
一、JQuery选择器
1、- 基础选择器
前提引入JQuery框架： <script src="…/…/js/jquery-3.6.0.js"></script>
body》》》
<body>
<ul id="u1" class="u1">
<li id="li1">
<ul value="ssss">
<li></li>
</ul>
</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<ul id="u2">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</body>
script》》》
<script>
//基础选择器
console.log($("#u1"));//id
console.log($("li"));//元素
console.log($("*"));//通用
console.log($(".u1"));//类选择器
</script>
2、- 群组选择器
body》》》
<body>
<ul id="u1" class="u1">
<li id="li1">
<ul value="ssss">
<li></li>
</ul>
</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<ul id="u2">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</body>
script》》》
<script>
console.log($(".u1,#u2"));
</script>
3、- 层次选择器
body》》》
<body>
<ul id="u1" class="u1">
<li id="li1">
<ul value="ssss">
<li></li>
</ul>
</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<ul id="u2">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</body>
script》》》
<script>
//层次选择器
console.log($("#u1 li"));
console.log($("#u1>li"));
console.log($("#u1+ul"));
console.log($("#li1~li"));
</script>
4、- 属性选择器
body》》》
<body>
<ul id="u1" class="u1">
<li id="li1">
<ul value="ssss">
<li></li>
</ul>
</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<ul id="u2">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</body>
script》》》
<script>
// //属性选择器
console.log($("[id]"));
console.log($("li[id]"));
console.log($('ul[value="ssss"]'));
</script>
5、- 表单选择器
body》》》
<body>
<form id="form">
<p>
姓名： <input type="text">
</p>
<p>
姓名： <input type="text">
</p>
<p>
姓名： <input type="text">
</p>
<p>
性别：
男 <input type="radio" name="sex" checked>
女 <input type="radio" name="sex" >
</p>
</form>
</body>
script》》》
<script>
// //表单选择器
console.log($(":text"));
console.log($(":radio"));
</script>
6、- 过滤选择器
body》》》
<body>
<ul id="u1" class="u1">
<li id="li1">
<ul value="ssss">
<li></li>
</ul>
</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<ul id="u2">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</body>
script》》》
<script>
//过滤选择器
console.log($("li:odd"));
console.log($("li:even"));
</script>
二、JQuery操作属性
- 分类：
固有属性：href、type、id。自定义属性：eg:“people”…。Boolean属性：checked、selected、disabled
1、获取属性
- attr(“属性名”）：获取固有属性，自定义
- prop(“属性名”)：固有属性
<body>
<div id="div" class="div" demo="12345">
好家伙
</div>
<p>
男<input id="in1" type="radio" name="sex" checked>
女<input id="in2" type="radio" name="sex" >
</p>
<script>
//attr和prop固定属性
var d1=$("#div").attr("id");
var d2=$("#div").prop("id");
console.log(d1);
console.log(d2);
//自定义属性
console.log($("#div").attr("demo"));//12345
console.log($("#div").prop("demo"));//undefined
</script>
</body>
2、设置属性
- attr(‘属性名’,‘属性值’）：修改固有和自定义
- prop(‘属性名’,‘属性值’）：修改自定义
<body>
<div id="div" class="div" demo="12345">
好家伙
</div>
<p>
男<input id="in1" type="radio" name="sex" checked>
女<input id="in2" type="radio" name="sex" >
</p>
<script>
var d1=$("#div").attr("class","div1");//jQuery.fn.init(1) [div#div.div1]
var d2=$("#div").prop("class","div1");//jQuery.fn.init(1) [div#div.div1]
console.log(d1);
console.log(d2);
</script>
</body>
3、删除属性
- removeAttr(‘属性名’）：全能
<body>
<div id="div" class="div" demo="12345">
好家伙
</div>
<p>
男<input id="in1" type="radio" name="sex" checked>
女<input id="in2" type="radio" name="sex" >
</p>
<script>
//删除属性
console.log($("#div").removeAttr("demo"));//删除的属性jQuery.fn.init(1) [div#div.div1]
</script>
</body>
4、修改boolean属性
<body>
<div id="div" class="div" demo="12345">
好家伙
</div>
<p>
男<input id="in1" type="radio" name="sex" checked>
女<input id="in2" type="radio" name="sex" >
</p>
<script>
//修改boolean
console.log($("#in1").attr("checked",null));//checked
console.log($("#in2").prop("checked",true));//true
console.log($("#in2").prop("checked",false));
console.log($("#in1").attr("checked",'checked'))
</script>
</body>
三、JQuery操作元素的样式
- $(“选择器”).css(“属性名”，“属性值”)
<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="../../js/jquery-3.6.0.js"></script>
</head>
<body>
<div id="d1" class="div" width=100px>
<p><span>好家伙！！</span></p>
</div>
<script>
$(".div").css("background","blue");
$("#d1").css("font-size",30);
$("#d1").css({'width':'100px','height':'100px'});
</script>
</body>
</html>
结果》》
四、JQuery操作元素内容
1、创建，插入内容和获取
-
JS中操作内容的方法：- innerHTML:可以字符串可以是键值对
- innerText:只能是字符串
-
JQ中获取内容- html():相当于innerHTML
- val()：获取文本框输入的内容
- text()：相当于innerText
-
JQ中插入内容- $(“选择器”).prepend（div):将div插入到指定元素内
- JQuery对象.prependTo($("#box")):将jq插入指定id=box元素内
标签创建：$("元素内容")
测试》》》
<body>
<div id="div" style="width: 300px;height: 300px;border: orange solid 3px;">
<p>好家伙</p>
</div>
<input id="input" type="text">
<button onclick="fun1()">按钮</button>
<script>
// 获取元素内的=值
console.log($("#div").html())//<p>好家伙</p>
console.log($("#div").text())//好家伙
//头插入信息
$("#div").prepend("好家伙~~");
//插到div标签前面
$("<p>好人</p>").prependTo($("#div"));
//val()
function fun1(){
console.log($("#input").val())//获取文本框输入的内容
}
</script>
</body>
结果》》》
before/after在元素之前或之后插入
<body>
<div id="div" style="border: blanchedalmond 3px solid;">
彩虹海
</div>
<script>
//创建一个标签
var p=$('<p>星游记</p>');
var p1=$('<p>在启航~</p>');
//将p标签插到div标签之前
$("#div").before(p);
//将p1标签插到div之后
$("#div").after(p1);
</script>
</body>
2、删除和遍历
remove():删除所有内容包括本身
<body>
<ul id="ul" style="border: pink solid 4px;">
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
<script>
$("#ul").remove();
</script>
</body>
empty():清空，保留本身标签
<body>
<ul id="ul" style="border: pink solid 4px;">
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
<script>
$("#ul").empty();
</script>
</body>
- 遍历：
each():$(选择器).each(function(index,ele));
<body>
<div id="div">
<ul id="ul" style="border: pink solid 4px;">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
</ul>
<p>22222</p>
</div>
<script>
$("li").each(function(){
alert($(this).text());//JQ的方式
console.log(this.innerText)//js方式
})
</script>
</body>
五、JQuery事件
- JS中的加载事件不可重复定义，JQ可以重复定义
- 加载事件方式：
- ①$(function(){})
- ②JQuery(function(){})
- ③$(document).ready(function(){})
1、加载事件
<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="../../js/jquery-3.6.0.js">
</script>
<script>
//js
window.onload=function(){
console.log("js加载~~~~~");
}
//jq
$(function(){
console.log("jq加载中方式一~~~~");
})
jQuery(function(){
console.log("jq加载中方式二~~~~");
})
$(document).ready(function(){
console.log("jq加载中方式三~~~~");
})
</script>
</head>
2、事件绑定
- 单绑定：$(“选择器”).bind(“事件名”,function(){})
- 多绑定：$(“选择器”).bind(“事件名”,function(){}).bind()……
- 多绑定：$(“选择器”).bind({“事件名”：function()，“事件名”：function()……})
<body>
<div id="div1">
好家伙
</div>
<script>
//写法一
$("#div1").bind("click",function(){
alert('警告一次！');
}).bind("dbclick",function(){
alert("牛皮~");
}).bind("mouseout",function(){
console.log("移动出来~")
})
//写法二
$("#div1").bind({
"click":function(){alert('警告一次！')},
"dbclick":function(){alert("牛皮~")},
"mouseout":function(){console.log("移动出来~")}
})
</script>
</body>
六、JQuery的Ajax
- AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
重点:异步无刷新技术
Ajax.html文件》》》
<!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="../../js/jquery-3.6.0.js">
</script>
</head>
<body>
<input type="button" value="按钮" id="btn">
<script>
//绑定单击事件
$("#btn").bind("click",function(){
console.log("我要发送ajax请求了!!!!");
//ajax
$.ajax({
type: "http:",
url : "data.json",
data:{
"name":"abc",
"age":18
},
dataType:"json",
success : function(data){
console.log(data);
console.log(data.code,data.msg);
console.log(data.data[0].username);
},
error:function(){
console.log("失败了");
}
});
});
</script>
</body>
</html>
data.json文件》》》
{
"code" : 0 ,
"msg" : "成功",
"data" : [
{
"name":"abc",
"password":"1234",
"age":18
},
{
"username":"lisi",
"password":"4321",
"age":28
}
]
}
此处由于使用的是edge浏览器：导致跨域访问，只能使用只支持协议方案:http, data, chrome-extension, edge, https, chrome-untrusted。
结果》》》
Ajax未完……
181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
