Jquery的使用
<!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>
</head>
<body>
<!-- 在需要使用jQuery的页面引入jQuery的核心js文件 -->
<script src="js/jquery-3.4.1.js" type="text/javascript">
</script>
</body>
</html>
Dom对象与Jquery包装集对象
<!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>
</head>
<body>
<div id="mydiv">这是一个div</div>
<!-- Dom对象:通过js方式获取的元素对象 -->
<!-- jQuery对象:通过jquery方法获取的元素对象,返回的是jQuery包装集 -->
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8">
</script>
<script type="text/javascript">
let divDom = document.getElementById("mydiv");
console.log(divDom);
let divDoms = document.getElementsByTagName("div");
console.log(divDoms);
/*Jquery对象*/
//通过id选择获取元素对象 $("#id属性值")
let divJquery = $("#mydiv");
console.log(divJquery);
//js获取不存在的元素
let spanDom = document.getElementsByTagName("span");
console.log(spanDom);
//jquery获取不存在的元素
let spanJquery = $("#span");
console.log(spanJquery);
//Dom对象转jQuery对象
let divDomtoJquery = $(divDom);
console.log(divDomtoJquery);
//jQuery对象转Dom对象
//先获取包装集对象中指定下标的元素,将jQuery对象转换成dom对象
let divJqueryToDom = divJquery[0];
console.log(divJqueryToDom);
</script>
</body>
</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>
</head>
<body>
<div id="mydiv">id选择器
<span>span中的内容</span>
</div>
<div id="mydiv1" class="blue">元素选择器</div>
<!-- id选择器 #id属性值 $("#id属性值")
类选择器 .class属性值 $(".class属性值")
元素选择器 标签名/元素名 $("标签名/元素名")
通用选择器 * $("*")
组合选择器 选择器1,选择器2,. $("选择器1,选择器2,...")
-->
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
//id选择器
let idDiv = $("#mydiv");
console.log(idDiv);
//类选择器
let classDiv = $(".blue");
console.log(classDiv);
//元素选择器
let spans = $("span");
console.log(spans);
//通用选择器
let all = $("*")
console.log(all);
//组合选择器
let group = $("#mydiv,.blue,div,span")
console.log(group);
</script>
</body>
</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>
<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>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
<script>
//后代选择器
let hd = $("#parent div")
console.log(hd);
//子代选择器
let zd = $("#parent>div")
console.log(zd)
//相邻选择器
let xl = $("#child+div")
console.log(xl)
//同辈选择器
let tb = $(".gray~img")
console.log(tb)
</script>
</body>
</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>
</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" /><br />
密码:<input type="password" id="upwd" name="upwd" value="123456" /><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="代码">代码<br />
来自:<select id="ufrom" name="ufrom">
<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>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<script>
/*
文本框选择器 :text
密码框选择器 :password
单选按钮选择器 :radio
复选按钮选择器 :checkbox
提交按钮选择器 :submit
图像域选择器 :image
重置按钮选择器 :reset
按钮选择器 :button
文件域选择器 :file
*/
//表单选择器
let inputs = $(":input");
console.log(inputs);
//元素选择器
let inputs2 = $("input");
console.log(inputs2);
let radio = $("radio");
console.log(radio);
let checkBox = $("checkbox");
console.log(checkBox)
</script>
</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>
</head>
<body>
<!--
操作元素的属性
1.获取属性
attr("属性名")
prop("属性名")
2.设置属性
3.移除属性
-->
<input type="checkbox" name="ch" checked="checked" id="aa" /> aa
<input type="checkbox" name="ch" id="bb" /> bb
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
//获取属性
//固有属性
let name = $("#aa").attr("name");
console.log(name);
let name2 = $("#aa").prop("name")
console.log(name2);
//返回值是Boolean的属性(元素设置了属性)
let ck1 = $("#aa").attr("checked");
let ck2 = $("#aa").prop("checked");
console.log(ck1)
console.log(ck2)
//返回值是Boolean的属性(元素未设置属性)
let ck3 = $("#bb").attr("checked");
let ck4 = $("#bb").prop("checked");
console.log(ck3)
console.log(ck4)
//自定义属性
let abc1 = $("#aa").attr("abc");
let abc2 = $("#aa").prop("abc");
console.log(abc1);
console.log(abc2);
//设置属性
//固有属性
$("#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("uname");
</script>
</body>
</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>
<style type="text/css">
div {
padding: 8px;
width: 180px;
}
.blue {
background: blue;
}
.larger {
font-size: 30px;
}
.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>
<!--
操作元素的样式
attr("class") 获取元素的样式名
attr("class","样式名") 设置元素的样式
addClass("样式名") 添加样式
css() 添加具体的样式
removeClass("样式名") 移除样式
-->
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
//attr("class") 获取元素的样式名
let cla = $("#conBlue").attr("class");
console.log(cla);
//attr("class","样式名") 设置元素的样式
$("#conBlue").attr("class", "green");
//addClass("样式名")
$("#conRed").addClass("red larger");
let redcla = $("#conRed").attr("class");
console.log(redcla);
//添加具体的样式
$("#conRed").css("font-size", "40px");
$("#conRed").css({ "font-family": "楷体", "color": "black" });
//removeClass("样式名") 移除样式
$("#remove").removeClass("larger");
</script>
</body>
</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>
</head>
<body>
<h3><span>html()和text()方法设置元素内容</span></h3>
<h1>北京</h1>
<div id="html"></div>
<div id="html2"></div>
<div id="text">北京</div>
<div id="text2"></div>
<input type="text" name="uname" id="oop" value="oop" />
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
//html("内容") 设置元素的内容,包含html标签(非表单元素)
$("#html").html("<h2>上海</h2>") //包含html标签
$("#html2").html("香港") //纯文本
$("#text").text("<h2>澳门</h2>"); //不识别html标签
$("#text2").text("台湾"); //纯文本
let val = $("#oop").val();
console.log(val);
$("#oop").val("今天天气")
</script>
</body>
</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>
<style>
div {
margin: 10px 0px;
}
span {
color: white;
padding: 8px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<h3>prepend()方法前追加内容</h3>
<h3>prependTo()方法前追加内容</h3>
<h3>append()方法后追加内容</h3>
<h3>appendTo()方法后追加内容</h3>
<span class="red">爱豆</span>
<span class="blue">偶像</span>
<div class="green">
<span>影帝</span>
</div>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
let p = "<p>这是一个段落</p>"
console.log(p)
console.log($(p))
//添加元素
//创建元素
let span = "<span>狼</span>";
//得到指定元素,并在指定元素最前面追加内容
$(".green").prepend(span);
let span2 = "<span>狗</span>"
$(span2).prependTo($(".green"))
let span3 = "<span>猫</span>";
//得到指定元素,并在指定元素最前面追加内容
$(".green").append(span3);
let span4 = "<span>虎</span>"
$(span4).appendTo($(".green"))
//将已存在内容追加到指定元素
$(".green").append($(".red"))
//同级追加
let sp1 = "<span class='pink'>演员</span>"
let sp2 = "<span class='yellow'>歌手</span>"
$(".blue").before(sp1);
$(".blue").before(sp2);
</script>
</body>
</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>
<style>
span {
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<span class="green">绿色1</span>
<span class="blue">蓝色1</span>
<span class="green">绿色2</span>
<span class="blue">蓝色2</span>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
//删除元素
// $(".green").remove();
//清空元素
// $(".blue").empty();
//遍历元素
//获取指定元素 并遍历
$(".green").each(function (index, element) {
console.log(index);
console.log(element);
});
</script>
</body>
</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.4.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
// console.log($("#p1"));
$(function () {
console.log("ready加载事件...");
});
$(document).ready(function () {
//获取元素
console.log($("#p1"));
});
</script>
</head>
<body>
<p id="p1">文本</p>
</body>
</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>
</head>
<body>
<h3>bind绑定事件</h3>
<div id="test" style="cursor: pointer">点击查看名言</div>
<input id="btntest" type="button" value="点击就不可用了" />
<hr>
<button type="button" id="btn1">按钮1</button>
<button type="button" id="btn2">按钮2</button>
<button type="button" id="btn3">按钮3</button>
<button type="button" id="btn4">按钮4</button>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
//绑定单个事件
$("#test").bind("click", function () {
console.log("123");
});
//绑定
$("#btntest").click(function () {
//禁用按钮
console.log(this);
$(this).prop("disabled", true);
});
//绑定多个事件
//1.同时为多个事件绑定同一个函数
$("#btn1").bind("click mouseout", function () {
console.log("按钮111111");
});
//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>
</body>
</html>