1. Jquery对象
jQuery 是⼀套兼容多浏览器的 javascript 脚本库.。核⼼理念是写得更少，做得更多，使⽤ jQuery 将极⼤的提⾼编写 javascript 代码的效率，帮助开发者节省了⼤量的⼯作，让写出来的代码更加优雅，更加健壮。
（1）优点：（1）提供了强⼤的功能函数
（2）解决浏览器兼容性问题
（3）实现丰富的 UI 和插件
（4）纠正错误的脚本知识
（2）安装引用：
<script src="JS/jquery-3.6.0.min.js"></script>
（3）获取Jquery对象：
$ 符号在 jQuery 中代表对 jQuery 对象的引⽤， "jQuery"是核⼼对象。通过该对象可以获取jQuery对 象，调⽤jQuery提供的⽅法等。只有jQuery对象才能调⽤jQuery提供的⽅法。
// 第⼀种⽅式（利用'jQuery'关键字）
var jqueryDiv = jQuery('#mydiv');
console.log(jqueryDiv);
//第二种方式（'$'符号）
var jqueryDiv = $('#mydiv');
console.log(jqueryDiv);
（4）Dom对象 与 Jquery包装集对象
(4.1)获取Dom对象
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");
（4.2）jsDOM象转为Jquery对象
Dom 对象转为 jQuery 对象，只需要利⽤ $() ⽅法进⾏包装即可
（4.3）Jquery对象 转 Dom对象
jq对象[索引]
jq对象.get()
注意: 1.jsDOM对象与jq对象不能互相调用其方法 2.jq的函数只能jq对象能够调用
//实例代码-获取jquery包装集对象、jsDOM对象和其之间的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入jq-->
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="box">box</div>
<script>
//DOM
var js_obj = document.getElementById("box");
console.log(js_obj);
//jq
var jq_obj = $("#box");
console.log(jq_obj.length);
//js-->jq
console.log($(js_obj));
//jq-->js
console.log(jq_obj[0]);
console.log(jq_obj.get(0));
</script>
</body>
</html>2.Jquery选择器
和使⽤ JS 操作Dom⼀样，获取⽂档中的节点对象是很频繁的⼀个操作，在jQuery中提供了简便的⽅式 供我们查找|定位元素，称为jQuery选择器，只要把选择器字符串传⼊上⾯的⽅法中就能够选 择不同的 Dom 对象并且以jQuery 包装集的形式返回。
（1）基础选择器
//实例代码-Jquery基础选择器的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入jq-->
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="box">
<div class="item1">
我是div1
<p class="red">div1的p1</p>
<p>div1的p2</p>
</div>
<div>
我是div2
<p class="red">div2的p1</p>
<p>div1的p2</p>
</div>
<div>
我是div3
<p class="red">div3的p1</p>
<p>div3的p2</p>
</div>
</div>
/*基础选择器*/
/*id选择器*/
console.log($("#box"));
//元素名称选择器
console.log($("div"));
/*类选择器*/
console.log($(".red"));
/*通配符选择器*/
console.log($("*"));
//组合选择器
console.log($("#box,.red"));
</script>
</body>
</html>（2）层次选择器
//实例代码-层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入jq-->
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="box">
<div class="item1">
我是div1
<p class="red">div1的p1</p>
<p>div1的p2</p>
</div>
<div>
我是div2
<p class="red">div2的p1</p>
<p>div1的p2</p>
</div>
<div>
我是div3
<p class="red">div3的p1</p>
<p>div3的p2</p>
</div>
</div>
<script>
//层次选择器
//后代选择器 : 所有满足条件的子元素
console.log($("body div"));
//⼦代选择器 : 满足条件的直接子元素
console.log($("body>div"));
//相邻选择器
console.log($(".item1+div"));
//同辈选择器
console.log($(".item1~div"));
</script>
</body>
</html>（3）表单选择器
.属性选择器:
[属性名]包含这个属性的被选中
[属性名="属性值"] 包含指定属性=指定值的元素被选中
.过滤选择器:
:odd 匹配下标奇数元素
:even 匹配下标为偶数元素
:eq(index) 匹配下标为index
:gt(index) 匹配下标>index
:checked 匹配被选中的
//实例代码-表单选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入jq-->
<script src="js/jquery-3.6.0.min.js"></script>
<style>
/*html中主要存在abc属性的元素就被选中*/
/*[abc]{
background: red;
}*/
/*input标签中主要存在abc属性的元素就被选中*/
input[abc]{
background: red;
}
</style>
</head>
<body>
<form id='myform' name="myform" method="post">
<input type="hidden" name="uno" value="9999" disabled="disabled" />
姓名:<input type="text" id="uname" name="uname" abc="123"/><br />
密码:<input type="password" id="upwd" name="upwd" value="123456" abc="567"/><br />
年龄:<input type="radio" name="uage" value="0" checked="checked"/>⼩屁孩
<input type="radio" name="uage" value="1"/>你懂得 <br />
爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
<input type="checkbox" name="ufav" value="爬床"/>爬床
<input type="checkbox" name="ufav" value="代码" checked="checked"/>代码<br />
来⾃:<select id="ufrom" name="ufrom" abc="123">
<option value="-1" selected="selected">请选择</option>
<option value="0">北京</option>
<option value="1">上海</option>
</select ><br />
简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
头像:<input type="file" /><br />
<input type="image" src="http://www.baidu.com/img/bd_logo1.png"
width="20" height="20"/>
<button type="submit" onclick="return checkForm();">提交</button>
<button type="reset" >重置</button>
</form>
<script>
/*表单选择器*/
console.log($(":input"));
//单选框
console.log($(":radio"));
//属性选择器
console.log($("[abc]"));
console.log($("input[abc]"));
console.log($("input[abc=123]"));
//过滤选择器
console.log($("input"));
console.log($("input:eq(3)"));
console.log($("input:gt(3)"));
console.log($("input:checked"));
</script>
</body>
</html>3.Jquery Dom操作
常⽤的从⼏个⽅⾯来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的 值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。注意：以下的操作 ⽅式只适⽤于jQuery对象。
（3.1）操作元素的属性
（3.1.1）获取属性
（3.1.2）设置属性
（3.1.3）移除属性
//实例代码-操作元素的属性（获取、设置、移除）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入jq-->
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<form action="" id="myform">
<input type="checkbox" name="ch" value="aaaa" haha="hahahahha"/> aa
<input type="checkbox" name="ch" value="bbbb" haha="hehehehhe" checked="checked"/> bb
</form>
<script>
//获取属性值
//操作布尔属性
console.log($("input[type='checkbox']:even").attr("checked")); //checked
console.log($("input[type='checkbox']:odd").attr("checked")); //undefined
console.log($("input[type='checkbox']:even").prop("checked")); //true
console.log($("input[type='checkbox']:odd").prop("checked")); //false
//固有属性
console.log($("input[type='checkbox']:even").attr("value")); //aaaa
console.log($("input[type='checkbox']:odd").attr("value")); //bbbb
console.log($("input[type='checkbox']:even").prop("value")); //aaaa
console.log($("input[type='checkbox']:odd").prop("value")); //bbbb
//自定义属性
console.log($("input[type='checkbox']:even").attr("haha")); //hahahaha
console.log($("input[type='checkbox']:odd").attr("haha")); //hahahaha
console.log($("input[type='checkbox']:even").prop("haha")); //undefined
console.log($("input[type='checkbox']:odd").prop("haha")); //undefined
//设置属性
//设置默认选中
//$("input[type='checkbox']:even").attr("checked","checked");
//$("input[type='checkbox']:odd").prop("checked",true);
//取消被选中状态
//$("input[type='checkbox']:odd").prop("checked",false);
//$("input[type='checkbox']:odd").prop("checked",null);
$("input[type='checkbox']:odd").removeAttr("checked");
$("input[type='checkbox']:odd").removeAttr("haha");
$("input[type='checkbox']:odd").removeAttr("name");
</script>
</body>
</html>（3.2）操作元素的样式
对于元素的样式，也是⼀种属性，由于样式⽤得特别多，所以对于样式除了当做属性处理外还可以有 专⻔的⽅法进⾏处理。
//实例代码-操作元素的样式几种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作元素样式</title>
<!--引入jq-->
<script src="js/jquery-3.6.0.min.js"></script>
<style type="text/css">
div{
padding: 8px;
width: 180px;
}
.blue{
background: skyblue;
}
.larger{
font-size: 30px;
}
.green {
background : green;
}
.weight{
font-weight: bolder;
}
</style>
</head>
<body>
<h3>css()⽅法设置元素样式</h3>
<div id="conBlue" class="blue larger">天蓝⾊</div>
<div id="conRed">⼤红⾊</div>
<div id="remove" class="blue larger">天蓝⾊</div>
<script>
console.log($("#conBlue").attr("class"));
//addClass
$("#conBlue").addClass("weight");
//添加指定属性,如果原标签中已经存在,覆盖原有的值列表
//$("#conBlue").attr("class","weight");
$("#conBlue").removeClass("larger");
$("#conBlue").css("font-style","italic");
</script>
</body>
</html>（3.3）操作元素的内容
对于元素还可以操作其中的内容，例如⽂本，值，甚⾄是html。
//实例代码-操作元素的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<h3 id="title"><span>html()和text()⽅法设置元素内容</span></h3>
<div id="html"></div>
<div id="text"></div>
<input type="text" name="uname" value="oop" />
<script>
//操作纯文本
$("#html").html("你好html");
$("#text").text("你好text");
//带有html标签结构
$("#html").html("<h3 style='background: salmon'>你好html</h3>");
$("#text").text("<h3 style='background: salmon'>你好text</h3>");
console.log( $("#title").html());
console.log( $("#title").text());
$("[type='text']").val("哈哈哈");
console.log( $("[type='text']").val());
</script>
</body>
</html>（3.4）创建元素
在jQuery中创建元素，直接使⽤核⼼函数$
$('<p>
this is a paragraph!!!
</p>');//创建一个p标签元素并往里面添加内容
（3.5）添加元素
//实例代码-元素的创建与添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
#box{
border : 3px saddlebrown dashed;
}
</style>
</head>
<body>
<div id="box">
<div class="item1">内容1</div>
<div class="item2">内容2</div>
</div>
<script>
//创建元素
var ele = $('<p id="p1"><span>你好span</span>你好p1</p>');
//添加元素
//$("#box").prepend(ele);
$("#box").prepend("<p>p2</p>");
ele.prependTo($("#box"));
$("#box").before("<div>box前面</div>");
</script>
</body>
</html>（3.6）删除元素
//实例代码-删除元素的两种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
#box{
border : 3px saddlebrown dashed;
}
</style>
</head>
<body>
<div id="box">
<div class="item1">内容1</div>
<div class="item2">内容2</div>
</div>
<script>
//删除元素
$("#box").empty();
$("#box").remove();
</script>
</body>
</html>（3.7）遍历元素
each()//方法
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数， index 为遍历元素的序列号，从 0 开始。 element是当前的元素，此时是dom元素
//实例代码-元素的遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
#box{
border : 3px saddlebrown dashed;
}
</style>
</head>
<body>
<div id="box">
<div class="item1">内容1</div>
<div class="item2">内容2</div>
</div>
<script>
//遍历所有div
$("div").each(function (index,element) {
console.log(index+'---->'+element);
console.log($(element));
});
</script>
</body>
</html>4.Jquery事件
4.1ready加载事件
ready()类似于 onLoad()事件 ，ready()可以写多个，按顺序执⾏
$(document).ready(function(){})等价于$(function(){})
onload与ready的区别：
window.onload : 待DOM结构,与资源全部加载完成之后触发
ready : 待DOM结构载完成之后触发
//实例代码-Jquery.ready加载事件与js.window.onload加载事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
/*js*/
window.onload = function(){
document.getElementById("btn").style.background = "red";
}
/*jq*/
//1)
$(function(){
$("#btn").css("background","green");
})
</script>
</head>
<body>
<button id="btn" type="button">按钮</button>
<img src="images/pexels-photo-5957341.jpeg" alt="">
</body>
</html>4.2bind()绑定事件
为被选元素添加⼀个或多个事件处理程序，并规定事件发⽣时运⾏的函数。
语法：
$('元素').bind("事件名称",function(){ 触发函数 })
//实例代码-bind()绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
//bind简单绑定
/*$("#btn").bind("click",function(){
alert("hahaha");
})*/
//链式绑定
$("#btn").bind("click",function(){
alert("hahaha");
}).bind("mouseover",function(){
console.log("移入");
});
$("#btn").bind({
"click":function(){
console.log("点击事件");
},
"mousemove":function(){
console.log("移动了");
}
})
})
</script>
</head>
<body>
<!--
bind 绑定事件
bind("事件名称",function(){
触发函数
})
-->
<button id="btn" type="button">按钮</button>
<img src="images/pexels-photo-5957341.jpeg" alt="">
</body>
</html>5.Jquery Ajax
jquery 调⽤ ajax ⽅法：
格式：$.ajax({});
参数：
type：请求⽅式 GET/POST
url：请求地址 url
async：是否异步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调⽤此函数
error：请求失败时调⽤此函数
//实例代码-jquery 调⽤ ajax ⽅法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn" type="button">按钮</button>
<form action="">
<input type="text" name="uname" value="zhangsan"> 用户名
<input type="password" name="upwd" value="1234"> 用户密码
</form>
<script>
$("#btn").bind("click",function(){
console.log($("form").serialize());
$.ajax({
type : "POST",
url : "js/data.json",//
/*data : {
"name" : "zhangsan",
age : 18
},*/
data :$("form").serialize() , /*表单提交*/
dataType : "JSON",
success : function (data) {
console.log(data);
console.log(data.code);
console.log(data.message);
console.log(data.result);
},
error : function () {
console.log("请求失败!!!!");
}
});
/*
//GET : 请求json⽂件,传递参数,拿到返回值
$.get('js/data.json',{name:"tom",age:100},function(data){
console.log(data);
});
//POST : 请求json⽂件,传递参数,拿到返回值
$.post('js/data.json',{name:"tom",age:100},function(data){
console.log(data);
});*/
//响应结果固定为json
/*$.getJSON('js/data.json',{name:"tom",age:100},function(data){
console.log(data); // 要求返回的数据格式是JSON格式
})*/
});
</script>
</body>
</html>
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
