自学jquery的回顾（1/1）
jquery概述
1、什么是jquery？
是javascript的常用框架，方便了调取和定位DOM对象以及一些其他的功能。
2、jquery对象的创建和命名：
jquery是以$定位DOM对象，一般以$为开头来命名的，以便于区分变量和jquery对象。
3、window.οnlοad=function(){}在jquery中怎么实现？
$(function () {
alert("hello");
})
jquery选择器
1、那么jquery是如何去定位DOM对象的？
语法：$(选择器)
2、选择器有哪些？分类？
三种基本选择器：
（1）定位标签中的id属性
$("#id名")
（2）定位标签中的class属性
$(".class名")
（3）定位标签的类别
$("标签类别名")
注：使用*的是所有DOM对象都选中
$("*")
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种基本选择器</title>
<style type="text/css">
div{
background-color: aqua;
font-size: 50px;
}
</style>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript" >
function f() {
var div1=$("#div1");
div1.css("background","red");
}
$(function () {
$("#but2").get(0).onclick=function () {
$(".name").css("background","blue");
}
$("#but3")[0].onclick=function () {
$("div").css("background","yellow");
}
$("#but4")[0].onclick=function () {
$("*").css("background","black");
}
})
</script>
</head>
<body>
<div id="div1" class="name">我是第一标签</div>
<br/>
<div id="div2" class="name">我是第二标签</div>
<br/>
<div id="div3" >我是第三标签</div>
<br/>
<input type="button" value="选择id的div变色" id="but1" onclick="f()" />
<input type="button" value="选择class的div变色" id="but2"/>
<input type="button" value="选择标签的div变色" id="but3"/>
<input type="button" value="所有标签变色" id="but4"/>
</body>
</html>
表单选择器：
根据表单中的标签样式来定位DOM对象
$(":type样式名")
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript">
function f() {
$(function () {
var $text=$(":text");
for(var i=0;i<$text.length;i++){
var obj=$text[i].value;
document.getElementById(i).innerText=obj;
}
})
}
</script>
</head>
<body>
<form>
<input type="text" value="文本框1"/>
<input type="text" value="文本框2"/>
<input type="button" value="获取每个文本框的值" onclick="f()"/>
</form>
<div id="0"></div>
<div id="1"></div>
</body>
</html>
DOM对象和jquery对象
1、jquery对象本质上是定位DOM对象的，那么定位到的多个DOM对象被当做元素存入数组中。
所以说jquery不能用DOM的属性和方法，DOM对象也不能用jquery的方法和属性，各自只能用各自的。
2、DOM对象转jquery对象就是采用$()的方式
var text=document.getElementById("text");
var $text=$(text);
3、jquery对象转DOM对象就是采用数组取下标的方式（两种方式）
var text1=$("text")[2];
var text2=$("text").get(2);
jquery过滤器
1、什么是jquery过滤器？
过滤器是在选择器的基础上二次定位的作用。过滤器必须存在于选择器的后面。
2、基本的过滤器：
（1）选择器中第一个DOM对象
$("选择器名:first")
（2）选择器中最后一个DOM对象
$("选择器名:last")
（3）选择器中指定某一个DOM对象
$("选择器名:eq(数组下标)")
（4）选择器中数组下标后面的DOM对象
$("选择器名:gt(数组下标)")
（5）选择器中数组下标前面的DOM对象
$("选择器名:lt(数组下标)")
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本过滤器</title>
<style type="text/css">
div{
background-color: aquamarine;
}
</style>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript">
function f() {
var first=$("div:first");
first.css("background-color","red");
}
function f1() {
var last=$("div:last");
last.css("background-color","red");
}function f2() {
var eq=$("div:eq(2)");
eq.css("background-color","red");
}function f3() {
var gt=$("div:gt(2)");
gt.css("background-color","blue");
}function f4() {
var lt=$("div:lt(2)");
lt.css("background-color","blue");
}
</script>
</head>
<body>
<div>第一个div</div><br/>
<div>第二个div</div><br/>
<div>第三个div</div><br/>
<div>第四个div</div><br/>
<div>第五个div</div><br/>
<input type="button" value="选择所有div中的第一个" onclick="f()">
<input type="button" value="选择所有div中的最后一个" onclick="f1()">
<input type="button" value="选择所有div中的第3个div" onclick="f2()">
<input type="button" value="选择所有div中的第3个后面的div" onclick="f3()">
<input type="button" value="选择所有div中的第3个前面的div" onclick="f4()">
</body>
</html>
注：过滤器还可以通过表单中的属性和父级标签和兄弟标签来过滤（例如$(“select>option:selected”））
jquery常用函数
1、 jquery对象常用函数：
（1）val():获取数组中第一个dom对象的value值
val(value):设置数组中所有的dom对象的value值
（2）text():获取文本值
text(text):设置标签中的文本
（3）attr(属性名):获取属性的属性值
attr(属性名,属性值):设置属性的属性值
注：prop也是获取和设置属性的，只不过标签固有属性用prop。
（4）remove():删除所有的dom对象
（5）empty():清空子dom对象
（6）append():增加一个dom对象
（7）html():相当于innerHTML，获取最原始的文本数据，有参数就是设置
html(html/text):设置标签中的原始文本数据
（8）each():遍历jquery对象，取得DOM对象
（9）css():设置css样式的
2、jquery常用的静态方法：
（1）each():遍历数组或者json。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function () {
$(":button").click(function () {
var arr=[1,23,4];
$.each(arr,function (i,e) {
alert(i+":"+e);
})
})
})
</script>
</body>
<input type="button" value="循环遍历数组">
</html>
绑定事件
1、jquery绑定事件的两种方式：
（1）$(选择器).事件名(function (){})
（2）$(选择器).on(事件名,function (){})
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定事件</title>
<style type="text/css">
div{
background-color: aqua;
}
</style>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function () {
$(":button").click(function () {
$("div").append("<input type=\"button\" id=\"but2\" value=\"新增的button\">")
$("#but2").on("click",function () {
alert("我是新增的button");
})
})
})
</script>
</head>
<body>
<div></div>
<input type="button" value="新增一个button" id="but2">
</body>
</html>
107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
