Jquery简化javaScript对html dom操作用学习
一.Jquery学习
1.Jquery是简化javaScript对html dom操作用的，html代码用jquery来写的话，可以自动适应很多浏览器
2.到官网:https://jquery.com/download/#downloading-jquery
下载两个文件：jquery-3.6.0.js ，jquery-3.6.0.min.js
3.idea中，下载的两个文件放到webapp目录里，一般是放在创建的js目录里
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个jquery例子</title>
<!-- 这里添加上：src="js/jquery-3.6.0.js"，连接上下载的jquery原文件 -->
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
//ready():函数表示页面加载后执行的这个函数
$(document).ready(function(){
alert("使用jquery了")
})
//ready():函数的更简单写法如下：
$(function(){
alert("最简单的方式使用jquery的ready函数")
})
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom对象选择器的使用</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
</head>
<body>
<div id="one">我是id="one"的div</div> <br>
<div class="two">我是id="two"div</div> <br>
<div>没有id也没有class</div> <br>
<span >我是span</span> <br>
<input type="button" value="获取id=one的dom对象" onclick="fun1()" /> <br>
<input type="button" value="获取class=two的dom对象" onclick="fun2()" /> <br>
<input type="button" value="获取标签是div的dom对象" onclick="fun3()" /> <br>
<input type="button" value="获取所有的dom对象" onclick="fun4()" /> <br>
<input type="button" value="组合选择器获取dom对象" onclick="fun5()" /> <br>
<script type="text/javascript">
function fun1(){
//id选择器,获取jquery对象: $("#id")
var obj = $("#one");
obj.css("background","red");
}
function fun2(){
//class选择器，获取jquery对象: $(".class")
var obj = $(".two")
obj.css("background","blue");
}
function fun3(){
//标签选择器，获取jquery对象: $("标签")
var obj = $("div")
obj.css("background","black");
}
function fun4(){
//所有选择器，获取jquery对象: $("*")
var obj = $("*")
obj.css("background","orange");
}
function fun5(){
//组合选择器，获取jquery对象: $("#id,.class,标签,*"),里面根据需要组合
var obj = $("#one,.two,span")
obj.css("background","yellow");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单选择器的使用</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
</head>
<body>
<p>文本框</p>
<input type="text" value="我是type=text" /> <br>
<p>radio</p>
<input type="radio" value="man"/>男 <br>
<input type="radio" value="woman"/>女 <br>
<p>checkbox</p>
<input type="checkbox" value="bike"/>骑行 <br>
<input type="checkbox" value="football"/>足球 <br>
<input type="checkbox" value="music"/>音乐 <br>
<input type="button" value="读取文本框的value值" onclick="fun1()" /> <br>
<input type="button" value="读取radio的value值" onclick="fun2()" /> <br>
<input type="button" value="读取checkbox的value值" onclick="fun3()"/> <br>
<script type="text/javascript">
function fun1(){
/*
使用表单选择器:
type = text类型： $(":text")
type = password类型： $(":password")
type = radio类型： $(":radio")
type = checkbox类型： $(":checkbox")
type = button类型： $(":button")
type = file类型： $(":file")
type = submit类型： $(":submit")
type = reset类型： $(":reset")
*/
var obj = $(":text");
//获取value值使用的是：val()函数
console.log(obj.val()); //输出：我是type=text
}
function fun2(){
//使用表单选择器，jquery获取对象
var obj = $(":radio");
//遍历
for (var i = 0; i < obj.length; i++) {
//dom是dom对象
var dom = obj[i];
//输出：使用dom属性获取value值=man 使用dom属性获取value值=woman
console.log("使用dom属性获取value值=" + dom.value)
//jquery对象=$(dom对象)
//输出:使用jquery的函数获取value值=man 使用jquery的函数获取value值=woman
console.log("使用jquery的函数获取value值=" + $(dom).val())
}
}
function fun3(){
//使用表单选择器，jquery获取对象
var obj = $(":checkbox");
//遍历
for (var i = 0; i < obj.length; i++) {
//dom是dom对象
var dom = obj[i]
//输出：使用dom属性获取value值=bike 使用dom属性获取value值=football 使用dom属性获取value值=woman
console.log("使用dom属性获取value值=" + dom.value)
//jquery对象=$(dom对象)
//输出：使用jquery的函数获取value值=bike 使用jquery的函数获取value值=football 使用jquery的函数获取value值=music
console.log("使用jquery的函数获取value值=" + $(dom).val())
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过滤器的使用和绑定事件</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
</head>
<body>
<!--
1.过滤器是一个字符串，用于筛选dom对象，和选择器一起使用。
选择器选择了dom对象之后，再进行过滤器的筛选。
$("选择器:first") :数组中第一个dom成员
$("选择器:last") :数组中最后一个dom成员
$("选择器:eq(下标)") :选择等于指定下标的dom成员
$("选择器:gt(下标)") :选择大于某个下标的dom成员
$("选择器:lt(下标)") :选择小于某个下标的dom成员
2.事件绑定语法(所有事件动作去掉了on，javascript是onclick,jquery中是click)
第一种:$("选择器").时间名称(事件的处理函数)
其中$("选择器")可以选择0个和多个dom对象
-->
<div id="one">我是div-0</div>
<div class="two">我是div-1</div>
<div>
我是div-2
<div >我是div-3</div>
<div>我是div-4</div>
</div>
<div>我是div-5</div>
<span>我是span</span> <br> <br>
<input type="button" id="btn" value="绑定事件" /> <br>
<input type="button" id="btn1" value="获取数组中第一个dom对象" /> <br>
<input type="button" id="btn2" value="获取数组中最后一个div成员" /> <br>
<input type="button" class="btn3" value="选择下标等于3的div"/> <br>
<input type="button" id="btn4" value="选择下标小于3的div" /> <br>
<input type="button" id="btn5" value="选择下标大于3的div" />
<script type="text/javascript">
//页面加载完毕后执行，相当于onload
$(function(){
//绑定事件jquery是去掉on的，将onclick变成click
$("#btn").click(function(){
console.log("button被单击了，执行处理函数"); //输出:button被单击了，执行处理函数
})
//btn1事件:获取数组中第一个dom对象
$("#btn1").click(function(){
//获取div标签选择器中的第一个dom对象
var obj = $("div:first");
//单击按钮后，我是div-0背景颜色变成了blue
obj.css("background","blue");
})
//btn2事件:获取数组中最后一个div成员
$("#btn2").click(function(){
//获取div标签选择器中的第一个dom对象
var obj = $("div:last");
//单击按钮后，我是div-5背景颜色变成了red
obj.css("background","red");
})
//btn3事件，通过.class选择器,选择下标等于3的div
$(".btn3").click(function(){
//获取div标签选择器下标等于3的dom对象
var obj = $("div:eq(3)");
//单击按钮后，我是div-3背景颜色变成了green
obj.css("background","green");
})
//btn4事件:选择下标小于3的div
$("#btn4").click(function(){
var obj = $("div:lt(3)");
/*
单击按钮后，我是div-0,div-1,div-2,div-3,div-4背景颜色变成了orange
div-3,div-4两个是嵌套于div-2之中的，所以下标小于3，
表示就是div-0,div-1,div-2的就把div-3,div-4都给包括了
*/
obj.css("background","orange");
})
//btn5事件:选择下标大于3的div
$("#btn5").click(function(){
//单击按钮后，我是div-4,我是div-5背景颜色变成了red
$("div:gt(3)").css("background","red");
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根据对象状态作为条件,筛选dom对象</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
</head>
<body>
<!--
获取可用的文本框:$(":text:enabled")
获取不可用的文本框:$(":text:disabled")
获取选中的复选框：$(":checkbox:checked")
获取选中的下拉列表:$("选择器>option:selected") 选择器是父，option是子，所以是大于号
-->
<p>文本框</p>
<input type="text" id="text1" value="text1" /> <br>
<input type="text" id="text2" value="text2" disabled/> <br>
<input type="text" id="text3" value="text3" /> <br>
<input type="text" id="text4" value="text4" disabled/> <br>
<p>复选框</p>
<input type="checkbox" value="游泳"/>游泳 <br>
<input type="checkbox" value="健身" checked/>健身 <br>
<input type="checkbox" value="电子游戏" checked/>电子游戏 <br>
<p>下拉框</p>
<select name="lang">
<option value="java">java语言</option>
<option value="go" selected>go语言</option>
<option value="sql">sql语言</option>
<option value="python">python语言</option>
</select>
<p>功能按钮</p>
<button type="button" id="btn1">所有可用的text的value值设置为hello</button> <br>
<button type="button" id="btn2">显示被选中的复选框的值</button> <br>
<button type="button" id="btn3">显示下拉列表选中的值</button> <br>
<script type="text/javascript">
/* onload加载需要执行的代码块*/
$(function(){
//单击btn1按钮：所有可用的text的value值设置为hello
$("#btn1").click(function(){
//选择所有可用的text
var obj = $(":text:enabled");
//设置value值为hello
obj.val("hello");
})
//单击btn2按钮:显示被选中的复选框的值
$("#btn2").click(function(){
var obj = $(":checkbox:checked");
/*
经过for循环遍历的，都是dom对象，获取值只能是value
要转变成jquery对象才可以使用val()
*/
for (var i = 0; i < obj.length; i++) {
//输出:dom对象输出:健身 dom对象输出:电子游戏
console.log("dom对象输出:" + obj[i].value)
//输出:jquery对象输出:健身 jquery对象输出:电子游戏
console.log("jquery对象输出:" + $(obj[i]).val());
}
})
//单击btn3按钮:显示下拉列表选中的值
$("#btn3").click(function(){
var obj = $("select > option:selected");
console.log(obj.val()); //输出:go
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数:设置文本和获取文本</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
</head>
<body>
<p>文本框</p>
<input type="text" value="刘备" /> <br>
<input type="text" value="关羽"/> <br>
<input type="text" value="张飞"/> <br>
<p>文本数据text</p>
<div>我是第一个div</div>
<div>我是第二个div</div>
<div>我是第三个div</div>
<p>图片</p>
<img src="img/1.jpg" id="img1" > <br>
<p>功能按钮</p>
<button type="button" id="btn1">获取第一个文本框的值</button> <br>
<button type="button" id="btn2">设置所有文本框为新值</button> <br>
<button type="button" id="btn3">获取div的所有文本</button> <br>
<button type="button"id="btn4">获取第一个div的文本</button> <br>
<button type="button" id="btn5">设置div新文本值</button> <br>
<button type="button" id="btn6">读取src属性</button> <br>
<button type="button" id="btn7">设置src属性值，换一个图片</button>
<script type="text/javascript">
$(function(){
//点击btn1按钮,获取第一个文本框的值
$("#btn1").click(function(){
console.log($(":text:first").val()); //输出：刘备
})
//点击btn2按钮,设置所有文本框为新值
$("#btn2").click(function(){
$(":text").val("刘德华");
})
//点击btn3按钮,获取div的所有文本,使用text()函数
$("#btn3").click(function(){
//输出:我是第一个div我是第二个div我是第三个div
console.log($("div").text());
})
//点击btn4按钮,获取第一个div的文本,使用text()函数
$("#btn4").click(function(){
console.log($("div:first").text()); //输出：我是第一个div
})
//点击btn5按钮,设置div新文本,使用text()函数
$("#btn5").click(function(){
$("div:last").text("小妞"); //这是最后一个div内容：小妞
$("div").text("小鬼当家"); //这是设置所有div内容：小鬼当家
})
//点击btn6按钮,读取src属性，使用attr("src")函数
$("#btn6").click(function(){
console.log($("#img1").attr("src")); //输出:img/i.jpg
})
//点击btn7按钮,设置src属性值，换一个图片attr("src",要换成的图片路劲)
$("#btn7").click(function(){
$("#img1").attr("src","img/2.jpg"); //将图片img/1.jpg换成img/2.jpg
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
</head>
<body>
<!--
$("选择器").remove():删除选择的dom对象和他的子对象
$("选择器").empty():删除dom对象的子对象
$("选择器").append(子dom对象):给dom对象后面增加新的dom对象
html():获取dom数组中第一个dom对象的文本值，返回结果相当于innerHtml
html(参数)：给dom数组的所有成员设置新的文本内容，返回结果相当于innerHtml
-->
<select>
<option>老虎</option>
<option>豹</option>
<option>狮子</option>
</select>
<br>
<select>
<option>美洲</option>
<option>欧洲</option>
<option>亚洲</option>
</select>
<br>
<div id="father" style="background-color: red;">我是父div</div>
<span>我是mysql <b>数据库</b> </span> <br>
<span>我是jdbc</span> <br>
<input type="text" value="关羽" /> <br>
<input type="text" value="张飞" /> <br>
<input type="text" value="刘备" /> <br>
<input type="button" id="btn1" value="使用remove删除所有对象"/> <br>
<input type="button" id="btn2" value="使用empty删除子dom对象"/> <br>
<input type="button" id="btn3" value="增加一个子dom对象"/> <br>
<input type="button" id="btn4" value="获取文本带有html标签内容"/> <br>
<input type="button" id="btn5" value="设置值"/> <br>
<input type="button" id="btn6" value="自己写循环数组"/> <br>
<input type="button" id="btn7" value="each循环普通数组"/> <br>
<input type="button" id="btn8" value="each循环json对象"/> <br>
<input type="button" id="btn9" value="each循环dom数组"/> <br>
<script type="text/javascript">
$(function(){
//点击btn1,使用remove删除所有对象
$("#btn1").click(function(){
$("div").remove(); //输出:我是父div 没有了删除了
})
//点击btn2,使用empty删除子dom对象
$("#btn2").click(function(){
$("select").empty(); //输出：所有的select下面的option选项变成了空的
})
//点击btn3,增加一个子dom对象
$("#btn3").click(function(){
$("#father").append("大圣来了"); //输出:我是父div大圣来了
$("#father").append("") //输出：新增加了一个按钮
})
//点击btn4,获取文本带有html标签内容
$("#btn4").click(function(){
console.log($("span").html()); //输出:我是mysql 数据库
})
//点击btn5,设置值 html(参数)
$("#btn5").click(function(){
$("span").html("天下第一"); //将所有的span文本内容设置为:天下第一
})
//点击btn6,自己写循环数组
$("#btn6").click(function(){
var num = [10,20,30];
for (var i = 0; i < num.length; i++) {
doArray(i,num[i]);
}
})
function doArray(index,element){
/*
输出:index就是数组的循环变量=0 element就是数组的元素值=10
index就是数组的循环变量=1 element就是数组的元素值=20
index就是数组的循环变量=2 element就是数组的元素值=30
*/
console.log("index就是数组的循环变量=" + index,"element就是数组的元素值=" + element)
}
//点击btn7,循环普通数组each(数组,function(index,element)
$("#btn7").click(function(){
var arr=["刘德华","古天乐","张学友","郭富城"]
//each循环普通数组
$.each(arr,function(index,element){
/*
输出:
环变量index=0 数组成员=刘德华
循环变量index=1 数组成员=古天乐
循环变量index=2 数组成员=张学友
循环变量index=3 数组成员=郭富城
*/
console.log("循环变量index=" + index,"数组成员=" +element);
})
})
//点击btn8,each循环json对象
$("#btn8").click(function(){
var json = {
"姓名":"刘涛",
"性别":"女",
"年龄":36,
}
//each循环json
$.each(json,function(index,element){
/*
输出：
index是json的key=姓名 element是json的value=刘涛
index是json的key=性别 element是json的value=女
index是json的key=年龄 element是json的value=36
*/
console.log("index是json的key=" + index,"element是json的value=" + element);
})
})
//点击btn9,each循环dom数组
$("#btn9").click(function(){
//选择所有的文本输入框
var dom = $(":text");
//each循环dom数组
$.each(dom,function(index,element){
/*
输出:
index是dom数组的循环变量=0 element是dom对象=[object HTMLInputElement]
index是dom数组的循环变量=1 element是dom对象=[object HTMLInputElement]
index是dom数组的循环变量=2 element是dom对象=[object HTMLInputElement]
*/
console.log("index是dom数组的循环变量=" + index,"element是dom对象=" + element);
/*
输出:
index是dom数组的循环变量=0 element是dom对象=关羽
index是dom数组的循环变量=1 element是dom对象=张飞
index是dom数组的循环变量=2 element是dom对象=刘备
*/
console.log("index是dom数组的循环变量=" + index,"element是dom对象=" + element.value);
//上面的也可以写成下面的形式
console.log("index是dom数组的循环变量=" + index,"element是dom对象=" + $(element).val());
})
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二种绑定事件方式:on</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
</head>
<body>
<!--
事件:就是js中去掉on的部分
$("选择器").on(事件名称,function(){
事件处理函数
})
-->
<div id="mydiv" style="background-color: aquamarine;">
我是mydiv
</div>
<input type="button" id="btn" value="新建dom对象,绑定事件" />
<script type="text/javascript">
$(function(){
$("#btn").on("click",function(){
//增加新按钮
$("#mydiv").append("")
//点击新增加的按钮，弹出窗口
$("#newbtn").on("click",function(){
alert("我是新增加的按钮")
})
})
})
</script>
</body>
</html>