目录
-
Jquery的使用
在需要使用jQuery的页面引入jQuery的核心js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery的使用</title>
</head>
<body>
</body>
<!--在需要使用jQuery的页面引入jQuery的核心js文件-->
<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
</html>
-
Dom对象与jQuery包装集对象
- Dom对象
通过js方式获取得元素对象(document)
- jQuery对象
通过jQuery方法获取得元素对象，返回的是jQuery包装集
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dom对象与jQuery包装集对象</title>
</head>
<body>
<div id="mydiv">
文本
</div>
</body>
<!--引入jQuery核心js文件-->
<script src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
//Dom对象
var divDom=document.getElementById("mydiv");
console.log(divDom);//<div id="mydiv">文本</div>
//js获取不存在的元素
var spanDom=document.getElementById("myspan");
console.log(spanDom);//null
//jQuery对象
//通过id选择器获取元素对象 $("#id属性值")
var divjQuery=$("#mydiv");
console.log(divjQuery);//jQuery.fn.init [div#mydiv]
//jQuery获取不存在的元素
var spanjQuery=$("myspan");
console.log(spanjQuery);//jQuery.fn.init [prevObject: jQuery.fn.init(1)]
console.log("==========");
//Dom对象转jQuery对象
var divDomTojQuery=$(divDom);
console.log(divDomTojQuery);
//jQuery对象转Dom对象
var divjQueryToDom=divjQuery[0];
console.log(divjQueryToDom);
</script>
</html>
-
基础选择器
- id选择器 #id属性值 $("#id属性值")
- 类选择器 .class属性值 $(".class属性值")
- 元素选择器 标签名/元素名 $("标签名/元素名")
- 通用选择器 * $("*")
- 组合选择器 选择器1,选择器2,... $("选择器1,选择器2,...")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
</head>
<body>
<div id="mydiv1">
id选择器1<span>span中的内容</span>
</div>
<div id="mydiv1" class="blue">
元素选择器
</div>
<span class="blue">
样式选择器
</span>
</body>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//id选择器
var mydiv=$("#mydiv1");
console.log(mydiv);
//类选择器
var clas=$(".blue");
console.log(clas);
//元素选择器
var spans=$("span");
console.log(spans);
//通用选择器
var all=$("*");
console.log(all);
//组合选择器
var group=$("#mydiv1,div,.blue");
console.log(group);
</script>
</html>
-
层次选择器
- 后代选择器(空格)
格式：父元素 指定元素
示例：$("父元素 指定元素")
选择父元素的所有指定元素
- 子代选择器(>)
格式：父元素>指定元素
示例：$("父元素>指定元素")
选择父元素的第一代指定元素
- 相邻选择器(+)
格式：元素+指定元素
示例：$("父元素+指定元素")
选择元素的下一个指定元素
- 同辈选择器(~)
格式：元素~指定元素
示例：$("父元素~指定元素")
选择元素下面的所有指定元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style type="text/css">
.testColor{
background:green;
}
.gray{
background:gray;
}
</style>
</head>
<body>
<div id="parent">层次选择器
<div id="child" class="testColor">父选择器
<div class="gray">子选择器</div>
<img src="http://www.baidu.com/img/bd_logo1.png"
width="270" height="129"/>
<img src="http://www.baidu.com/img/bd_logo1.png"
width="270" height="129"/>
</div>
<div>
选择器2<div>选择器2的div</div>
</div>
</div>
</body>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//后代选择器(空格)
var hd=$("#parent div");
console.log(hd);
//子代选择器(>)
var zd=$("#parent>div");
console.log(zd);
//相邻选择器(+)
var xl=$("#child+div");
console.log(xl);
//同辈选择器(~)
var tb=$(".gray~img");
console.log(tb);
</script>
</html>
-
表单选择器
- 表单选择器 $(":input") 查找所有input元素
- 文本框选择器 $(":text")
- 密码框选择器 $(":password")
- 单选按钮选择器 $(":radio")
- 多选按钮选择器 $(":checkbox")
- 提交按钮选择器 $(":submit")
- 图形按钮选择器 $(":image")
- 重置按钮选择器 $(":reset")
- 文件域选择器 $(":file")
- 按钮选择器 $(":button")
-
操作元素的属性
- 属性的分类：
固有属性：元素本身就有的属性(id,name,class,style)
返回值是Boolean类型的属性：checked、selected、disabled
自定义属性：用户自己定义的属性
- 区别：
1.如果是固有属性，attr和prop方法均可操作
2.如果返回值是Boolean类型的属性
设置属性，attr返回具体的值，prop返回true
未设置属性，attr返回undefined，prop返回false
3.如果是自定义属性，attr可操作，prop不可操作
1.获取属性
attr("属性名")
prop("属性名")
2.设置属性
attr("属性名","属性值")
prop("属性名","属性值")
3.移除属性
removeAttr("属性名")
- 总结：
如果属性类型是boolean(checked,selected,disabled)，使用prop方法，否则使用attr方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>操作元素的属性</title>
</head>
<body>
<input type="checkbox" name="ch" checked="checked" id="aa" abc="aaaddd"/>aa
<input type="checkbox" name="ch" id="bb"/>bb
</body>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//获取属性
//固有属性
var name=$("#aa").attr("name");
console.log(name);//ch
var name2=$("#aa").prop("name");
console.log(name2);//ch
//返回值是Boolean类型的属性(元素设置过属性)
var ck1=$("#aa").attr("checked");
console.log(ck1);//checked
var ck2=$("#aa").prop("checked");
console.log(ck2);//true
//返回值是Boolean类型的属性(元素未设置属性)
var ck3=$("#bb").attr("checked");
console.log(ck3);//undefined
var ck4=$("#bb").prop("checked");
console.log(ck4);//false
//自定义属性
var abc1=$("#aa").attr("abc");
console.log(abc1);//aaaddd
var abc2=$("#aa").prop("abc");
console.log(abc2);//undefined
//设置属性
//固有属性
$("#aa").attr("value","1");
$("#bb").prop("value","2");
//返回值是Boolean类型的属性
$("#bb").attr("checked","checked");
$("#bb").prop("checked",false);
//自定义属性
$("#aa").attr("uname","admin");
$("#aa").prop("uage","18");
//移除属性
$("#aa").removeAttr("checked");
</script>
</html>
-
操作元素的样式
attr("class") 获取元素的class属性值
attr("class","属性值") 设置元素的样式(原本样式会被覆盖)
addClass("样式名") 添加样式(在原来的样式基础上添加样式，原本样式会保留，如果出现相同样式，则以样式中后定义的为准)
css() 添加具体的样式(添加行内样式)
css("具体样式名","样式值"); 设置单个样式
css({"具体样式名":"样式值","具体样式名":"样式值"}) 设置多个样式
removeClass("样式名") 移除样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>操作元素的样式</title>
<style type="text/css">
div{
padding: 8px;
width: 180px;
}
.blue{
background: blue;
}
.larger{
font-size: 30px;
}
.pink{
background: pink;
}
.green{
background: green;
}
</style>
</head>
<body>
<h3>css()方法设置元素样式</h3>
<div id="conBlue" class="blue larger">
天蓝色
</div>
<div id="conRed">
大红色
</div>
<div id="remove" class="blue larger">
天蓝色
</div>
</body>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//attr("class") 获取元素的class属性值
var cla=$("#conBlue").attr("class");
console.log(cla);
//attr("class","属性值") 设置元素的样式
$("#conBlue").attr("class","green");
//addClass("样式名") 添加样式
$("#conBlue").addClass("larger");
$("#conBlue").addClass("pink");
//css() 添加具体的样式(添加行内样式)
$("#conRed").css("font-size","40px");
$("#conRed").css({"font-family":"楷体","color":"red"});
//removeClass("样式名") 移除样式
$("#remove").removeClass("larger");
</script>
</html>
-
操作元素的内容
html() 获取元素的内容，包含html标签(非表单元素)
html("内容") 设置元素的内容，包含html标签(非表单元素)
text() 获取元素的纯文本内容，不识别HTML标签(非表单元素)
text("内容") 设置元素的纯文本内容，不识别HTML标签(非表单元素)
val() 获取元素的值(表单元素)
val("值") 设置元素的值(表单元素)
- 表单元素
text、password、radio、checkbox、hidden、textarea、select
- 非表单元素
div、span、h1~h6、table、tr、td、li、p等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>操作元素的内容</title>
</head>
<body>
<h3><span>html()和text()方法设置元素内容</span></h3>
<div id="html"></div>
<div id="html2"></div>
<div id="text"></div>
<div id="text2"></div>
<input type="text" id="op" name="uname" value="oop"/>
</body>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//html("内容") 设置元素的内容，包含html标签(非表单元素)
$("#html").html("<h2>上海</h2>");
$("#html2").html("上海");
//html() 获取元素的内容，包含html标签(非表单元素)
var html=$("#html").html();
var html2=$("#html2").html();
console.log(html);
console.log(html2);
//text("内容") 设置元素的纯文本内容，不识别HTML标签(非表单元素)
$("#text").text("北京");
$("#text2").text("<h2>北京</h2>");
//text() 获取元素的纯文本内容，不识别HTML标签(非表单元素)
var txt=$("#html").text();
var txt2=$("#html2").text();
console.log(txt);
console.log(txt2);
//val() 获取元素的值(表单元素)
var val=$("#op").val();
console.log(val);
//val("值") 设置元素的值(表单元素)
$("#op").val("11111");
</script>
</html>
-
创建元素和添加元素
- 创建元素
$("内容")
- 添加元素
1.前追加子元素
- 指定元素.prepend(内容) 在指定元素内部的最前面追加内容，内容可以是字符串、html元素或jQuery对象。
- $(内容).prependTo(指定元素) 把内容追加到指定元素内部的最前面，内容可以是字符串、html元素或jQuery对象。
2.后追加子元素
- 指定元素.append(内容) 在指定元素内部的最后面追加内容，内容可以是字符串、html元素或jQuery对象。
- $(内容).appendTo(指定元素) 把内容追加到指定元素内部的最后面，内容可以是字符串、html元素或jQuery对象。
3.前追加同级元素
before() 在指定元素的前面追加内容
4.后追加同级元素
after() 在指定元素的后面追加内容
- 注意：
在添加元素时，如果元素本身不存在(新建的元素)，此时会将元素追加到指定位置
如果元素存在(已有元素)，会将原来元素直接剪切设置到指定位置
-
删除元素
- remove()
删除元素及其对应的子元素，标签和内容一起删除
指定元素.remove();
- empty()
清空元素内容，保留标签
指定元素.empty();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>删除元素</title>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<h3>删除元素</h3>
<span class="green">jQuery<a>删除</a></span>
<span class="blue">JavaSE</span>
<span class="green">http协议</span>
<span class="blue">servlet</span>
</body>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//删除元素
$(".green").remove();
//清空元素
$(".blue").empty();
</script>
</html>
-
遍历元素
each()
$(selector).each(function(index,element)):遍历元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>遍历元素</title>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<h3>遍历元素</h3>
<span class="green">jQuery<a>删除</a></span>
<span class="green">JavaSE</span>
<span class="green">http协议</span>
<span class="green">servlet</span>
</body>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//获取指定元素并遍历
$(".green").each(function(index,element){
console.log(index);
console.log(element);
console.log(this);
console.log($(this));
});
</script>
</html>
-
ready加载事件
预加载事件
当页面的dom结构加载完毕后执行，类似于js中的load事件
ready事件可以写多个
- 语法：
$(document).ready(function(){
})
简写：
$(function(){
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ready加载事件</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
//获取元素
console.log($("#p1"));
})
$(function(){
console.log("ready加载事件");
})
</script>
</head>
<body>
<p id="p1">文本</p>
</body>
</html>
-
绑定事件
- bind绑定事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
语法：$(selector).bind(eventType[,eventData],handler(eventObject));
eventType:是一个字符串类型的事件类型，就是你所需要绑定的事件
[,eventData]:传递的参数，格式：{名:值,名:值}
handler(eventObject):该事件触发执行的函数
- 绑定单个事件
bind绑定
$("元素").bind("事件类型",function(){
})
直接绑定
$("元素").事件名(function(){
})
- 绑定多个事件
bind绑定
1.同时为多个事件绑定同一个函数
指定元素.bind("事件类型1 事件类型2...",function(){
});
2.为元素绑定多个事件，并设置对应的函数
指定元素.bind("事件类型",function(){
}).bind("事件类型",function(){
});
3.为元素绑定多个事件，并设置对应的函数
指定元素.bind({
"事件类型":function(){
},
"事件类型":function(){
}
});
直接绑定
指定元素.事件名(function(){
}).事件名(function(){
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绑定事件</title>
</head>
<body>
<h3>bind()简单的绑定事件</h3>
<!--style="cursor: pointer;" 设置鼠标图标-->
<div id="test" style="cursor: pointer;">点击查看名言</div>
<input id="btntest" type="button" value="点击就不可用了"/>
<hr />
<button id="btn1" type="button">按钮1</button>
<button id="btn2" type="button">按钮2</button>
<button id="btn3" type="button">按钮3</button>
<button id="btn4" type="button">按钮4</button>
</body>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
1.确定为哪些元素绑定事件
获取元素
2.绑定什么事件(事件类型)
第一个参数：事件的类型
3.相应事件触发的，执行的操作
第二个参数：函数
*/
//绑定单个元素
$("#test").bind("click",function(){
console.log("世上无难事只怕有心人");
})
//原生js绑定事件
// document.getElementById("test").onclick=function(){
// console.log("test");
// }
//直接绑定
$("#btntest").click(function(){
//禁用按钮
console.log(this);
$(this).prop("disabled",true);
})
//绑定多个元素
//1.同时为多个事件绑定同一个函数
$("#btn1").bind("click mouseout",function(){
console.log("按钮1....");
});
//2.为元素绑定多个事件，并设置对应的函数
$("#btn2").bind("click",function(){
console.log("按钮2点击....");
}).bind("mouseout",function(){
console.log("按钮2移开....");
});
//3.为元素绑定多个事件，并设置对应的函数
$("#btn3").bind({
"click":function(){
console.log("按钮3点击....");
},
"mouseout":function(){
console.log("按钮3移开....");
}
});
//直接绑定
$("#btn4").click(function(){
console.log("按钮4点击....");
}).mouseout(function(){
console.log("按钮4移开....");
});
</script>
</html>
3663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
