JQuery
ready
<script type="text/javascript">
//ready类似于onload事件
//onload：页面资源加载完成，才会执行。
//ready:页面元素加载完成，就执行。
//比如加载一张图片，ready等图片标签加载完成后就执行，而onload要等具体图片加载出来才执行
$(document).ready(function(){
alert("hello,JQuery");
});
$(function(){
alert("hello,JQuery2");
});
window.onload(alert("hello,onload"));
</script>
基本选择器
id ； element； .class
<body>
<!-- #id,element,.class -->
<div id="dv" class="dv">hello</div>
<p>hello</p>
<script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
<script>
$(function(){
//通过$("#id名")获取对象
console.log($("#dv").html());
//通过$("元素名")获取对象
console.log($("div").html());
//通过$(".class名")获取对象
console.log($(".dv").html());
});
</script>
</body>
Dom与jQuery的转化
<body>
<div id="dv">
hello,afternooon
</div>
<script type="text/javascript" src="C:\Users\22507\OneDrive\计算机\前端\JQuery\jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//声明一个DOM对象
var dv = document.getElementById("dv");
console.log(dv);
//声明一个jQuery对象
var $dv = $("#dv");
console.log($dv);
//将DOM转化为jQuery，$(Dom对象名)
console.log($(dv));
//将jQuery转化为DOM，$jQuery名[0]
console.log($dv[0]);
</script>
</body>
层级，基本筛选器和内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.dv {
width: 300px;
height: 30px;
background-color: black;
}
p.dv {
background-color: crimson;
}
</style>
</head>
<body>
<div class="dv">
<p>p</p>
</div>
<p class="dv"></>
<div id="container">
<p>p</p>
<span>span</span>
<p>p</p>
<div>
div
<p>pp</p>
<p></p>
</div>
</div>
<p></p>
<p></p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
</ul>
<script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
//选择所有的后代元素
console.log($("div p").length);
//仅选择同级下一个元素
console.log($(".dv+p").length);
//仅选择儿子元素
console.log($("#container>p").length);
//选择所有的同级下面元素
console.log($(".dv~p").length);
//获取匹配的第一个元素
console.log($("ul li:first").html());
//获取匹配的最后一个元素
console.log($("ul li:last"));
//匹配前三个元素
console.log($('ul li:lt(3)').html());
//匹配后三个元素
console.log($('ul li:gt(2)'));
//匹配第三个元素
console.log($('ul li:eq(2)').html());
//查找所有包含此属性的
console.log($("div:has(p)"));
//查找所有不包含此属性的
console.log($("div:not(p)"));
//查找p标签不包含内容的
console.log($('p:empty').length);
//查找p标签包含特定内容的
console.log($('p:contains(pp)').length);
//查找p标签不包含内容的
console.log($('p:empty').length);
});
</script>
</body>
</html>
可见性
<body>
<!-- ：hidden，匹配所有不可见元素，如表单隐藏域，display：none等
：visible,匹配所有可见元素，包括透明 -->
<table>
<tr><td>我是td1</td></tr>
<tr><td style="display: none;">我是td2</td></tr>
</table>
<script type="text/javascript" src="C:\Users\22507\OneDrive\计算机\前端\JQuery\jquery-3.4.1.min.js"></script>
<script>
$(function(){
console.log($("td:hidden").html());
//显示我是td2
console.log($("td:visible").text());
//显示我是td1
});
</script>
</body>
表单
属性：
| ：input | :text | :password | :radio | :image |
|---|---|---|---|---|
| :submit | :file | :reset | :button | :checkbox |
表单对象属性
| ：enabled | :disabled | :checked | :selected |
|---|---|---|---|
用户条款判定
使用jQuery实现用户条款的判定
<body>
<form action="#" method="get">
<input type="checkbox" name="checkbox" value="1" onclick="isAgree()" id="agr" />同意此条款
<input type="submit" name="" value="提交" disabled="disabled">
</form>
<script type="text/javascript" src="C:\Users\22507\OneDrive\计算机\前端\JQuery\jquery-3.4.1.min.js"></script>
<script>
function isAgree(){
//prop:获取在匹配的元素集中的第一个元素的属性值。
//查找此对象是否选中复选框，选中为true，没选中为false
if($("#agr").prop("checked")){
//选中提交，使disable失效
$(":submit:first").prop("disabled",false);
}else {
//选中提交，使disable启用
$(":submit:first").prop("disabled",true);
}
}
</script>
</body>
属性
<body>
<!-- attribute,匹配包含给定属性的元素 -->
<div id="dv">
a
</div>
<div id="dv2">
b
</div>
<div id="dv3"></div>
<script type="text/javascript" src="C:\Users\22507\OneDrive\计算机\前端\JQuery\jquery-3.4.1.min.js"></script>
<script>
$(function(){
//[attribute]
console.log($("div[id]"));
//匹配有id属性的div标签,结果为3
//[attribute=dv]
console.log($("div[id=dv]"));
//匹配有id属性且属性值为dv的div标签，结果为1
//[attribute！=dv]
console.log($("div[id!=dv]"));
//匹配有id属性且属性值不为dv的div标签，结果为2
//[attribute^=dv]
console.log($("div[id^=dv]"));
//匹配有id属性且属性值为dv开头的div标签，结果为3
//[attribute$=dv]
console.log($("div[id$=dv]"));
//匹配有id属性且属性值,以dv结尾的div标签，结果为1
//[attribute*=dv]
console.log($("div[id*=dv]"));
//匹配有id属性且属性值,包含dv的div标签，结果为3
//[attr1],[attr2]...[attrN]
console.log($("div[id][name$=3]"));
//匹配有id属性且属性值为结尾为3的div标签，结果为1
});
</script>
</body>
基本效果
show：显示；hide：隐藏；toggle:前面两种效果的切换，当原本元素为显示时，执行此方法后消失；
当原本元素为消失时，执行此方法后显示。
点击按钮，实现其他元素的显示及隐藏效果，同时修改按钮的文字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 400px;
height: 400px;
border-radius: 50%;
background-color: black;
}
button {
width: 100px;
}
</style>
</head>
<body>
<!--作业： 点击按钮，实现其他元素的显示及隐藏效果，同时修改按钮的文字 -->
<div id="dv"></div>
<!-- 当点击button按钮时，触发isDisapper()函数 -->
<button onclick="isDisapper();" >消失</button>
<script type="text/javascript" src="C:\Users\22507\OneDrive\计算机\前端\JQuery\jquery-3.4.1.min.js"></script>
<script>
function isDisapper(){
//判断按钮名字
if($('button').html()=="消失"){
//如果按钮名字为消失，隐藏圆，并改变名字为出现
$("#dv").hide("slow",function(){
$("button").html("出现");
});
}else {
//如果按钮名字不为消失，显示圆，并改变名字为消失
$("#dv").show("slow",function(){
$("button").html("消失");
})
}
}
</script>
</body>
</html>
使用toggle实现
<body>
<!-- <li><a href="#">使用toggle实现题一的功能</a></li> -->
<div id="dv"></div>
<!-- 当点击button按钮时，触发isDisapper()函数 -->
<button onclick="isDisapper();" >消失</button>
<script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
<script>
function isDisapper(){
//判断按钮名字
if($('button').html()=="消失"){
//如果按钮名字为消失，隐藏圆，并改变名字为出现
$("#dv").toggle("slow",function(){
$("button").html("出现");
});
}else {
//如果按钮名字不为消失，显示圆，并改变名字为消失
$("#dv").toggle("slow",function(){
$("button").html("消失");
})
}
}
</script>
</body>
添加，移除class类
jQuery代码
为匹配的元素加上 一个或多个'selected' 类
jQuery 代码:
$("p").addClass("selected");添加一个
$("p").addClass("selected1 selected2");添加多个
从匹配的元素中删除 'selected' 类
$("p").removeClass("selected");
删除匹配元素的所有类
jQuery 代码:
$("p").removeClass();
点击图片，实现元素的旋转（css的动画效果），再次点击图片实现元素停止旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.rotate1 {
width: 400px;
height: 400px;
border-radius: 50%;
animation-play-state: paused;/*规定动画停止*/
}
/*规定动画的属性，绑定的动画名称rot，动画持续时间3s，动画速度匀速，动画次数无限*/
.rotate2 {
animation: rot 3s linear infinite ;
}
/*绑定的动画，使用变化*/
@keyframes rot
{ /*开始时的状态*/
form{transform: rotate(0deg) ;
}
/*结束时的状态*/
to {
transform: rotate(360deg) ;
}
}
</style>
</head>
<body>
<img id="img2" src="../09c6fe7b1326861c2caea0850709c6bb.jpg" class="rotate1">
<script type="text/javascript" src="C:\Users\22507\OneDrive\计算机\前端\JQuery\jquery-3.4.1.min.js"></script>
<script>
//点击图片时触发此事件
$("#img2").click(function(){
//如果animation-play-state值为paused,添加class属性，否则点击时移除class属性
if ($("#img2").css("animation-play-state")=="paused") {
$("img").addClass("rotate2");
}else {
$("img").removeClass("rotate2");
}
})
</script>
</body>
</html>
attr和prop
attr:设置或返回被选元素的属性值。
prop:获取在匹配的元素集中的第一个元素的属性值。
html代码/文本/值
<body>
<p><span>hello,evening</span></p>
<input type="text" name="" value="123456">
<script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
<script>
$(function(){
//获取p标签中的文本及span标签
alert($("p").html());
//获取p标签中的纯文本
alert($("p").text());
//获取input的value值123456
alert($("input").val());
//通过括号设值可修改对于的内容
$("p").html("<a>hello</a>");
alert($("p").html());
$("p").text("hello");
alert($("p").text());
$("input").val("123");
alert($("input").val());
});
</script>
</body>
网友评论